ブログをMovableTypeからWordPressに移行しGridlyを導入した
このサイトもいろいろスタイルを変えながらまったり続けてそろそろ１０年、ここらで根底からリニューアルしてみようと、遅ればせながらWordpressを導入した。
MovableTypeには長年の愛着もあるけど記事更新の待ち時間や画像ファイルアップロードの面倒くささを何とかしなければと思っていたこともあり、というわけで。
【wordpressインストール】
さて、さくらのレンタルサーバーへのwordpressインストールについては、
http://support.sakura.ad.jp/manual/rs/web/cms_wp.html
これを見ればよい。以上。いやほんとに全く迷うことなく、「これでいいの？」というくらい簡単にインストールが終わってしまう。MTに比べて簡単なこと。
細かい設定はほとんどデフォルトのままだが、「パーマリンク設定」は、SEOを考えて、「 /%postname%.html 」とした。.htaccess も、wordpressディレクトリから該当のディレクトリにコピーする。
大事なのは[index.php]の書き換え。当初はwordpressディレクトリにあったこのファイルを、これまでMTでindex.htmlがあった場所にコピーするわけだが、
このとき、ファイルの末尾を
/** Loads the WordPress Environment and Template */
require(‘./wordpress/wp-blog-header.php’);
としておくこと。
【MovableTypeからWordpressへの記事移行】
まずMTで「記事のエクスポート」を使って、全記事をテキストファイルにしてはき出す。
WordPressでは、Movable Type and TypePad Importer
http://wordpress.org/extend/plugins/movabletype-importer/
というプラグインをインストール、左バーの「ツール」からインポート機能を使って、さきほどのテキストファイルを読み込む。これでＯＫ。
これで、デフォルトのテーマを使ってブログを再開することはできる。
MTとの違いは、設定やスタイルシートを変更したとき、いちいちサイトを更新する手間がいらないこと。画像ファイルを複数一括アップできたり、ドラッグ＆ドロップでアップできたりなど、細かいところに手が届く感じだ。
【Gridlyの導入】
結構手間取ったのがここ。
せっかくWP導入したんだから多彩なテーマを試してみたい。もともと写真メインのブログだが、記事も長めに書くことがあって、完全なフォトブログにはしたくない。いろいろ探して、Pinterest風なデザインのGridlyにした。
http://www.eleventhemes.com/gridly-theme/
で、確かに導入は簡単だがいろいろ戸惑うこともあった。症状別に解決策だけ書きます。
不具合１）「Gridlyで画像が表示されない」
wordpressには新たに「アイキャッチ画像」というサムネールがあって、記事ごとにこの画像を生成しないと、Gridlyの画面には表示されない。
記事編集画面の右下にあるのが「アイキャッチ画像」。画像をアップロードする作業の中で、「アイキャッチ画像として使用」をクリックすると生成される。
といって過去の記事についてひとつひとつサムネール画像を生成するのはとてもじゃないけどやってられない。
そこでAutoPostThumbnailというプラグインを導入。
http://wordpress.org/extend/plugins/auto-post-thumbnail/
すると設定メニューの一番下にAutoPostThumbnailという欄が現れ、それをクリックして、「Generate Thumbnails」を押すと、自動ですべてアイキャッチ画像を生成してくれる。
当初、画像のファイル名に空白がまじっていると、うまくアイキャッチ画像が表示されない不具合があった。こうしたファイルが何点かあったので、それは手作業でファイル名から空白をのぞいていった。
・不具合２）「Gridlyで画像が２列しか表示されない。３列に表示させたい」
海外のＱ＆Ａを見て解決。Gridlyのスタイルシートにはdarkとlightの２種類あるが、
このサイトではdarkを使っているので、プラグインをインストールしたフォルダの、
/wp-content/themes/gridly/css
ここにある「dark.css」の、先頭から４行目、
#wrap { width:98%; margin-left:3%;}
この3%を2%に変えればＯＫ。
そのほかスタイルシートの変更は試行錯誤。
変えるのは、
スタイルシートは dark.cssまたはlight.css
記事は、ヘッダー部分は header.php、
トップページは index.php、
個別の記事は single.php
まずバックアップをとっておいて、あとは「この行の数字をこう変えたらこうなった」と、実践で覚えていった方がいいと思う。