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

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

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

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

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

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

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

フックとは

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

アクションフックフック

do_action( 'フック名' ); は、独自のコードを挿入するための場所を提供する
add_action( 'フック名', 'コールバック関数' ); を使って、アクションフックにコールバック関数を追加する

フィルターフック

apply_filters( 'フィルター名', 'フィルターする値' );は、コンテンツやデータを変更するための場所を提供する
add_filter( 'フィルター名', 'コールバック関数' );を使って、フィルターフックにコールバック関数を追加する

コールバック関数

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

なぜフックを使うのか

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

<?phpと?>

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

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

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

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

１．名前空間

// index.php から抜粋

use VektorInc\VK_Breadcrumb\VkBreadcrumb;

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

２．ヘッダー

// index.php から抜粋

lightning_get_template_part( 'header' );

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

３．サイトヘッダー

// 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要素そのものを出力しないようにします。

４．フロントページの場合

// 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の検索機能を利用するよいでしょう。

５．フロントページ以外の場合

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

// 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を読み込み、ページのタイトルを表示します。

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

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

TIPS

WordPressはクエリが実行される前にfunction.phpロードするため、function.phpにConditional Tags（条件付きタグ）を含めただけでは機能しません。

// ページのタイトルを「ショップ検索」に変更する

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;

} );

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

add_filter() 関数
- フィルターフックにコールバック関数を追加します
lightning_page_header_title_html フィルターフック
- add_filter() 関数の１つ目の引数です
- ページヘッダータイトルのHTMLを変更できます
フィルターフックのコールバック関数
- add_filter() 関数の２つ目の引数です
- 無名関数を使用しています
- フィルターが実行されるときに実行するコードを定義します
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）を表示します。

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

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

６．サイトボディ

// 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 ] -->

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

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

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()) {
        // フロアタームと対応する画像IDを関連付ける配列を設定
        $terms_to_attachments = array(
            'b2' => 1,
            'b1' => 2,
            '1f' => 3,
            '2f' => 4,
            '3f' => 5,
            '4f' => 6,
            'rf' => 7,
        );

        // クエリ変数 'shop_floor' を取得
        $shop_floor = get_query_var('shop_floor');

        // クエリ変数の値に対応する画像IDがある場合は画像を取得して出力
        if (isset($terms_to_attachments[$shop_floor])) {
            echo wp_get_attachment_image($terms_to_attachments[$shop_floor], 'large');
        }
    }
});

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

lightning_main_section_prepend アクションフックに無名関数を登録します。このアクションはメインセクションが表示される前に実行されます。
is_search()関数を使用して、現在のページが検索結果ページかどうかを確認し、以下の処理をします。
- shop_floor のターム（b2, b1, 1f, 2f, 3f, 4f, rf）と対応する画像IDを関連付ける配列を定義します。画像のIDを確認する方法はさまざまなため、ここでは省略します。
- 現在のクエリから shop_floor 変数の値を取得します。
- isset()関数を使用して、 shop_floor 変数の値に対応する画像IDが存在することを確認し、wp_get_attachment_image()関数を使用して画像を表示します。

７．フッター上部

// 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() は、サイドバーを表示するための関数です。

８．サイトフッター

// 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を読み込み、フッターナビゲーション、フッターウィジェット、コピーライトを表示します。

カスタマイズ３：「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' );

９．フッター

// index.php から抜粋

lightning_get_template_part( 'footer' );

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

参考サイト

できる！WordPressカスタマイズ #04 アクションフックを使ったカスタマイズに挑戦！ | 株式会社ベクトルが参考になります
また、ベクトレのLightning カスタマイズコースで学習できるのでオススメです！
URLのクエリパラメータ（GETパラメータ）を条件にページの挙動を変える

まとめ

たくさんのファイルが呼び出されていて複雑に感じますね。コードが何をしているか分からないときは、ChatGPTに解説してもらいながら読み解きました。３年前に初めてPHPファイルを見たときは、まったく理解できなかったのですが、少しずつ理解が深まっているのを実感しました。みなさんも、焦らずに学習を続けていけば、きっと自分のペースで理解できるようになります。一緒にレベルアップしていきましょう！