WordPressの投稿ページで便利なAmazon検索フォーム作る方法

Pocket

投稿ページに以下のような検索フォームを設置したいと考えたことありませんか?

Amazon商品の割引検索ができます

上記はAmazon商品の割引検索を行う検索フォームです。

キーワードに商品名を入力し検索を行うとAmazonのサイトに遷移し、商品の割引検索が可能となります。

こちらのリンクでも解説していますが、AmazonではURLに「pct-off=90-」パラメーターを付加すると「90%OFF」の商品を探すことができます。

30%OFFの商品を探す場合は「pct-off=30-」と指定します。

Amazonのサイトでセール率を設定できる入力欄は通常検索では出てきません。

このように検索の設定が分かりにくいサイトで、投稿ページに検索フォームを設置し、URLを付加して検索できるとユーザーには便利ですし、ページへの再訪問率も高くなりますよね。

特にURLを設定するのが難しいスマホユーザーには有益なツールとなります。

 

今回は上記のように検索フォームを投稿ページに設置する方法について解説します。

検索フォームを設置する方法

ソースコード

HTML
<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>
CSS
.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>

action属性

送信先のURLを指定(パラメータを除く「?より前の部分」)します。

この例では以下の赤字部分「https://www.amazon.co.jp/s」を指定しています。

https://www.amazon.co.jp/s?pct-off=90-&k=[入力したキーワード]&tag=it-ti-22

target属性

新しいタブ(ウィンドウ)を開く”_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>

selectタグのname属性

name属性にURLのパラメータ名(以下の赤字部分の「pct-off」)を指定します。

https://www.amazon.co.jp/s?pct-off=90-&k=[入力したキーワード]&tag=it-ti-22

optionタグ:

<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属性

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属性

name属性にURLのパラメータ名(以下の赤字部分の「tag」)を指定します。

https://www.amazon.co.jp/s?pct-off=90-&k=[入力したキーワード]&tag=it-ti-22

value属性

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を使用するとより複数のサイトをまたがって検索できるフォームも設置できるので、機会があれば紹介していきます。

最後まで読んでいただきありがとうございました。

Pocket

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です