08：グローバルナビゲーションを表示する
公開日:2018年10月09日
更新日:2018年11月06日
wp_nav_menu関数を使用して固定ページリンクを羅列するグローバルナビゲーションを表示させます。
「index.php」のグローバルナビゲーションを表示したいところに「wp_nav_menu();」を記述します。
index.php
ハイライト部分を追記
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title><?php bloginfo('name'); ?><?php wp_title('|'); ?></title>
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" />
</head>
<body>
<div class="container">
<div class="header">
<div class="inner">
<h1><a href="<?php echo home_url(); ?>"><?php bloginfo('name'); ?></a></h1>
<p><?php bloginfo('description'); ?></p>
<p><?php echo get_template(); ?></p>
<div class="theme_img"><img src="<?php echo get_template_directory_uri(); ?>/img/image.png" alt="テーマ内画像" /></div>
</div><!-- /.inner -->
</div><!-- /.header -->
<div class="global_nav">
<div class="inner">
<?php wp_nav_menu(); ?>
</div><!-- /.inner -->
</div><!-- /.nav -->
<div class="content">
<div class="main">
メインコンテンツ
</div><!-- /.main -->
<div class="sidebar">
サイドバーコンテンツ
</div><!-- /sidebar -->
</div><!-- /.content -->
<div class="footer">
<div class="inner">
<div class="copyright">
© <?php echo date('Y'); ?>
<a href="<?php echo home_url(); ?>"><?php bloginfo('name'); ?></a>.
</div>
</div><!-- /.inner -->
</div><!-- /.footer -->
</div><!-- /.container -->
</body>
</html>
表示結果
公開サイトを確認すると固定ページリンクのリストが表示されています。
wp_nav_menu関数が出力するHTMLタグ
<ul>
<li class="page_item page-item-2">
<a href="http://localhost/lesson1/sample-page/">サンプルページ</a>
</li>
</ul>
リンクをクリックします。アドレス欄を確認するとクリックした固定ページのパーマネントリンクでアクセスしていることが確認できます。
ブラウザの表示内容が変わらないのは、タイトルや本文表示関数をまだテンプレートに記述していない為、どのページも表示内容に変化がありません。
現在表示しているページには「current_page_item」クラスが付与されるのでCSSで装飾することができます。
また固定ページは階層構造をとることができ、子となったページはリストが入れ子になり「children」クラスが付与されます。
このページで出てくる関数
WordPress関数は「公式サイトのドキュメント」で確認しましょう。
WordPress関数
wp_nav_menu()
欠席者対応：wireframe02
同じタグのコンテンツ
同じカテゴリーのコンテンツ
