wptouchのシングルページでサムネイル表示

wptouchのシングルページでアイキャッチ画像表示

このブログはiPhoneでの表示用にwptouchというプラグインを使っているんですが、そのままではアイキャッチ画像として登録した画像がシングルページで表示されません。
本来ならアイキャッチだけでなくエントリ本文内にも画像を配置しているので問題は無いのでしょうが、ウチのブログはエントリ内に画像はほとんど無くアイキャッチ画像だけなのでその辺りをカスタマイズしてみました。

というかこの(PC用)デザインにしてからずーっと考えていたのですが方法が分からず放置してあったものが今日ふと思いついて試したら出来たというわけ。

先に原因を言ってしまうと、wptouchのfunctions.phpに「post-thumbnails」の指示がなかったこと。

wp-content/plugins/wptouch/
themes/default/functions.php

// This theme uses post thumbnails
add_theme_support( ‘post-thumbnails’ );
set_post_thumbnail_size( 300, 450, true ); // 幅 50 ピクセル、高さ 50 ピクセル、切り抜きモード

を付け加えて準備完了。

次は wp-content/plugins/wptouch/
themes/default/single.php にアイキャッチ画像を表示するタグを書き加えます。
30行目辺りの <?php the_content(); ?> の前に

<div class=”single1_img”><?php
if(has_post_thumbnail()){
// 投稿サムネイルがある場合
echo ‘<img src=”‘;
$image = wp_get_attachment_image_src( get_post_thumbnail_id(), ‘full’ );
if ( $image ) {
list( $src, $width, $height ) = $image;
echo $src;
}
echo ‘” />’;
}
else{
// 投稿サムネイルがない場合
echo ‘<img src=”https://digicool.org/wp/wp-content/themes/TRA5/img/top3_nophoto.gif” />’;
}
?></div>

を追加。(div囲みは後でCSSで成型するため。)

これで表示はされるはずですが、続いてCSSで画像のサイズなどを調整します。
他のエントリで本文内にある画像のサイズを強制的に画面半分になるように固定しているので、アイキャッチ画像だけは横幅最大で表示出来るように wp-content/plugins/
wptouch/themes/default/style.css

#singlentry .single1_img img{
margin:0 0 10px 0;
max-width: 280px;
height: auto;
}

を追加してみました。

これでとりあえずこのテンプレートでやりたかったことは完了かな。
次期iPadが手に入って余裕が出来たらiPad用のテンプレートも考えてみたいところだけど・・・。

wptouchのシングルページでアイキャッチ画像表示” への1件のフィードバック

コメントを残す