サポート » 使い方全般 » ウィジェットの検索 カスタマイズしたい

  • 解決済 cozy-koji

    (@cozy-koji)


    ウィジェットに検索フォームを追加したのですが
    サーチフォームの前に 検索: という文字が出てくるのですが
    これはどの部分をいじればいいのか分りません。
    おわかりの方いらっしゃいましたらご教示くださいm_ _m

9件の返信を表示中 - 1 - 9件目 (全9件中)
  • モデレーター のむらけい (Kei Nomura)

    (@mypacecreator)

    簡単な順に。。。

    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.がいちばん汎用性が高いですねー

    トピック投稿者 cozy-koji

    (@cozy-koji)

    ご丁寧な回答ありがとうございます。
    ①と④で試しまして反映されました。ありがとうございます。

    とりあえずは①でやっておこうと思います。

    それで書込み欄の下の submit ボタンを左右に調整したいのですが
    CSSで書き込むのなら何になるのでしょうか?

    (例).screen-reader-submit {
    margin-left: 50px;
    }

    モデレーター のむらけい (Kei Nomura)

    (@mypacecreator)

    <input type=”submit” id=”searchsubmit” value=”検索” />がsubmitボタンにあたりますので、CSSでやるなら#searchsubmitで調整してやればいいでしょう。

    真ん中寄せにしたいなら
     
    input#searchsubmit {
     display: block;
     margin: 0 auto;
    }

    とか?

    トピック投稿者 cozy-koji

    (@cozy-koji)

    ん~ 試してみるのですが動きませんねぇ・・・

    input#searchsubmit {
     display: block;
     margin: 0 auto;
    }

    はダメみたいです。。。

    具体的にどのファイルのどの部分が対象になるのでしょうか。

    モデレーター のむらけい (Kei Nomura)

    (@mypacecreator)

    具体的にどのファイルのどの部分が対象になるのでしょうか。

    すみません、ご質問の意味があまり汲み取れていないので的外れな回答だったら申し訳ないですが、ご利用のテーマのstyle.cssに追記することを想定しての回答でした。

    submit ボタンを左右に調整したい

    というのは、どういう風にしたいのかをもう少し詳しく書いていただけるとありがたいです。

    トピック投稿者 cozy-koji

    (@cozy-koji)

    度々ありがとうございます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; にしたいのですが、、、
    多分名前を間違っているのですね。
    それがどこを見ればいいのかが分らないんです。

    モデレーター のむらけい (Kei Nomura)

    (@mypacecreator)

    つまりこのstyle.cssで指定しているphpファイルはどのファイルか分らないのです。

    検索ウィジェットではき出されるHTMLがどのPHPファイルに書いてあるかわからない、ってことですか?
    それですと、wordpressのコアに記述があるので、初心者であれば特にわからなくてもOKなことです。私も、わかってないので・・・f^^;

    ブラウザの「ソースを見る」だったり、Firebugだったりで、inputボタンについているidなりclassを確認すればOKかと思います。

    トピック投稿者 cozy-koji

    (@cozy-koji)

    コアのどの部分か探していましたが結局分りませんでした。
     
    なるほど ソースを見れば確かめられますね(当たり前ですが・・・)

    お陰様で検索ボタンのカスタマイズは出来ました。
    原因は
    inmut#searchsubit で m が抜けていたのでした~
    ほんとうに自分の不甲斐なさに笑っちゃいました。

    長々とお付き合い頂きありがとうございました。

    モデレーター のむらけい (Kei Nomura)

    (@mypacecreator)

    それはよかったです。
    初心者さんだと、コアは見ないほうがむしろ挫折が少なくて良いかと思います。

    スレッドを解決済みにするのをお忘れなく!

9件の返信を表示中 - 1 - 9件目 (全9件中)
  • トピック「ウィジェットの検索 カスタマイズしたい」には新たに返信することはできません。