お店情報ページのカスタマイズ
まずは、投稿記事にサムネイル画像が表示されるようにソースを書き換えます
なお、サムネイルをダッシュボードで設定するには
functions.php で
1 | add_theme_support('post-thumbnails'); |
の追記が必要になります
1 | <img src="image/tee.jpg" alt="" width="300" height="300"> |
の部分を
1 2 3 4 5 | <?php if(has_post_thumbnail()): ?> <?php the_post_thumbnail('medium'); ?><?php else : ?> <img src="<?php echo get_template_directory_uri();?>/img/noimage.png" width="300" height="300"/><?php endif;?> |
とします
これでサムネイル画像が表示されます
なお
post_thumbnail()の
パラメータでサイズ指定ができます
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | the_post_thumbnail(); // パラメータなし -> 'post-thumbnail'サムネイル the_post_thumbnail( 'thumbnail' ); // サムネイル(デフォルト 150px x 150px ：最大値）the_post_thumbnail( 'medium' ); // 中サイズ（デフォルト300px x 300px：最大値）the_post_thumbnail( 'large' ); // 大サイズ（デフォルト640px x 640px：最大値）the_post_thumbnail( 'full' ); // フルサイズ （アップロードした画像の元サイズ） the_post_thumbnail( array(100, 100) ); // 他のサイズ |
詳しくは
テンプレートタグ/the post thumbnail
の解説を参考に
これでサムネイルが表示されるようになったので
次に簡単にお店にアクセスできるように
ボタンを追加していきます
footer.php の最初の div の下へ
1 2 3 4 5 6 7 8 | <div data-role="navbar"> <ul> <li><a href="#" data-icon="phone">電話</a></li> <li><a href="#" data-icon="location">地図</a></li> <li><a href="#" data-icon="edit">tweet</a></li> </ul> </div></div> |
を追加します
これでフッターにボタンが表示されます
これでフッターのソースfooter.php は
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | </div><div data-role="footer"> <div data-role="navbar"> <ul> <li><a href="#" data-icon="phone">電話</a></li> <li><a href="#" data-icon="location">地図</a></li> <li><a href="#" data-icon="edit">tweet</a></li> </ul> </div></div> Copyright 2015 <?php if(date_i18n('Y')!=2015){ echo '- '; echo date_i18n('Y'); } ?><br> <?php bloginfo('name'); ?></div></div><?php wp_footer(); ?></body></html> |
となります