ブログデザインには欠かせない「検索」機能。

WordPressを使っていると、ウィジェットの中に含まれるものですが、それを「Googleカスタム検索」として使用したい方もいらっしゃるでしょう。

特に、Google AdSenseを利用されている方は使わない手はありません。

▲ こんな感じですね。

テーマとして「AFFINGER4」を使用しているこのブログにも実装したので、お知らせします。

スポンサーリンク

AFFINGER4の「検索」ウィジェットを、Googleカスタム検索にする方法。

今回、参考させていただいたのは『AkaMaruServer』さんのこちらの記事です。

では、手順です。

1)「Googleカスタム検索」の検索エンジンIDをチェック

まずは設定しましょう。

関連リンク:Googleカスタム検索

カスタム検索の『検索エンジンID』を確認しておきます。

確認する場所はこちら。

2)「AFFINGER4」の子テーマをインストール

テーマをカスタマイズするときの必須アクション、子テーマのインストールはお忘れなく。

3)親テーマから「searchform.php」をコピーして、子テーマにアップロード

こちらが、親テーマの「searchform.php」です。

<form method="get" id="searchform" action="<?php echo esc_url( home_url( '/' ) ); ?>">
<label class="hidden" for="s">
<?php __( '', 'default' ); ?>
</label>
<input type="text" placeholder="検索するテキストを入力" value="<?php the_search_query(); ?>" name="s" id="s" />
<input type="image" src="<?php echo get_template_directory_uri(); ?>/images/search.png" alt="検索" id="searchsubmit" />
</form>
</div>
<!-- /stinger -->

これを、子テーマにインストールします。

パーミッションは「644」ですね。

4)子テーマの「searchform.php」を書き換える

書き換える内容はこちらです。

<div style="padding-top:10px;">
<form action="http://www.google.co.jp/cse" id="cse-search-box">
  <div>
    <input type="hidden" name="cx" value="ここにはカスタム検索のID" />
    <input type="hidden" name="ie" value="UTF-8" />
    <input type="text" name="q" size="20" />
    <input type="submit" name="sa" value="検索" />
  </div>
</form>
<script type="text/javascript" src="https://www.google.co.jp/coop/cse/brand?form=cse-search-box&amp;lang=ja"></script>
</div>
<!-- /stinger -->

FTPを使って子テーマにファイルをアップロードしておけば、WordPressのダッシュボードからも変更できます。

4行目の「ここにはカスタム検索のID」という部分に、1)で確認した「検索エンジンID」をコピペしておきます。

その結果が、こちらです。

カンタンに設定できるので、ぜひ使ってみてください。

AFFINGER4についてはこちらをどうぞ