なかもとてれび・鏡の移行#2

なかもとてれび・鏡の移行のつづき。MT5からWordpressへの移行の情報などを調べてるうち、あっと思わせるものが!それはいきなりサーバーを移転するのではなく、ローカルにサーバーを立てるというもの。

まさに目から鱗だった。もともとなかもとてれびは自宅サーバーで開始したのだ。ローカルで思う存分試行錯誤しながら完成させて、最後にレンタルサーバーにアップすればいいんだよ!あー、なんで気付かなかったんだろう?

ということで、ローカルサーバー構築には、XAMPPを使用。XAMPPはApache、MySQL、PHP、Perlがセットになったディストリビューションでローカルで動かす分にはすぐ環境が作れる。まずデータベースを作成しWordpressをhtdocsディレクトリーに入れてMT5からの移行開始。

①MTの記事をエクスポート

もともとMT3.3だったのをMT5.2に上げたのは記事のエクスポート機能を使いたかったからだが、MTのツールにあるはずの「記事のエクスポート」がなぜか表示されていない。プラグインが必要なのか?といろいろ調べたけどそうではないらしい。もしやと思いダミー記事を作成してみたら「記事のエクスポート」が表示されるようになった。既存のデータベースを残してアップグレードする方法は、厳密にいえばアップグレードではなく新規作成のデータ移行方式。インポートされた記事しかない状況だと、記事一覧には表示されるが内部的には記事がないと思っちゃってるということか。これで記事のエクスポートは無事完了。

画像ファイルが保存されたディレクトリーもFTPでダウンロードしておく。

②Wordpressのパーマリンク設定

パーマリンクをMTのものと合わせる。なかもとてれび・鏡の場合は/yyyy/mm/投稿名.phpなので
カスタム構造: /%year%/%monthnum%/%postname%.php

③Wordpressにインポート

WordPressのダッシュボードのツールにあるインポートで、MTのデータをインポートする。インポートの画面で選択するのは、「Movable TypeとTypePad」。ただしインポートファイルの最大サイズが2MBまでとなっているのでこの制限をなくすために、Wordpressのインストール・ディレクトリーにある.htaccessに以下を追記する。

#Change upload limits
php_value memory_limit 34M
php_value post_max_size 33M
php_value upload_max_filesize 32M
php_value max_execution_time 600
#Change upload limits end

追記したらインポート。

次に画像ディレクトリーも適切な場所にコピー(記事データが参照できるように適切な場所へ)する。

これで一応サイトは見れるようにはなる。少なくとも記事は表示される。が、ここからが一番面倒だった。画像が表示されない、サムネイルは表示されてもリンク先画像が表示されない、など。

④画像リンクURLの修正

画像が表示されない原因は、MTのエクスポートデータの中を見たり、Wordpressが表示したページのソースを見たりすれば判断できた。要は画像リンクURLが実際の画像のパスと合っていないのだ。この修正はエクスポートデータを直接編集(文字列の置換などを使って)してインポートしなおす方法で実施したが、なかなかいっぺんにはうまくいかないので何度もそれの繰り返し。ある程度できたところであとはWordpress上で修正とすればよいか。

⑤記事の見栄えの修正

なかもとてれび・鏡で作った記事は画像配置のために表などをよく使っているがそのタグはそのまま移行される。とどうなるかというと、表のセルの大きさ(幅など)がめちゃくちゃになって表示されてしまい、なんだこれ?状態。うーん。困ったけどこれ直すのって1つずつやるしかないな。気が向いたらだけど。ブログテンプレートに合わせた記事の作成は、昨今のレスポンシブデザインのテーマ適用とかを考えた場合はよくないなと感じる。これってなかもとてれび・鏡に限った話ではなく、移行完了した当ブログもまったく同じ。もういまさらムリって感じである。

WordPressアドレスとサイトアドレス

WordPressでは、ダッシュボードの一般設定で、Wordpressアドレス(Wordpressをインストールしたアドレス)とサイトアドレス(ブラウザから指定するサイトのアドレス)が設定できるのだが、nakamo.topではそう設定してもうまくいかなかった。あれ?前からそうだったっけ?

ということで調べてみたら他にもやらないくてはいけないことがあったので、そのメモ。アクセスカウンタ見ても他にアクセスしてる人まだいないっぽいから、なかもTOP!のアドレスはこれまでのnakamo.top/wordpress/からただのnakamo.topに変更。

①ダッシュボードの一般設定でサイトアドレスを変更

②index.phpの変更

wordpressがインストールされたディレクトリにあるindex.phpを以下のように更新して、サイトのディレクトリーに移動。
変更前:require( dirname( __FILE__ ) . ‘/wp-blog-header.php’ );
変更後:require( dirname( __FILE__ ) . ‘/wordpress/wp-blog-header.php’ );

WordPressの子テーマ

今日なかもび!にyoutubeにアップしてある動画を埋め込んだときのこと。なかもび!はレスポンシブル・デザインに対応したテーマを使っているが、埋め込んだ動画部分がブラウザに合わせてサイズが変動しないことに気付いた。

ということで調べてみると、CSSを使えば対応できることが分かったのでそのメモ。

①埋め込んだiframeタグをdivで囲む。
例:
<div class=”aaa(適当なクラス名)”><iframe ________></iframe></div>

②CSSにクラスを設定する。
例:
.aaa(適当なクラス名) {
position: relative
;
padding-bottom: 56.25%
;
padding-top: 30px
;
      height: 0
;
      overflow: hidden
;
}

.aaa(適当なクラス名) iframe {
      position: absolute
;
      top: 0
;
      left: 0
;
      width: 100%
;
      height: 100%
;
}

とこれで対応できた。ただひとつ問題が。今使っているテーマがバージョンアップされたらCSSも上書きされるため、バージョンアップの都度CSSを変更しなくてはならない。とそこで活躍するのが、Wordpressの子テーマの機能ということも分かった。子テーマとはテーマ(親テーマ)の内容を定義しなおし上書きすることができるテーマであり、これを利用すれば親テーマがバージョンアップされても定義しなおした内容は子テーマとして保持されるというわけである。

今回はCSSだけ変更してみたのでそのメモ。

①子テーマ用のディレクトリを作成

テーマディレクトリ(wordpress/wp-content/themes)以下に子テーマ用のディレクトリ(子テーマ名で)を作成する。

②style.cssの作成

親テーマを上書きするためのstyle.cssを作成する。下記例にあるTheme NameとTemplateが必須項目で、これを記述すればWorkdressが子テーマとして認識する。@import urlは親テーマをインポートするための文言。そのあとに上書きしたい部分を記述する。作成したcssを①で作成したディレクトリにアップロードする。
例:
@charset “utf-8”;
/*
Theme Name: 子テーマの名前
Template: 親テーマの名前
Description: 親テーマの子テーマです
Author: 自分の名前など
Version: 0.1.0
*/

@import url(“../親テーマの名前/style.css”);

.aaa(適当なクラス名) {
      position: relative;
      padding-bottom: 56.25%
;
      padding-top: 30px
;
      height: 0
;
      overflow: hidden
;
}

.aaa(適当なクラス名) iframe {
      position: absolute
;
      top: 0
;
      left: 0
;
      width: 100%
;
      height: 100%
;
}

③子テーマの有効化

WordPressで子テーマを有効化する。

これでうまくできた。

なかもび!充実化

旅のしおりをよいものとするために、出発までに充実化しながら少し気にかけていたこと。それはネットから入手した画像の利用。境内図とかルートマップとか、まぁ個人利用だからつつかれることはないとは思うけど、やはりその辺はある程度やっとかないとまずいかな。

ということで、とりあえずGoogleマップ/Earthの画像には著作権表示を入れて作成しなおし。境内図もGoogle Earthを使って自分で加工して作成。これでもまだ多少気になるものもあるけど、ここまでかなぁ。

旅のしおり更新に伴い、なかもび!も充実化、というか消失前とは少し変えてみた。それぞれの寺院の簡単な説明ページを作り、それをしおりから参照する方式。それで、実際にその寺院に行った後にそこでの写真をページに更新するといい感じになるなと。旅のしおりを作るときに下調べが必要となるため、旅に行ったときにもある程度知識を持った形にできる。

ということで、なかもび!と、旅のしおり、更新充実化中。

お遍路さんプラン2

9/6からの次回お遍路さんの行程計画をもう一つ作成。今回の一泊二日で27番から37番まで回るのがプラン1。もう一つ立てたのが27番から36番までのプラン2。具体的な違いは、

36番から37番までは65分、37番から高知城までは90分もかかるし、次々回の開始を考慮すると37番から開始した方が効率がいいのだ。

なので、プラン2では1日目に28番から近い日本三大鍾乳洞のひとつである龍河洞を入れ、2日目は高知城の後に桂浜桂浜は言わずと知れたあの有名な坂本龍馬像があるところ。これでいてプラン1よりも行程に余裕があって安心感もあり。

ということでプラン2を採用するのは間違いない。

次のお遍路さん予約!

5月に行ってからしばらく間があいたお遍路さん。そろそろ続きってことで今日申し込み完了!

じゃらんJALパックのレンタカー付のプランで予約したが、9/4-5の土日の予定を9/6-7の日月に変更。なんでかっつーと、9/4発だと飛行機の窓側座席が取れないだろうという単にそれだけ。飛行機嫌いだったくせに。

前回、前々回の四国ツアーでは、前回が金土、前々回が日月だったんだけど、日月より金土の方が飛行機の乗客が感覚的に3倍。これだとたぶん、9/4の飛行機窓側無理だろうって思ったのだ。それでも帰り9/7の飛行機での座席指定では、窓側席は最後1席のみでぎりぎりセーフ。

それと今回は、先月メインのクレジットカードにしたリクルートカードでのリクルートポイントを使っての初旅行。リクルートカードの入会キャンペーンでもらえるポイントなど含めてすでに13700P貯まってて、今回入手したクーポン2000Pを使ったおかげで、35600円のところ、なーんと19900円也!2万で四国!って、ほんとリクルートカードでじゃらんは最高である。

ということで、一旦はデータ消失のため閉鎖したなかもび!初のコンテンツとしてなった、お遍路さんの旅-第4回 高知2回目を作成、当日まで内容充実させていくつもり。

いかバターごはん

いかバターごはん

今日は最初から仕事終わったら、一人で飲みにいくつもりで、そのとおり行った。

いかバターごはんは、裏メニュー。先週作ってもらったんだけど、なんかすごくシンプルな味なのに、また食べたいと思っちゃうようなごはん。

たぶんまた、たのんじゃう。