Web サイトをリニューアルしました
Web サイトを大幅にリニューアルしました。行った作業は主に以下の 3 つです。
一部のページは新しいデザインに合うように書き直しています。軽微なデザインバグの修正などはまだ残ってますが、大まかな作業は一通り終えたのでこの辺りで公開したいと思います。何か気付いたことがあればコメントください。以下はリニューアルに関する覚え書きです。
新しいテーマ (Colorway Plus) を採用
これまでは WordPress 2.9 までのデフォルトテーマである WordPress Default テーマを色々とカスタマイズして運用していました。
実際はテーマだけでなく利用しているプラグインや WordPress 自体もカスタマイズしています。また昔は Web サイトのトップページを (日記と呼ばれていた) ブログにすることに何となく抵抗感があったので、次のような静的な HTML ファイルを作成してホームページにしていました。
でもこれだと HTML ファイルとブログの両方を管理することになり、意外と手間でした。またトップページとしてブログが使われることもあり分かりにくかったと思います。機能的にもデザイン的にもそろそろ時代遅れかなぁと思い始めていたところ、偶然知った Colorway テーマを気に入ったのが、今回のリニューアルのきっかけです。
ただ残念なことに Colorway テーマはそのままでは実用に耐えなかったので、Colorway のチャイルドテーマを作成することにしました。WordPress テンプレートの一部修正ぐらいは経験ありますが、独立した (チャイルド) テーマを作るのは初めてです。作業としては Web デザイナーや Web デベロッパーの範疇になるんでしょうか。
Colorway Plus テーマ
Colorway (Lite) テーマのチャイルドテーマ。様々な箇所を変更していった結果、結局ほとんどのファイルが修正されています。変更箇所の中で大きなものは次の通り。
- テキストを任意のフォント画像に変換する cufon を無効化 (日本語フォントに対応していないため)
- ドロップダウンメニュー (Smooth Navigational Menu) が IE 6/7 で動作しない問題を修正
- 吹き出し表示スクリプトを tipsy から jquery.balloon.js に変更
- ヘッダーおよび記事の下にソーシャルボタン (はてなブックマーク, Google +1, Tweet, Facebook Like) を追加
- カラーテーマの変更やデザインバグの修正、国際化対応など
Colorway のフロントページを Web サイトのトップページとすることで、別々に管理していた HTML ファイルとブログが統一され、どのページがトップページなのか分かりやすくなったと思います。
今後の ToDo としてはレスポンシブ Web デザインでしょうか。せめてリキッドレイアウトには対応させたいです。
qTranslate でサイトを多言語化
※ ここに書かれていた内容は別ページへ移されました。
利用するプラグインの見直し
基本的には以前紹介したまとめ：おすすめの WordPress プラグインとほぼ同じ構成です。
引き続き利用しているプラグイン
- Akismet – スパム対策
- WP Multibyte Patch – 日本語周りの問題修正
- Auto ThickBox Plus – サムネイル画像をポップアップ表示
- SyntaxHighlighter Evolved – コードをハイライト表示
- Contact Form 7 – コンタクトフォーム
- WP-PostViews – 人気記事
- Yet Another Related Posts Plugin (YARPP) – 関連記事
- Google Analyticator – Google アナリティクス
- FD Feedburner Plugin – フィードを FeedBurner に
- Broken Link Checker – リンク切れチェック
- Revision Control – リビジョンの無制限保存を抑制
- single shortcode – 特定の内容を抜粋では非表示に
- AbsoluteRSS – フィードで画像が表示されない問題を解消
YARPP プラグインと MyISAM/InnoDB
関連記事を表示する YARPP プラグインを利用するにはデータベースが MyISAM である必要があります。さくらのレンタルサーバーではデフォルトのストレージエンジンがいつの間にか InnoDB になっていたので ALTER TABLE wp_post ENGINE = MyISAM; を実行して wp_post テーブルを MyISAM に変換する必要があります。
※ MyISAM と InnoDB の混成は推奨されないみたいなので、すべてのテーブルを MyISAM に変換しようと思ったのですが ALTER TABLE 文はワイルドカードを受け付けない仕様みたいです。以下のクエリを実行してすべてのテーブルを変換する ALTER TABLE 文を生成しました。
SELECT CONCAT('ALTER TABLE ', table_schema, '.', table_name, ' ENGINE = MyISAM;') FROM information_schema.tables WHERE ENGINE = 'InnoDB';
新たにインストールしたプラグイン
- WP Super Cache – 静的キャッシュ
- WP-DBManager – データベースのバックアップと最適化
- Google XML Sitemaps for qTranslate – XML サイトマップ生成
- All in One SEO Pack – 検索エンジン最適化
※ Colorway Plus テーマではある程度 SEO 対策済みのため All in One SEO Pack プラグインで設定しているのはメタ情報 (description, keywords) のみ。このメタ情報についても Colorway Plus 側で対応する予定なので、このプラグインはそのうち削除します。
削除したプラグイン
- Breadcrumb NavXT – パンくずリスト。考えてみたらパンくずリストが必要なほどの階層はなかった。
- DB Cache Reloaded Fix – データベースクエリのキャッシュ。WP Super Cache で置き換え。
- WP Social Bookmarking Light – ソーシャルボタン。Colorway Plus テーマ側で対応。
- WP-PageNavi – ページナビゲーション。Colorway テーマ側で標準対応のため。
- Google XML Sitemaps (with Multisite support) – XML サイトマップ生成。Google XML Sitemaps for qTranslate で置き換え。
- Menubar – メニューバー。Colorway テーマはカスタムメニュー対応のため。
※ Facebook Like ボタンは IE7 以前では JavaScript エラーが発生します。また Google +1 ボタンも IE7 以前はサポートされていません。そのため WP Social Bookmarking Light プラグインの wp-social-bookmarking-light.php に次のようなコードを記述していました。
global $is_IE;
if ($is_IE && (strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE 7')
|| strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE 6')
|| strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE 5'))) {
return; // for Facebook Like and Google +1
}
移行作業のために一時的に利用したプラグイン
- Redirection – URL のリダイレクト
- Move Comments – ページ間でコメント移動
- Edit Parent Comment ID – コメントの親子関係 (返信元/返信) を編集
- WordPress Importer – WordPress ブログデータのインポート
- Movable Type and TypePad Importer – Movable Type/TypePad ブログデータのインポート