このページでは、投稿や固定ページなど、ページタイトルの表示方法を変えたい方向けに解説しています。

どの箇所が変更できるのか

文章で書くよりも、画像で見たほうが多少はわかりやすいと思います（今回のフック説明をするのはかなり難しいと感じています・・・）。

例えば、下の画像ではページタイトルを表示する方法として header 要素を使っています。

この header 要素には、Nishiki Pro のアイキャッチのレイアウト設定によって、様々な属性が追加されます。

上の画像の場合は「class」要素に「manual eye-catch-background」の値が追加されていますね。

今回解説するフックを使えば、その header 要素に追加する属性を変更できます。

「ん？これができることで何がどうメリットあるの？」と疑問に思う方もいるかもしれませんが、例えば、

• 特定のカスタム投稿ページで、タイトル下に敷かれているアイキャッチ画像を変更したい
• 特定の投稿 または 固定ページのみタイトルの高さやカラーを変更するために、独自の class をつけたい

などに使えると思います。他にもアイデア次第でやれることがたくさんありますね。

僕も制作案件で実際にこのフックを使っていますが、使いこなせるようになるとかなり便利です。

ぜひ挑戦してみてください。

サンプルコード

というわけで、さっそくですが、サンプルコードを紹介します。

下のコードは「nishiki_pro_page_header_attributes」フィルターを使って、特定の投稿タイプが「manual」の投稿ページの場合、ページタイトルに「style」と「class」属性を追加（指定）しています。

// ページタイトルに属性を追加（ class + style ）
if( ! function_exists( 'nishiki_pro_custom_page_header_attributes' ) ) {
 function nishiki_pro_custom_page_header_attributes( $attr ) {

  //投稿タイプが「manual」の投稿ページだけ処理
  if( is_single() && get_post_type() === 'manual' ){

   // 画像の URL を指定します。投稿のアイキャッチ画像を取得して入れるのもいいですね
   $image = 'https://〇〇〇〇.jpg';

   // レイアウト変更用の独自 Class を指定
   $layout = ' single-manual-title-header';

   $class = ' class="' . esc_attr( get_post_type() ) . $layout . '"';
   $style = ' style="background-image:url(' . esc_url( $image ) . ');"';

   $attr = $class . $style;
  }

  return $attr;

 }

 add_filter( 'nishiki_pro_page_header_attributes', 'nishiki_pro_custom_page_header_attributes', 20 );
}

重ねて書きますが、あくまでサンプルコードなので「nishiki_pro_page_header_attributes」フィルターを使って、要件に合わせてカスタマイズしてみてください。