【現在2000名】無料のフリーランスコミュニティ『東フリサロン』はこちらからどうぞ!

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

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

こんにちは!フリーランスエンジニア兼ディレクターのショーヘー(@showheyohtaki)です。

この記事は、Web制作初心者のかた向けに『実務で使えるWordPressを使ったサイト制作手法』ついて解説していく連載です。

前回の記事はこちら↓

2.トップページに新着記事の一覧を表示する【30DAYSトライアル】

3rdステップであるこの記事では、メニュー を有効化し、リンクを動的に出力していきます。

 

1.メニューを有効にするための記述をfunctions.phpに追加

まず、メニューを有効にするための記述をfunctions.phpに追加していきます。

実務でよく作るパターンとしては、ヘッダーメニュー、フッターメニュー、そしてスマホ閲覧時に表示させるドロワーメニューの3パターンなので、このレッスンでもその3つを作ることにします。

※フッターメニュー作成に関するコードは、演習課題にするため、あえて削除しています。最後に自力で作れるように、調べて理解しながら進めてくださいね👍

コピー

/**
* メニューの登録
*
* 参考:https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/register_nav_menus
*/
function my_menu_init()
{
register_nav_menus(
array(
'global' => 'ヘッダーメニュー',
'drawer' => 'ドロワーメニュー',
)
);
}
add_action('init', 'my_menu_init');

メニューを登録すると、管理画面の「外観」に「メニュー」が表示されるようになったはずです。

これが出ていれば、正しく設定できています。

 

2.メニュー項目を設定する

『外観 > メニュー』から新規追加してみると、「メニューの位置」に先ほどfunctions.phpに追加したメニュー名が表示されているはずです。

表示させたいメニュー項目を追加して、どのメニュー位置で表示させたいのかを選択しましょう。

選択したら、メニューを保存してください。

 

3.ロゴ / サブタイトルを動的に表示する

それではグローバルメニュー全体を動的に表示していきます。

まずはロゴとサブタイトルの表示を動的に変えていきましょう!

管理画面の『設定 > 一般』で設定されている項目を表示していきます。

キーワード

  • is_home( )
  • is_front_page( )
  • esc_url( )
  • home_url( )
  • bloginfo( )

コピー
<!--
<h1 class="header-logo"><a href="/">blog title</a></h1>
<div class="header-sub">サブタイトルが入りますサブタイトルが入ります</div>
ここを動的に置き換える
-->
<?php if (is_home() || is_front_page() ) : //トップページではロゴをh1に、それ以外のページではdivに。 ?>
<h1 class="header-logo"><a href="<?php echo esc_url(home_url('/')); ?>"><?php bloginfo('name'); ?></a></h1><!-- /header-logo -->
<?php else : ?>
<div class="header-logo"><a href="<?php echo esc_url(home_url('/')); ?>"><?php bloginfo('name'); ?></a></div><!-- /header-logo -->
<?php endif; ?>
<div class="header-sub"><?php bloginfo('description'); //ブログのdescriptionを表示 ?></div><!-- /header-sub -->

これでブログのタイトルとサブタイトルが表示されるようになりました。

ちゃんと設定できているか、『一般』から変更して確認してみてくださいね。

 

4.メニューを動的に表示する

次はヘッダーメニューとドロワーメニューを動的にしていきます。

wp_nav_menu( ) にfunctions.phpで記述したメニュー名を引数として渡します。

キーワード

  • wp_nav_menu( )

ドロワーメニューのコード

コピー
<!-- drawer-content -->
<div class="drawer-content">
<?php
//.drawer-navを置き換えて、スマホ用メニューを動的に表示する
wp_nav_menu(
array(
'depth' => 1,
'theme_location' => 'drawer', //ドロワーメニューをここに表示すると指定
'container' => 'nav',
'container_class' => 'drawer-nav',
'menu_class' => 'drawer-list',
)
);
?>
</div><!-- /drawer-content -->

ヘッダーメニューのコード

コピー
<!-- header-nav -->
<nav class="header-nav">
<div class="inner">
<?php
wp_nav_menu(
//.header-listを置き換えて、PC用メニューを動的に表示する
array(
'depth' => 1,
'theme_location' => 'global', //グローバルメニューをここに表示すると指定
'container' => 'false',
'menu_class' => 'header-list',
)
);
?>
</div><!-- /inner -->
</nav><!-- header-nav -->

記述できたら、トップページを見てみましょう。

メニューに表示される項目が、『外観 > メニュー』で設定したものに変わっていればOKです👍

※スマホ時の表示もチェックしてくださいね!

また、TF-30にはfontawesomeを入れてあるので、メニューの前に付いているアイコンは自由にカスタムして使ってください😀

アイコンの指定の記述はstyle.cssの629行目以降、2038行目以降にあります。

 

演習課題:フッターに「フッターメニュー」を表示する

ヘッダーメニュー / ドロワーメニューと同じ要領で、フッターメニューを動的に表示してみましょう!

変更したら動作確認までしてくださいね❗️

ここまでできたら、メニューの動的化も完了です。

お疲れ様でした☺️

30DAYSトライアルのコンテンツは、皆様からのサポートで運営しています。

今後も良質なコンテンツを作成していきますので、よろしければサポートをお願いいたします。

サポート特典として、【コーディング練習用デザインカンプ】をメールアドレスにお送りします。


LINE@にて限定情報公開中!

CTA-IMAGE 『転職したい!』 『理想的なライフスタイルを実現したい!』 『フリーランスになりたい!』 そういう要望を持っている方向けに、週に1度リアルなお役立ち情報を配信しています。 登録すれば、LINE@限定「最短でプログラマーになるための転職ロードマップ」も確認できます!

WordPressカテゴリの最新記事