Learning site for website creation

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