WordPressで各記事内の1枚目の画像を一覧表示させるやり方を解説します。
その際には自動リサイズされるようにします。
完成形のコードは以下のようになります。
まずはすべてコピーしてテンプレートファイル内に貼り付けると間違いがないでしょう。
ちなみに、以下のコードはサブループでの出力方法になります。
WordPressのメインループとサブループの違いについては以下のページを参考にしてください。
WordPressのメインクエリやメインループとは？サブとの違いは何か？
<ul>
<?php
$args = array(
'posts_per_page' => '5',
'post_type' => 'post',
);
$custom_post = get_posts( $args );
?>
<?php foreach( $custom_post as $post ): setup_postdata( $post ); ?>
<?php
$args = array(
'post_parent' => $post->ID,
'post_type' => 'attachment',
'post_mine_type' => 'image',
'order' => 'ASC',
'posts_per_page' => 1,
);
$attachments = get_children( $args );
?>
<?php foreach( $attachments as $attachment ): ?>
<?php $url = wp_get_attachment_image_src( $attachment->ID, 'sidebar-thumbnail' ); ?>
<?php $alt = esc_html( get_post_meta( $attachment->ID, '_wp_attachment_image_alt', true ) ); ?>
<li><img src="<?php echo $url[0]; ?>" alt="<?php echo $alt; ?>" /><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
<?php endforeach; ?>
<?php endforeach; ?>
<?php wp_reset_postdata(); ?>
</ul>
ただし、コピーして貼り付けただけではこのコードは効果がありません。
なぜなら、アップロードされた画像をリサイズ処理するためのコードをfunctions.phpで設定する必要があるからです。
(その詳細は後述の「一覧表示させる画像の大きさ(解像度)の設定をする」を参考にしてください)
このページでは上記コードの作成手順の流れと各部分の解説をしていくので、設置するサイトに合わせて必要な部分の設定を変更してください。
上記コードを参照しながら読み進めると理解しやすいかと思います。
まず完成形のHTMLを作成する
まず、完成形は以下のようなHTMLにするとします。
記事の数だけ、以下のli要素が増えていくとお考えください。
これはこのブログのサイドバー部分にある記事リストとほぼ同じHTMLになります。(「提供サポートなど」や「メールフォーム」の一覧部分)
<ul>
<li><img src="画像のURL" alt="" /><a href="投稿ページのURL">投稿ページのタイトル</a></li>
</ul>
スマホだと画面の横幅が狭いため上記コードが変な位置で改行されてしまっている場合は、PCやタブレットで見ると改行がなくなって見やすくなります。
または、上記コードをすべてコピーしてテキストエディタなどに貼り付けると見やすくなります。
各投稿ページのタイトルとリンクを表示させる
記事一覧を表示させたい部分のテンプレートファイル内に以下のコードを記述する。
<ul>
<?php
$args = array(
'posts_per_page' => '5',
'post_type' => 'post',
);
$custom_post = get_posts( $args );
?>
<?php foreach( $custom_post as $post ): setup_postdata( $post ); ?>
<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
<?php endforeach; ?>
<?php wp_reset_postdata(); ?>
</ul>
上記コードでは投稿ページを最新5件表示させています。
get_postsで記事を取得し、それをforeachによって繰り返し表示させているわけです。
この繰り返し内ではthe_title()が記事タイトル名、the_permalink()がその記事のURLを出力しています。
あとはその周囲をli要素でマークアップしています。
これにより出力されるHTMLは以下のようになります。
出力される記事の順番は後から変更できますが、初期状態(上記コード)では最新記事からとなります。
<ul>
<li><a href="投稿ページ1のURL">投稿ページ1のタイトル</a></li>
<li><a href="投稿ページ2のURL">投稿ページ2のタイトル</a></li>
<li><a href="投稿ページ3のURL">投稿ページ3のタイトル</a></li>
<li><a href="投稿ページ4のURL">投稿ページ4のタイトル</a></li>
<li><a href="投稿ページ5のURL">投稿ページ5のタイトル</a></li>
</ul>
一覧表示させる画像の大きさ(解像度)の設定をする
次に、一覧表示させる画像の大きさ(解像度)の設定をします。
WordPressの機能によって画像をリサイズしてから一覧部分に表示させるため、どのようなサイズの画像をアップロードしても最適なサイズとしてページに表示されることになります。
今回はサイドバー表示用の画像ですので、あまり大きいサイズにし過ぎても意味がありません。
仮に「100ピクセル×100ピクセル」とする場合、functions.phpにて新たなサイズを設定するために以下のコードを記述します。
// アイキャッチ画像を有効化
add_theme_support( 'post-thumbnails' );
// メディアのサイズを追加
add_image_size( 'sidebar-thumbnail', 100, 100, true );
上記のadd_image_sizeの第1引数には「その画像サイズの設定名」を、第4引数には「画像の切り抜きを行うか否かを指定」をtrue(切り抜きする)またはfalse(切り抜きしない)で設定します。
指定しない場合の初期値はfalse(切り抜きしない)になります。
参考ページ：関数リファレンス/add image size – WordPress Codex 日本語版
各投稿ページの画像を取得するコードを記述する
次に、前述のコードの中の繰り返し表示をしている部分、foreachの中で各投稿ページの画像を取得するためのコードを記述する。
foreachの開始直後、つまり出力するli要素の前に記述してください。
<?php
$args = array(
'post_parent' => $post->ID,
'post_type' => 'attachment',
'post_mine_type' => 'image',
'order' => 'ASC',
'posts_per_page' => 1,
);
$attachments = get_children( $args );
?>
上記のコードによって各投稿ページ内の1枚目の画像が取得できます。
この時点ではまだ「プログラム上で画像データを取得」するだけですので、ページ上に表示はされません。
この後にこれを「HTMLとして出力」するコードが必要になります。
参考ページ：関数リファレンス/get children – WordPress Codex 日本語版
画像をHTMLとして出力する
そして、上記コードに続いて以下のように記述し、各画像をHTMLとして出力する。
<?php foreach( $attachments as $attachment ): ?>
<?php $url = wp_get_attachment_image_src( $attachment->ID, 'sidebar-thumbnail' ); ?>
<li><img src="<?php echo $url[0]; ?>" alt="" /><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
<?php endforeach; ?>
これにより、各投稿ページ内の1枚目の画像が表示されます。
参考ページ：関数リファレンス/wp get attachment image src – WordPress Codex 日本語版
この時点までのコードによって出力されているHTMLは以下のようになります。
<ul>
<li><img src="画像URL" alt="" /><a href="投稿ページ1のURL">投稿ページ1のタイトル</a></li>
<li><img src="画像URL" alt="" /><a href="投稿ページ2のURL">投稿ページ2のタイトル</a></li>
<li><img src="画像URL" alt="" /><a href="投稿ページ3のURL">投稿ページ3のタイトル</a></li>
<li><img src="画像URL" alt="" /><a href="投稿ページ4のURL">投稿ページ4のタイトル</a></li>
<li><img src="画像URL" alt="" /><a href="投稿ページ5のURL">投稿ページ5のタイトル</a></li>
</ul>
もし各画像のalt属性も表示させたい場合は、前述のコードのforeach内に以下のコードを追加し、
(挿入する場所はこのページ冒頭で紹介した完成形コードでご確認ください)
<?php $alt = esc_html( get_post_meta( attachment->ID, '_wp_attachment_image_alt', true ) ); ?>
出力するimg要素のalt属性の部分に以下のように追記すればOKです。
<img src="<?php echo $url[0]; ?>" alt="<?php echo $alt; ?>" />
Twitterでフォローする
