【初心者向け】記事へサムネイルを追加し表示する【WordPress化】

サムネイル-アイキャッチ
こばゆた
こばゆた

デフォルトでは記事にサムネイルを追加できないので、今回の記事ではそれをできるようにしていきます。

アイキャッチを設定する前のindex.php
こばゆた
こばゆた

サムネイルを表示するには以下の手順が必要になってきます

サムネイルの設定の手順
  1. functions.phpにコードを記入する
  2. 記事にサムネイルを設定する
  3. トップページなどの表示したい場所にテンプレートタグを埋め込む
スポンサーリンク

1.functions.phpにコードを記入する

サムネイルを追加するにはadd_theme_supportという関数を使います。

コードの解説

パラメータに入れる値でサムネイル以外にもメニューやウィジットなどの機能が開放されます。

add_theme_support($feature, $args);
パラメータ機能入る値
$feature追加する機能を指定post-thumbnails, widgets , menusなど
$argsオプションで追加する引数$featureの値による

今回はサムネイルを編集できるようにしたいのでパラメータに”post-thumbnails”と入れます。

add_theme_support('post-thumbnails');

すると記事編集画面でサムネイルを設定することができるようになります。

適用前

サムネイル適用前

適用前

サムネイル適用後
チャッピー
チャッピー

サムネイルの入力欄ができてる!

スポンサーリンク

2.記事にサムネイルを設定する

次は記事の投稿からサムネイルを設定していきます。

こちらの動画のように入れたい画像を選択するだけでOKです。

同様に他の記事にもサムネイルを設定します。

3.任意の場所にテンプレートタグを埋め込む

3-1the_post_thumbnail

トップページや記事にサムネイルを表示させるにはthe_post_thumbnailというタグを使います。

コードの解説
<?php the_post_thumbnail($size, $attr); ?>
パラメータ内容
$sizeキーワードや値を配列で渡す
$attrアイキャッチ画像の含める属性

キーワードというのは「設定」→「メディア」のサイズを基準にしています。

$sizeに入るキーワード内容
array(n, n)サイズの指定
thumbnailサムネイルのサイズ
medium中サイズ
large大サイズ
fullアップした元の画像サイズ
サムネイルのサイズ例

array(100, 100)はのように指定します。

他にも設定画面で好きなサイズ設定してあればパラメータに’large’や’medium’といったキーワードを指定すれば呼び出すことができます。

3-2.埋め込む

記事のループの画像が入っているところに埋め込みます。

変更前は以下のような形でした

<ul class="post">
  <?php if(have_posts()): while(have_posts()) : the_post(); ?>
  <li>
    <img src="<?php echo get_template_directory_uri(); ?>/images/banners/eyecatch1.jpg"><h3><a href="<?php the_permalink(); ?>"><?php the_title()?></a></h3><p><?php the_excerpt(); ?></p>
  </li>
  <?php endwhile; ?>
  <?php else : ?>
    <p>記事がありません</p>
  <?php endif; ?> 
</ul>

サムネイルのところのimgタグと入れ替えるとこの様なコードになります。

<ul class="post">
  <?php if(have_posts()): while(have_posts()) : the_post(); ?>
  <li>
    <?php the_post_thumbnail(array(150, 100)); ?>
  </li>
  <?php endwhile; ?>
  <?php else : ?>
    <p>記事がありません</p>
  <?php endif; ?> 
</ul>

反映結果をみてみると…

サムネイル設定後
こばゆた
こばゆた

サムネイルが表示できました

きなこ
きなこ

でも設定していないとこには何も画像が出ないので少し違和感があるね

こばゆた
こばゆた

何も画像が出ないのはデザイン的にも変ですし不親切ですね。

なのでif文で分岐を作りサムネイルが設定されていれば画像を表示し、サムネイルが設定されていなければされていない用の画像が表示される様にしましょう!

<?php if (has_post_thumbnail()) : ?> <!--サムネイルがあれば-->
  <?php the_post_thumbnail(); ?> <!--投稿されたサムネイルを表示-->

<?php else : ?> <!--サムネイルが無ければ-->
  <img src="/"> <!--サムネイルが無い時の画像を表示-->
<?php endif ?>

ちなみにダミー画像はこちらのサイトで生成できるので作っておくと便利です。

Placehold.jp | 簡単!ダミー画像作成
簡単!ダミー画像生成、モックアップ用画像作成ツール。文字やサイズ、メモを入れた仮の画像を簡単に作成できます。

先程のコードを挟んで追加します。

<ul class="post">
  <?php if(have_posts()): while(have_posts()) : the_post(); ?>
  <li>
    <?php if (has_post_thumbnail()) : ?> <!--サムネイルがあれば-->
      <?php the_post_thumbnail(array(150, 100)); ?> <!--投稿されたサムネイルを表示-->

    <?php else : ?> <!--サムネイルが無ければ-->
      <img src="<?php echo get_template_directory_uri(); ?>/images/no-image_150x100.png"> <!--サムネイルが無い時の画像を表示-->
    <?php endif ?>
    <h3><a href="<?php the_permalink(); ?>"><?php the_title()?></a></h3><p><?php the_excerpt(); ?></p>
  </li>

  <?php endwhile; ?>
  <?php else : ?>
    <p>記事がありません</p>
  <?php endif; ?> 
</ul>
サムネイル設定後_if文追加

ちゃんと分岐されて表示されました!

4.まとめ

記事へのサムネイルの追加と表示まとめ

1.functions.phpにコードを書く

add_theme_support('post-thumbnails');

2.記事投稿でサムネイルを設定する

3.サムネイルを表示したい場所にタグを埋め込む

<?php the_post_thumbnail($size, $attr); ?>

・$sizeにはサムネイルの大きさを指定するキーワードを入れられる

$sizeに入るキーワード内容
array(n, n)サイズの指定
thumbnailサムネイルのサイズ
medium中サイズ
large大サイズ
fullアップした元の画像サイズ

・実際には以下の形で使う

<?php if (has_post_thumbnail()) : ?> <!--サムネイルがあれば-->
  <?php the_post_thumbnail(); ?> <!--投稿されたサムネイルを表示-->

<?php else : ?> <!--サムネイルが無ければ-->
  <img src="/"> <!--サムネイルが無い時の画像を表示-->
<?php endif ?>

コメント

トップへ戻る