[あげ]

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

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

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

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

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

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

https://github.com/inc2734/snow-monkey/blob/master/resources/app/setup/social-nav.php

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

♥ 0

いいねをした人: 居ません

[あげ]

なるほど、こちらのファイルですね…！とコピペして自分なりに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に対して上書き？で追加するのはどのようにしたら良いでしょうか…？？

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

こうですかね。

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 をサポートしたほうが良いですよね。次のアップデートで追加します！お急ぎであれば、アップデートまでの間上記のコードをお使いくださいまし。

♥ 0

いいねをした人: 居ません

[あげ]

	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

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

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

♥ 0

いいねをした人: 居ません

[投稿者]

投稿