gtagset=(1)です

カスタムメニューを使ったドロワーメニュー構築

  • 作成日:2020-3-16
WordPressのカスタムメニューをドロワーメニューとして組み込む場合、メニュー構造のクラス名をかなり作り込まないとだめです。そんな場合は、wp-bootstrap-navwalkerクラスを利用します。
speedy.jpg Photo
wp_bootstrap_navwalker

wp-bootstrap-navwalker

wordpressにドロップダウンメニューを採用する場合に、bootstrap.jsを利用すると簡単に実現できます。しかもレシポンシブに対応していますので、モバイル機器などにも新たなコーディングをする必要はありません。これの弊害としては、wordpressのカスタムメニューの構造はそのままでは対応していないということです。wordpressのカスタムメニュー形式を柔軟に変更し、bootstrap.jsに必要なクラスを挿入するために、このwp-bootstrap-nvwalkerを使用します。

wp-bootstrap-nvwalkerは、下記のgithubサイトから最新版をダウンロードして使用します。

wp-bootstrap-navwalker-master.zipという名前で圧縮形式でダウンロードされますので、これをディスクトップなどの適当な場所に解凍しておきましょう。

wp-bootstrap-naviwalkerをdrawer.jsに対応させる

前述のwp-bootstrap-naviwalkerはその名前のとおり、bootstrap用に合わせてあります。読者の中には、drawer.jsスクリプトに合わせたいという要望があります。

当記事のテーマは、このwp-bootstrap-naviwalkerをdrawer.jsに対応させることを目的としています。この記事を読めばwp-bootstrap-naviwalkerのどこをどういう風に修正するかわかるようになっています。

ちなみに、drawer.jsを知らない方のために説明すると、drawer.jsは、横からすっーと出てくるドロワーメニューを簡単にwordpressサイトに実装するJqueryライブラリーです。表示領域の狭いモバイル用サイトの制作に適しています。以下のGIF画像を参考にどうぞ。

drawer.jsで作ったドロワーメニュー(動画)
drawer.jsドロワーメニュー

当ブログでも実際にdrawer.jsをつかったドロワーメニューの作り方を紹介しています。 wp-bootstrap-navwalker-masterをダウンロードするGithubの使い方もモバイル用にハンバーガーアイコンの設置方法も詳しく解説しています。当記事と合わせてご覧ください。

当ブログでも実際にdrawer.jsをつかったドロワーメニューの作り方を紹介しています。 wp-bootstrap-navwalker-masterをダウンロードするGithubの使い方もモバイル用にハンバーガーアイコンの設置方法も詳しく解説しています。当記事と合わせてご覧ください。

wp-bootstrap-naviwalkerファイルの修正

まず、wordpressにインスト-ルする前に、必要な修正を先にやっちゃいましょう。修正するファイルは、解凍したwp-bootstrap-navwalker-master.zipのトップフォルダーにあるclass-wp-bootstrap-navwalker.phpファイル。

修正するのはbootstrap用のクラス名をdrawerのクラス名に変更する作業です。どちらもほぼ同じような名前ですが、クラス名の先頭にdrawer~を付加します。修正対象のバージョンは4.3.0。バージョンアップされた場合は、以下に示した行も多少変更になる可能性があります。あらかじめご了承ください。

修正はbootstrap用のクラス名をdrawerのクラス名に変更する作業です。どちらもほぼ同じような名前ですが、クラス名の先頭にdrawer~を付加します。修正対象のバージョンは4.3.0。バージョンアップされた場合は、以下に示した行も多少変更になる可能性があります。あらかじめご了承ください。

修正1:50行目

$classes = array( ‘dropdown-menu’ );
$classes = array( ‘drawer-dropdown-menu’ );

修正2:138行目

$classes[] = ‘dropdown’;
$classes[] = ‘drawer-menu-item’;

修正3:146行目

$classes[] = ‘nav-item’;
$classes[] = ‘drawer-dropdown’;

修正4:198行目

$atts[‘class’] = ‘dropdown-item’;
$atts[‘class’] = ‘drawer-dropdown-menu-item’;

修正5:284行目

// With no link mod type set this must be a standard tag.

上記コメント行の下に以下のif文を追加

if ( isset( $args->has_children ) && $args->has_children ) {
//サブメニューがある場合はキャレットを追加
$item_output .= ‘<span class=”drawer-caret”></span>’;
}

上記5カ所を修正完了したら、新しい class-wp-bootstrap-navwalker.phpとして保存し、ブログのテーマフォルダー直下に配置して、これ以降のインストレーション作業をおこなってください。

インストレーション作業

インストレーション作業は、以下の簡単2ステップのみです。

ステップ1: class-wp-bootstrap-navwalker.php ファイルを読み込み

function.phpに以下のコーディングを追加し、 class-wp-bootstrap-navwalker.php の読み込みをおこないます。

function register_navwalker(){

	    require_once get_stylesheet_directory() . '/class-wp-bootstrap-navwalker.php';
}
add_action( 'after_setup_theme', 'register_navwalker' );
※子テーマを使用している場合、テーマフォルダーのディレクトリーは上記のようにget_stylesheet_directoryで取得します。

ステップ2:カスタムメニューを表示

header.php等にメニューを表示させるためのwp_nav_menu()を呼び出している部分があると思います。これに渡すパラメータを以下のように変更してください。なお、使用するカスタムメニューのテーマロケーションをdrawer_menu_sampleとしています。各自の環境に合わせてお使いください。

<?php
wp_nav_menu( array(
			'theme_location' => 'drawer_menu_sample',
			'container'     =>'', 
			'menu_class'    =>'',
     		'depth'           => 2,
			'items_wrap'    =>'<ul class="drawer-menu" id="main-nav">%3$s</ul>', // class、IDは適宜調整
    		'fallback_cb'     => 'wp_bootstrap_navwalker::fallback',
			'walker' => new WP_Bootstrap_Navwalker()				
			)
);
?>

これでインストレーション作業は終了です。あとはwordpressを起動してカスタムメニューを作成すれば、drawer.jsをつかったカスタムメニューが起動するはずです。

出力コード

実際に出力されたカスタムメニューのコードを以下に示します。ただし、直に吐き出されたコードから不必要なクラス IDなど省力して、なるべく可読性の良いコードに仕上げています。

<nav class="drawer-nav" role="navigation">

	<ul class="drawer-menu" id="main-nav">
		<li class="drawer-dropdown">
			<a title="MENU1" href="#" class="nav-link">MENU1</a>
		</li>
		<li class="drawer-menu-item drawer-dropdown ">
			<a title="MENU2" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" class="dropdown-toggle nav-link">MENU2<span class="drawer-caret"></span></a>
			<ul class="drawer-dropdown-menu" aria-labelledby="menu-item-dropdown-10831" role="menu">
				<li class="drawer-dropdown">
					<a title="SUB1" href="#" class="drawer-dropdown-menu-item">SUB1</a>
				</li>
				<li class="drawer-dropdown">
					<a title="SUB2" href="#" class="drawer-dropdown-menu-item">SUB2</a>
				</li>
			</ul>
		</li>
		<li class="drawer-dropdown">
			<a title="MENU3" href="#" class="nav-link">MENU3</a>
		</li>
	</ul>
</nav>

以上

スポンサーリンク

googleカスタム検索

ランキング

インデックス

※右側の記事と連動したインデックスです。見たいインデックスをクリックしてください。
ページ上部へ戻る