WordPress3.2＋Twenty Eleven 1.2をカスタマイズする

先日、当ブログのデザインをリニューアルしましたが、同時にWordPressのバージョンアップ＋サーバー移転（ドメイン移管）を行っています。これはネタにせねばという事で、リニューアルの過程を記事にしておきます。

情報としては特に新しい物はありませんので、備忘録的な記事となっていますが、Twenty Elevenのカスタマイズや使っているプラグイン等もまとめておきます。

難航したデータベースの移行作業

MySQL4で使用していたWordPressME2.0のデータをエクスポートして、MySQL5のWordPress3.2にインポートする作業が難航しました。自分でできるかもしれないと思い、挑戦してみたのですが、文字化けが発生したり、インポートする際にエラーが出たりした為に断念しました。

その後、Twitterでパシブログのトップページがなぜ全文表示になっているのかという話から、バージョンが古すぎて抜粋表示が上手くできないという事をツイートし、その流れで@___shiro_さんからWordPressの専門家？の@wokamotoさんを紹介して頂き、エクスポート部分の作業をお願いする事になりました。

メールで何度かやり取りする中で、自分でやらなくて良かったと感じるほど複雑な作業が必要だった事が分かりました。バージョンアップはこまめにやっておかないと大変になる場合がありますが、ここまで間が空いてしまうとそんなレベルの話ではないようです。しかもMEですからね。MEなんてもうその存在を知らない人も多いですよね。

エイブルネットからエックスサーバー（ムームードメイン）に移転したのですが、サーバー移転に伴い、ドメイン移管が必要になり、この作業も数年ぶりだったので、少し戸惑いました。これについては、エイブルネットからエックスサーバーへの引越しをご覧ください。

デザインについて

WordPressME2.0からWordPress3.2へのバージョンアップという事で、旧デザインをそのまま使うのは難しいと思っていました。結果的には意外にもそのまま使用する事が出来たのですが、将来的なことも考えて良い機会だったのでテーマを変更する事にしました。

他の管理サイトと同様にSEOテンプレートの賢威を使おうかとも思ったのですが、それなりにブランディングに力を入れてやってきたブログなので、オリジナリティを出す為にデフォルトテーマのTwenty Elevenを修正して使うことにしました。

一からテーマ作りに挑戦しても良かったのですが、そこまでの知識とデザイン力がありませんし、時間も無かったので修正する形で進めました。Twenty Elevenは、HTML5という事で戸惑うかと思いましたが、何の問題も発生しませんでした。

　

Twenty Eleven 1.2のカスタマイズ

※classicにしろtwentytenにしろ、WordPressのデフォルトテーマを使う場合は、必ずテーマファイルが格納されているフォルダ名を変更してアップロードしてください。そうしておかないと、WordPressの自動アップグレードなどを行った際に、テーマファイルが上書きされてしまいます。

デザイン

ヘッダー部分を全削除して、完全に書き換えています。ヘッダー部分のソースはheader.phpに直接記述しています。画像は@Cubismerさんに作って頂きました。今回のヘッダーデザインについて関連する記事を書かれています。タイトル文字へのこだわり。

ヘッダーに作成した大外枠のdivに背景設定で1枚の画像を読み込み、そこにロゴや運営者情報用のアンカーテキストを記述し、CSSで位置調整と非表示設定（画像置き換え）をしています。非表示設定はvisibility: hidden;を使用しています。

これはSEOの為の画像置き換えという事ではなく、こうした方が修正が楽になるので、私が良く使用する方法です。以前はSEOの観点から使用していた画像置き換えですが、今はそういった使い方はしていません。

検索窓については、<?php get_search_form(); ?>をdivで囲ってそのdivに対してCSSを設定して位置調整しています。検索フォームはid="searchform"でCSS設定がされていましたので、この部分を全削除しています。

メインコンテンツ部分はあまり変更していませんが、余白を少なめにして、サイドバーとコンテンツ部分の横幅を広げています。また、グローバルナビゲーションの下にパンくずリストを設置しました。h2、h3、h4は旧デザインのをそのまま使い回しています。

Twenty Elevenはsingle.phpにサイドバーが無いタイプなので、サイドバーを追加しています。サイドバーのh3は背景設定で画像を読み込んでいます。

SEO

SEOの部分はほとんどをプラグインで行っていますが、h1とh2については、index.phpやsingle.php、category.php、archive.phpで変更しています。

h1はパンくずリスト部分に設置していて、h2はページタイトルです。あとは、index.phpの続きを読むにページタイトルが入るようにしています。これはあまり意味が無いとは思いますが、なんとなくです。

他にもチョコチョコ修正した気がしますが、記録をとっていなかったので憶えていません。記憶に残っていないという事は大した事はやっていないと思います。

最後に使用しているプラグインをご紹介します。

今使っているプラグイン

SEO関連

• All in One SEO Pack：総合的なSEO対策
• YARPP：関連記事の自動表示
• WP Page Numbers：ページネーションの設置
• PS Auto Sitemap：サイトマップページの自動生成
• Google XML Sitemaps：sitemap.xmlの自動生成
• WP Social Bookmarking Light：ソーシャルブックマークボタンの設置
• Nice Trailingslashit：URLのスラッシュの有り無しリダイレクト

SEOとは関係の無いプラグイン

• AddQuicktag：投稿画面にボタンを追加
• Akismet：コメントスパム対策
• AVH Extended Categories：カテゴリーの整理
• Category Order：カテゴリーの並べ替え(フッター用)
• Contact Form 7：問合せフォームの設置
• Evermore：トップページの記事を抜粋表示に変更
• Exec-PHP：投稿画面でPHPを使えるようにする
• Ktai Style：携帯電話対応
• Lightbox 2：画像の拡大（ズーム）表示
• oEmbed Tweet：Twitterのツイートを引用表示
• Revision Control：自動保存機能をコントロール
• RSS Footer：RSSに投稿者情報を表示（盗作対策）
• WordTwit：記事投稿時に更新情報を自動ツイート
• WP No Category Base：カテゴリーページからcategoryを削除
• WPtouch：スマートフォン対応
• WP Multibyte Patch：日本語対応

Special Thanks

@wokamotoさん
WordPressのプラグインを作ったりしているWPのスペシャリストです。dogmap.jpやメモとかを書いている方です。WordPressの事ならなんでも知っているような印象を持っています。

WordPressME2.0からWordPress3.2へバージョンアップするために、旧MySQLデータをエクスポートしてくれた方です。この方がいなければ今回のパワーアップはありませんでした。

お話した当日に作業に入って頂き、翌日にインポートしたりブログに反映させる為の作業書を頂き、その後の相談にも乗って頂きました。ME2.0を3.2にする為には、思った以上に作業が多かったのですが、説明がとてもわかりやすく、レスポンスも超速だったので、とても助かりました。本当に自分でやらなくて良かったと思いました。感謝の言葉しかありません。

@___shiro_さん
色々とゴイスーな人です。かちびと.netを書いています。今回、自分ではWordPressのバージョンアップが出来なかったので、放置する事を決定した事をツイートしたら、それを見たシロさんが@wokamotoさんを紹介してくれました。

シロさんにはお世話になりっぱなしで、弾丸が7発充填されているので、早く恩返しできる日を楽しみにしています。

@Cubismerさん
Webutubutu!を書いています。今回のヘッダーデザインをして頂きました。とにかく迅速丁寧で気遣いが出来る人なので、色々とわがままを聞いてもらいました。お話した3日後に、デザイン案を10個も提出して頂きました。

修正案を出してからの修正作業もとにかく早くて的確で、そのおかげでドメイン移管作業に早く移る事が出来ました。ちなみに私のTwitterアイコンを作ってくれたのもCubismerさんです。愛称は地藏さんです。

その他、@hlwmeさん、@ishikawa_3winさんなどに、Twitterで助けて頂きました。ありがとうございます。

そして、最後にTwitter様、あなたがいなければ今の私はいません。超感謝しています。今後ともよろしくお願いします。

関連記事

• Twitterで見かけたSEOの疑問・質問に物凄い勢いで答えてみる
• ロリポップのGoogleウェブマスターツールにおけるsitemap.xmlのエラー問題
• Akismetの使い方とAPIキー
• 有料ディレクトリサービスのまとめ

タグ

HTML5、WordPress、ブログ、リニューアル