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

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

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

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

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

考えたあげく、他のプラグインに頼らず、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はほとんど書かないので、おかしなところ、あるいはもっと簡単な方法があるかもです。不備などのご指摘は助かりますが、使い方のご質問は受けられません。すいません)

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

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


PAGE UP