Category Archives: Wordpress

Movable Type3.78からWordPressへの移行:サイト構造の検討

Movable Type時代のサイトマップ

私のメインブログ「モカの腹」は今から9年前の2005年にMovable Type3で作って立ち上げました。
その頃はブログのシステムと言えばMovable Typeが圧倒的に優勢だったんです。

その後Movable Typeは4、5、6と進化を続けたのですが、私はどうしてもデータベースの反映でつまづいてバージョンアップ出来ず、ver3.78の状態で止まっていました。

サポートが切れたMovable Typeを使い続けるのはかなりやばいです。
そこで、今や主流になったWordPressに乗り換えることを決心しました。
今やらないと未来永劫出来ないと思ったのです。

Movable Type時代のサイト全体の構成は上のような感じでした。
「harablog」がブログ(モカの腹)のディレクトリで、その下の「image」に写真などのファイルが、「archive」に個別ページのファイルが入っています。

Movable Typeのシステムは「cgi」の下に入れていました。

「旅行」や「モカの目」などはhtmlの静的ページですね。

WordPressではどうするか

腹だけWordPress

これをWordPressではどうするか。
まずはブログのディレクトリだけをWordPressにすることを考えました。

この場合「harablog」の下にWordPressのシステムを入れます。
その他の「旅行」や「モカの目」などはhtmlの静的ページのままですね。

WordPressでのサイトマップ

でもせっかくなので、サイト全体をWordPressで動かしてしまおうと思いました。
しかしこれがその後の七転八倒の原因になるとは全然気がつかなかったのでした。

さあ、WordPressとの格闘の毎日が始まりますo(^0^)o

これだけで0から構築出来ました

今回私は全くWordPressのことを知らない状態から始めました。
その時に使ったのがこのテキストです。
結局これだけで出来てしまいました。

テキスト以外は徹底的にネットで検索し、Chromeの「要素の検証」機能を使ってデザインを進めて行きました。

MAMPでMacのローカルにWordPress環境を構築

MAMP

まずはMacの中にWordPressの環境を作りました。
ローカル環境で徹底的に練習や下準備をしてから実際のサーバーにそれを持ってゆく予定です。

MAMPはMAMP & MAMP PRO(別ウインドー)からダウンロードし、ダブルクリックして起動します。

複数のMacで共有できるように

MAMP初期画面1
WordPressのシステムはDropboxの中に

WordPressのシステムファイルはDropboxに入れ、自宅、職場、ノートパソコンで共有出来るようにしました。

まずDropboxの中にwordpress用のフォルダーを作ります。
WordPressのシステムは公式サイトからダウンロードし、そのフォルダーに展開します。

MAMP画面を「環境設定」 → 「Apache」 → 「参照」の順にクリックしそこを指定。

MAMPのデータベースもDropboxに入れちゃいましょう。

/Applications/MAMP/db/mysql

をDropboxに移動し、「mysql」フォルダーのシンボリックリンクを元の場所に戻します。

(こちらを参考にして下さい:[ Mac ]環境設定をDropboxで共有して、複数のパソコンで同じ環境を実現しましょう

データベースの作成

MAMP初期画面2

「スタートページを開く」をクリックします。

2_mamp_0

「phpMyAdmin」 → 「データベース」とクリックし任意のデータベース名を入力します。
ここでは「wordpress」にしました。
文字コードには「utf8_general_ci」を指定します。

「作成」ボタンを押してデータベースの作成は完了。

WordPressインストール

インストール初期画面

さあ、いよいよWordPressの設定です。
http://localhost:8888/
にアクセスすると、インストールの開始画面になります。

「さあ、始めましょう!」

フレンドリーじゃないですか。

設定ファイルがないよ

しかしいきなり「wp-config.phpファイルが見つかりません」と怒られました。
でも心配ご無用。
ウィザードに従えばこの設定ファイルを自動的に作ってくれます。

便利〜o(^0^)o

データベース情報の入力

データベース情報の入力

データベースの情報をこのように入力します。

データベース設定完了

データベースの設定完了!

ブログ情報の入力

ブログ情報入力

続いてブログの情報を入れます。
書いてあるようにここの情報はいつでも変更出来るのでご心配ありません。

「WordPressをインストール」をクリック。

完成!

あっと言う間にインストールは終わってしまいました。
確かに簡単です。

コンソール

「ログイン」をクリックし、先ほどのログイン情報を入れるとこのようなダッシュボードの画面になります。
さあ、ここからがお楽しみですよ。

Movable Type3.78からWordPressへの取込:パーマリンクの設定

パーマリンクMovable Type

さあ、ローカルのWordPress環境が整いました。
しかし本当に「Movable Type3.78」などというとんでもなく古いシステムから「WordPress」への引っ越しが出来るのでしょうか。

まず最初に決めたのがパーマリンク(固定リンク)の設定です。

Movable Typeでは「設定 → 公開」で調べたところ、アーカイブURLが

http://mocamoca.com/harablog/archives/

個別エントリーアーカイブのアーカイブ・マッピングが

yyyy/mm/entry_basename.html

に設定されていました。
実際のパーマリンクは

http://mocamoca.com/harablog/archives/2014/03/post_3107.html

といった感じです。

WordPress側の設定

パーマリンクWordPress

WordPressに移行した後もこれと同じになってもらわないと、検索された時などにエラーになってしまいます。
そのため、WordPress側は「設定 → パーマリンク設定」を開き、カスタム構造で

/harablog/archives/%year%/%monthnum%/%postname%.html

にしてみました。

(参照元:固定リンクを変えずにスムーズにMovableTypeからWordPressに移行するまでの作業ログ | IDEA*IDEA)(別ウインドー)

Movable Type3.78からWordPressへの取込:記事の書き出しと取込

Movable Type書き出し

お次はいよいよMovable Typeの記事をWordPressに取り込む作業です。

基本的にはMovable Typeの「エントリーの書き出し」でテキストファイルを書き出し、それをWordPress側で取り込むことになります。

しかし、Movable Type4以降であればそのまま取り込めるようなのですが、Movable Type3の場合は一工夫が必要でした。

書き出してみると

まず試しにMovable Type3.78とMovable Type4で書き出しを行ってみました。

Movable Type3.78
AUTHOR: mocamoca
TITLE: 広告ブロック「Adblock Plus」から星新一「むだな時間」を思う
STATUS: Draft
ALLOW COMMENTS: 0
CONVERT BREAKS: __default__
ALLOW PINGS: 0
PRIMARY CATEGORY: インターネット
CATEGORY: インターネット

DATE: 02/18/2014 12:59:59 PM
-----
BODY:
以下本文
Movable Type4
AUTHOR: moca
TITLE: POPFileの高速化(Norton Anti Virusとの併用時など)
BASENAME: popfilenorton_anti_virus
STATUS: Publish
ALLOW COMMENTS: 1
CONVERT BREAKS: richtext
ALLOW PINGS: 1
PRIMARY CATEGORY: アプリケーション
CATEGORY: アプリケーション
DATE: 03/12/2008 10:05:24 AM
TAGS: NortonAntiVirus,POPFile
-----
BODY:
以下本文

Movable Type4にある

  • BASENAME
  • TAGS

がMovable Type3.78側ではないではないですか!

書き出しスクリプトの修正

そこで

mtシステム/lib/MT/ImportExport.pm

の530行目からの書き出し設定に以下の3行を追加しました。

AUTHOR: <$MTEntryAuthor strip_linefeeds="1"$>
TITLE: <$MTEntryTitle strip_linefeeds="1"$>
BASENAME: <$MTEntryBasename$>
STATUS: <$MTEntryStatus strip_linefeeds="1"$>
ALLOW COMMENTS: <$MTEntryFlag flag="allow_comments"$>
CONVERT BREAKS: <$MTEntryFlag flag="convert_breaks"$>
ALLOW PINGS: <$MTEntryFlag flag="allow_pings"$>
<MTIfNonEmpty tag="MTEntryCategory">PRIMARY CATEGORY: <$MTEntryCategory$>
</MTIfNonEmpty><MTEntryCategories>
CATEGORY: <$MTCategoryLabel$>
</MTEntryCategories>
DATE: <$MTEntryDate format="%m/%d/%Y %I:%M:%S %p"$>
<MTEntryIfTagged>
TAGS: <MTEntryTags glue=","><$MTTagName$></MTEntryTags></MTEntryIfTagged>

(参照元:Movable Type 4 ドキュメント)(別ウインドー)

これで書き出してみたところ、

http://mocamoca.com/harablog/archives/2014/02/post_3081.html

の記事は

AUTHOR: mocamoca
TITLE: 広告ブロック「Adblock Plus」から星新一「むだな時間」を思う
BASENAME: post_3081
STATUS: Publish
ALLOW COMMENTS: 0
CONVERT BREAKS: __default__
ALLOW PINGS: 0
PRIMARY CATEGORY: インターネット
CATEGORY: インターネット
DATE: 02/18/2014 11:00:00 PM
TAGS: 読書
-----

になり、Movable Type4と同じになりましたヽ(^。^)ノ

ちなみに、Movable Type4から書き出すと、BASENAMEの「-」(ハイフン)が「_」(アンダーバー)になってしまうという不具合があるようですが、Movable Type3.78の場合は最初から「_」(アンダーバー)なので問題ありませんでした。

(参照元:Movable TypeからWordPressへ移行方法(MTのWP化で手こずるハイフンに注意) | いろいろブログ)(別ウインドー)

空白行がなくなった!

WordPressでの取込

書き出したテキストファイルのWordPressへの取込は「Movable Type and TypePad Importer プラグイン」を使います。

取込はうまくいき、パーマリンクも

http://localhost:8888/harablog/archives/2013/04/post_2720.html

という感じで保持されていました。

しかしここで問題が発生!
本来

Cさんの指示で下ごしらえをしたり、次々に出てくる洗い物を片付けます。回る少女
私も早く火の前に立ったり味付けを任されたい。

今夜のメニューは、まずは麻婆豆腐と青椒肉絲。
実は先日私が思いつきで「食べたい」と言ったのを覚えてくれたのです。

であってほしいところが

Cさんの指示で下ごしらえをしたり、次々に出てくる洗い物を片付けます。回る少女
私も早く火の前に立ったり味付けを任されたい。
今夜のメニューは、まずは麻婆豆腐と青椒肉絲。
実は先日私が思いつきで「食べたい」と言ったのを覚えてくれたのです。

と空白行がなくなってしまったのです。

これは読みにくいですね。
困ります。

そこで

wp-content/plugins/movabletype-importer/movabletype-importer.php

の455行の

if( !empty($line) )
$line .= "\n";

//if( !empty($line) )
$line .= "<br />";

に変更しました。
(参照元:無料ブログの記事と画像をWordPressにインポートする(前編) | ServerKurabe)(別ウインドー)

タグがない!

さらにもう一つ問題が発生!
タグが取り込まれていないのです。

これは

MTの途中のバージョンから、インポートフォーマットに「TAGS」というタグを示すフィールドが追加(タグ自体も途中のバージョンから追加)され、「Movable Type and TypePad Importer」プラグインがその仕様に追従していない

ことが原因だそうです。
(参照元:小粋空間: WordPress 3.0にMovable Typeのタグをインポートする)(別ウインドー)

これは上記の小粋空間の記事に従い、movabletype-importer.phpをさらに修正して解決しました。

よし!これで取込は大丈夫でしょう。
次にデザインや機能の追加をやります。

WordPressでプラグインなしでHighSlideを使う

温泉

WordPressのテンプレートはレスポンシブ対応の「Bootpress」を使い、これを変更してゆくことにしました。

まずやったのは、イメージのHighSlide対応です。

私はサムネイルをクリックして拡大表示する手段としてHighSlide(別ウインドー)を使っています。
(温泉イラストをクリックしてみてください)

これは拡大画像へのリンクに

<a href="拡大画像" class="highslide" onclick="return hs.expand(this)">
<img src="サムネイル画像"/>
</a>

というクラスをつけて使います。

WordPressでHighSlideが使えるようにするプラグインもあるにはあるようなのですが、移行前の記事でも使っているので、プラグインは使わないことにしました。

まず、header.phpのヘッダー内に以下を記入します。

<script type="text/javascript" src="http://mocamoca.com/js/highslide/highslide-with-gallery.js"></script>
<script type="text/javascript">
	hs.graphicsDir = 'http://mocamoca.com/js/highslide/graphics/';
	hs.align = 'center';
	hs.transitions = ['expand', 'crossfade'];
	hs.outlineType = 'rounded-white';
	hs.fadeInOut = true;
	//hs.dimmingOpacity = 0.75;

	// Add the controlbar
	if (hs.addSlideshow) hs.addSlideshow({
		//slideshowGroup: 'group1',
		interval: 5000,
		repeat: false,
		useControls: true,
		fixedControls: 'fit',
		overlayOptions: {
			opacity: .75,
			position: 'bottom center',
			hideOnMouseOut: true
		}
	});
</script>

さらに、新しい投稿でも自動的に拡大画像へのリンクにhighslide用のクラスが付くように、function.phpに以下を文章を追加しました。

add_filter( 'image_send_to_editor', 'remove_img_attr' );

function remove_img_attr( $html ) {
	$class = 'highslide" onclick="return hs.expand(this)';
	return str_replace( '<a ', '<a class="'. $class. '" ', $html );
}

(参照元:WordPress › フォーラム » 投稿画像のaタグにclassを追加したいです。)(別ウインドー)

さあ、これでHighSlide対策はバッチリです!