最新情報

NEWS

WordPressのナビゲーション

Wordpress
目次

サイト内回遊率は向上のために

サイト内回遊率の向上とは、Webサイト内のユーザー行動を最適化することです。それにより検索エンジンに評価されやすいサイト構造を作り、SEO効果を高めることができます。回遊率（1セッションあたりのページビュー数）が高いサイトは、ユーザーがサイトに興味を持ち、より多くの情報を求めていると判断されるため、検索順位の向上につながります。

回遊率UPのためにできることはいろいろありますが、今回は一番基本的なサイト内ナビゲーションを適切に設置する方法として、Labridではこういう方法でテーマにナビゲーションを設置していますよ、というお話です。

テーマ作成におけるナビゲーション設置方法３選

テーマに直接記述

ナビゲーションのソースコードをテーマファイルに直接記述します。追加・変更はテーマファイルを修正する必要があります。

メニュー機能を利用

WordPressデフォルトで備わっているメニュー作成機能を使います。追加・変更は管理画面（外観＞メニュー）から手動で行います。

ページリスト（自動出力）

テンプレートタグ wp_list_pages をテーマに記述することでページリストを自動出力します。固定ページの構成が自動で反映されます。

ナビゲーションのデザイン構成や管理体制によって、適切な設置方法を選択する必要があります。

1. テーマに直接記述する

管理画面から編集させたくない・編集する必要がない場合や、凝ったデザインで単純なリスト構造に落とし込めない場合はテーマにHTMLを直接記述します。更新する際はテーマファイルを編集し、FTPでサーバにアップロードする必要があります。

HTMLを理解している人にとってはこれが一番手っ取り早いです。
クライアントの確認が必要な場合はステージング環境にアップして確認いただき、OKが出れば本番環境にアップするという、静的サイトと同様の工程で更新することができます。

2. メニュー機能を利用する

WordPressにデフォルトで備わっているメニュー機能は比較的バランスのとれた使いやすい機能になります。
固定ページや投稿カテゴリなどの一覧からメニューに追加したい項目を選び、メニューに追加します。実際の固定ページの構成にかかわらず、順番や親子関係を自由に変更することができます。外部リンクを追加することもできます。メニューテキストを変更することもできますし、任意のクラスを設定することもできます。

クライアントの確認が必要な場合、ステージング環境の管理画面で作業した後、公開時にはその変更作業を本番環境で再度行う必要があります。こみいった更新の場合は作業漏れのリスクが高まるため、その工程を踏む必要がありそうな場合は避けたほうが良いかもしれません。

3. ページリストを自動出力するテンプレートタグを使う

ページリストは、テンプレートタグで固定ページの一覧を自動で出力します。基本的に固定ページの構成（順番・親子関係）をそのまま反映して出力するため、メニュー機能のような柔軟さはありません。固定ページを頻繁に追加・削除し、それを自動でナビゲーションに反映したい場合にはこの方法を使うことになります。

とにかく自動出力する場合はこれ一択です。このテンプレートタグを使わざるを得ない場面が比較的多いため、このタグが出力するソースコードからいかに多彩なデザインに対応できるかがコーダーの腕の見せどころかもしれません。

Labridの汎用テーマでの実装方法

うちの汎用テーマの基本理念はまず『使える機能は使う』です。
この理念に従うと優先順位は『２＞３＞１』になります。
メニューを使えるようにするタグは割愛するとして、汎用テーマでは基本的にまず『２＞３』の順位で実装しています。
１では特殊な記述は不要なので、汎用テーマに用意した『２＞３』の記述をすべて消してHTMLコードを記述します。

サイトマップ（共通ファイル）の作成

ハンバーガーメニュー、フッターメニューでは全ての固定ページをシンプルに並べることが多いので、共通ファイルとして sitemap.php を用意しています。中身は下記の通り。

<nav class="sitemap-nav">
	<ul class="nav-parent">
		<?php
			$args = array(
				'child_of'     => 0,
				'depth'        => 0,
				'exclude'      => '',
				'include'      => '',
				'link_after'   => '',
				'link_before'  => '',
				'post_status'  => 'publish',
				'sort_column'  => 'menu_order',
				'sort_order'   => 'ASC',
				'title_li'     => '',
				'walker' => new UK_PAGE_MENU_WALKER(),
			);
			wp_list_pages( $args );
		?>
	</ul>
</nav>

必要に応じて exclude に除外ページのIDを追加します。（トップページやフォームの完了画面など）

wp_list_pages()

‘walker’ => new UK_PAGE_MENU_WALKER() は親子関係のあるリストを＋アイコンで折り畳みできるようにするカスタマイズです。
子リストの前にチェックボックスのソースを追加し、チェック状態に応じて子リストを表示させたり隠したりしています。

functions.php に下記を追加します。

class UK_PAGE_MENU_WALKER extends Walker_Page {
    function start_lvl( &$output, $depth = 0, $args = array() ) {
        $indent = str_repeat("\t", $depth);
        $output .= "\n$indent<input type=\"checkbox\">\n<ul class=\"nav-child\">\n";
    }
}

ついでにメニューで使う用のクラスも追加しておきます。

class UK_NAV_MENU_WALKER extends Walker_Nav_Menu {
    function start_lvl( &$output, $depth = 0, $args = array() ) {
        $indent = str_repeat("\t", $depth);
        $output .= "\n$indent<input type=\"checkbox\">\n<ul class=\"nav-child\">\n";
    }
}

CSS記述など詳しくはまた別記事で。

ハンバーガーメニューのテンプレート記述

ハンバーガーメニューではその特性上、サイトマップをそのまま出力するものとしてメニュー（２）は使わない想定です。

このメニューをベースとして、ヘッダーやフッターのメニューを異なるリストにしたい場合に、メニュー（２）をそれぞれの場所で使おう、という設計になります。

<div class="head-offcanvas">
	<div class="offcanvas-toggle"><i></i><i></i><i></i></div>
	<div class="offcanvas-content">
		<div class="sitemap-wrap">
		<?php get_template_part( 'template-parts/sitemap', '' ); ?>
		</div>
	</div>
</div>

ヘッダーメニューのテンプレート記述

メニュー（headmenu）がある場合はそれを表示し、ない場合は自動出力します。

ヘッダーでは、サイトマップをそのまま出力することは少ないので、sitemap.php は読み込まず、ここだけ別パラメータで独自のページリストを出力しやすくしておきます。
この例では階層を１階層だけ（トップ直下のページのみ）出力します。

<nav class="head-nav">
	<?php
		if ( has_nav_menu( 'headmenu' ) ) {
			wp_nav_menu( array(
				'theme_location' => 'headmenu',
				'container'       => '',
				'container_class' => '',
				'menu_class' => 'hdpagelist'
			) );
		} else {
	?>
	<ul class="hdpagelist">
	<?php
		$args = array(
			'depth' => 1,
			'exclude' => '',
			'post_status' => 'publish',
			'sort_column' => 'menu_order',
			'sort_order' => 'ASC',
			'title_li' => ''
		);
		wp_list_pages($args);
	?>
	</ul>
	<?php } ?>
	<?php echo do_shortcode('[snsicons]'); ?>
</nav>

フッターメニューのテンプレート記述

メニュー（footmenu）がある場合はそれを表示し、ない場合は自動出力します。

フッターでは、サブメニュー的な扱いで一部のページリンクのみとする場合があれば、サイトマップすべてを表示する場合があるので『２＞３』の記述がしっくりきます。

<div class="ft-navigation">
	<div class="sitemap-wrap">
		<?php if ( has_nav_menu( 'footmenu' ) ) {
			wp_nav_menu( array(
				'theme_location' => 'footmenu',
				'container'       => 'nav',
				'container_class' => 'sitemap-nav',
				'container_id' => '',
				'menu_class' => 'nav-parent',
				'walker' => new UK_NAV_MENU_WALKER()
			) );
		} else {
			get_template_part('template-parts/sitemap', '');
		} ?>
	</div>
</div>

おまけ：サイトマップで sitemap.php を利用する

スラッグが『sitemap』のページでは、sitemap.php を読み込んで出力します。

<?php the_content();

if ( is_page('sitemap') ) {
	echo '<section class="sitemap-list">';
	get_template_part( 'template-parts/sitemap', '' );
	echo '</section>';
}
?>

CSSはクラス sitemap-list をきっかけに表示を調整します。

自動出力の活用、メニューの活用、それぞれの共通化と独自化など考えることは多いです。
その一助となれば幸いです。

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

*
*