●データ移行
このサイトには、以前MovableTypeで作成したコンテンツが含まれている。
MTからエクスポートしたデータはWordPressでも簡単にインポートできるが、やはり問題が発生。エントリー中にある画像のパスが通らない。手動で再設定は避けたい、、、
そこで以下の方法をとった。ちょっと強引だが。
エクスポートしたファイルをエディタで開くと、画像へのパスは
http://www.hoge.com/assets_c/2008/12/fuga.html
http://www.hoge.com/assets_c/2008/12/fuga-thumb-360×480.jpg
などとなっている。
まず、「http://www.hoge.com/」部分を移行先のドメインやパスに全置換する。
次に、このデータをWordPressへインポート。
さらに、移行前のMTサイトの「assets_c」ディレクトリ以下にあるHTMLファイルに記述された画像ファイルのパスをすべて置換する。
http://www.hoge.com/assets_c/2008/12/20/fuga.jpg
のようになっているので、「http://www.hoge.com/」部分を移行先のドメインやパスに全置換する。こちらも手動で置換していくと大変なので置換用ツールを使う。私はDreamWeaverで「assets_c」フォルダを指定し、フォルダ内HTMLファイルを一括置換した。
最後に、移行先WordPressサイトの上記で置換したパスの通る場所へアップロードする。
これでとりあえずは正常に表示されるはず。
旧サイトへのアクセスは、新サイトのトップへリダイレクトするように設定（.htaccessとかで）。
●ThickBoxの設定
上記の通り、MTから移行したエントリーにある画像へのリンクは画像ファイルへの直リンクになっておらず、画像だけを表示するHTMLファイルへのリンクになっている。
これではLightBoxでは表示できない。そこでHTMLの表示も可能なThickBoxを使用することにしたのだが、過去のエントリーにはThickBoxを適用させるための「class=”thickbox”」が記述されていない。
手動で追記するのも何なので、jQueryで設定してみた。
thickbox.jsを開き、プログラムの先頭にでも下記のスクリプトを挿入。
href属性のリンクがPNG・JPEG・GIFの画像ファイルの場合や、MTが吐き出した、URLに「assets_c」が含まれている場合に「class=”thickbox”」を付加するようにした。しかし、それだけではHTMLファイルがうまく表示されない。
通常、ThickBoxでHTMLを表示させる場合、
href=”http://www.hoge2.com/assets_c/2008/12/fuga.html?width=1024&height=768″
のように、ウィンドウサイズを指定する。MTが吐き出したリンクは「?」以下のパラメータが無いためうまく表示されないのだ。そこで、href属性のURLに「assets_c」が含まれている場合はパラメータを付加することにした。こちらはどうやら「?」だけを末尾に付け加えてやればうまく表示されるようだ。もしそれでトラブルがあれば「?width=1024&height=768」のようにサイズ指定すれば良いだろう。
[codesyntax lang=”javascript” lines=”no” title=”thickbox.js”]
$(function(){
$("div.entry-content a[href$='.jpg']").addClass("thickbox");
$("div.entry-content a[href$='.gif']").addClass("thickbox");
$("div.entry-content a[href$='.png']").addClass("thickbox");
$("div.entry-content a[href$='.jpeg']").addClass("thickbox");
$("div.entry-content a[href$='.JPG']").addClass("thickbox");
$("div.entry-content a[href$='.JPEG']").addClass("thickbox");
$("div.entry-content a[href$='.GIF']").addClass("thickbox");
$("div.entry-content a[href$='.PNG']").addClass("thickbox");
$("div.entry-content a[href*='assets_c']").click(function(){
$(this).attr("href",$(this).attr("href")+"?");
});
$(“div.entry-content a[href*='assets_c']“).addClass(“thickbox”);
});
[/codesyntax]
クラス名「div.entry-content」部分は使用しているテーマのCSS設定により異なります。
ウィンドウサイズのデフォルト値を変更
[codesyntax lang=”javascript” lines=”no” title=”thickbox.js”]
TB_WIDTH = (params['width']*1) + 30 || 1074; TB_HEIGHT = (params['height']*1) + 40 || 828;
[/codesyntax]
↓動作サンプル
●ちなみに
このサイトの環境では、WordPress付属のjQueryを使用しているため、「$( )」の代わりに「jQuery( )」を使用している。このサイトのthickbox.jsをコピペの方は注意。