実際に使いまくっている、ワードプレスでメニュー周りに便利な小技

1.ナビメニューのテキストの中に|（パイプ）が入っていたら、<br>に置き換える方法

メニューのテキストを改行したいときに使える技です。
弊社のサイトもこんな感じに英語と日本語に分けて見やすくしています。

方法：テーマの中のfunctions.phpの中に書く。

function my_wp_nav_menu_179217 ( $output, $args ){
   return str_replace( '|', '<br>', $output );
}
add_filter( 'wp_nav_menu', 'my_wp_nav_menu_179217', 10, 2 );

PCでは改行スマホ・タブレットでは改行したくない場合はこちらのコード

if( !wp_is_mobile() ) {
//PCの場合
function my_wp_nav_menu_179217 ( $output, $args ){
return str_replace( '|', '<br>', $output );
}
add_filter( 'wp_nav_menu', 'my_wp_nav_menu_179217', 10, 2 );
} else {
//モバイル・タブレットの場合
function my_wp_nav_menu_179217 ( $output, $args ){
return str_replace( '|', '', $output );
}
add_filter( 'wp_nav_menu', 'my_wp_nav_menu_179217', 10, 2 );
}

メニューには改行したい場所に「|」を入れます。

参考サイト：https://teratail.com/questions/179217

2.メニューの頭にFont Awesomeのアイコンを追加する方法

アイコンがメニューテキストの頭にあると見た目もよく、視覚的に分かりやすいですよね。特にコードをいじらなくても簡単に下記のようにFont Awesomeのアイコンをつける方法です。

Font Awesomeのアイコンはこちらの公式サイトから選んでコードをコピーしてください。

メニューのタイトル部分にこのようにFont Awesomeのコードを入れるだけで完了です！

とても簡単で手軽に使えるのでおすすめです。

どうしても出来ない、この場合は？などの問い合わせはお気軽に！