WordPressへSearch formを追加する方法
たいした話では無いのですが、このブログテンプレート、ブログ内の検索フォームをつけていませんでした。
意図的にやったわけではなく、ただ抜けていただけです。気づいてはいたのですが、面倒くさくて今まで放置してきていました。
で、ちょっとブログデザインを変更しようかと思っていたので、まずは検索フォームの追加から行うことにしました。なので、備忘録も兼ねて方法を書いておきます。
WordPressでの検索フォームの追加で一番簡単な方法は、ウィジェットの追加でサイドバー等にウィジェットとして追加してしまうことです。
しかしながら、これはあくまでもウィジェットがおける範囲にしか置くことができません。つまりヘッダー内や、ウィジェットを置く場所と指定していない場所への設置ができないと云うことになります。
もし、ウィジェットとして設置するところ以外に設置したいと云うことになると、その関数を追加する必要があります。その関数は次のget_search_formという関数であり、これを自分の検索フォームを設置したい場所に記入します。
<!-- 検索開始 --> <?php get_search_form(); ?> <!-- 検索終了 -->
この関数を設置することで、ブログ上に検索フォームが設置されたと思います。しかし、このままではデフォルトで用意された検索フォームが表示されるだけで、入力フォームやラベルについてカスタマイズできません。
そこで、もうちょっとこの関数のことについて調べてみると、この関数はフォームを表示する際に、searchform.phpというファイルを見に行き、無い場合はデフォルトの検索フォームを表示する、という仕様らしい。
ならば、ということで、searchform.phpを設置することにしました。
<form method="get" id="search" action="<?php bloginfo('url'); ?>/">
<label for="s">Search: </label>
<input type="text" value="<?php the_search_query(); ?>" name="s" size="35" style="width: 245px;height: 17px;"/>
<input type="submit" id="searchsubmit" value="Search" />
</form>
まず、１行目はformの定義。ここはそんなにいじることはないです。
2行目は入力フォームの前につくラベルの設定。labelタグの間の文字列が、入力フォームの前に表示されるようになります。ここでは、”Search:”というラベルが表示されるように設定されています。
3行目は、入力フォームの設定。この中にstyleで設定された幅と高さがありますが、これはFirefoxとIEでフォームのsizeを同じにしていても実際に表示される幅が異なるため、直にフォームの幅と高さをピクセルで大きさを設定するためのスタイルシートです。
あとは、このフォームのidをsearchとしたので、必要に応じてスタイルシートで設定をすれば、カスタマイズ完了です。
念のため、スタイルシートで設定した内容についてもつけておきます。
#search {
color: #eeeeee;
height: 50px;
line-height: 50px;
margin: 0px 0px 10px 0px;
padding: 0px 5px 0px 0px;
text-align: right;
border-top: 1px solid #000000;
border-left: 1px solid #000000;
border-right: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
background: url(images/search.gif) no-repeat left top;
background-color: #555555;
}
さて、次は何をしようかな♪
関連する記事
ブログランキングに参加しています。
↓こちらをポチッとご協力お願いします！！
[...] WordPressへSearch formを追加する方法 [...]