「ボックスメニュー」ショートコードの実装方法。WPメニュー機能で内容を変更できるやつ。

PR WordPressカスタマイズ 0

アイコン付きで視覚的にも分かりやすい「ボックスメニュー」を表示させるショートコードを実装する方法です。

WordPressの「メニュー」画面でメニューを作成できるので、ほぼほぼコードを書く必要がない方法です。

スポンサーリンク
レクタングル（大）広告

完成形

「ボックスメニュー」を本文中で利用すると、以下のように4列で表示されます（スマホでは2列表示）。

本文中のボックスメニュー

サイドバーエリアのようなウィジェットでは、2列表示になります。

サイドバーのボックスメニュー

画像を用意すれば、以下のようなアイコンメニューも作成できます。

本文中の画像アイコンボックスメニュー

サイドバーウィジェットでの表示。

サイドバーの画像アイコン

アイコン FLAT ICON DESIGN

主な手順

ボックスメニューショートコードの実装に必要なカスタマイズ手順はこちら。

  1. functions.phpにPHPコードをコピペ
  2. style.cssにCSSをコピペ
  3. メニューを作成する
  4. 利用箇所でショートコードを貼り付ける

実装するだけなら、コピペだけでできます。コピペ後は、好みに合わせて色や余白を調節すればOK。

コードのカスタマイズが終わった後はWordPressのメニュー画面からメニューを作成するだけです。

以下のカスタマイズは、WordPress公式テーマのTwenty
Seventeenで動作確認をしています。なので大抵のテーマには利用できると思います。ただ、テーマによっては特別な設定が必要になるかもしれません。

functions.phpにPHPコードをコピペ

まずはテーマ（子テーマ）のfunctions.phpに以下のPHPコードを追記する形でコピペします。

/**
 * ボックスメニューのカスタマイズ
 * @author: わいひら
 * @link: https://nelog.jp/box-menu
 * @license: http://www.gnu.org/licenses/gpl-2.0.html GPL v2 or later
 */

//テキストウィジェットでショートコードの実行
add_filter( 'widget_text', 'do_shortcode' );

//ボックスメニューショートコード
add_shortcode('box_menu', 'get_box_menu_tag');
if ( !function_exists( 'get_box_menu_tag' ) ):
function get_box_menu_tag($atts){
  extract(shortcode_atts(array(
    'name' => '', // メニュー名
    'class' => null,
  ), $atts, 'box_menu'));

  //デフォルトアイコンフォント（Font Awesome4）
  $def_icon_classes = 'fa fa-star'; //Font Awesome5を利用する場合は変更する

  if (is_admin()) {
    return;
  }

  $tag = null;
  $menu_items = wp_get_nav_menu_items($name); // name: カスタムメニューの名前
  if (!$menu_items) {
    return;
  }

  foreach ($menu_items as $menu):

    $url = $menu->url;
    $title = $menu->title;
    $title_tag = '<div class="box-menu-label">'.$title.'</div>';
    $description_tag = '<div class="box-menu-description">'.$menu->description.'</div>';
    $attr_title = $menu->attr_title;
    $classes = implode(' ', $menu->classes);
    $icon_tag = '<div class="'.esc_attr($def_icon_classes).'" aria-hidden="true"></div>';
    //画像URLの場合
    if (preg_match('/(https?)(:\/\/[-_.!~*\'()a-zA-Z0-9;\/?:\@&=+\$,%#]+)\.(jpg|jpeg|gif|png)/', $attr_title)) {
      $img_url = $attr_title;
      $icon_tag = '<img src="'.esc_url($img_url).'" alt="'.esc_attr($title).'" />';
    } //アイコンフォントの場合
    elseif (preg_match('/fa.? fa-[a-z\-]+/', $classes)) {
      $icon_tag = '<div class="'.esc_attr($classes).'" aria-hidden="true"></div>';
    }
    $icon_tag = '<div class="box-menu-icon">'.$icon_tag.'</div>';

    $tag .= '<a class="box-menu" href="'.esc_url($url).'">'.
      $icon_tag.
      $title_tag.
      $description_tag.
    '</a>';
  endforeach;
  $add_class = null;
  if ($class) {
    $add_class = ' '.$class;
  }
  //ラッパーで囲む
  $tag = '<div class="box-menus'.$add_class.'">'.$tag.'</div>';

  return apply_filters('get_box_menu_tag', $tag);
}
endif;

コードの冒頭で、テキストウィジェットでもショートコードが使えるように処理を追加しています。

上記コードは、あくまで「Font Awesome4でカスタマイズする際の例」になります。

Font Awesome5で利用するには、以下の部分を

//デフォルトアイコンフォント（Font Awesome4）
  $def_icon_classes = 'fa fa-star'; //Font Awesome5を利用する場合は変更する

以下のように変更する必要があるかと思います。

//デフォルトアイコンフォント
  $def_icon_classes = 'fas fa-star'; //Font Awesome5を利用する場合は変更する

style.cssにCSSをコピペ

次にテーマ（子テーマ）のstyle.cssに以下を追記する形でコピペします。

/**
 * ボックスメニューのカスタマイズ
 * @author: わいひら
 * @link: https://nelog.jp/box-menu
 * @license: http://www.gnu.org/licenses/gpl-2.0.html GPL v2 or later
 * @reference: https://ponhiro.com/box-nav/ @ponhiroo
 */

.box-menus {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin: 18px 0;
}
.box-menus * {
  line-height: 1.6;
  margin: 0;
}

.box-menus .box-menu {
  display: block;
  padding: 0.5em 1em;
  text-decoration: none;
  width: 100%;
  text-align: center;
  min-height: 100px;
  cursor: pointer;
  background: #fff;
  width: calc(100%/4);
  color: #777;
  box-shadow: inset 1px 1px 0 0 #eee, 1px 1px 0 0 #eee, 1px 0 0 0 #eee;
  transition: none;
}
.box-menus .box-menu:last-child {
  margin-right: auto;
}
.box-menus .box-menu:hover {
	box-shadow: inset 2px 2px 0 0 #f4b3c2, 2px 2px 0 0 #f4b3c2, 2px 0 0 0 #f4b3c2, 0 2px 0 0
#f4b3c2;
  color: #777;
  z-index: 2;
}

.box-menus .box-menu-icon {
  color: #f4b3c2;
  font-size: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.box-menus .box-menu-icon * {
  margin: 10px 0;
  max-width: 60px;
  max-height: 60px;
  height: auto;
  display: inline-block;
}
.box-menus .box-menu-icon img {
  font-size: 16px;
  border: none;
  box-shadow: none;
  filter: drop-shadow(0px 0px 3px rgba(0, 0, 0, 0.2));
}

.box-menus .box-menu-label {
  font-size: 14px;
  font-weight: 600;
}

.box-menus .box-menu-description {
  font-size: 10px;
  opacity: 0.8;
}

/* ウィジェットに入っている場合（テーマによってCSSセレクタの変更が必要かも） */
.widget .box-menus .box-menu {
  width: calc(100%/2);
}

/* スマホ用 */
@media screen and (max-width: 599px){
  .box-menus .box-menu{
    width: calc(100%/2);
  }
}

使用されている色や余白に関しては、好みで変更してください。

また、テーマによっては「CSSセレクタの優先度を変更する必要があるケース」もあるかもしれません。全てのテーマで動作保証はできないのでご了承ください。

Font Awesome4が読み込まれていない場合

Font Awesome4を利用する場合で、Font Awesome4のCSSファイルが読み込まれていないテーマの場合は、<head></head>内に以下を挿入してください。

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

Font Awesome5が読み込まれていない場合

Font Awesome5を利用する場合で、Font Awesome5のCSSファイルが読み込まれていないテーマの場合は、<head></head>内に以下を挿入してください。

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">

    参考

    今回の「ボックスメニュー」のCSSは、ぽんひろさんの以下の記事を参考にさせていただきました。

    ボックス分けされたナビを作る！回遊率をアップしよう！
    区分けされたナビゲーションをHTMLとCSSで作ります。単純なグローバルナビゲーションよりも視認性が高く、スマホでタップしやすいのでユーザーに優しいインタフェースになっています。HTMLとCSSがわからない初心者向けでコピペで簡単に作れるようにしました！
    ponhiro.com

    WPメニュー機能を利用しないで、HTMLを細かく調整して設置したい場合は、上記手法のほうが向いていると思います。

    メニューを作成する

    あとは、WordPress管理画面の「外観 → メニュー」から「ボックスメニュー」用のメニューの作成を行います。

    メニューの作成方法は、こちらと同じです。

    アイコンや画像が使える「ボックスメニュー」ショートコードの使い方
    アイコンフォントや画像用いて、視覚的にわかりやすいボックスタイプのメニューを表示するショートコード機能の説明です。
    wp-cocoon.com

    利用箇所でショートコードを貼り付ける

    最後にショートコードでボックスメニューを呼び出します。

    ショートコードの呼び出しの基本形はこちら。

    nameオプションに対して単に「作成したメニュー名」を入力すればOKです。
    テキストウィジェットで利用する場合はこんな感じ。
    テキストウィジェットにボックスメニューショートコード
    今回、Twenty Seventeenのウィジェットで、ショートコードを利用するにあたり、「テキストウィジェットのみ」でショートコードを実行するように処理を追加しました。他のウィジェットでも利用するには、別途カスタマイズが必要になるかと思います。
    動作確認
    ショートコードを、本文中や、サイドバーのウィジェットに入れて動作させた例がこちら。
    ボックスメニューの動作確認
    スマホ画面だとこんな感じになります。
    ボックスメニューのスマホ動作
    まとめ
    今回は、「大抵のテーマでボックスメニューを手軽に作って利用できるように」とカスタマイズ方法を書きました。
    というか、自分がまだ使っているSimplicityでも、使えるように実装方法をまとめたものを、残しておきたかっただけというか。
    Cocoonには既に同じ機能があるので、カスタマイズは不要です。
    ボックスメニューは、ヒートマップツールで見てみてもクリック率は上がる傾向にあるので、サイト回遊率を高めたい人向けの施策になり得るかと思います。
    スマホだと、ボックスメニューのタップ率はより顕著に上がる傾向があるので、モバイルサイト向けに設置するというのもありかと思います。