Next レッスン

Lightning のページヘッダーの表示要素を改変する

Lightning カスタマイズ Lightning のページヘッダーの表示要素を改変する

このレッスンの前に

このレッスンは以下のレッスンを理解している事を前提としています。

子テーマの準備

PHP入門

Lightning のヘッダーの下のページヘッダー部分の表示要素はフィルターフック lightning_page_header_title_html で改変する事ができます。

例えば以下のように書けば全てのページヘッダーが書き換わります。

 function my_lightning_page_header_title_html_custom( $page_header_title_html ) {
	return 'ページヘッダー';
}
add_filter( 'lightning_page_header_title_html', 'my_lightning_page_header_title_html_custom', 11 );

条件分岐を追加

例えばカスタム投稿タイプ「イベント（event）」を作成し、カスタム分類「イベントカテゴリー（event-cat）」を作ってあるサイトがあるとします。

その詳細ページのページヘッダーでは、Lightning 標準では投稿タイプ名「イベント」が表示されますが、イベントカテゴリー名を表示したい場合は以下のようになります。

function my_lightning_page_header_title_html_custom( $page_header_title_html ) {
	// 改変する場合の条件を指定.
	if ( 'event' === get_post_type() && is_single() ) {

		$post_type_name = get_post_type_object( 'event' )->labels->name;

		// カスタム分類 "event-cat" の情報を取得する
		$event_cats = get_the_terms( get_the_ID(), 'event-cat' );

		// イベントの詳細ページに "event-cat" が設定されているか確認する
		if ( $event_cats && ! is_wp_error( $event_cats ) ) {
			$event_cat_names = array();

			// "event-cat" の各タームの名前を取得する
			foreach ( $event_cats as $event_cat ) {
				  $event_cat_names[] = $event_cat->name;
			}
		}
		// 表示内容
		$page_header_title_html  = '';
		$page_header_title_html .= '<div class="header-sub-test">' . $post_type_name . '</div>';
		$page_header_title_html .= '<div class="page-header-title">' . $event_cat_names[0] . '</div>';

	}
		return $page_header_title_html;
}
add_filter( 'lightning_page_header_title_html', 'my_lightning_page_header_title_html_custom', 11 );