ブログをMovableTypeからWordPressに移行しGridlyを導入した

By dachio, 2012年8月31日

このサイトもいろいろスタイルを変えながらまったり続けてそろそろ10年、ここらで根底からリニューアルしてみようと、遅ればせながら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/

というプラグインをインストール、左バーの「ツール」からインポート機能を使って、さきほどのテキストファイルを読み込む。これでOK。

これで、デフォルトのテーマを使ってブログを再開することはできる。

MTとの違いは、設定やスタイルシートを変更したとき、いちいちサイトを更新する手間がいらないこと。画像ファイルを複数一括アップできたり、ドラッグ&ドロップでアップできたりなど、細かいところに手が届く感じだ。

 

【Gridlyの導入】

結構手間取ったのがここ。

せっかくWP導入したんだから多彩なテーマを試してみたい。もともと写真メインのブログだが、記事も長めに書くことがあって、完全なフォトブログにはしたくない。いろいろ探して、Pinterest風なデザインのGridlyにした。

http://www.eleventhemes.com/gridly-theme/

で、確かに導入は簡単だがいろいろ戸惑うこともあった。症状別に解決策だけ書きます。

 

不具合1)「Gridlyで画像が表示されない」

wordpressには新たに「アイキャッチ画像」というサムネールがあって、記事ごとにこの画像を生成しないと、Gridlyの画面には表示されない。
記事編集画面の右下にあるのが「アイキャッチ画像」。画像をアップロードする作業の中で、「アイキャッチ画像として使用」をクリックすると生成される。

といって過去の記事についてひとつひとつサムネール画像を生成するのはとてもじゃないけどやってられない。

そこでAutoPostThumbnailというプラグインを導入。

http://wordpress.org/extend/plugins/auto-post-thumbnail/

すると設定メニューの一番下にAutoPostThumbnailという欄が現れ、それをクリックして、「Generate Thumbnails」を押すと、自動ですべてアイキャッチ画像を生成してくれる。

当初、画像のファイル名に空白がまじっていると、うまくアイキャッチ画像が表示されない不具合があった。こうしたファイルが何点かあったので、それは手作業でファイル名から空白をのぞいていった。

 

・不具合2)「Gridlyで画像が2列しか表示されない。3列に表示させたい」

海外のQ&Aを見て解決。Gridlyのスタイルシートにはdarkとlightの2種類あるが、

このサイトではdarkを使っているので、プラグインをインストールしたフォルダの、

/wp-content/themes/gridly/css

ここにある「dark.css」の、先頭から4行目、

#wrap { width:98%; margin-left:3%;}

この3%を2%に変えればOK。

そのほかスタイルシートの変更は試行錯誤。

変えるのは、

スタイルシートは dark.cssまたはlight.css

記事は、ヘッダー部分は header.php、

トップページは index.php、

個別の記事は single.php

まずバックアップをとっておいて、あとは「この行の数字をこう変えたらこうなった」と、実践で覚えていった方がいいと思う。

 

コメントを残す

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