16：アイキャッチ画像を表示する

アイキャッチ画像機能を有効にする

管理画面「投稿」>「新規追加」を選択します。

アイキャッチ画像パネルがありません。

テーマに機能を追加するには「functions.php」を使用します。アイキャッチ画像機能を有効にする命令を記述します。

functions.php

//アイキャッチ画像を有効にする
add_theme_support('post-thumbnails');

アイキャッチ画像パネルが表示されます。

アイキャッチ画像を表示する

アイキャッチ画像表示用関数はページ内容表示用ループ内で使用します。

<?php get_header(); ?>

  <div class="content">
    <div class="main">

      <div class="main-loop">
        <div class="inner">
<?php /***** メインループ開始 *****/ ?>
<?php if (have_posts()) :?>
<?php while (have_posts()) : the_post(); ?>
<?php $id = get_the_ID(); ?>
<?php // リンク ?>
<a class="post-link <?php echo 'post-id'.$id; ?>" href="<?php the_permalink(); ?>">

<?php // アイキャッチ画像 ?>
  <div class="thumbnail">
<?php
if (has_post_thumbnail()) {
  the_post_thumbnail('thumbnail');
}else{
  echo '<img src="'.get_template_directory_uri().'/img/no-image.png" alt="'.get_the_title().'">'.PHP_EOL;
}
?>
  </div>

<?php // タイトル ?>
  <h2 class="title"><?php the_title(); ?></h2>

<?php // カテゴリ文字列 ?>
  <h3 class="category-title">カテゴリ：</h3>
  <ul class="category-list">
<?php
$category_list = get_the_category();
for ($i=0; $i < count($category_list); $i++) :
  $catID = $category_list[$i]->term_id;
  $catName = $category_list[$i]->name;
  $catDescription = $category_list[$i]->description;
  $catColor = '';
  if($catDescription) {
    $catColor = ' style="background-color:'.$catDescription.';"';
  }
?>
    <li class="cat-id<?php echo $catID; ?>"<?php echo $catColor; ?>>
      <?php echo $catName; ?>
    </li>
<?php endfor; ?>
  </ul>

<?php // タグ文字列 ?>
<?php if (has_tag()) : ?>
  <h3 class="tag-title">タグ：</h3>
  <ul class="tags-list">
<?php
$tagList = get_the_tags();
for ($i=0; $i < count($tagList); $i++) :
  $tagID = $tagList[$i]->term_id;
  $tagName = $tagList[$i]->name;
?>
    <li class="tag-id<?php echo $tagID; ?>">
      <?php echo $tagName; ?>
    </li>
<?php endfor; ?>
  </ul>
<?php endif; ?>

<?php // 抜粋文 ?>
  <div class="excerpt"><?php the_excerpt(); ?></div>

<?php // 公開日時 ?>
  <div class="release-date">公開日時：<?php the_time('Y年m月d日'); ?></div>

<?php // 最終更新日時 ?>
  <div class="modified-date">最終更新日時：<?php the_modified_date('Y年m月d日'); ?></div>
</a>

<?php endwhile; ?>
<?php else: ?>
<div class="no-post">
  <div class="inner">
    <p>記事が存在しません</p>
  </div><!-- /.inner -->
</div><!-- /.no-post -->
<?php endif; ?>
<?php /***** メインループ終了 *****/ ?>

        </div><!-- /.inner -->
      </div><!-- /.main-loop -->
    </div><!-- /.main -->
    <?php get_sidebar(); ?>
  </div><!-- /.content -->


<?php
get_footer();

アイキャッチ画像のサイズ

アイキャッチ画像が指定されていない時用の画像を表示する

テーマフォルダの画像用フォルダ「img」にアイキャッチ画像指定されていない時用画像「no-image.png」を用意します。

「has_post_thumbnail()」で判定をしてアイキャッチ画像がないページは代替画像「no-image.png」を表示します。

if (has_post_thumbnail()) {
  the_post_thumbnail('thumbnail');
}else{
  echo '<img src="'.get_template_directory_uri().'/img/no-image.png" alt="'.get_the_title().'">'.PHP_EOL;
}

HTML出力結果

アイキャッチ画像がある場合

<div class="thumbnail">
  <img width="150" height="150" src="http://localhost/lesson1/wp-content/uploads/画像ファイル名" class="attachment-thumbnail size-thumbnail wp-post-image" alt="ページタイトル">
</div>

アイキャッチ画像がない場合

<div class="thumbnail">
  <img src="http://localhost/lesson1/wp-content/themes/wireframe05/img/no-image.png" alt="ページタイトル">
</div>

このページで出てくる関数

WordPress関数は「公式サイトのドキュメント」で確認しましょう。

WordPress関数

has_post_thumbnail()

the_post_thumbnail()

get_template_directory_uri()

get_the_title()

欠席者対応：wireframe05