wordpress 管理画面にアイキャッチ画像の表示
管理画面でサムネイル画像を設定できると
投稿が楽になるので設定をします
functions.php にコードを追記すれば可能になります
1 | add_theme_support('post-thumbnails'); |
を追記します
これでカテゴリの下で
アイキャッチ画像の設定ができるようになります
とはいっても最初から素材を用意するのは大変なので
無料写真素材サイト
FOODIE’S FEED
のものを使わせていただくことにします
ちなみに画像のアップロードにはサイズ変更をしておかないと投稿できません
基本的には２MBです
今回は centOS 6.5 での変更になります
1 | vim /etc/php.ini |
で
８０１行めの
1 | upload_max_filesize = 2M |
を
1 | upload_max_filesize = 2000M |
に変更してアップロードできるサイズをあげます
1 | post_max_size = 8M |
を
1 | post_max_size = 2000M |
に変更
これでPOSTするサイズもあげます
ダッシュボードの投稿から
アイキャッチ画像を決定をクリック
ファイルアップロードをクリックし
ファいるをアップロードしたら
アイキャッチ画像を設定
をクリックします
これでアイキャッチ画像の設定ができたので
次に
一覧画面でアイキャッチ画像が見えるようにします
page.php の中の
1 | <img src="image/tee.jpg" /> |
の部分を
wordpress のテンプレに書き換えます
このときにサムネイルがないときのことも考えて
判定をして表示するようにします
判定は
1 2 3 4 5 6 | <?php if(has_post_thumbnail()): ?> <?php the_post_thumbnail(); ?><?php else : ?> <img src="<?php echo get_template_directory_uri();?>/img/noimage.png"/><?php endif;?><?php the_title(); ?></a></li> |
となります
1 | <?php if(has_post_thumbnail()): ?> |
でサムネイルがあるか調べ
あるのなら
1 | <?php the_post_thumbnail(); ?> |
で表示します
サムネイルなしなら
1 | <img src="<?php echo get_template_directory_uri();?>/img/noimage.png"/> |
でサムネイル画像の代わりにイメージなし
という画像を表示します
これでリロードすると
一覧画面にサムネイル画像が反映されます
今回の変更によりコードは以下のようになります
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <?php get_header();?><?php $paged = get_query_var('paged'); ?><?php query_posts("posts_per_page=10&paged=$paged"); ?><form action="" class="ui-filterable"> <input type="text" id="keywd" data-type="search" placeholder="お店の名前を入力"></form><br><?php if (have_posts()): while(have_posts()): the_post(); ?> <ul data-role="listview" data-filter="true" data-input="#keywd"> <li class="ui-li-has-thumbnail"><a href="<?php the_permalink(); ?>"><?php if(has_post_thumbnail()): ?> <?php the_post_thumbnail(); ?><?php else : ?> <img src="<?php echo get_template_directory_uri();?>/img/noimage.png"/><?php endif;?><?php the_title(); ?></a></li> </ul><?php endwhile; else: ?><p>該当するお店がありません</p><?php endif; ?><?php get_footer(); ?> |