webサイトでページ遷移時のURLにクエリを渡したいときの処理について

Question

前提・実現したいこと

WordPressによるwebサイト制作をしています。
トップページにお問い合わせフォームがあり、全ページ共通のヘッダーに「お問い合わせ」と「購入」のボタンが存在する構成です。

「お問い合わせ」も「購入」も同じフォームを使用します。
両ボタンとも共通動作として、トップページに遷移し、フォームが存在する場所までスムーススクロールが発生します。

下記、実現したい内容です(htmlのコーディング時点ではこの内容は問題なく実装できています)

1,固定ページからボタンを押した際もトップページの先頭に遷移→フォームまでスクロールという動きを実装したかったため、aタグのリンクではなくjsのlocation.hrefによりページ遷移し、URLにクエリをつけることによりトップページの読み込み時にURLにクエリが存在している場合、お問い合わせフォームの位置までスクロールする実装にしています
(例えば「お問い合わせ」ボタンが押された時に/index.html?name=contactのようにする)

2,「購入」ボタン押下時はクエリに'buy'がつき、ページ遷移とフォームまでスクロールする他、<textarea>タグ内にjsで商品購入用のテンプレートテキストを挿入するようにしています。

発生している問題・エラーメッセージ

上記内容をWordPressに組み込もうとしたところ、エラーは発生しないのですが、URLにクエリがついている場合、front-page.phpではなくindex.phpが参照されるようでした。

該当のソースコード

// 「お問い合わせ」ボタン押下時の処理
const pushContact = function () {
	location.href = '?name=' + encodeURIComponent('contact');
}
// 「購入」ボタン押下時の処理
const pushBuy = function () {
	location.href = '?name=' + encodeURIComponent('buy');
}

上記内容で実装を考えた場合、front-page.phpを参照させる方法はありますでしょうか?

Comments

[m.ts10806]

お問い合わせと購入では要件が違うと思いますが、フォームを複数設置できないのはどういった理由、背景なのでしょうか

[Lhankor_Mhy]

nameとか、いかにも予約されてそうなキーを使うのは避けた方がいいのでは……

[simanuu]

お問い合わせと購入は要件ぼかすための参考例でした(実際はもっと近しいものです)
デザインデータが私の手元に来た時点でフォームは同じものを使えば良いのではないかぐらいの温度感だったので、取り急ぎフォーム一つで2つの要件を分けられるような方法を考えたのが今回の実装内容になります。

nameは確かに避けた方が良さそうですね。(こういった変則的な実装はしたことがなかったのでWordPressの予約クエリまで意識できていませんでした)
カスタムクエリを作成して、作成したクエリが渡された時はfront-page.phpを参照できるようにできれば実装可能でしょうか。

[simanuu]

上記にて解決しました。
ありがとうございます。

Answer 1

根本解決ではありませんが、functions.phpにnameではないクエリを追加することで期待した動きを再現できました(index.phpではなくfront-page.phpの参照になる)。

/**
 * カスタムクエリの登録
 */
function add_query_vars_filter( $vars ){
	$vars[] = "form";
	return $vars;
}
add_filter( 'query_vars', 'add_query_vars_filter' );