お店情報ページのカスタマイズ

まずは、投稿記事にサムネイル画像が表示されるようにソースを書き換えます

なお、サムネイルをダッシュボードで設定するには
functions.php で

add_theme_support('post-thumbnails');

の追記が必要になります

  <img src="image/tee.jpg" alt="" width="300" height="300">

の部分を

<?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()の
パラメータでサイズ指定ができます

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 の下へ

 <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 は

</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>

となります

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル