投稿アーカイブ・検索結果一覧・404ページにアイキャッチ画像を表示するカスタマイズ方法

投稿のアーカイブ（一覧）ページや検索結果一覧ページ、404ページのヘッダーにアイキャッチ画像を表示するカスタマイズ方法について紹介します。

※このカスタマイズにはyStandard v4.16.0以上が必要になります。

投稿アーカイブページにアイキャッチ画像を表示する

投稿アーカイブページにアイキャッチ画像を表示するサンプルコードです▼

// 投稿アーカイブページにヘッダーアイキャッチ画像を表示.
add_filter(
	'ys_get_header_post_thumbnail',
	function ( $thumbnail ) {
		// 投稿アーカイブページの場合に画像(img)タグを返す.
		if( is_home() ) {
			return '<img src="[画像URL]" alt="[画像alt]" />';
		}
		// 変更しない場合はnullを返す.
		return null;
	}
);

フィルターフックys_get_header_post_thumbnailを使い、投稿アーカイブページの時に画像タグを返すと、ヘッダーアイキャッチ画像を表示するためのHTML等を生成します。

※「[画像URL]」「[画像alt]」は適宜変更してください。

is_home()で条件分岐をする場合、「ホームページの表示」設定が「最新の投稿」になっている場合はTOPページにも画像が表示されます。

TOPページを除外したい場合は! is_front_page()などでTOPページを条件から除外します。

検索結果一覧にアイキャッチ画像を表示する

検索結果一覧ページにアイキャッチ画像を表示するサンプルコードです▼

// 検索結果一覧ページにヘッダーアイキャッチ画像を表示.
add_filter(
	'ys_get_header_post_thumbnail',
	function ( $thumbnail ) {
		// 検索結果一覧ページの場合に画像(img)タグを返す.
		if( is_search() ) {
			return '<img src="[画像URL]" alt="[画像alt]" />';
		}
		// 変更しない場合はnullを返す.
		return null;
	}
);

404ページにアイキャッチ画像を表示する

404ページにアイキャッチ画像を表示するサンプルコードです▼

// 404ページにヘッダーアイキャッチ画像を表示.
add_filter(
	'ys_get_header_post_thumbnail',
	function ( $thumbnail ) {
		// 404ページの場合に画像(img)タグを返す.
		if( is_404() ) {
			return '<img src="[画像URL]" alt="[画像alt]" />';
		}
		// 変更しない場合はnullを返す.
		return null;
	}
);

カスタム投稿タイプのアーカイブページにアイキャッチ画像を表示する

カスタム投稿タイプの一覧ページについてはこちらのマニュアルをご覧ください▼