WPtouchカスタマイズ番外編 -サムネイル用画像をコントロールしよう-

WordPress

2011/06/28

WPtouchカスタマイズ番外編 -サムネイル用画像をコントロールしよう-

まず、今回も「私がWPtouchの記事画面をカスタマイズするために行った◯つのこと」が見送りになってしまった件についてお詫びしなければなりません。
楽しみにしている方（いるのか本当に？）へは申し訳ありませんが次号ご期待ください。
決して書くのを渋っているわけではありません。現在もエントリーの半分はすでに完成しています。
なぜ、こうなってしまったのか。先を読んでいただこう。

言い訳（今回はそうでもないかもよ）

まず、前回のエントリーが思いのほか好評だった件について。初のはてブ2桁突入です。ありがとうございます。
WPtouchも小さいながらもこだわろうとすればけっこうできることが少しは分かってもらえたのではないかと思います。
そんな中、「gadget-or-gimmick」の@tomos2006さんにご意見をいただきました。

@kuracyan @knk_n 僕もアイキャッチの意味わからなかったんですけど、あれはちゃんと画像を設定しておいてやると、記事のヘッダー画像としてなかなか便利そうです。けんけんさんのWPTouchのやつも、うまくいかなかった。。僕の場合はFlickrファビコンだらけw

— ともす（オナシャス2006）さん (@tomos2006) 6月 27, 2011

@tomos2006さんも@hiro45jpさん自作のPhotoHtmlを使っているようなのですが、Flickrのファビコン付きの画像が先頭にあった場合、Flickrファビコンがサムネイルに表示されてしまって、サムネイルの意味が無いとのことでした。
Flickr画像をタグや件数で一括取得する – PhotoHtml | 普通のサラリーマンのiPhone日記
私は同じPhotoHtmlでもファビコンが表示されないタイプを使わせてもらっているので、うまくできていたようです。しかし、同様の理由でサムネイルが表示できない方もいるかもしれないので、他の方法を調べてみることにしました。
「こいつをほったらかして、次のエントリーに進むことはこの私が許さん。」

他の方法なんかなかった

他に方法があったと思ったのですが、調べれば調べるほどサムネイルの表示方法に前回紹介したもの以外がムリだということがわかってきました。調べが足りないかもしれないのですが、ある程度の限界が見えてしまったのです。
前回紹介した方法は
WordPress › Support » Retreive First Image From Post
とWordpressのフォーラムにも載っているような有名な方法だったようです。
そこで、前回紹介した方法を更にカスタマイズして問題解決の方法を探すことにしました。
また、@tomos2006さんの問題がどのようなものか、@tomos2006さんが使っているらしいタイプ（Flickrファビコンが表示されるやつ）のPhotoHtmlをtestで使ってみました。TwitterやRSSを見ていただいている方にはご迷惑をおかけしたことをここでお詫びしておきます。

1000001805 Photo by kenke_n
なるほど、お前か。
問題がわかったところで、ファビコンと実際の画像のコードに何か違いがないものかと見比べてみたところ、

<a rel="nofollow" target="_blank" href="http://www.flickr.com/photos/knk_n/5880442443/" title="1000001805 by kenke_n, on Flickr">
    <img class="flickr_photo" src="http://farm6.static.flickr.com/5078/5880442443_9cd4f76fea.jpg" alt="1000001805"/>
</a>
<br />
<cite class="flickr_photographer">
    <img src="http://www.flickr.com/favicon.ico" width="16"/>
    <a rel="nofollow" target="_blank" href="http://www.flickr.com/photos/knk_n/5880442443/">
        1000001805
    </a>
    Photo by
    <a rel="nofollow" target="_blank" href="http://www.flickr.com/photos/knk_n/">
        kenke_n
    </a>
</cite>

実際の画像にあってファビコンにないもの。それはalt属性。

画像挿入におけるalt属性とは？

私は読んでもサッパリよくわからなかったのですが、気になる方は以下のページを参照してみてください。
-<img> イメージ
alt属性は画像が参照できなかったときに代わりに表示する文字列のようなものらしいです。さっぱりわからん。
いろいろ目を通すなかで、気になったのがこのエントリー。
Re:犯してはいけないHTMLタグの過ち10個[to-R]
「HTML5ではalt属性はオプション扱いで省略可能です」
だって。
じゃあ無くてもいいってことですね。
そこで、alt属性で区切ってみることにしたところこれがうまくいったようです。

新・先頭画像をサムネイル表示する方法

/wp-content/plugins/wptouch/theme/default/function.php

に

function new_catch_that_image() {
    global $post, $posts;
    $first_img = '';
    ob_start();
    ob_end_clean();
    $output =
        preg_match_all('/<img.*.src=[\'"]([^\'"]+)[\'"].alt.*>/i', $post->post_content, $matches);
    
    $first_img = $matches [1] [0];
    if(empty($first_img)){ //Defines a default image
        $first_img = "https://knk-n.comDefault.jpg";
    }
    return $first_img;
}

を追加します。
前回と比べて変わったのは$outputの部分。
<img>の中でsrc属性とalt属性が連続して存在するものの中で先頭の画像をサムネイルとして使う。
簡単に言うと
「<img>の属性の中で、src属性のすぐ後にalt属性をもっているものの中で先頭の画像をサムネイルとして表示する。」
ってことです。簡単に言えてないかもしれませんがそこはご勘弁を。このすぐ後にっていうのがケッコー大事です。すぐ後でなければうまく動きません。くどいようですが注意してください。
あとは、前回のエントリーと同じです。

/wp-content/plugins/wptouch/theme/default/index.php

で

<div class="post-author">

の前あたりに

<a href="<?php the_permalink(); ?>" >
    <img class="alignleft" src="<?php echo new_catch_that_image(); ?>" alt="" width="75" height="75" />
</a>

を追加しましょう。
使用例はこちら

Flickrファビコン付きPhotoHtmlをお使いの方はこれで解決できると思います。

サムネイル表示画像をコントロールできる

上で挙げた方法はなかなかニッチな方法ですが、「うまく使えばなかなか便利じゃね？」なんて思うようになってきました。
例えば、alt属性を先頭の画像に付けていなければ、alt属性が付いた2番目の画像をサムネイルとして使うことができるようになります。つまり先頭の画像とサムネイルの画像を分けることもできるようになるということです。サムネイルにしたくない画像からはalt属性を外しておくのもひとつの手です。
あまりそんなことはしませんが、自由度の高さを考えればこっちのほうが便利なのかもしれないですね。