VK Filter Search の特殊な設置について


こちらの情報は基本機能で出来ない場合の対応カスタマイズです。まずは VK Filter Search / VK Filter Search Pro の使い方・設定できる事を把握した上でお試しください。

検索結果ページの任意の場所に VK Filter Search を設置する

VK Filter Search で作成した検索フォームから検索した検索結果画面において、検索結果の上にも自動的に VK Filter Search のフォームを表示する事は可能です。

しかし、検索結果の投稿の上ではなく、任意の場所に VK Filter Search を配置したい場合は少し注意が必要です。

ブロックテーマの場合

表示したい箇所に「検索結果フォーム」ブロックを配置すればそこに表示されます。

クラシックテーマの場合

テンプレートファイルなどの改変が必要です。とは言っても、ご利用のテーマ名と、フォームを表示したい場所のアクションフック名を指定するだけです。

テーマフォルダ名とアクションフックの指定

例えばテーマのフォルダ名が my_theme だったとして、 フォームを表示したいアクションフック名が sidebar_top だった場合、子テーマの functions.php やカスタマイズ用のPHPファイルなどに以下を記載してください。

add_filter(
	'vkfs_theme_hook_array',
	function( $theme_hook_array ) {
		// 対象のテーマのフォルダ名と
		$theme_folder_name = 'my_theme';
		// 表示したい場所のアクションフック名
		$display_hook_name = 'sidebar_top';
		$theme_hook_array[] = array( $theme_folder_name => $display_hook_name );
		return $theme_hook_array;
	}
);
STEP
1
アクションフックの設定

表示したい場所にアクションフックがない場合はテーマファイルに直接アクションフックを設置します。

search.php の中に表示したい場合は、該当箇所に以下のように記載してください。

<?php do_action('sidebar_top');?>

アクションフックについては下記を参照ください。

できる!WordPressカスタマイズ #04 アクションフックを使ったカスタマイズに挑戦!

WordPressの拡張性を高める機能にアクションフックとフィルターフックがあり、これがあったから世界中で使われる事になったと言っても過言ではない重要な特徴の一つです。今回はまずはアクションフックについて解説していきます。

STEP
2

クラシックテーマのPHPファイルにフォームの表示指定を直接書き込む

VK Filter Search は投稿コンテンツエリアやウィジェットエリアに「ノーコード」で配置する事を前提としているので、テンプレートファイルに直接記載して表示するような関数などは用意していません。

ユーザーが最初に検索するフォームを設定したいテンプレートファイルに、固定ページや投稿の本文表示用コードやウィジェットエリアがない場合は、テーマ内にウィジェットエリアなどを作成し、そのウィジェットエリアなどに Call Filter Search Form ブロックを配置していただくのが望ましいのですが、どうしてもテンプレートに直接記載したいという場合は以下の方法で実現できます。

検索フォームの登録

まずは通常通り、投稿タイプ VK Filter Search でフォームを登録してください。

STEP
1

検索フォームをテンプレートファイルから呼び出す

以下のコードでテンプレートファイルに直接表示する事ができます。

		$form_title = 'フォームタイトル'; // 投稿タイプ VK Filter Search に登録したフォームのタイトル名
		$query      = new WP_Query(
			array(
				'post_type' => 'filter-search',
				'name'     => $form_title,
			)
		);
		if ( $query->have_posts() ) {
			$post = $query->posts[0];
			if ( ! empty( $post->post_content ) ) {
				echo apply_filters( 'the_content', $post->post_content );
			}
		}
		wp_reset_postdata(); // カスタムクエリ後にグローバル$postオブジェクトをリセット
STEP
2

このデモサイトは Vektor,Inc. のテーマとプラグインで構築されています。ご購入や詳細情報は下記のリンクもご参考ください。

PAGE TOP