WordPressのテーマには、記事ごとにアイキャッチ画像を設定できる機能が備わっています。通常、記事を作成する際には、アイキャッチ画像を手動で選択する必要があります。しかし、毎回アイキャッチ画像を設定するのは手間がかかり、画像を忘れることもあります。
そこで、記事内の最初の画像を自動的にアイキャッチ画像として設定する方法を紹介します。これにより、記事内の最初の画像がアイキャッチ画像として表示され、ブログの外観が向上します。
サンプルコード
functions.phpファイルに以下のコードを追加します。このコードは、記事内の最初の画像をアイキャッチ画像として設定する役割を果たします。
function set_first_image_as_featured_with_default($content) {
global $post;
$pattern = '/<img(.*?)src=[\'"](.*?)[\'"](.*?)>/i';
preg_match($pattern, $content, $matches);
if (isset($matches[2])) {
$image_url = $matches[2];
$image_id = attachment_url_to_postid($image_url);
if ($image_id) {
set_post_thumbnail($post->ID, $image_id);
}
} else {
// デフォルト画像のURLを指定
$default_image_url = 'URL-TO-YOUR-DEFAULT-IMAGE.jpg';
// デフォルト画像をアイキャッチ画像として設定
$default_image_id = attachment_url_to_postid($default_image_url);
if ($default_image_id) {
set_post_thumbnail($post->ID, $default_image_id);
}
}
return $content;
}
add_filter('the_content', 'set_first_image_as_featured_with_default');
コードを追加したら、変更を保存してfunctions.phpファイルをアップロードまたは更新します。
これで、新しい投稿を作成する際、最初の画像が自動的にアイキャッチ画像として設定されるはずです。また、記事内に画像がない場合、デフォルト画像がアイキャッチ画像として表示されます。デフォルト画像のURLを設定する際は、独自のデフォルト画像を指定してください。
この方法を使用することで、アイキャッチ画像の設定を効率化し、ブログの外観を向上させることができます。 WordPressの機能を最大限に活用して、魅力的なコンテンツを提供しましょう。
よくある質問（FAQ）
Q. WordPressで記事の本文中の最初の画像をアイキャッチ画像として自動設定するにはどうすればよいですか？
A. post_thumbnailが設定されていない場合に本文から最初のimg要素を取得します：
if(!has_post_thumbnail()){ preg_match("<img.+?src=['\"](.+?)['\"].*?>", get_the_content(), $m); if($m){ echo "<img src=\"" . esc_url($m[1]) . "\">"; } }Q. アイキャッチが未設定の場合のデフォルト画像を設定するにはどうすればよいですか？
A. get_post_thumbnail_id()が0の場合にデフォルト画像を返します：
function get_thumbnail_url($id){ $thumb = get_post_thumbnail_id($id); return $thumb ? wp_get_attachment_image_url($thumb, "medium") : get_template_directory_uri()."/images/no-image.png"; }Q. 一覧ページで全記事にアイキャッチ画像を表示する際のパフォーマンス対策は？
A. lazy loading（
loading="lazy"）を使います。WordPressはPHP 5.6以降でlazyloadingを自動付与します。wp_get_attachment_image()は自動でloading=”lazy”を追加します。一覧ページで不要な画像サイズを読み込まないようにサイズ指定（”thumbnail”等）します。