ウィジェットの検索 カスタマイズしたい
-
簡単な順に。。。
1.CSSでムリヤリ非表示に
.screen-reader-text { display: none; }
2.ウィジェットを使わず、テンプレートにコードを直書き
<form role="search" method="get" id="searchform" action="http://あなたのWPのURL" > <div><label class="screen-reader-text" for="s">お好きな言葉:<!-- お好みで書き換え --></label> <input type="text" value="" name="s" id="s" /> <input type="submit" id="searchsubmit" value="検索" /> </div> </form>
3.あくまでウィジェットでやることにこだわるなら、
コチラを参照 http://www.travelogue.jp/blog/archives/1163.html
ただし、コアファイルをいじるのであんまりおすすめではないです。4.アクションフックでカスタマイズする方法
ご利用のテーマのfunctions.phpに以下を追記//検索ウィジェットのカスタマイズ function new_search_form($form) { $form = '<form method="get" id="searchform" action="' . get_option('home') . '/" > <div><label for="s">お好きな言葉:</label> <input type="text" value="' . attribute_escape(apply_filters('the_search_query', get_search_query())) . '" name="s" id="s" /> <input type="submit" id="searchsubmit" value="'.attribute_escape(__('Search')).'" /> </div> </form>'; return $form; } add_filter('get_search_form', 'new_search_form' );
参考:関数リファレンス/get search form – WordPress Codex 日本語版
4.がいちばん汎用性が高いですねーご丁寧な回答ありがとうございます。
①と④で試しまして反映されました。ありがとうございます。とりあえずは①でやっておこうと思います。
それで書込み欄の下の submit ボタンを左右に調整したいのですが
CSSで書き込むのなら何になるのでしょうか?(例).screen-reader-submit {
margin-left: 50px;
}<input type=”submit” id=”searchsubmit” value=”検索” />がsubmitボタンにあたりますので、CSSでやるなら#searchsubmitで調整してやればいいでしょう。
真ん中寄せにしたいなら
input#searchsubmit {
display: block;
margin: 0 auto;
}とか?
ん~ 試してみるのですが動きませんねぇ・・・
input#searchsubmit {
display: block;
margin: 0 auto;
}はダメみたいです。。。
具体的にどのファイルのどの部分が対象になるのでしょうか。
具体的にどのファイルのどの部分が対象になるのでしょうか。
すみません、ご質問の意味があまり汲み取れていないので的外れな回答だったら申し訳ないですが、ご利用のテーマのstyle.cssに追記することを想定しての回答でした。
submit ボタンを左右に調整したい
というのは、どういう風にしたいのかをもう少し詳しく書いていただけるとありがたいです。
度々ありがとうございますm_ _m
私の説明の仕方が良くないのだと思います。。。いわゆるこの検索ボタンは
input#searchsubmit なのでしょうか?以前はウィジェットを使用していなくてその時の検索ボタンは
input#sb と指示していました。つまりこのstyle.cssで指定しているphpファイルはどのファイルか分らないのです。
(初心者なので・・・)>submit ボタンを左右に調整したい
というのは、どういう風にしたいのかをもう少し詳しく書いていただけるとありがたいです。サイドバーの端から10px離れた位置でデザインを統一しているのですが
この検索ボタンのみ左端から動かなくてデザインが不釣り合いになっています。入力欄はcssで
input#s{
width: 149px;
margin-left: 10px;
margin-bottom: 5px;
}
で指定できています。ですからこのinput#sb またはinput#searchsubmit またはinput#submit
もmargin-left: 10px; にしたいのですが、、、
多分名前を間違っているのですね。
それがどこを見ればいいのかが分らないんです。つまりこのstyle.cssで指定しているphpファイルはどのファイルか分らないのです。
検索ウィジェットではき出されるHTMLがどのPHPファイルに書いてあるかわからない、ってことですか?
それですと、wordpressのコアに記述があるので、初心者であれば特にわからなくてもOKなことです。私も、わかってないので・・・f^^;ブラウザの「ソースを見る」だったり、Firebugだったりで、inputボタンについているidなりclassを確認すればOKかと思います。
コアのどの部分か探していましたが結局分りませんでした。
なるほど ソースを見れば確かめられますね(当たり前ですが・・・)お陰様で検索ボタンのカスタマイズは出来ました。
原因は
inmut#searchsubit で m が抜けていたのでした~
ほんとうに自分の不甲斐なさに笑っちゃいました。長々とお付き合い頂きありがとうございました。
それはよかったです。
初心者さんだと、コアは見ないほうがむしろ挫折が少なくて良いかと思います。スレッドを解決済みにするのをお忘れなく!
- トピック「ウィジェットの検索 カスタマイズしたい」には新たに返信することはできません。