ブログやメディアでよく見る、記事のサムネイルが並んでいるページ。もちろんWordPressでもこうしたデザインをテーマに組み込むことができる。
今回は、WordPressで記事の画像＝アイキャッチを並べる方法を解説する。
Contents
WordPressでアイキャッチ一覧を使うまで
WordPressではサムネイルのことをアイキャッチという。アイキャッチを使うには大まかに２つの手順がある。
- WordPressテーマでアイキャッチ機能を有効にする。
- アイキャッチ画像を呼び出す。
なんのことはない。『機能を有効化→実際にその機能を使う』というだけの話だ。この流れに沿ってその使い方を見ていこう。
WordPressテーマでアイキャッチ機能を有効にする
アイキャッチ機能を有効にするため、add_theme_support(‘post-thumbnails’);をfunctions.phpで呼び出す。呼び出すタイミングはinitよりも前でなければならない（after_setup_themeでOK）
|
1 2 3 4 5 6 7 |
if (!function_exists('setup_my_theme')): function setup_my_theme() { add_theme_support('post-thumbnails'); } endif; add_action('after_setup_theme', 'setup_my_theme'); |
場合によっては特定の投稿タイプのみアイキャッチを有効にしたい時もある。そんな時は引数を追加してやる。
|
1 2 |
add_theme_support('post-thumbnails', array('post')); // 投稿のみ add_theme_support('post-thumbnails', array('page')); // 固定ページのみ |
こうしてアイキャッチ機能を有効にすると、投稿作成画面の下の方にアイキャッチ画像を設定する欄が現れる。
これで第一ステップは終わり！次はアイキャッチを並べてみよう。
アイキャッチ画像を呼びだす
投稿や固定ページのタイトルを呼び出す時と同じくアイキャッチ画像呼び出し用のテンプレートタグが用意されている。the_post_thumbnailだ。これはimg要素を呼び出すものであり、img要素に付与する属性/値や画像サイズを指定もできる。
アイキャッチ画像を表示する
まずは単純にアイキャッチ画像を呼び出してみる。index.phpか、アイキャッチを表示させたいファイルでthe_post_thumbnailを呼びだそう。例として、以前WordPressテーマの作り方を解説した際に使ったものを流用する。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
~~ 省略 ~~ <?php $paged = (get_query_var('paged')) ? get_query_var('paged') : 1; ?> <?php $posts = get_posts(array( 'posts_per_page' => 3, 'paged' => $paged)); ?> <?php foreach ($posts as $post) : setup_postdata($post); ?> <div class="blog-post"> <?php the_post_thumbnail('thumbnail') ?> </div> <?php endforeach; ?> <?php wp_reset_postdata(); ?> ~~ 省略 ~~ |
これでアイキャッチ画像を一覧表示できた。
アイキャッチ画像のサイズを変える
このアイキャッチ画像のサイズは変更できる。the_post_thumbnailにサイズキーワードかサイズを渡してあげればいい。サンプルの『thumbnail』という文字列はサイズキーワードにあたる。
どのようなキーワードやサイズを渡せるかをまとめておこう。
- thumbnail – サムネイルサイズで画像を表示する。デフォルトは150px × 150pxだが、set_post_thumbnail_sizeで変更できる。
- medium – 中サイズ
- large – 大サイズ
- full – 元のサイズ
- array(100, 100) – 他のサイズ。この場合は100px × 100px
- some keyword – add_image_sizeで追加したサイズキーワード
アイキャッチ画像のスタイルをいじる
場合によってはアイキャッチにクラスを付けてスタイルをいじりたい場合もある。そんな時はthe_post_thumbnailの第二引数を使う。
|
1 |
<?php the_post_thumbnail( 'thumbnail', array( 'class' => 'someclass' ) ); ?> |
あるいはデフォルトで付与されるクラスを使ってもいい。以下のクラスがimg要素に付く。
- img.wp-post-image
- img.attachment-thumbnail – thumbnailキーワードでサイズ指定した時のみ付く
- img.attachment-medium
- img.attachment-large
- img.attachment-full
アイキャッチ画像に投稿へのリンクを付ける
よくある、アイキャッチ画像をクリックしてコンテンツへ飛ぶ処理はどうすればいいだろうか？img要素をa要素で囲えば良い。このように。
|
1 2 3 |
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"> <?php the_post_thumbnail(); ?> </a> |
アイキャッチ画像の有り無しの判定
最後はthe_post_thumbnailから離れて、アイキャッチ画像が有るか無いかの判定について。アイキャッチ画像が無いとき、デフォルト画像を表示したいという時に役立つ。判定はhas_post_thumbnailで行う。
|
1 2 3 |
<?php if ( has_post_thumbnail() ) : ?> <?php the_post_thumbnail(); ?> <?php endif; ?> |
