WordPressで記事内の一番目の画像をアイキャッチ代わりに使用する
「アイキャッチ画像を指定せずに記事内の
画像をアイキャッチ代わりに表示できないか。」
というお話がありまして調査しました。
記事内の一番目の画像を取得してアイキャッチ代わりに使用する方法です。
方法その1
記事内の一番目の画像を取得
記事内の一番目の画像を取得するための下記のコードをfunctions.phpに記述。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
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)){ // 記事内で画像がなかった時のための画像を指定（ディレクトリ先や画像名称は任意） $first_img = esc_url(get_template_directory_uri()) . "/images/common/noImage.png"; } return $first_img; } |
アイキャッチ画像の有無で条件分岐
取得した画像をアイキャッチ代わりにサイトに表示するときのコードです。
テンプレートのphpファイルに記述します。
|
1 2 3 4 5 |
<?php if (has_post_thumbnail()) : ?> <?php the_post_thumbnail('thumbnail'); ?> <?php else : ?> <img src="<?php echo catch_that_image(); ?>" alt="" /> <?php endif ; ?> |
アイキャッチ画像が設定されている場合はそのままアイキャッチ画像を表示し、
アイキャッチ画像がない時は記事内の一番目の画像を表示するようになります。
方法その2
アイキャッチ画像がなかったら記事内の一番目の画像を取得し、さらに画像がなかったら定義した画像を表示する
方法その1ではアイキャッチ画像の有無で条件分岐をテンプレートファイル内で行っていました。
方法その2ではfunctions.php内の記述で条件分岐も行っております。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
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(has_post_thumbnail()) { $img_id = get_post_thumbnail_id(); $img_url = wp_get_attachment_image_src($img_id, 'thumbnail', true); $first_img = $img_url[0]; } if(empty($first_img)) { // アイキャッチ画像があればそちらを表示する if(has_post_thumbnail()) { $img_id = get_post_thumbnail_id(); $img_url = wp_get_attachment_image_src($img_id, 'thumbnail', true); $first_img = $img_url[0]; } else { // 記事内で画像がなかった時のための画像を指定（ディレクトリ先や画像名称は任意） $first_img = esc_url(get_template_directory_uri()) . "/images/common/noImage.png"; } } return $first_img; } |
テンプレートファイルには下記を記述します。
|
1 |
<img src="<?php echo catch_that_image(); ?>" alt="" /> |
▼参考にさせていただきました。ありがとうございました。
この記事の投稿者
