通常 WordPress 運営するブログやサイトでは、アイキャッチ画像は、思い思いのものを作成して、「アイキャッチ画像を設定」からアップロードして設定します。
アイキャッチを設定したほうが、ビジュアル的にもユーザビリティ的にも都合が良いですからね。
しかし、アイキャッチは設定したいけど「いちいち作成するのが面倒・そこまでアイキャッチには力入れていないし」という運営者さんも中にはいると思います。
また、特に知識のあまりないお客さんへ納品する「商業サイト」なんかだと、アイキャッチの設定を強要することはできないんだけど、アイキャッチは入れた方が良いよね・・・というジレンマもあったりします。
そんなアイキャッチ設定事情がある場合に役立つのが本記事の内容です。
今回は「WordPress 記事内の最初の画像をアイキャッチに指定して省略する方法」を紹介します。因みにプラグインは一切使いません！
記事最初に使用の画像を取得してアイキャッチにする手順
WordPress 投稿記事で一番最初に使われた画像をアイキャッチとして設定するには、以下のコードをテーマの function.php へ記述して、HTML へ呼び出し用のスニペットを記述します。
function.php へ記述するコード
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | //記事の最初の画像を取得 function catch_that_image() { global $post, $posts; $first_img = ''; ob_start(); ob_end_clean(); $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches); $first_img = $matches [1] [0]; if(empty($first_img)){ //Defines a default image $first_img = "ここには画像が無い時に表示される画像のURLを.jpg"; } return $first_img; } |
「ここには画像が無い時に表示される画像のURLを.jpg」の部分には、画像が何もない記事だった場合に表示させる代替アイキャッチ画像にする「画像 URL」を任意で入れてください。その他に変更する箇所はありません。
HTML へ記述する呼び出し用スニペット
記事最初の画像をアイキャッチ画像としてページに呼び出すためのスニペットです。このスニペットは「記事で最初に使われた画像の URL を呼び出す」ためのものです。
1 | <?php echo catch_that_image(); ?> |
実際に HTML へ記述した使用例
例えば、サムネイル付きの新着記事一覧のループがあったとしたら、このような感じで HTML へ記述して使います。
1 2 3 4 5 6 7 8 9 10 | <ul> <?php if(have_posts()): while(have_posts()): the_post(); ?> <li> <a href="<?php the_permalink(); ?>" > <img src="<?php echo catch_that_image(); ?>" alt="" width="290" height="218" /> </a> <p><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></p> </li> <?php endwhile; endif; ?> </ul> |
img タグの中の src に画像 URL としてスニペットを記述します。
作成した投稿記事一覧やシングルページのコードレイアウトに合わせてスニペットを利用してください。
ループスニペットと組み合わせた応用編
特定のカテゴリーだけを選んで、そのカテゴリーだけ投稿記事の最初画像をアイキャッチにする方法。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <ul> <?php $posts = get_posts('numberposts=3&category=4'); global $post; ?> <?php if($posts): foreach($posts as $post): setup_postdata($post); ?> <li> <a href="<?php the_permalink(); ?>" > <img src="<?php echo catch_that_image(); ?>" alt="" width="290" height="218" /> </a> <p><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></p> </li> <?php endforeach; endif; ?> </ul> |
カテゴリー ID:4 だけは投稿記事の最初の画像をアイキャッチとして利用して、新着投稿一覧のサムネイルを設定します。他のカテゴリーに関しては自分で設定したアイキャッチが表示されます。
ループのこの部分「$posts = get_posts(‘numberposts=3&category=4’);」の「category=4」の数字がカテゴリー ID です。
因みに「numberposts=3」は、いくつ投稿一覧に表示するからの数字です。
この応用は、例えば、納品したホームページの特定のカテゴリーをブログ用として利用したので、トップページにはそのカテゴリーをブログ新着記事一覧として表示させたい…などの場合に役に立ちます。
あとがき
本記事の方法は、知識のあまりない、または面倒くさがりなクライアントさんへ納品したホームページに対してよく設定します。
自動でアイキャッチが設定されるものですから、アイキャッチを利用してくれないクライアントに対しては絶大な効果となります！
使い方によっては、いろいろ重宝する PHP なので、「これだっ！」と思われたならぜひぜひお試しください。
