カテゴリー: WordPress

WordPress のテンプレートタグ wp_nav_menu を BootstrapのNavsメニューに対応させたいケースについてご紹介します。

wp-bootstrap-navwalkerというライブラリを使用すると、wp_nav_menuをBootstrapのNavsに対応させることができます。

使い方

使い方は２ステップ、ライブラリの読み込みとソースコードの作成です。

読み込み

class-wp-bootstrap-navwalker.php をコピーもしくはダウンロードして、テーマディレクトリに保存します。class-wp-bootstrap-navwalker.php というファイル名で保存しましょう（ファイル名はなんでもOK）。

読み込み記述がない場合は、functions.php に class-wp-bootstrap-navwalker.php の読み込みコードを記載します。

<?php
/**
* WP Bootstrap Navwalker
*/
require get_template_directory() . '/class-wp-bootstrap-navwalker.php';

これでライブラリ class-wp-bootstrap-navwalker.php が読み込まれて使用可能になります。

wp_nav_menu の記述

wp_nav_menu にキーを渡すことで Bootstrap の Navs 対応ができるようになっています。

<?php
wp_nav_menu( array(
	'menu_id' => 'メニュー名',
	'menu_class' => 'nav',
	'container_id' => 'navbarNav'
	'fallback_cb' => 'WP_Bootstrap_Navwalker::fallback',
	'walker' => new WP_Bootstrap_Navwalker()
));

メニューの子要素を表示するには、depthのキーを2に指定してください。

pugiemonn

CAMON.TOKYO の吉澤修です。

記事に関連したお困りごとやお仕事のご相談などはお問い合わせからご連絡ください。

使い方

投稿のパーマリンクを表示するテンプレートタグです。ループの中で使用する必要があります。
パーマリンクとは、投稿の固有のURLのことです。

<?php
the_permalink();
?>

出力

the_permalinkでstaffページを出力した例です。

http://localhost:8080/staff/

参考

https://wpdocs.osdn.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%BF%E3%82%B0/the_permalink

pugiemonn

CAMON.TOKYO の吉澤修です。

記事に関連したお困りごとやお仕事のご相談などはお問い合わせからご連絡ください。

使い方

タイトルを表示するテンプレートタグです。
必ずループ内で使用するようにとあります。

<?php
the_title( '<h2>', '</h2>' );
?>

こちらでh2タグに囲まれたテキストのタイトルが出力されます。

参考

https://wpdocs.osdn.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%BF%E3%82%B0/the_titl

pugiemonn

CAMON.TOKYO の吉澤修です。

記事に関連したお困りごとやお仕事のご相談などはお問い合わせからご連絡ください。

WordPressてメニューを扱うwp_nav_menuについて機能を紹介します。

使い方

wp_nav_menu()を記述して、パラメータを配列で渡します。

<?php
	wp_nav_menu(array(
		'menu_id' => 'primary-menu',
	));
?>

classの追加

classの追加パターンです。menu_classというキーにクラス名を指定します。

<?php
	wp_nav_menu(array(
		'menu_id' => 'primary-menu',
		'menu_class' => 'navbar-nav-scroll',
	));
?>

ラップするcontainerにクラスの追加

container_classに記述します。

	<?php
		wp_nav_menu(array(
			'menu_id' => 'primary-menu',
			'menu_class' => 'navbar-nav bd-navbar-nav flex-row',
			'container_class' => '',
		));
	?>

aタグにクラスを追加

wp_nav_menuのデフォルトでは、aタグにクラスを足すことはできないようです。functions.phpにコードの追加が必要です。

参考

• https://wpdocs.osdn.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%BF%E3%82%B0/wp_nav_menu

pugiemonn

CAMON.TOKYO の吉澤修です。

記事に関連したお困りごとやお仕事のご相談などはお問い合わせからご連絡ください。