WordPressのメニューで画像を利用する方法

スポンサーリンク

WordPressのメニュー欄は基本テキストですが

こちらを「画像へ差し替えるという」という作業をやったので、備忘録です。

wordpressのメニューの変更や追加は、管理画面にログインして、

外観メニューにて変更できますが、ここに画像のパスを書いたところで無力です。

ここに画像の設定ができたら、後々変更があっても楽だよなー。というところですが、それらを実現するためにはfunction.phpに追加のPHPスクリプトを書き込みます。

add_filter( 'the_title', 'img_nav_menu_title' );
function img_nav_menu_title($title) {
    if( preg_match( "/\[\[(.*)\]\]/", $title, $match ) ) {
        $get_title = $match[1];
        $get_img_url = clean_url($get_title);
        if($get_title == 'none') {
            $title = '';
        } else {
            $get_img_dir = str_replace( get_option('home') . '/', ABSPATH, $get_img_url );
            $get_size    = getimagesize( $get_img_dir );
            $get_alt     = preg_replace( "/\[\[(.*)\]\]/", '', $title );
            $title = '<img src="' . $get_img_url . '" alt="' . $get_alt . '" />';
        }
        return $title;
    } else {
        return $title;
    }
}

これを使用しているテーマにある「function.php」の最後などにコピーするだけです。

あとは、先ほど通り、外観メニューと進んで、

メニュー内の「ナビゲーションラベル」に画像のURLを記載します。ナビゲーションラベルは通常メニューに表示するテキストを記載する場所ですが、ここにURLを記載します。

記載の仕方は

[[‘http://www.URL,com’]]

と、します。

ポイントは、「URLであること(パスじゃない)」「ブランケット(角括弧)を2重閉じで使用すること」です。

ブランケット(角括弧)とは、[] これ。

このポイントを踏まえた上で、ナビゲーションラベルを記載します。もちろん、画像を用意することは言うまでもなく・・・。

ここで表示した画像はJSによるマウスオーバーにももちろん、対応します。

こうしておくと、メニューの管理がやりやすくなりますね。

参照サイト:カスタムメニューを画像にする

スポンサーリンク

シェアする

フォローする

スポンサーリンク