この記事では投稿ページに以下のような検索フォームを設置できる方法を解説してます
Amazon商品の割引検索ができます
上記はAmazon商品の割引検索を行う検索フォームです。
キーワードに商品名を入力し検索を行うとAmazonのサイトに遷移し、商品の割引検索が可能となります。
上記リンク内でも解説していますが、AmazonではURLに「pct-off=90-
」パラメーターを付加すると「90%OFF」の商品を探すことができます。
30%OFFの商品を探す場合は「pct-off=30-
」と指定します。
上記検索フォームを設置することにより、いちいちURLにパラメータを設定することなくセール品が探せるようになります。
WordPressの投稿ページに検索フォームを設置し検索できるとユーザーには便利ですし、ページへの再訪問率も高くなるかもしれません。
特にURLを設定するのが難しいスマホユーザーには有益なツールとなります。
今回は上記のように検索フォームを投稿ページに設置する方法について解説します。
検索フォームを設置する方法
ソースコード
<form action="https://www.amazon.co.jp/s" target="_blank">
<div class="form-group">
<div class="input-group mb-3">
<div class="input-group-prepend">
<select name="pct-off" class="form-control" >
<option value="10-">10%オフ以上</option>
<option value="20-">20%オフ以上</option>
<option value="30-">30%オフ以上</option>
<option value="40-">40%オフ以上</option>
<option value="50-">50%オフ以上</option>
<option value="60-">60%オフ以上</option>
<option value="70-">70%オフ以上</option>
<option value="80-">80%オフ以上</option>
<option selected="selected" value="90-">90%オフ以上</option>
</select>
</div>
<input class="form-control" name="k" type="text" placeholder="キーワードを入力してください" />
<div class="input-group-append">
<button class="btn btn-warning">
<i class="fas fa-search fa-fw"></i>Amazonで探す
</button>
</div>
<input class="form-control" name="tag" type="hidden" value="it-ti-22" />
</div>
</div>
</form>
.input-group {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
width: 100%;
}
.input-group-prepend {
margin-right: -1px;
}
.input-group-prepend,
.input-group-append {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.input-group>.form-control {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
position: relative;
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
width: 1%;
margin-bottom: 0;
}
.form-control {
display: block;
width: 100%;
padding: 0.375rem 0.75rem;
font-size: 0.9375rem;
font-weight: 400;
line-height: 1.5;
color: #7b8a8b;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: 0.25rem;
-webkit-transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
}
.input-group-append .btn {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
position: relative;
z-index: 2;
}
.btn {
display: inline-block;
font-weight: 400;
color: #212529;
cursor: pointer;
text-align: center;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-color: transparent;
border: 1px solid transparent;
padding: 0.375rem 0.75rem;
font-size: 0.9375rem;
line-height: 1.5;
border-radius: 0.25rem;
-webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
}
.btn-warning {
color: #fff;
background-color: #F39C12;
border-color: #F39C12;
}
.btn-warning:hover {
color: #fff;
background-color: #d4860b;
border-color: #c87f0a;
}
※上記HTMLをWordPressのテキストに設定します。適宣変更し自由に使用してください。CSSはbootstrap4のクラスを使用しているので、bootstrap4を導入している場合は不要です。
ソースコードの解説
フォーム上で「Amazonで探す」ボタンをクリックすると以下ようなのURLがAmazonに送信されます。
https://www.amazon.co.jp/s?pct-off=90-&k=[入力したキーワード]&tag=it-ti-22
フォーム要素
<form action="https://www.amazon.co.jp/s" target="_blank">
....
</form>
送信先のURLを指定(パラメータを除く「?より前の部分」)します。
この例では以下の赤字部分「https://www.amazon.co.jp/s」を指定しています。
https://www.amazon.co.jp/s?pct-off=90-&k=[入力したキーワード]&tag=it-ti-22
新しいタブ(ウィンドウ)を開く”_blank”を指定します。
例えばGoogle検索に遷移する「https://www.google.com/search?q=test」のURLを指定する場合は以下のようになります。
<form action="https://www.google.com/search" target="_blank"> ....
</form>
プルダウン要素
<select name="pct-off" class="form-control" >
<option value="10-">10%オフ以上</option>
<option value="20-">20%オフ以上</option>
<option value="30-">30%オフ以上</option>
<option value="40-">40%オフ以上</option>
<option value="50-">50%オフ以上</option>
<option value="60-">60%オフ以上</option>
<option value="70-">70%オフ以上</option>
<option value="80-">80%オフ以上</option>
<option selected="selected" value="90-">90%オフ以上</option>
</select>
name属性にURLのパラメータ名(以下の赤字部分の「pct-off」)を指定します。
https://www.amazon.co.jp/s?pct-off=90-&k=[入力したキーワード]&tag=it-ti-22
<option selected="selected" value="90-">90%オフ以上</option>
ユーザーがリスト内から選択するとvalue
に指定した値「90-」がパラメータ(以下の赤字部分に)に設定されます。
https://www.amazon.co.jp/s?pct-off=90-&k=[入力したキーワード]&tag=it-ti-22
selected属性を指定するとリストの初期値として設定され、タグで囲まれた「90%オフ以上」がリストに表示されます。
テキスト要素
<input class="form-control" name="k" type="text" placeholder="キーワードを入力してください" />
name属性にURLのパラメータ名(以下の赤字部分の「k」)を指定します。
https://www.amazon.co.jp/s?pct-off=90-&k=[入力したキーワード]&tag=it-ti-22
ユーザーが入力したテキストが以下の赤字部分に設定されます。
https://www.amazon.co.jp/s?pct-off=90-&k=[入力したキーワード]&tag=it-ti-22
隠し要素(AmazonアソシエイトID)
<input class="form-control" name="tag" type="hidden" value="it-ti-22" />
name属性にURLのパラメータ名(以下の赤字部分の「tag」)を指定します。
https://www.amazon.co.jp/s?pct-off=90-&k=[入力したキーワード]&tag=it-ti-22
value属性に設定した値(アソシエイトID)が以下の赤字部分に設定されます。
https://www.amazon.co.jp/s?pct-off=90-&k=[入力したキーワード]&tag=it-ti-22
ボタン要素
<div class="input-group-append">
<button class="btn btn-warning">
<i class="fas fa-search fa-fw"></i>Amazonで探す
</button>
</div>
ボタンをクリックするとフォーム内で設定した内容を各URLパラメーターに設定し送信します。
以上がWordPressに投稿フォームを設置する解説となります。
操作が分かりづらいサイトを紹介する際に利用してみてください。
Javascriptを使用するとより複数のサイトをまたがって検索できるフォームも設置できるので、機会があれば紹介していきます。
最後まで読んでいただきありがとうございました。
コメントを残す