Lightningの検索結果ページをカスタマイズする

folder, file cabinet, office-146153.jpg

この記事は「応用編課題の絞り込み検索を実装してみよう」の続きです。

カスタマイズする内容は次の2つです。

  • 「検索結果」ページのタイトルを「ショップ検索」に変更する
  • 各フロアの検索結果を表示する際に、フロアの画像を表示する

Lightning バージョン 15.10.3 Generation 3 で使用されている「検索結果」ページのテンプレートファイルを直接編集せずに、HTMLを追加したりPHPを実行したりするために、フックを使ってカスタマイズします。

検索結果ページをカスタマイズするためのコードは、子テーマの「functions.php」に記述します。

それでは wp-content/themes/lightning/_g3/index.php を読み解いていきましょう。

フックとは

まず、フックについて理解しましょう。フックには2つの種類があります。

アクションフックフック

フィルターフック

コールバック関数

コールバック関数(Callback Function)とは、他の関数に引数として渡される関数のことです。その名の通り、呼び出されて実行される関数です。

なぜフックを使うのか

テーマファイルをカスタマイズする方法の一つとして、テンプレートファイルを子テーマのフォルダにコピーし、複製したファイルを編集する手法が一般的に知られていますが、この手法はお勧めできません。その理由は、親テーマがバージョンアップされた際、子テーマにコピーしたファイルには変更が反映されないからです。例えば、親テーマの index.php ファイルがバージョンアップで機能の追加や仕様変更が行われた場合を考えてみましょう。子テーマ内に同名の index.php ファイルが存在すると、親テーマのバージョンアップに関わらず子テーマのファイルが読み込まれてしまいます。これにより、新たに追加された機能が利用できない、またはページの表示が崩れるなどの問題が発生する可能性があります。

<?phpと?>

テンプレートファイル内でよく見かける <?php?> は、PHPタグです。この2つのタグの間にPHPコードを挿入し、HTMLコードと組み合わせて使います。

PHPコードは、動的なコンテンツの生成やWordPressの機能を利用するために使用されます。

検索結果ページのテンプレート

「検索結果」ページで使用されているテンプレートファイル index.php を見ていきましょう。

1.名前空間

// index.php から抜粋

use VektorInc\VK_Breadcrumb\VkBreadcrumb;

名前空間(Namespace)は、自分のコードと、PHPの組み込みまたはサードパーティのクラス/関数/定数の名前が衝突するのを防ぐための手段です。完全修飾名(Fully Qualified Name)を指定することで、どの名前空間内の要素を使用するのかを明示的に指定します。詳しくは、名前空間の概要名前空間の使用法: エイリアス/インポートを参照してください。

2.ヘッダー

// index.php から抜粋

lightning_get_template_part( 'header' );

lightning_get_template_part( 'テンプレート名' ); は、テンプレートパーツを読み込むための関数です。この場合、header.php が読み込まれます。htmlタグからbodyの開始タグまでのコードです。

3.サイトヘッダー

// index.php から抜粋

do_action( 'lightning_site_header_before', 'lightning_site_header_before' );
if ( apply_filters( 'lightning_is_site_header', true, 'site_header' ) ) {
	lightning_get_template_part( 'template-parts/site-header' );
}
do_action( 'lightning_site_header_after', 'lightning_site_header_after' );

サイトのロゴやヘッダーナビゲーションを表示します。

サイトヘッダー(headerタグ)の前後にアクションフックが用意されていて、ここに独自のコードを挿入できます。

もし lightning_is_site_header フィルターがtrueを返すなら、template-parts/site-header.php を読み込みます。このフィルターは、デフォルトでは表示が有効に設定されていますが、falseを返すようにすれば、テンプレートは読み込まれないので、サイトヘッダーを非表示にできるという仕組みです。

// サイトヘッダーを非表示にする

add_filter( 'lightning_is_site_header', '__return_false' );

__return_false() は、フィルターにfalseを返すのに便利な関数です。

TIPS

HTML要素を非表示にする際、CSSを使用することが一般的ですが、PHPでも非表示にできます。CSSを使用する場合、HTML要素はページに読み込まれますが、PHPを使う場合、HTML要素そのものを出力しないようにします。

4.フロントページの場合

// index.php から抜粋

if ( is_front_page() ) {
	if ( apply_filters( 'lightning_default_slide_display', true ) ) {
		LTG_G3_Slider::display_html();
	}
}

もし現在のページがフロントページで、lightning_default_slide_display フィルターがtrueを返すなら、LTG_G3_Slider クラスの display_html() メソッドを実行します。 display_html() メソッドは、_g3/inc/ltg-g3-slider/package/class-ltg-g3-slider.php 内で定義されています。

TIPS

関数やメソッドが定義されているファイルを探したい場合、GitHubのCode検索機能を使用すると直ぐに見つけることができます。ただし、この機能を利用するにはアカウントが必要です。山田講師が「VS CodeからWordPressを編集してみる」で解説されていように設定している場合は、VS Codeの検索機能を利用するよいでしょう。

5.フロントページ以外の場合

現在のページがフロントページではない場合、何をするかが、この2行の間に書かれています。

// index.php から抜粋

<?php if ( ! is_front_page() ) : ?>

<?php endif; ?>

5-1.ページヘッダー

// index.php から抜粋

do_action( 'lightning_page_header_before', 'lightning_page_header_before' );
if ( apply_filters( 'lightning_is_page_header', true, 'page_header' ) ) {
	lightning_get_template_part( 'template-parts/page-header' );
}
do_action( 'lightning_page_header_after', 'lightning_page_header_after' );

template-parts/page-header.php を読み込み、ページのタイトルを表示します。

カスタマイズ1:「検索結果」ページのタイトルを「ショップ検索」に変更する

_g3/template-parts/page-header.php には、lightning_page_header_title_html フィルターが用意されているので、ページヘッダーのタイトルを変更できます。

TIPS

WordPressはクエリが実行される前に function.php ロードするため、function.php にConditional Tags(条件付きタグ)を含めただけでは機能しません。
そのため、lightning_page_header_before フックを使い、ページヘッダーのテンプレートが読み込まれる前に、lightning_page_header_title_html フィルターにコールバック関数を追加します。これは不要なので、PHPコードとその解説を書き換えました。
// ページのタイトルを「ショップ検索」に変更する

add_filter( 'lightning_page_header_title_html', function( $page_header_title_html ){

	if ( is_search() ) {
		$page_header_title_html = '<div class="page-header-title">ショップ検索</div>';
	}

	return $page_header_title_html;

} );

このコードは「検索結果ページのページ ヘッダー タイトルをショップ検索に変更する」という機能を実現します。

  1. add_filter() 関数
    • フィルターフックにコールバック関数を追加します
  2. lightning_page_header_title_html フィルターフック
    • add_filter() 関数の1つ目の引数です
    • ページ ヘッダー タイトルのHTMLを変更できます
  3. フィルターフックのコールバック関数
    • add_filter() 関数の2つ目の引数です
    • 無名関数を使用しています
    • フィルターが実行されるときに実行するコードを定義します
  4. if 文
    • is_search() 関数を使用して、現在のページが検索結果ページかどうかをチェックします
    • 検索結果ページならば、ページ ヘッダー タイトル を「ショップ検索」に変更します

5-2.パンくずリスト

// index.php から抜粋

do_action( 'lightning_breadcrumb_before', 'lightning_breadcrumb_before' );
if ( apply_filters( 'lightning_is_breadcrumb_position_normal', true, 'breadcrumb_position_normal' ) ) {
	if ( apply_filters( 'lightning_is_breadcrumb', true, 'breadcrumb' ) ) {
		$vk_breadcrumb      = new VkBreadcrumb();
		$breadcrumb_options = array(
			'id_outer'        => 'breadcrumb',
			'class_outer'     => 'breadcrumb',
			'class_inner'     => 'container',
			'class_list'      => 'breadcrumb-list',
			'class_list_item' => 'breadcrumb-list__item',
		);
		$vk_breadcrumb->the_breadcrumb( $breadcrumb_options );
	}
}
do_action( 'lightning_breadcrumb_after', 'lightning_breadcrumb_after' );

特定の条件を満たす場合にのみパンくずリスト(breadcrumb)を表示します。

  1. lightning_breadcrumb_before アクションフックを使用して、パンくずリストの前にカスタムコードを挿入できます。
  2. lightning_is_breadcrumb_position_normal フィルターフックを通じて、通常の位置にパンくずリストを表示するかどうかを確認します。デフォルトでは表示が有効に設定されています。このフィルターを使用してカスタマイズできます。
  3. パンくずリストの表示が有効である場合、$vk_breadcrumb インスタンスを生成し、パンくずリストのオプションを設定します。次に、the_breadcrumb() メソッドを呼び出してパンくずリストを表示します。
  4. lightning_breadcrumb_after アクションフックを使用して、パンくずリストの後にカスタムコードを挿入できます。

詳しくは、/wp-content/themes/lightning/vendor/vektor-inc/vk-breadcrumb/src/VkBreadcrumb.php を参照してください。the_breadcrumb() メソッドは、このファイル内で定義されています。

6.サイトボディ

// index.php から抜粋

<?php do_action( 'lightning_site_body_before', 'lightning_site_body_before' ); ?>

<div class="<?php lightning_the_class_name( 'site-body' ); ?>">
	<?php do_action( 'lightning_site_body_prepend', 'lightning_site_body_prepend' ); ?>
	<div class="<?php lightning_the_class_name( 'site-body-container' ); ?> container">

		<div class="<?php lightning_the_class_name( 'main-section' ); ?>" id="main" role="main">
			<?php do_action( 'lightning_main_section_prepend', 'lightning_main_section_prepend' ); ?>

			<?php
			if ( apply_filters( 'lightning_is_main_section_template', true, 'main_section_template' ) ) {
				if ( lightning_is_woo_page() ) {
					lightning_get_template_part( 'template-parts/main-woocommerce' );
				} else {
					if ( apply_filters( 'lightning_is_singular', is_singular() ) ) {
						lightning_get_template_part( 'template-parts/main-singular' );
					} else {
						if ( is_404() ) {
							lightning_get_template_part( 'template-parts/main-404' );
						} else {
							lightning_get_template_part( 'template-parts/main-archive' );
						}
					}
				}
			}
			?>

			<?php do_action( 'lightning_main_section_append', 'lightning_main_section_append' ); ?>
		</div><!-- [ /.main-section ] -->

		<?php
		do_action( 'lightning_sub_section_before', 'lightning_sub_section_before' );
		if ( lightning_is_subsection() ) {
			if ( lightning_is_woo_page() ) {
				do_action( 'woocommerce_sidebar' );
			} else {
				lightning_get_template_part( 'sidebar', get_post_type() );
			}
		}
		do_action( 'lightning_sub_section_after', 'lightning_sub_section_after' );
		?>

	</div><!-- [ /.site-body-container ] -->

	<?php do_action( 'lightning_site_body_append', 'lightning_site_body_append' ); ?>

</div><!-- [ /.site-body ] -->

条件に応じて異なるテンプレートを読み込み、メインコンテンツとサイドバーを表示します。

カスタマイズ2:各フロアの検索結果を表示する際に、フロアの画像を表示する

lightning_main_section_prepend フックを使って、各階のフロアマップを表示してみましょう。

// カスタムクエリ変数 shop_floor を追加する

function zero1pg_query_vars( $qvars ) {
	$qvars[] = 'shop_floor';
	return $qvars;
}
add_filter( 'query_vars', 'zero1pg_query_vars' );

まずは、カスタムクエリ変数「shop_floor」を追加するための関数 zero1pg_query_vars( $qvars )query_vars フィルターフックに登録します。

クエリ変数(Query Variables)は、ウェブページのURLに含まれるパラメーターのことです。URLの「?」 以降の文字列です。キーと値のペア(キー=値)で指定され、複数のパラメーターは「&」で区切られます。

// 各フロアの検索結果を表示する際に、フロアの画像を表示する

add_action( 'lightning_main_section_prepend', function() {
	if ( is_search() ) {
		switch ( get_query_var('shop_floor') ) {
			case 'b2':
				?><img src="/floormap_B2.png"><?php
				break;
			case 'b1':
				?><img src="/floormap_B1.png"><?php
				break;
			case '1f':
				?><img src="/floormap_1F.png"><?php
				break;
			case '2f':
				?><img src="/floormap_2F.png"><?php
				break;
			case '3f':
				?><img src="/floormap_3F.png"><?php
				break;
			case '4f':
				?><img src="/floormap_4F.png"><?php
				break;
			case 'rf':
				?><img src="/floormap_RF.png"><?php
				break;
		}
	}
} );

次に、shop_floor というクエリ変数 の値に応じて適切なフロアマップ画像を表示します。

  1. lightning_main_section_prepend アクションフックに、無名関数を登録します。このアクションはメインセクションが表示される前に実行されます。
  2. is_search() 関数を使用して、現在のページが検索結果ページかどうかを確認します。
  3. 検索結果ページの場合、get_query_var('shop_floor') を使用して、クエリ変数 shop_floor の値を取得し、その値に応じて異なるフロアマップ画像を表示します。

7.フッター上部

// index.php から抜粋

<?php if ( is_active_sidebar( 'footer-before-widget' ) ) : ?>
<div class="site-body-bottom">
	<div class="container">
		<?php dynamic_sidebar( 'footer-before-widget' ); ?>
	</div>
</div>
<?php endif; ?>

フッター上部のウィジェット(footer-before-widge)を表示します。dynamic_sidebar() は、サイドバーを表示するための関数です。

8.サイトフッター

// index.php から抜粋

do_action( 'lightning_site_footer_before', 'lightning_site_footer_before' );
if ( apply_filters( 'lightning_is_site_footer', true, 'site_footer' ) ) {
	lightning_get_template_part( 'template-parts/site-footer' );
}
do_action( 'lightning_site_footer_after', 'lightning_site_footer_after' );

template-parts/site-foote.php を読み込み、フッターナビゲーション、フッターウィジェット、コピーライトを表示します。

カスタマイズ3:「Powered by ・・・」を非表示にする

_g3/template-parts/site-foote.php ファイルを見ると、コピーライトの表示には、lightning_the_footer_copyight() という関数が使用されていることが分かります。この関数は、_g3/inc/template-tags.php 内で定義されていて、「Powered by WordPress & Lightning Theme by Vektor,Inc. technology.」というテキストをカスタマイズするためのフィルター lightning_footerPoweredCustom が用意されています。

// 「Powered by ・・・」を非表示にする

add_filter( 'lightning_footerPoweredCustom', '__return_false' );

9.フッター

// index.php から抜粋

lightning_get_template_part( 'footer' );

footer.php を読み込み、bobyタグとhtmlタグを閉じます。

参考サイト

「Lightningの検索結果ページをカスタマイズする」への1件のフィードバック

  1. お世話になっております。

    カスタマイズ3:「Powered by ・・・」を非表示にする

    この部分でつまずいていました。

    _g3/template-parts/site-foote.php ファイルを見ると、コピーライトの表示には、lightning_the_footer_copyight() という関数が使用されていることが分かっていましたが、これを削除しても表示が消えなくて止まっていました。

    もう一つ深めて学ぶ必要があると感じています。

    勉強になります。

コメントする