WordPressでサイトをリニューアル

リニューアルはカスタマイズ専用のブランクテーマで

数年前にWordPressで作成したコムニカのサイト。どちらかというとPCからのアクセスを前提にして作ってありましたが、モバイルからのアクセスの方が多いので、作り変えることにしました。制作当時まだまだWordPress初心者でテンプレートの中身もカオス状態……、だったのでテンプレートからすっぱりと作り直すことに。

テンプレートをゼロから作るのは大変なので、ブランクテーマを使い、そこから色々付け加えたり、カスタマイズを行いました。
ブランクテーマはカスタマイズを前提にして作られたテーマで、そのまま使うには地味〜で無味乾燥な感じのテーマです。必要最低限の骨格と、CSS、HTMLが組み込まれているので、既存のテーマをカスタマイズするよりも手間がなく、ゼロから作るよりも効率よく制作ができます。

かつてはWordPressに組み込まれていたTwentysevenをカスタマイズしていた頃もありますが、テンプレートの中身や仕組みを調べるだけでも時間がかかりました。綺麗にデザインされたテンプレートはそのまま使うには便利ですが、構造（ソースコード）が複雑でカスタマイズするには不向きす。その点、ブランクテーマはシンプルで、構造が把握しやすく効率が良いのです。
何よりも、WordPressの達人レベルでなくとも、ほぼ思い通りのサイトを作り上げられるのが良いところです。

今回ベースに使ったのは、レスポンシブデザイン対応のUnderscoresというテーマです。

• Underscores|A Starter Theme For WordPress

リニューアルは別ディレクトリにWPをインストールして

さて、リニューアル作業は別ディレクトリにWPを新しくインストールして行うことにしました。完成したら、新しい方のindex.phpをルートディレクトリに移動させて切り替えればよいので、サイトを停止せずにリニューアルが行えます。
問題は、現状サイトの内容をどう新しいサイトに移すか、です。データベースをエクスポートして、新しい方に移行するのが妥当なところですが、正直なところあまりデータベースを触りたくありません。
テンプレートも新しく作り直すので、コンテンツさえインポートできれば問題はないのでWordPressのインポート機能を使うことにしました。

参考にしたのはこちらのサイト

• WordPressインポートに躓いたら基本に戻ろう

コンテンツのエクスポートとインポートは、あっさりと出来たのですが、問題がひとつ。画像ファイルです。

サイト移行の可能性がある場合は、画像のファイル名は半角で

インポートした後に、メディアライブラリを確認すると、多くの画像がインポートされていません。何度か、インポートをし直したのですが、一向に反映されませんし、FTPでuploadフォルダを見ても画像はありません。

うーん、なぜ？

よくよく確認すると、インポートされない画像は、日本語でファイル名がついています。しかも、結構な量があるので困ってしまいました。

さて、どうしたものか。

FTPでダイレクトにアップロードして、Media from FTPというプラグインを使い、メディアライブラリに登録することにしました。（FTPでアップロードしたファイルはそのままではメディアライブラリに反映されません）

ところが、そのプラグインも日本語ファイル名のものはエラーになって反映されないという結果に(>_<) 最終的には、全てのファイル名を手作業でリネームし、通常作業と同じくコツコツと記事のなかに画像を入れることとなりました。 サイトを移行する可能性がないなら、日本語で画像のファイル名をつけても問題はありませんが、将来、サイトを移行する可能性がある場合はファイル名を半角でつけた方がベターです。 データベースで移行作業を行えば、問題は起こらなかったのかもしれませんが……。

今回も WordPress + Bootstrap3 で制作

コンテンツとメディアファイルがインポートできたら、Bootstrap3を組み込んで作業スタート！

今回のリニューアルで、一番の「事件」はメディアにファイルがインポートされないことでしたが、それ以外は問題なく制作が進みました。途中、WordPressが更新され、ダッシュボード上からCSS以外のテンプレートファイルの書き換えができなくなったのは面倒でしたが……。
けれど、FTPとテキストエディタを使ってテンプレートを書き換えていくのは、正しい方法ではないかと思います。直接いじって（特にfunction.php)、サイトが真っ白になってから焦らなくてもすみます。慣れてくれば、面倒に思えた作業も普通に感じてきます。

新しいサイトに切り替え、SSLの設定も確認。
まだ、未確認の部分もあるので、お目汚し的な表示があるかもしれませんが、より見やすいサイトを目指していきたいと思います。