WordPress

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

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

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

こんな時に使える!

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

    STEP1: function.phpに追加

    <?php
    add_filter('the_title', 'img_nav_menu_title');
    function img_nav_menu_title($title) {
      if (preg_match(&quot; / \[\[( . *) \]\] / &quot;, $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(&quot; / \[\[( . *) \]\] / &quot;, '', $title);
          $title = '&lt;img src=&quot;' . $get_img_url . '&quot; alt=&quot;' . $get_alt . '&quot; /&gt;';
        }
        return $title;
      } else {
        return $title;
      }
    } 
    ?>

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

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

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

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

    さいごに・・・

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

     

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

    最新情報をお届けします

    Twitter でみうをフォローしよう!

    About

    みう

    みう (@miu0512)

    フリーランス4年を経て起業。ホームページ制作やLP制作を企画からマーケティングまですべて請けているため、「Webコーディネーター」として活動中。

    Category

    Popular

    • 本日
    • 週間
    • 月間
    • 殿堂

    本日の人気記事

    週間の人気記事

    月間の人気記事

    殿堂の人気記事

    PAGETOP