MTカスタムフィールド画像を見えるようにする

2008.02.12

カスタムフィールドがちょっと不便な件。今のところ、Javascriptで対応しています。

（以下、読む必要ありません。MTカスタムフィールド画像は見えてました）

サムネイル画像をカスタムフィールドにてアップ
「メインページ」や「ブログ記事リスト」で表示する（投稿画面で見えなくてもいい）
サムネイル画像にも「ブログ記事」へのリンクが貼られる

という風にしたいのですが、普通にカスタムフィールドの「画像」を設定するといくつか問題。

「表示」というテキストにリンクが貼られるだけ
リンク先は画像そのもの。単純に「表示」というテキストを「画像」に置換できても、エントリーへはリンクされない（強引に囲むと２重のアンカーになる）

考えたあげく、他のプラグインに頼らず、Javascriptでソースを書き換えることに。一時的な問題という気もするし、融通が利く。それに今更ですがDOMの勉強。

「getElementsByClassName」などを使うので「prototype.js」も必要です。

MTテンプレート「ブログ記事の概要」など：

<!-- カスタムフィールド名「entrydata_thumb」 エントリー群は「content」というidで囲んでおく -->
<div id="entry-<$MTEntryID$>" class="entrywrap">
<div class="list-thumb">
<mtifNonEmpty tag="entrydata_thumb">
<$MTentrydata_thumb$>
</mtifNonEmpty>
</div>
<h3><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></h3>
<mtifNonEmpty tag="EntryBody">
<$MTEntryBody$>
</mtifNonEmpty>

IEとの互換性のため、この場合「<h3>までの改行は全てなくす」ことを忘れずに。ノードを揃えておきます。
見出しの上に画像を置くとか文章構造には目を瞑って頂いて、出力されるHTMLはこんな感じです（改行入ってます）。

<div id="entry-12" class="entrywrap">
<div class="list-thumb">
<span class="mt-enclosure mt-enclosure-image" style="display: inline;"><a href="（画像のURL）">表示</a></span>
</div>
<h3><a href="（エントリーのURL）">（見出し）</a></h3>
<div class="entry-body"> 本文 </div>

こういう出力が便利なことってあまりないと思います。そこでJavascriptで書き換え。

Javascript：

function customimage() {
  // カスタムフィールド「表示」を囲んだclass「list-thumb」を集めます
  // 「content」というidに囲まれているところだけ
  var listthumb = $('content').getElementsByClassName('list-thumb');

  for(var i=0; i<listthumb.length; i++){
    // ノードでエントリーのURLを探します
    //（ひどく汎用性がないので注意）
    var linkurl = listthumb[i].parentNode.childNodes[1].firstChild.href;

    // サムネイルが入っている場合だけ
    if (listthumb[i].firstChild) {
      // 「表示」を囲む<span>
      var imgspan = listthumb[i] firstChild;
      // ちまちまエレメント作成（エントリーへの画像リンク）
      var entryanchor = document.createElement("a");
      entryanchor.href = linkurl;
      var img = document.createElement("img");
      img.src = imgspan.firstChild.href;
      // 一度<span>の中を消して、作ったエレメントを中に入れて完了
      imgspan[i].removeChild(imgspan[i].firstChild);
      imgspan[i].appendChild(entryanchor);
      entryanchor.appendChild(img,entryanchor);
    }
  }
} Event.observe(window,'load', customimage, false);

ノードは苦労します。Firefoxの「DOM Inspector」が頼みの綱です。
（もともとJavascriptはほとんど書かないので、おかしなところ、あるいはもっと簡単な方法があるかもです。不備などのご指摘は助かりますが、使い方のご質問は受けられません。すいません）

下記のページがここよりずっと参考になります。長谷川は少し目的に合わず使用できませんでした。

カスタムフィールドの画像リンクを画像に変換する[to-R]：このままではサムネイルに記事へのリンクが貼れない
カスタムフィールドによるアップロード画像をサムネイルで表示するプラグイン 0.02：使えるなら一番いいんですが、サーバによっては動かなかったので

それから、急にWordPressの話ですが、このページのためコードを記述するプラグイン「CodeHighlighter」を入れました。MTタグには対応してないので少しおかしな配色になってますが、便利でいいです。

#Javascript #MovableType #Tips #WordPress #プラグイン

POSTED: 2008.02.12

CONTACT