デイトラweb制作上級編 DAY11

メニューを有効化して、リンクを動的に出力する

ヘッダー

スマホ表示

フッター

①ロゴとタイトルを動的に表示

※設定 > 一般 から編集できる

キーワード(codex)

・is_home( )

・is_front_page( )

esc_url( )

・home_url( )

bloginfo( )

ヘッダーに表示させるなら header.php

フッターに表示させるなら footer.php にコードを書く

(演習課題:headerの部分をfooterに変えるだけ)

②メニューの有効化+リンクを動的に出力

各ファイルですること

1. functions.php(メニュー登録)
→ 管理画面の「外観」に「メニュー」を表示

2. header.php
→ ヘッダーメニューとドロワーメニューを動的に表示する

3. footer.php
→ フッターメニューを動的に表示する

1. functions.php(メニュー登録)

function my_menu_init() {
  register_nav_menus(
    array(
      // 'キー' => '対応する値'
      'global' => 'ヘッダーメニュー',
      'drawer' => 'ドロワーメニュー',
      'footer' => 'フッターメニュー',
    )
  );
}
add_action('init', 'my_menu_init');

「対応する値」が管理画面の「メニューの位置」に追加される

3. footer.php

<nav class="footer-nav">
    <?php
    wp_nav_menu(
        array(
            'depth' => 1,
            'theme_location' => 'footer', // 配列のキー
            'container' => 'false',
            'menu_class' => 'footer-list',
        )
    );
    ?>
</nav>

※注意点
・「inner」クラスを入れると余白ができるため削除

・container は例えば 'container' => 'div' にすると
wp_nav_menuの内容がdivタグに囲まれてhtmlに出力される

キーワード(codex)

・wp_nav_menu( )

まとめ

今回はメニューを管理画面から編集できるようにしました。

PCの修理やほかにもいろいろとあり、久しぶりの勉強でしたが意外と何をしていたかは覚えているものですね。

また新しく知らないコードが出てきたので、前の分も含めてしっかり復習しておきたいと思います!

コメントを残す

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