【WordPressテーマ】自作テーマ作成の記録　その７【2つ目】

こんにちは朱夏です。

今回もWordPressテーマ作成の続きをやっていきます。

前回、トップページに投稿記事一覧を読み込むところまで作成しました。
今回はヘッダーに手を置加えていきます。

勉強させていただく動画はこちら。

それではやっていきます。

functions.php

最初にfunctions.phpの追記をしていきます。
これは、管理画面でヘッダーやフッターの設定を行えるようにするためのものです。
コードはこんな感じになります。

<?php
// サムネイル
add_theme_support(
    'post-thumbnails'
);

// メニュー機能
register_nav_menus(
    array(
        'gloval-navigation' => 'グローバル', 
        // 'place_sidebar' => 'サイドメニュー',
        // 'footer-navigation' => 'フッター',
    )
);

?>

メニュー機能の部分が今回追記したものになります。
サイドメニュー、フッターについては、今回使用しないのでコメントアウトしてあります。

これで管理画面の外観に、メニューという項目が表示されるようになりました。

ナビゲーションバー

ナビゲーションバーの項目を変更するには、現状だとコードを書き換える必要があるので、管理画面から変更できるようにしていきます。

コードを変更前と変更後で置いておきます。

＜変更前＞

<!-- タイトルとナビゲーション -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
   <div class="container">
      <div class="col-md-8 col-12">
         <h2 class="h1 py-3 text-light">My Theme</h2>
      </div>
      <div class="col">
         <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="ナビゲーションの切替">
            <span class="navbar-toggler-icon"></span>
         </button>
         <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
            <div class="navbar-nav">
               <a class="nav-item nav-link active" href="#">ホーム</span></a>
               <a class="nav-item nav-link" href="#">プロフィール</a>
               <a class="nav-item nav-link" href="#">メニュー</a>
            </div>
         </div>
      </div>
   </div>
</nav>
<!-- タイトルとナビゲーション END -->

＜変更後＞

<!-- タイトルとナビゲーション -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
   <div class="container">
      <div class="col-md-8 col-12">
         <h2 class="h1 py-3 text-light">My Theme</h2>
      </div>
      <div class="col">
         <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="ナビゲーションの切替">
            <span class="navbar-toggler-icon"></span>
         </button>
         <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
         <?php
            $defaults = array(
               'menu_class'      => 'navbar-nav',
               'container'       => false,
               'link_before'     => '<span class="text-light nav-item nav-link">',
               'link_after'      => '</span>',
               'theme_location'  => 'gloval-navigation',
            );
            wp_nav_menu( $defaults );
         ?>
         </div>
      </div>
   </div>
</nav>
<!-- タイトルとナビゲーション END -->

コードを変更したら、管理画面からの操作になります。
手順は以下です。

1. 外観＞メニュー　を選択
2. メニュー名(任意)を入力
3. 「メニューを作成」を押下
4. メニュー項目を追加の「カテゴリー」を展開
5. 必要な項目にチェック
6. 「メニューに追加」を押下
7. メニュー構造＞メニュー設定＞メニュー位置＞グローバル　にチェック
8. 「メニューを保存」を押下