自己サイト統合テクニカルメモ #works

  • スポンサーリンク

  • スポンサーリンク

概要

内容によって書き分けていた3つのブログを、2012年8月ぐらいからマルチサイトで運用していたのですが([WordPress]シングルサイトをマルチサイトの小サイトに引越し – capture works and music)、マルチサイトのデメリット(下記)も色々感じるようになったため、今度は3ブログを1ブログに統合しようというまったくもって4年前にやったことはなんだったんだという突っ込みは大歓迎ですが、とにかく、統合したい欲求が大きくなったので決行中。3ブログ中2ブログの移行を恐らく終えたので(完璧とはいえないところもあるにはあるのですが)、とりあえず技術的メモを残しておこうという趣旨です。
◯旧サイト→新サイトには301リダイレクト設定していますので従来通り旧サイトにアクセスしても新サイトがきちんと表示されます。

マルチサイトのデメリット
  • 3つともテーマが異なりメンテナンスが大変(テーマ統一しても下記理由がまだあります)
  • 名刺等に記載するURLに迷う
  • マルチサイトで機能的に(特にプラグイン等)制約をうけることがある
  • ネットに乗っている情報がシングルサイトに比べ圧倒的に少ない

移行後のサイトトップページのスクリーンショット

対象サイト

移行元サイト:
日記:http://diary.nakamurayuji.com/
web&ict記事:http://curation.nakamurayuji.com/
移行先サイト:
Webデザイナー、ICTエンジニア、即興演奏家、中村勇治のポータルサイト:http://www.nakamurayuji.com/
・日記→http://www.nakamurayuji.com/archives/category/diary
・web&ict記事→http://www.nakamurayuji.com/archives/category/works

移行手順概要

・移行先でWordPressインストールなどの初期設定
・テーマ選定、インストール、子テーマ作成など
  Decodeを利用しました
・移行元サイトのファイル、データベースバックアップ
・WordPressエクスポータによりエクスポートを行い、中味の編集(主にURL変更)→(A)
・画像はftpによりダウンロード
・WordPressインポータにより(A)をインポート ※ここで失敗することが多くて苦労した。
・アップロード画像の選定→(B)
 →WordPress側でメディアアップロードした際に自動的に生成されるサイズバリエーションがあるため、サイズバリエーションを手動で削除
  ※一番苦労したところ。プラグイン等で良い機能のものがあるかもしれません。
  ※手動で削除したため、もしかすると必要画像を削除したり、サイズバリエーションを削除しそこなう可能性高い
   →必要画像削除した場合はバックアップは取得しているのでリンク切れチェックにより検出されます。従いここでは完璧を追求しません。
   →サイズバリエーションの削除しそこないについては使用されない画像として検出される(未使用画像検出プラグインあります)のでやはり完璧追求不要。
・(B)画像をメディアライブラリにアップロード
  ※ftpで該当フォルダ(upload)にアップしても、メディアライブラリに反映されないので手動でメディアにアップロードするかプラグイン等の利用が必要。
・日記サイトの記事は原則カテゴリ「diary」配下に、web&ictサイトの記事は原則カテゴリ「works」配下に。
・固定ページ見直し、移行先のカテゴリー一部見直し
・移行元サイトに導入していたプラグインのうち必要なものを反映、設定
・移行元サイトに導入していたCSSのうち必要なものを反映(特にWebフォントを部分的に適用している箇所など)
・移行元→移行先へ301リダイレクト設定
 ※カテゴリーの見直しを行ったため新サイトで削除したカテゴリー等があり、それらは一つ一つ旧サイトでリダイレクト設定しました。
 ※リダイレクト設定は旧サイトのheader部分に以下のようなコードを書いて実施。

//リダイレクト設定例※curation→www

<?php
header( "HTTP/1.1 301 Moved Permanently" ); 
$this_url = ("http://" . $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"]);
if (is_front_page()) {	//トップページの場合
	$transfer_url = str_replace("http://curation.nakamurayuji.com/" , "http://www.nakamurayuji.com/archives/category/works/" , $this_url );
} else if (is_category()) {	//カテゴリの場合 //カテゴリ毎細かく設定しました
//中略
	$transfer_url = str_replace("http://curation.nakamurayuji.com/archives/category/" , "http://www.nakamurayuji.com/archives/category/works/" , $this_url );
} else if (is_page("email")) {	//特定の固定ページ
	$transfer_url = "http://www.nakamurayuji.com/contact";
//中略
} else {	//標準的なリダイレクト //投稿や固定ページに適用される設定
	$transfer_url = str_replace("http://curation" , "http://www" , $this_url );
}
header( "Location: " . $transfer_url ); 
exit;
?>

・アイキャッチチェック及び、プラグイン(Auto Post Thumbnail)による再作成
・元サイトでの画像サイズバリエーションに合致するよう新サイトでもバリエーション追加
・リンク切れチェック(プラグイン「Broken Link Checker」利用)
 ※サイト内部でのリンク切れは殆どが画像URLが存在しないため(サイズバリエーションが元サイトと微妙に異なるためが多かった)

移行先サイトデザイン、機能等の特徴(オリジナルテーマからの変更点)

・子テーマ作成しオリジナルテーマからカスタマイズ実施。
・Webフォント(モリサワTypeSquareのWebフォントを利用)を利用
・twitter card対応、facebook OGP対応:header.php内に直接記述
・グローバルメニューをトップ用、diary用、works用で切り替え ※カテゴリ判定とメニュー切り替え
・「関連記事」「新着記事」「人気記事」をプラグインで実現、レイアウトは独自CSS適用
 ※Related Posts by Zemanta、newpost catch、WordPress Popular Posts
・フッタの「最近の投稿」、「人気記事」をトップ用、diary用、works用で切り替え ※カテゴリ判定とウィジェット切り替え
・Instagramの一覧表示をプラグイン「Instagram Feed」で対応→http://www.nakamurayuji.com/archives/11756
・広告配置、広告はパソコン用とスマホ用で切り替え
 ※切り替えはphpによるエージェント判定による
 ※エージェント判定は下記の関数を利用

//モバイル、タブレット、パソコン判定クラス
class UserAgent{
	private $ua;
	private $device;
	public function set(){
		$this->ua = mb_strtolower($_SERVER['HTTP_USER_AGENT']);
		if(strpos($this->ua,'iphone') !== false){
			$this->device = 'mobile';
		}elseif(strpos($this->ua,'ipod') !== false){
			$this->device = 'mobile';
		}elseif((strpos($this->ua,'android') !== false) && (strpos($this->ua, 'mobile') !== false)){
			$this->device = 'mobile';
		}elseif((strpos($this->ua,'windows') !== false) && (strpos($this->ua, 'phone') !== false)){
			$this->device = 'mobile';
		}elseif((strpos($this->ua,'firefox') !== false) && (strpos($this->ua, 'mobile') !== false)){
			$this->device = 'mobile';
		}elseif(strpos($this->ua,'blackberry') !== false){
			$this->device = 'mobile';
		}elseif(strpos($this->ua,'ipad') !== false){
			$this->device = 'tablet';
		}elseif((strpos($this->ua,'windows') !== false) && (strpos($this->ua, 'touch') !== false && (strpos($this->ua, 'tablet pc') == false))){
			$this->device = 'tablet';
		}elseif((strpos($this->ua,'android') !== false) && (strpos($this->ua, 'mobile') === false)){
			$this->device = 'tablet';
		}elseif((strpos($this->ua,'firefox') !== false) && (strpos($this->ua, 'tablet') !== false)){
			$this->device = 'tablet';
		}elseif((strpos($this->ua,'kindle') !== false) || (strpos($this->ua, 'silk') !== false)){
			$this->device = 'tablet';
		}elseif((strpos($this->ua,'playbook') !== false)){
			$this->device = 'tablet';
		}else{
			$this->device = 'others';
		}
		return $this->device;
	}
}

・jQueryにて、トップに戻るボタン設置
・CSSにて正方形画像を円で切り抜いたように表示(トップページ)
・レスポンシブ対応
・ウインドウサイズ小さくなった際に、グローバルメニューをアコーディオンメニュー化
・twitter投稿をcronプログラムにて実施、twitter投稿有無(重複投稿を避けるため)を判別するためのカスタムフィールド設置、twitter投稿時「diary」「works」いずれに属する記事かによって投稿文を一部カスタマイズ ※facebookはiftttを利用

今後の課題

  • アイキャッチの移行が一部うまくいってないようなので再確認、必要に応じて設定
  • 音楽サイト(http://capture.nakamurayuji.com/)の統合
  • 長い長いURLを短縮したい。せめて、「archives/category」をうまく省略したい(URL書き換えだけでなく、リダイレクトにもおそらく工夫が)
  • 音楽サイト移行した段階でトップページコンテンツ、デザイン見直す
  • 旧サイトも当面コンテンツ自体は残した上でのリダイレクトによる運営ですが、一定期間運営したら旧サイトのファイル、データベースを削除、リダイレクトに必要な最低限な設定のみ残す
  • 上記課題を解決するための時間確保

以上です。


  • スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA