XO Smart Menu プラグイン

概要

スマートフォン向けのスライド メニューを追加するプラグインです。

スクリーンショット

使い方

プラグインを有効にすると、[外観]-[メニュー] に [スマートメニュー] が追加されます。通常のメニューと同様に、メニューに項目を設定します。

設定は、[外観]-[カスタマイズ]-[スマートメニュー] より設定をします。

設定項目

項目 説明
メニューボタンの配置

メニューボタン(ハンバーガーメニュー)を配置する場所を指定します。

下記の3種類があります。

ページ右上
ページの右上に自動で配置します。
ページ右上(固定)
ページの右上に自動で配置します。スクリーンに対して固定位置で表示されます。
手動
自動で配置しません。テンプレートの配置したい場所に手動でタグを記述してください。
メニューボタンのサイズ メニューボタンのサイズ(px)です。
メニューボタンの上からの配置位置 メニューボタンの上からの配置位置(px)です。
メニューボタンの右からの配置位置 メニューボタンの右からの配置位置(px)です。
スクリーンの幅 スマートメニューを有効にするスクリーンの最大幅(px)です。
非表示にする CSS セレクター

スクリーンの幅以下になった場合に非表示にする CSS セレクターです。

テーマの標準のメニューを指定することにより、標準のメニューとスマートメニューでバッティングを避けることができます。

初期値は、”.menu-toggle, .secondary-toggle, #menu-toggle” です。

メニューボタンの配置

メニューボタンの配置で”手動”を選択した場合、メニューボタンを配置したいテンプレート(header.php 等)の場所に下記のテンプレート タグを記述してください。

<?php if ( function_exists( 'xo_smart_menu_button' ) ) xo_smart_menu_button(); ?>

設定例

Twenty Sixteen テーマの場合

メニューボタンの上からの配置位置: 32

メニューボタンの右からの配置位置: 32

スクリーンの幅: 910

非表示にする CSS セレクター: #menu-toggle

Twenty Fifteen テーマの場合

メニューボタンの上からの配置位置: 26

メニューボタンの右からの配置位置: 28

スクリーンの幅: 954

非表示にする CSS セレクター: .secondary-toggle

Twenty Fourteen テーマの場合

メニューボタンの配置: 手動

メニューボタンのサイズ: 20

メニューボタンの上からの配置位置: 3

メニューボタンの右からの配置位置: 5

スクリーンの幅: 782

非表示にする CSS セレクター: .menu-toggle

header.php の nav タグの直下にメニューボタン テンプレート タグを記述

インストール

  1. このページのダウンロードより ZIP 形式のプラグイン ファイルをダウンロードします。
  2. WordPress 管理画面->[プラグイン]->[新規追加] メニューより、[プラグインを追加] ページを開きます。
  3. [プラグインのアップロード] ボタンをクリックします。
  4. [参照] ボタンをクリックします。
  5. ファイルのアップロード ダイアログが表示されます。ここでダウンロードした ZIP ファイルを選択します。
  6. [今すぐインストール] ボタンをクリックします。
  7. インストールが完了したら “プラグインを有効化” をクリックします。

動作環境

  • WordPress 4.5 以降
  • WordPress 4.7 対応

ダウンロード

xo-smart-menu.0.1.0.zip

※ 現在、公式ディレクトリには登録していません。

更新履歴

v0.1.0

  • 最初のリリース