WordPressとMovableType

| コメント(0) | トラックバック(0)

WordPress管理画面
WordPress管理画面

管理していた、とあるサイトのリニューアル案件があって、MovableTypeからWordPressへ移行するプロジェクトに参加しました。おもな理由は、スマホからの投稿が手軽に行えるというものです。

MovableTypeですと、スマホやタブレットの更新は問題ありませんが、新規投稿の際にいちいちPCページで行わなければいけなかったためです。

基本的な構築とデーター移行は業者さんにお願いし、クライアント側として、細かなレイアウト修正などを私が担当しました。

PHPについては全く知識がなかったのと、デザインとプログラムがほぼ分離しているMovableTypeとは勝手が異なり、苦戦しております。

一方で、欲しい機能がプラグインでかなり多く提供されていて、凝りださなければデザインを触ることなく、プラグインのインストールだけで機能の追加が行えるなど、気に入った点もありました。

プラグインやTIPSについては、おいおい覚書代わりに書いてまいります。

Movable Typeを5.2から6.2にアップグレードしてみたところ、「システムテンプレートが見つかりません」なるエラーがでてしまいました。再構築はできているので、システムテンプレートそのものがなくなっているわけではないようです。

Movable Type4系でも起こるケースがネット情報では散見されたので、6.2へのアップグレード固有の問題ではなさそうです。

左メニューの「ツール」から「テーマーのエクスポート」を行ってから、当該テーマを再適用したところ元に戻りましたが、ウムム。

これまでは、The blog of H.Fujimotoさんの、カテゴリとフォルダを自由に並べ替えられるプラグインSortCatFldを利用いたのですが、Movable Type 5.1以降では、Movable Typeの標準機能に備わっているソート機能に変更しました。

なお、カテゴリとフォルダに加え、ブログ記事とウェブページを並べ替える場合は、SuperSortプラグインを使用すれば可能です。

これまでは、The blog of H.Fujimotoさんのリアルタイム再構築プラグインを利用してページ分割を行っていたのですが、Movable Type 5.2にバージョンアップした際にプラグインエラーが出てしまい悩んでいたところ、Movable Typeの標準機能で動的ページ分割する方法が解説されていたので、この方法に変更しました。

詳しくは、前述のページをご覧いただくとして、ページネーションテンプレートのみ、現在ページを表示するように変更しました。

<mt:SetVarBlock name="pagination_navigation">
  <mt:If name="search_results">
    <mt:IfMoreResults>
      <li><a rel="prev" href="<$mt:NextLink encode_html="1"$>">過去の記事</a></li>
    </mt:IfMoreResults>
    <mt:IfPreviousResults>
      <li><span class="current"><$MTTotalPages$> ページ中 <$MTCurrentPage$> ページ</span></li>
<li><a rel="next" href="<$mt:PreviousLink encode_html="1"$>">新しい記事</a></li>
    </mt:IfPreviousResults>
  <mt:Else>
    <mt:If name="archive_template">
      <$mt:ArchiveCount setvar="total_entries"$>
    <mt:Else>
      <$mt:BlogEntryCount setvar="total_entries"$>
    </mt:If>
    <mt:If name="total_entries" gt="$entries_per_page">
      <li><a rel="prev" href="<$mt:Var name="search_link" encode_html="1" $>2">過去の記事</a></li>
    </mt:If>
  </mt:If>
</mt:SetVarBlock>
 
<mt:If name="pagination_navigation">
  <ul class="content-nav">
    <$mt:Var name="pagination_navigation"$>
  </ul>
</mt:If>

Movable Type 5.2 へアップグレードしたところ、Movable Typの記事をFacebookのウォールに反映するプラグイン「FBWallPost」がmt.jsと干渉して、ブログ記事作成画面の表示が乱れてしまうので、代替としてalfasadoさんのmt-plugin-post2facebookをテスト。

Movable Type 5.2 へのアップグレードテスト中ですが、いくつかの問題が。

      投稿画面のエディターがTinyMCEになったことで、Movable Typeの投稿画面にならぶボタンを拡張するプラグイン「CustomEditorButton2」などが一式使えなくなった。
      同じく画面関係で、マウスクリックでタグ付けを行える「EasyTagSelector」が使えなくなった。
      Facebookのウォールに反映するプラグイン「FBWallPost」が投稿画面のmt.jsと干渉して、投稿画面そのものが乱れる。

といった課題が出てきました。

Movable Type でFirefox 16 でカテゴリおよびフォルダの選択が保存できない場合(具体的には以下のケース)

  • ブログ記事編集画面でのカテゴリの選択時
  • ウェブページ編集画面でのフォルダの選択時
  • アイテムのアップロード画面でのフォルダの選択時

は、各バージョン毎(Movable Type 4.38 用、Movable Type 5.07 用、Movable Type 5.14 用、Movable Type 5.2 用)に修正ファイルを適用して下さい。

このサイトは4.29系ですが、4.38用の修正ファイルが利用できましたので参考までに。ただし、書き換えるファイルのバックアップはお取りください。

スクリーンショット

スマートフォン対応させた場合、画像の表示サイズが問題になります。いつも同じサイズで方向も同じであればよいのですが、縦・横混在の場合はなかなか面倒ですが、私のサイトでは次のcssで対応しています。

PC版では幅240px、高さ180pxで表示された画像がスマートフォン版では、冒頭のスクリーンショットのように表示されます。

幅のみを12emで指定し、高さはautoにして表示させています。

p.photo_left img,
p.photo_right img {
  width: 12em;
  height: auto;
}

メインページ
メインページ

CSS3で採用されたMedia Queriesを利用して、スマートフォン(iPhone・Android)とPCのスタイルシート(CSS)を振り分ける方法については、メリット、デメリットがありますが、デバイスのOSやUAが何であるかよりも、どのような解像度や画面の大きさでサイトを見るという観点に立てば、こちらのほうがメリットがあると思っています。

デメリットとしては、PC向けサイトをそのまま利用して、不必要なところを"display: none;で"非表示にしているだけなので、レンダリングされなくても、ソースそのものは変わらないので、スマートフォン向けにテンプレートをシンプルにしたものに比べればパケットが多くなることでしょうか。

前々回の記事では、iPhone(スマートフォン)対応テンプレート cssTouch for MT(Movable Type)のテンプレートを利用した方法を紹介しましたが、商業利用が有償であることや、もう少しプレーンなスタイルが欲しかったので、今回は、MovableType (MT4)のブログをJS・CSSのみでiPhoneに対応させる Kawanet Tech Blog/ウェブリブログで紹介されている記事ををベースに、カスタマイズしてみます。

スタイルシートの追加

スマートフォンは表示領域が小さく、pre要素とcode要素からはみ出した内容が表示されないままなので、次のスタイルを追加しました。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。

最近のコメント

アイテム

  • WordPress管理画面
  • スクリーンショット
  • エントリーアーカイブ
  • メインページ
  • エントリーページ(cremaバージョン)
  • メインページ(cremaバージョン)
  • フッタ(cremaバージョン)
  • フッタ部分
  • コメント部分
  • エントリーページ
OpenID対応しています OpenIDについて
Powered by Movable Type 6.2