miMemo(ミメモ)

WordPress

[M]レスポンシブでもイケる!WordPressのカスタムメニューで画像を表示させてみた!

20130712こんにちは!MIU(@miu0512)です!サイト内バナーのリストを設置している時に、カスタムメニューにCSSを設定し背景画像として使うのではなく、画像そのものを並べちゃう方法を発見しました。

カスタムメニューを背景として設定するとレスポンシブの時に面倒

こんな時に使える!

  • 並び替え・差し替えがラクなバナーの設置をしたい
  • レスポンシブでブラウザ幅が小さくなった時にも可変で対応したい
  • 設定はたった2ステップ

    STEP1: 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;
    }
    }
    [/php]

    [外観]→[メニュー]で、ナビゲーションラベルに画像URLを設定

    [[http://xxxxx.xx.jp/xxxxx.jpg]]

    ナビゲーションラベルの部分に、[[ と ]] の間に画像URLを入れてあげたものをぺたり。すると、カスタムメニュー自体の見た目はちょっときたないですが、プレビューするとちゃんと画像が表示されるようになります。

    今回参考にさせていただいたサイト

    WordPress・Premire・Aftereffects備忘録 : WordPress カスタムメニューの文字部分を画像に変更

    さいごに・・・

    「こんな使い方できないのかな」と調べると、なんでもできちゃうWordPress。まだまだアレンジできることを日々実感していて、ついカスタマイズ魂がうずうずしちゃいます!

    この記事が気に入ったら
    いいね!しよう

    About Me

    みう

    みう(@miu0512)

    フリーランス
    Webコーディネーター

    フリーランスWeb屋。マンチカン5匹と一緒に仕事をしています。 【 猫 / マンチカン / Webデザイン / ブログ / ミメモ / フリーランス / カメラ / 旅行 / 車 / 水樹奈々 / ライブ / カラオケ / アニソン / マンガ / アニメ / iPhone / Mac / 白猫 / メロディア】

    PAGETOP