前回以下のページで個別ページでアイキャッチ画像の表示/非表示を切り替えるためのプラグインを紹介したもののうまくいかなかった宿題への対応ページです。

本ページの内容をざっくりいうと、以下のような仕様で実装可能です。

  • 投稿・固定ページの編集画面にアイキャッチ画像を非表示にするかどうかのチェックを入れるメタボックスを追加する
  • チェックが入っているかどうかをカスタムフィールド値として保存する
  • カスタムフィールド値によって、フロントエンドでアイキャッチ画像を表示/非表示させる
  • (おまけ)本文内に挿入した投稿リスト系のブロックで影響が出ないようにする

アイキャッチ画像の自動挿入のときと比べてちょっとたくさんのコードが必要ですが、形になりましたので紹介しておきます。

本ページの方法は、アイキャッチ画像の出力そのものを制御するものではなく、CSSで非表示にする簡易的な方法です。完全に出力しないようにする方法についてはご自身で検索などしてお調べください

本ページは、以下で配布している独自プラグイン【Hima Art Utility】に搭載している機能の1つを、Twenty Twenty-Twoテーマの子テーマへ追加しても動作するようにしたコードを紹介しています。

基本的にTT2テーマでのみ動作チェックをしていますので、他のブロックテーマ・クラシックテーマでは調整が必要だったり、動作しない可能性があります

個別ページでアイキャッチ画像の表示/非表示を切り替える仕組みの作り方

今回のカスタマイズで実現できること(サンプル)

まずは今回のカスタマイズで実際にページ表示がどうなるのか?を本ページのスクリーンショットを使って紹介します。

現在このページは、アイキャッチ画像ありで表示させています(今ご覧になっている形です)

それを、本ページの方法で非表示にしたのが以下の状態です。

【TT2】特定の投稿や固定ページで、個別ページのアイキャッチ画像だけを非表示にする方法|Twenty Twenty-Two (TT2)のカスタマイズ情報

アイキャッチ画像が非表示になってますね。この機能を実装しようというわけです。

ちなみに、表示/非表示に関わらず、トップページの一覧(クエリーループブロック)では、下図赤枠のようにきちんとアイキャッチ画像が表示されています(実際にトップページを表示していただければとも思ったのですが、投稿が増えていくと埋もれてしまうのでスクショにしてあります)。

【TT2】特定の投稿や固定ページで、個別ページのアイキャッチ画像だけを非表示にする方法|Twenty Twenty-Two (TT2)のカスタマイズ情報

例えば、ページ冒頭に動画を入れたものなどは、アイキャッチ画像の下にすぐ動画が表示されるので、ちょっとうるさい感じになってしまうのを防げたりして、個人的にはいい機能なんじゃないかと思ってます(笑)。

この機能を気に入ってくれた方、早速進めていきましょう!!

【前準備】個別コンテンツのテンプレートにあるアイキャッチ画像に追加CSSクラスを設定する

冒頭の仕様リストの最後の項目に対応するための事前準備です。

投稿や固定ページ本文に「最近の投稿」「クエリーループ」といった投稿リスト系のブロックを絶対に使わないという方は、本作業の必要はありません

テーマエディターを開いて、「単一(個別投稿)」「固定ページ」テンプレートそれぞれのアイキャッチ画像ブロックへ「追加CSSクラス」欄から「ha-fimage」というクラスを追加します。

クラスは何でもいいですが、本ページでは「ha-fimage」を追加したものとして解説します

編集画面に非表示にするためのスイッチを設ける

「アイキャッチ画像を表示しない」という項目にチェックを入れることができるメタボックス(編集画面などに表示される設定パネル)を追加します。

以下のコードを子テーマのfunctions.phpへ追加するか、独自プラグインのプログラムとして追加します。

/********** 編集画面へアイキャッチ画像非表示のスイッチを表示し、更新する **********/
/*** メタボックスの出力 ***/
if ( !function_exists( 'sample_post_hide_featured_image' ) ){
function sample_post_hide_featured_image(){
	add_meta_box( 'hide_fimage_meta_box',__('アイキャッチ画像の表示',''), 'sample_hide_fimage_meta_box_in','post', 'side', 'high' );
	add_meta_box( 'hide_fimage_meta_box',__('アイキャッチ画像の表示',''), 'sample_hide_fimage_meta_box_in','page', 'side', 'high' );
}
}
add_action( 'admin_menu', 'sample_post_hide_featured_image' );

/*** メタボックスに表示させる内容とデータ ***/
if ( !function_exists( 'sample_hide_fimage_meta_box_in' ) ){
function sample_hide_fimage_meta_box_in(){
	global $post;

/* チェックボックス(アイキャッチ非表示)のカスタムフィールド呼び出し */
$hide_fimage = get_post_meta($post->ID,'hide_fimage',true);
if( $hide_fimage == 1 ) {
$hide_fimage = "checked";
} else {
$hide_fimage = "/";
}

$hide_fimage_title=__('アイキャッチ画像を非表示にする','');
$hide_fimage_detail = __('チェックを入れることで、個別ページでアイキャッチ画像を表示しないようにできます','');
	echo '<div style="">
	<input type="checkbox" name="hide_fimage" value="1" ' . $hide_fimage . '>
		<span style="">'.$hide_fimage_title.'</span>
		<p style="margin-top:8px;background:red;color:#fff;padding:8px;border-radius:4px;">'.$hide_fimage_detail.'</p>
		</div>';

}
}


/*** 内容を更新する ***/
if ( !function_exists( 'sample_save_post_hide_fimage_custom_fields' ) ){
function sample_save_post_hide_fimage_custom_fields( $post_id ) {
	if(defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return $post_id;
	if(isset($_POST['action']) && $_POST['action'] == 'inline-save') return $post_id;

	if(!empty($_POST['hide_fimage']))
		update_post_meta($post_id, 'hide_fimage', $_POST['hide_fimage'] );
		else delete_post_meta($post_id, 'hide_fimage');

	}
}

if ( !function_exists( 'sample_post_hide_fimage_validate_transition_post_status' ) ){
function sample_post_hide_fimage_validate_transition_post_status($new_status, $old_status, $post) {
	if (($old_status == 'auto-draft'
	|| $old_status == 'draft'
	|| $old_status == 'pending'
	|| $old_status == 'future')
	&& $new_status == 'publish') {
	return $post;
	} else {
	add_action('save_post', 'sample_save_post_hide_fimage_custom_fields');
	}
	}
}
add_action('transition_post_status', 'sample_post_hide_fimage_validate_transition_post_status', 10, 3);

コードの追加が問題なく終わったら、何でもいいので投稿の編集画面を開いてみてください。

以下のような設定パネル(メタボックス)がブロック設定の中に表示されます(表示の縦位置は環境によってこ異なりますが移動できます)。

【TT2】特定の投稿や固定ページで、個別ページのアイキャッチ画像だけを非表示にする方法|Twenty Twenty-Two (TT2)のカスタマイズ情報

一度チェックを入れて保存後、画面をリロードし、カスタムフィールドに「hide_fimage」というフィールド名で、値が「1」になっていること、また、チェックを外して保存後、画面をリロードして「hide_fimage」がなくなっていることを確認ください。

投稿編集画面へのカスタムフィールドパネルの表示方法は、本ページのようなカスタマイズをされる方ならご存じかと思いますので割愛します

コードの簡単な解説

コードは大きく以下の4つで成り立っています(上記コードの上から順にまとまっているのでわかると思います)。

  • 投稿(固定ページ)編集画面に設定パネル(メタボックス)を表示する
  • メタボックス内に説明と、チェックを入れるための項目を表示する
  • 編集画面を開いたときに、チェックの有無の値があるかどうかに従って、項目上のチェックの有無を再現する
  • 「下書き保存」「更新」「公開」ボタンをクリックしたら、チェックの有無によって値をカスタムフィールドに書き込む(チェックがない場合はフィールドを削除する)

コードをよく見ていただくとわかりますが、このコードで、「hide_fimage」というカスタムフィールド名で、チェックが入っている時は「1」を格納、入っていなければフィールドごと削除するようになっています。

投稿編集画面などにカスタムフィールドの値を云々するメタボックスを設置するときは、上のコードが一通りの形になります

スイッチがONの場合にアイキャッチ画像を非表示にする

スイッチがON(「hide_fimage」フィールドの値が「1」)のときは、アイキャッチ画像を非表示にする(display:none)スタイルコードを出力するコードを、テーマのfunctions.phpまたは自作テーマのプログラムへ追加します。

前準備を行っていない場合

冒頭の方で書いた「個別コンテンツのテンプレートにあるアイキャッチ画像に追加CSSクラスを設定する」の作業を行っていない方は、以下のコードを使用します。

/** アイキャッチ画像非表示の場合、スタイルをインラインで出力 **/
if ( !function_exists( 'sample_hide_featured_image_style_css_init' ) ){
function sample_hide_featured_image_style_css_init(){
$custom_css = "
body.single .wp-block-post-featured-image img,
body.page .wp-block-post-featured-image img
{
display:none;
}
";

wp_add_inline_style( 'sample-front-style', $custom_css );//インラインでCSS出力
}
}
add_action('wp_enqueue_scripts','sample_hide_featured_image_style_css_init');

先ほど書いた通り、この方法では、投稿や固定ページ内に投稿一覧系のブロックがある場合は、その部分のアイキャッチ画像も非表示になってしまうかもしれません。

前準備を行っている場合

冒頭の方で書いた「個別コンテンツのテンプレートにあるアイキャッチ画像に追加CSSクラスを設定する」の作業を行い、「ha-fimage」というクラスを追加した場合には、以下のコードを使用します。

/** アイキャッチ画像非表示の場合、スタイルをインラインで出力 **/
if ( !function_exists( 'sample_hide_featured_image_style_css_init' ) ){
function sample_hide_featured_image_style_css_init(){
$custom_css = "
.ha-fimage
{
display:none;
}
";

wp_add_inline_style( 'sample-front-style', $custom_css );//インラインでCSS出力
}
}
add_action('wp_enqueue_scripts','sample_hide_featured_image_style_css_init');

終わったら、どれかの投稿でスイッチを入れた時、外したときにきちんと動作するかを確認して実装完了です。

後述

これで以下のやりたかったことは達成できました(不都合はあるかも..)。

  • アイキャッチ画像は何が何でも設定される
  • 個別ページではアイキャッチ画像を表示しないようにできる
  • 一覧では必ずアイキャッチ画像が表示され、デザインが崩れることはない

アイキャッチ画像の設定を強制する方法については、冒頭でも紹介した以下のページを参照ください。

ブロックテーマでもfunctions.phpやstyle.cssは必要なのかも..

最新のTT3(Twenty Twenty-Three)では、もうすでにfunctions.phpはなくなってしまっているようですが、これはおそらく今後の開発の意志として、ブロック上でできないことをなくしていきたいということだと私は認識しています。

ただ、今回の方法もそうですが、いくらその場で見たまんまを再現できるブロックテーマとはいえ、こうしたカスタムコードを書くことは多いと思いますから、子テーマの導入と有効化は、ブロックテーマこそ必要なのではないかと常々思います(文末でTT2テーマ用の子テーマの配布ページを案内してますのでよかったらどうぞ)。

ブロックエディターでは既存パネルへの項目追加が難しい..

クラシックエディタ(旧来のコード形式の編集画面)では、既存のパネル(本ページでいえばアイキャッチ画像のパネル)に、新たに項目を追加したり説明を追加したりすることが結構簡単にできたのですが、ブロックエディターではそうはいかないようです。

検索して現存するほとんどの紹介ページがクラシックエディタに対応する項目追加の方法で、ブロックエディター用になっているのはほんのわずか、しかもスクリプトを使用するので、私には手が出せませんでした。

今回は別のパネル(メタボックス)を追加して制御する方法としましたが、アイキャッチ画像項目の中に追加..というのも挑戦してみるとよいかも知れません(私は今回の方法で満足しましたのでこれ以上は深堀りしません..)。