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

0
Who liked: No user
  • このトピックには7件の返信、2人の参加者があり、最後にrumix63により4年前に更新されました。
8件の投稿を表示中 - 1 - 8件目 (全8件中)
  • 投稿者
    投稿
  • #60831
    rumix63
    参加者
    8

    トピックを新しく立てる方は次の項目も記述してください(要望トピックの場合は不要です)。

    【お使いの Snow Monkey のバージョン】最新
    【お使いのブラウザ】chrome
    【当該サイトのURL】(公開できる場合は書いていただいたほうがスムーズです)

    ===

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

    検索フォームの右側の「検索」ボタンの箇所を虫メガネのFontawsomeアイコンに表記を変えたいと思っております。

    <i class="fas fa-search"></i>
    

    下記は確認できたのですが、ボタン内の変更を教えて頂きたいです。

    0
    Who liked: No user
    #60927
    アバター画像キタジマ タカシ
    参加者
    2421

    「検索フォーム」とのことですが、表示箇所・表示方法によってちょっと変わってきそうなので、念の為詳しく教えてください! ウィジェットの検索フォームなのか、検索ブロックなのか等。

    0
    Who liked: No user
    #60945
    rumix63
    参加者
    8

    お忙しいところご返信頂きありがとうございます!

    大変申し訳ありません、情報不足でした。

    My Snow Monkeyに

    1. 検索フォームを表示するショートコードをつくる
    2. ショートコードをヘッダーコンテンツで実行可能にする
    3. ヘッダーコンテンツにショートコード [search_form] を入れる

    /**
     * [search_form] で検索フォームを表示
     */
    add_shortcode(
    	'search_form',
    	function() {
    		ob_start();
    		get_template_part( 'template-parts/common/search-form' );
    		return ob_get_clean();
    	}
    );
    
    /**
     * ヘッダーコンテンツ内でショートコードを実行可能に
     */
    add_filter(
    	'snow_monkey_template_part_render',
    	function( $html, $slug ) {
    		if ( 'template-parts/header/content' !== $slug ) {
    			return $html;
    		}
    		return do_shortcode( $html );
    	},
    	10,
    	2
    );

    ↑こちらの方法でヘッダーコンテンツ内に検索フォームを表示させています。

    その際に右側の検索ボタンを「検索」という文言ではなく、Fontawsomeアイコンを挿入したいと思っております。

    恐れ入りますが、ご教授頂ければと思います。

    よろしくお願いします。

    0
    Who liked: No user
    #60950
    アバター画像キタジマ タカシ
    参加者
    2421

    ありがとうございます! ちょっとこちらで検証してみます。

    ちなみに、現行バージョンではヘッダーコンテンツ内は自動的にショートコードが実行できるようになっているので、「ヘッダーコンテンツ内でショートコードを実行可能に」の部分のコードは削除して大丈夫です!(あると逆に正しく動かない場合があります)

    0
    Who liked: No user
    #61006
    アバター画像キタジマ タカシ
    参加者
    2421

    これでどうでしょう?

    add_filter(
    	'snow_monkey_template_part_render_template-parts/common/search-form',
    	function( $html ) {
    		return str_replace(
    			'>検索<',
    			'><i class="fas fa-search"></i><',
    			$html
    		);
    	}
    );
    0
    Who liked: No user
    #61035
    rumix63
    参加者
    8

    キタジマさん

    お忙しいところご教授頂きありがとうございます!

    上記コードをmy snow monkenyに追記したところ、ヘッダーコンテンツ以外の箇所での検索ボタンは

    アイコンに変更できたのですが、ヘッダーコンテンツ内は変更されませんでした。

    お手数をお掛けしますが、アドバイス頂けると幸いです。

    0
    Who liked: No user
    #61129
    アバター画像キタジマ タカシ
    参加者
    2421

    ショートコードの定義をしている部分のコードをこれに置き換えてください!

    add_shortcode(
    	'search_form',
    	function() {
    		ob_start();
    		\Framework\Helper::get_template_part( 'template-parts/common/search-form' );
    		return ob_get_clean();
    	}
    );

    get_template_part() ではなく \Framework\Helper::get_template_part() にすることで、snow_monkey_template_part_render フィルターフックによるカスタマイズが適用されるようになります。

    1
    Who liked: No user
    #61250
    rumix63
    参加者
    8

    キタジマさん

    ありがとうございます!

    きちんと表示できました。

    お忙しい中、解説頂きありがとうございます。

    1
    Who liked: No user
8件の投稿を表示中 - 1 - 8件目 (全8件中)
  • トピック「検索フォームの検索ボタンをアイコンに変更したい」には新しい返信をつけることはできません。

ドキュメント

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

ドキュメント

フォーラム

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

サポートフォーラム

よくあるご質問

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

よくあるご質問

お問い合わせ

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

お問い合わせ

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