1. ホーム
  2. フォーラム
  3. カスタマイズに関する質問
  4. ソーシャルナビゲーションのアイコン変更方法

ソーシャルナビゲーションのアイコン変更方法

ホーム フォーラム カスタマイズに関する質問 ソーシャルナビゲーションのアイコン変更方法

このトピックには5件の返信が含まれ、2人の参加者がいます。11 ヶ月、 2 週間前 キタジマ タカシ さんが最後の更新を行いました。

6件の投稿を表示中 - 1 - 6件目 (全6件中)
  • 投稿者
    投稿
  • #2258

    rokuzeudon
    参加者

    現状の仕様は
    ・ 基本 fa-globe を表示する
    ・ Twitter、Facebookなどテーマ側で指定されているものはそのアイコンを表示する
    という感じかと思いますが、 fa-globe を好みのアイコンに変える良い方法はあるでしょうか?

    以前のバージョン(FontAwesome4)だとCSSで擬似要素にクラスを指定すれば上書きできたのですが、現状だとうまくいかなくて…。

    ちなみに変更したいのは Behance ( https://fontawesome.com/icons/behance-square?style=brands )です。

    #2264

    キタジマ タカシ
    キーマスター

    そうなんです、FontAwesome5 から JS 版が推奨とあったので CSS 版から JS 版にしたのですが、使い勝手わるいですよね…軽くはなってると思うのですが…。

    ソーシャルナビゲーションのアイコンについては、PHP で URL を判定して置換処理を行っています。

    子テーマをお使いでしたら、子テーマの functions.php で、上記と似たような感じで walker_nav_menu_start_el にフックさせて置換処理を書くことで実現できるかと思います。

    #2267

    rokuzeudon
    参加者

    なるほど、こちらのファイルですね…!とコピペして自分なりにfunctions.phpに追記してみましたが、なかなかうまくいきませんでした…

    
    // ソーシャルナビゲーションのアイコンを追加する
    add_filter( 'walker_nav_menu_start_el', function( $item_output, $item, $depth, $args ) {
    	if ( 'social-nav' !== $args->theme_location ) {
    		return $item_output;
    	}
    	if ( true !== strpos( $item->url, 'behance.net' ) ) {
    		return str_replace( $args->link_before, '<i class="fab fa-behance-square"></i>' . $args->link_before, $item_output );
    	}
    }, 10, 4 );
    

    この記述で添付の画像みたいになってしまいました…。

    (PHPに疎く、かなり初歩的なところでつまづいている気がして大変恐縮なのですが、)
    既にあるfunctionに対して上書き?で追加するのはどのようにしたら良いでしょうか…??

    #2277

    キタジマ タカシ
    キーマスター

    こうですかね。

    add_filter( 'walker_nav_menu_start_el', function( $item_output, $item, $depth, $args ) {
    	if ( 'social-nav' !== $args->theme_location ) {
    		return $item_output;
    	}
    
    	if ( false !== strpos( $item->url, 'behance.net' ) ) {
    		$item_output = str_replace( '<i class="fas fa-globe"></i>', '', $item_output );
    		return str_replace( $args->link_before, '<i class="fab fa-behance-square"></i>' . $args->link_before, $item_output );
    	}
    
    	return $item_output;
    }, 11, 4 );

    でもこれ思いましたが、Snow Monkey 自体が Behance をサポートしたほうが良いですよね。次のアップデートで追加します!お急ぎであれば、アップデートまでの間上記のコードをお使いくださいまし。

    #2285

    rokuzeudon
    参加者
    
    	if ( false !== strpos( $item->url, 'behance.net' ) ) {
    		$item_output = str_replace( '<i class="fas fa-globe"></i>', '', $item_output );
    		return str_replace( $args->link_before, '<i class="fab fa-behance-square"></i>' . $args->link_before, $item_output );
    	}
    

    なるほど…! fa-globe になってるのを 「behance.net」 の時は fa-behance-square にするっていうのはそのような感じで書くのですね…!!勉強になります😭😭😭

    > でもこれ思いましたが、Snow Monkey 自体が Behance をサポートしたほうが良いですよね。次のアップデートで追加します!

    ありがとうございます!
    特に急いでないので、アップデートを待ちたいと思います。
    よろしくお願いしますm(_ _)m

    #2334

    キタジマ タカシ
    キーマスター

    アップデートで追加しましたのでクローズします。

6件の投稿を表示中 - 1 - 6件目 (全6件中)

トピック「ソーシャルナビゲーションのアイコン変更方法」への新規返信追加は締め切られています。