ホームページ内の全てで使用する検索フォームの検索ボタンをアイコンにしたい

0
いいねをした人: 居ません
  • このトピックには6件の返信、2人の参加者があり、最後にyucchi023により2年、 9ヶ月前に更新されました。
7件の投稿を表示中 - 1 - 7件目 (全7件中)
  • 投稿者
    投稿
  • #97874
    yucchi023
    閲覧者
    1

    【お使いの Snow Monkey のバージョン】15.14.4
    【お使いの Snow Monkey Blocks のバージョン】14.0.0
    【お使いの Snow Monkey Editor のバージョン】7.0.0
    【お使いのブラウザ】chrome
    【当該サイトのURL】ローカルサーバー内です

    初めて投稿させて頂きます。よろしく御願い致します。

    過去のフォーラムにもあった内容にとても似ているのですが、、、

    検索フォームの検索ボタンをアイコンに変更したいと同じで

    検索ボタン内の「検索」というテキストを
    <i class="fas fa-search"></i>
    のアイコンに変更したいです。

    使用箇所はトップページのメインビジュアル内とメニューのグローバルナビ&ドロワーナビ内です。
    ただ、過去のフォーラムと違う点はショートコードを使わずに表示させたいです。
    メインビジュアル内の検索フォームは<?php get_search_form(); ?>で出力しております。

    検索ボタン用のフックがございましたら是非ご教授お願い致します。

    0
    いいねをした人: 居ません
    #97885
    アバター画像キタジマ タカシ
    参加者
    2421

    使用箇所はトップページのメインビジュアル内とメニューのグローバルナビ&ドロワーナビ内です。

    ドロワーはデフォルトで表示されているものを使用されているのかなと思いますが、メインビジュアルとグローバルナビゲーションにはどのような方法で検索フォームを表示していますか?

    0
    いいねをした人: 居ません
    #97925
    yucchi023
    閲覧者
    1

    キタジマさんご返信ありがとうございます!

    メインビジュアル内は

    add_action(
    	'snow_monkey_prepend_main',
    	function () {
    		if (is_front_page()) {
    			?>

    を使用してトップページに表示させたHTML内に<?php get_search_form(); ?>を記入しております。

    グローバルナビはデフォルトの方法がないみたいなのでこちらのショートコードを利用します。

    0
    いいねをした人: 居ません
    #98209
    アバター画像キタジマ タカシ
    参加者
    2421

    get_search_form() は最終的に get_search_form というフィルターフックを通るみたいですね。そのフックをつかてカスタマイズしてみてください!

    0
    いいねをした人: 居ません
    #98350
    yucchi023
    閲覧者
    1

    関数リファレンスも読み込んで1日試行錯誤しましたが、うまく表示されませんでした。
コードに問題があるか確認いただいてもよろしいでしょうか?

    my-snow-monkey.php内(functions.php内)

    function new_get_search_form( $form ) {
    
      $form = '<form role="search" method="get" class="search-form navbar-form form-inline" action="' . esc_url( home_url( '/' ) ) . '">
        <div class="form-group">
        <label>
          <span class="screen-reader-text">' . _x( 'Search for:', 'label' ) . '</span>
        </label>
        <input type="search" class="search-field form-control" placeholder="テスト入力place holder" value="' . get_search_query() . '" name="s" title="' . esc_attr_x( 'Search for:', 'label' ) . '" />
        </div>
        <div class="form-group">
          <input type="submit" class="search-submit btn btn-default" value="'. esc_attr_x( 'Search', 'submit button' ) .'" />
        </div>
      </form>';
    
      return $form;
    }
    
    add_filter( 'get_search_form', 'new_get_search_form' );

    出力
    <?php get_search_form(); ?>

    こちらを入力して対応しましたがデフォルトの検索フォームが呼び出されました。

    0
    いいねをした人: 居ません
    #98365
    アバター画像キタジマ タカシ
    参加者
    2421

    あー Snow Monkey で使ってるパッケージで検索フォームをカスタマイズしていて、それが優先されてしまっているのだと想像します。なのでフックの優先度を上げると良いかもですね。

    add_filter( 'get_search_form', 'new_get_search_form', 100 );
    
    0
    いいねをした人: 居ません
    #98393
    yucchi023
    閲覧者
    1

    キタジマさんありがとうございます!

    無事実装できました!フックにも優先度があること初めて知りました!
    ありがとうございます、とても勉強になりました!

    1
    いいねをした人:
7件の投稿を表示中 - 1 - 7件目 (全7件中)
  • トピック「ホームページ内の全てで使用する検索フォームの検索ボタンをアイコンにしたい」には新しい返信をつけることはできません。

ドキュメント

Snow Monkey の設定方法やマニュアルを掲載しています。

ドキュメント

フォーラム

Snow Monkey の使い方やカスタマイズについてのご質問・ご要望等はサポートフォーラムで行っています。サポートフォーラムは誰でも閲覧できますが、書き込みできるのは Snow Monkey 購入者のみとなります。

サポートフォーラム

よくあるご質問

Snow Monkey のサービスについて不明な点がある場合は、まずはよくあるご質問をご確認ください。

よくあるご質問

お問い合わせ

よくあるご質問を見ても解決しなかった場合、試用版の申請については問い合わせフォームからお願いいたします。

お問い合わせ

Snow Monkey は Gutenberg ブロックエディターに対応した 100%GPL の WordPress テーマです。拡張性を意識した開発をおこなっており、カスタマイザーとブロックでスピーディーにサイトを立ち上げるだけでなく、CSS やフックを駆使した高度なカスタマイズにも柔軟に対応できます。