WordPress

WordPress - 検索フォームのボックス幅の指定

WordPress 2.7 から、get_serarch_from() が使えるようになっているものの、これを使った場合、どうやってフォームのインプットのボックスの幅を変えて良いかわからなかった。

<?php get_search_form () ; ?>

を実際に実行して、ブラウザで出力されたコードを見てみると、上記の実行結果のコードは、

<form role="search" method="get" id="searchform" action="http://localhost/wordpress/" >
<div><label class="screen-reader-text" for="s">検索:</label>
<input type="text" value="" name="s" id="s" />
<input type="submit" id="searchsubmit" value="検索" />
</div>

になるようだ。

get_search_from を、Devas で検索してみると、wp-includes フォルダ配下の generar-template.php に定義されていた。そのソースは・・

function get_search_form() {
do_action( 'get_search_form' );

$search_form_template = locate_template(array('searchform.php'));
if ( '' != $search_form_template ) {
require($search_form_template);
return;
}

$form = '<form role="search" method="get" id="searchform" action="' . get_option('home') . '/" >
<div><label class="screen-reader-text" for="s">' . __('Search for:') . '</label>
<input type="text" value="' . esc_attr(apply_filters('the_search_query', get_search_query())) . '" name="s" id="s" />
<input type="submit" id="searchsubmit" value="'. esc_attr__('Search') .'" />
</div>
</form>';

echo apply_filters('get_search_form', $form);
}

自分で良く分からない所を調べてみる。
esc_attr は、Wordpress の codex の関数リファレンス によると、「< > & " ' の文字をエンコードする」とある。その後の apply_filters は。。。。ちょっと難しそうだ。
いずれにしても、value = 部分は、入力フィールドの初期値で、ボックスの幅とは関係なさそうなので、esc_attr の部分は、細かく追求しない事にしよう。。

ネットを検索した所、検索ボックスの幅の調整は、<input type="text" > の所で、size="50" (文字数指定) の様に指定するか、style="width:100px" (ピクセル指定)と指定するようだが、get_search_formの定義ではそれが無いように見えるのだが・・

解読知識が無いだけかもしれないが、いづれにしてもよくわからないので、 get_search_form( ) で、横幅を制御するのは諦める。。

結局、get_search_form を実行した時の出力コードを改造して( style="width:100px" を指定する等)、以下の様な形にし、サイドバーに貼り付けた。

<!-- 検索ボックス -->
<form role="search" method="get" id="searchform" action="<?php bloginfo('url'); ?>" >
<div>
<input type="text" value="" style="width:100px" name="s" id="s" />
<input type="submit" id="searchsubmit" value="検索" />
</div>
</form>

以下の様に検索ボックスの幅を100pxに制御する事ができた。

image

-WordPress

Copyright© エンジニアの何でもメモ帳 , 2022 All Rights Reserved.