女性起業家・フリーランスのWebサイトがつくれるWordPressテーマ「VALUE」WordPressテーマ「VALUE」
ワードプレステーマ別

TCDテーマGRAVITY:物件種別とエリアのみで検索可能にする方法

WordPressテーマ「NULL」

TCD LABOはWordPressテーマ「NULL」を使用して作られています。

ダウンロード

Q.物件種別とエリアまで選択後、地域や沿線を指定せずに対象物件を検索できますか?

▼「地域から探す」「沿線から探す」ボタンが表示されている状態

A.はい、functions.phpに追記することでカスタマイズ可能です。

▼カスタマイズ後のイメージ

下記記述をテーマファイルのfunctions.phpの最下部にコピペするか、Code Snippetsなどのプラグインで追加してください。テーマファイルを編集する場合は必ずバックアップをとっておきましょう。

// 地域・沿線の選択ページから物件一覧ページへスキップ
add_action( 'template_redirect', function () {
	global $tcdr_main_query;
	// 地域・沿線の選択ページ以外は終了
	if( ! $tcdr_main_query?->is_search_selection ){
		return;
	}
	// 地域 or 沿線 の term一覧を取得
	$tcdr_custom_counts = match ( get_query_var( 'type' ) ) {
		// エリア
		'area' => TCD\Realty\Helper\get_area_property_type_counts(),
		// 沿線
		'transit' => TCD\Realty\Helper\get_transit_property_type_counts(
			$tcdr_main_query->pref->slug ),
		default => [],
	};
	// 物件数がなければ終了
	if( empty( $tcdr_custom_counts ) ){
		return;
	}
	// 物件情報の取得
	$terms = match ( get_query_var( 'type' ) ) {
		// 地域
		'area' => get_terms(
			[
				'taxonomy' => 'area',
				'hide_empty' => true,
				'parent' => $tcdr_main_query->pref?->term_id,
				'orderby' => 'slug',
				'include' => array_keys( $tcdr_custom_counts ),
			]
		),
		// 沿線
		'transit' => get_terms(
			[
				'taxonomy' => 'transit',
				'hide_empty' => true,
				'orderby' => 'slug',
				'include' => array_keys( $tcdr_custom_counts )
			]
		),
		default => null
	};
	// term ID一覧を取得
	$term_ids = wp_list_pluck( $terms, 'term_id' );
	// リダイレクト先URL
	$redirect_url_params = [
		'property-type' => get_queried_object()->slug,
		'pref' => $tcdr_main_query->pref?->term_id,
		'type' => get_query_var( 'type' ),
		'all' => get_query_var( 'type' ) === 'area' ? 1 : '',
		'ids' => $term_ids
	];
	wp_safe_redirect(
		add_query_arg( $redirect_url_params ),
		302
	);
	exit;
} );

// 地域・沿線のパンくずリストを削除 + 検索ボタンエリアのカスタマイズ
add_action( 'wp_head', function() {
	?>
	<style>
	body.tax-property-type .c-breadcrumb__item:nth-child(3),
	body.single-contents1:has(.c-breadcrumb__item:nth-child(5))
		.c-breadcrumb__item:nth-child(3) {
		display: none;
	}
	/* 検索ボタンを含むセクションはラベル非表示 + グリッドを1カラム化 */
	.p-property-search-entrance-section:has(.p-property-search-entrance-submit) {
		grid-template-columns: 1fr;
	}
	.p-property-search-entrance-section:has(.p-property-search-entrance-submit)
		.p-property-search-entrance-section-label {
		display: none;
	}
	/* 沿線から探すボタンを非表示 */
	.p-property-search-entrance-submit-button[value="transit"] {
		display: none;
	}
	/* 残った「地域から探す」ボタンを中央配置・幅350pxに固定 */
	.p-property-search-entrance-submit {
		display: flex;
		justify-content: center;
		width: 100%;
	}
	.p-property-search-entrance-submit-button[value="area"] {
		width: 350px;
		max-width: 100%;
		flex: none;
	}
	</style>
	<?php
}, 11 );

// ボタンのテキストを「検索する」に変更
add_action( 'wp_footer', function() {
	?>
	<script>
	document.addEventListener('DOMContentLoaded', function () {
		var btn = document.querySelector('.p-property-search-entrance-submit-button[value="area"]');
		if ( btn ) {
			var icon = btn.querySelector('.p-property-search-entrance-submit-icon');
			btn.textContent = '検索する';
			if ( icon ) {
				btn.prepend(icon);
			}
		}
	});
	</script>
	<?php
} );

この記事は役に立ちましたか?

もし参考になりましたら、下のボタンで教えてください。
今後の記事作成の参考とさせて頂きます!

同じテーマのカスタマイズ記事