デフォルトでは記事にサムネイルを追加できないので、今回の記事ではそれをできるようにしていきます。
サムネイルを表示するには以下の手順が必要になってきます
- functions.phpにコードを記入する
- 記事にサムネイルを設定する
- トップページなどの表示したい場所にテンプレートタグを埋め込む
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 ?>ちなみにダミー画像はこちらのサイトで生成できるので作っておくと便利です。
先程のコードを挟んで追加します。
<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>
ちゃんと分岐されて表示されました！
ちなみにurlのみを取得したい場合は以下のコードを記述します。
<?php the_post_thumbnail_url(); ?>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 ?>
コメント