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

2014年07月06日（Sun）

WordPress奮闘記

少し記事も増えてきたので、そろそろサイト内の検索機能を試してみようと思います。検索結果のテンプレートは、「search.php」⇒「index.php」という流れのようです。特別な仕様などを施さない限りは、「index.php」で十分かなと考えています。

検索フォームの設置方法

検索フォームの設置方法は、至って簡単で設置したい箇所に「get_search_form();」を記述するだけです。
基本的に「get_search_form();」は、「searchform.php」ファイルを読み込むんで表示するようですが無い場合は、WordPressで予め用意されているビルトインの検索フォームが表示される仕様となっています。

検索フォームを設置したい箇所に記述

<?php get_search_form(); ?>

検索フォームをカスタマイズ

用意されているビルトインの検索フォームは、GETパラメーター「s」に値を渡すだけの簡単な仕様なっています。
お好みで検索フォームをカスタマイズしたい場合は、下記の方法でカスタマイズが可能です。

設置したい箇所に検索フォームのコードを直接記述
「searchform.php」ファイルに検索フォームのコードを記述しアップロード
「functions.php」に検索フォームのコードを記述し呼び出す

ビルトインの検索フォームコード

<form role="search" method="get" id="searchform" action="<?php echo home_url( '/' ); ?>">
    <div><label class="screen-reader-text" for="s">Search for:</label>
        <input type="text" value="" name="s" id="s" />
        <input type="submit" id="searchsubmit" value="Search" />
    </div>
</form>

input要素のplaceholder属性

input要素のplaceholder属性は、入力欄などが空欄の時にだけ表示する文字列を「value」とは別に指定できる「HTML5」から標準機能として追加されている属性です。未対応のブラウザでは、表示されませんがデザインにアクセントを付けるのに便利です。

input要素のplaceholder属性を使ったサンプルコード

<input type="text" value="" placeholder="キーワードを入力" name="s" id="s" />

【参考Webサイト】

コメント（0件）

WordPressに検索フォームを設置する方法に対するご意見、ご感想、情報提供など皆様からのコメントをお待ちしております。お気軽にコメントしてください。

WEB帳
WordPressに検索フォームを設置する方法