WordPress スマホ画面のカスタマイズ〜リストページにサムネイルを付ける

難易度：高（すんません。ちょっと難しいかもです・・・）

スマホ画面を形成するのに WPtouch Pro を使っています。

カスタマイズを行う際、秋田の場合 function.php には書かずにプラグインを作る事にしている。といってもファイル１つのプラグインなので、そんなに難しい話しではない。

プラグインにコードを書く事により、テーマを変更した場合でも、そのソースが使えるので便利である。

プラグインの作り方は、以前のエントリー「自作プラグインのススメ WordPress をより深く、安全にカスタマイズする為に」を参考にして頂けたらと思う。

今回やりたいのは、スマホ画面のリストページに、記事の１つ目の画像をサムネイルとして表示させたい。である。では早速。

WordPressの投稿記事内の画像の最初の1枚をサムネイルとして表示する方法こちらの「img srcの記述を拾って画像を取得し表示する」のソースを少しアレンジさせて頂き、my-pulug-in.php に記述する。

アレンジしたのは、引数に記事を配置し、記事データからイメージ画増の URL を導きだす形にした。

function catch_that_image($content) {
    $first_img = '';
    ob_start();
    ob_end_clean();
    $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $content, $matches);
    $first_img = $matches [1] [0];

    if(empty($first_img)){ //Defines a default image
        $first_img = "/images/default.jpg";
    }
return $first_img;
}

この関数を WPtouch Pro のテーマファイル blog-loop.php で利用する。

get_the_content() 関数で投稿データを取得出来るので、catch_that_image(get_the_content())  にて最初にある画像のパスを取得出来る。

これを利用してタイトルが書いてある下あたりに THML を記述していく。

<center>
	<a href="<?php wptouch_the_permalink(); ?>">
	<img src="<?php echo catch_that_image(get_the_content());?>" width="120">
	</a>
</center>

こんな感じが

こんな感じになりました。だいぶ良くなったかな。

デザインあまり詳しくないので、今度デザイン担当のスタッフの時間が空いている時に見てもらおう。