電検三種攻略ブログ

電検三種とオススメ音楽。ためになる家電の知識をお届けします。

【WordPressオリジナルテーマ作成②】「ナビゲーションメニューの設置」

calendar

HTMLで記述されたナビゲーションメニューをPHPの記述に変更します。

PHPの記述によって、WordPressの設定画面から「追加メニュー」としてカテゴリー等のメニューをテーマに反映させることが可能になります。

初期の段階ではWordPressの設定画面にナビゲーションの設定項目が存在しませんので、まず「function.php」ファイルを作成し、設定画面を追加する記述を入れます。

メニュー無し
メニュー設定画面なし

スポンサーリンク

functions.php

functions.phpとは、wordPressに追加機能を加えるプラグイン的なファイルになります。functions.phpに記述を追加することで、WordPressの管理画面からメニューやアーカイブといった様々な要素を実装する事ができます。

プラグインと大きく異なる点は、「他のテーマでは反映されない」というところです。

それではテーマフォルダに「function.php」を作成し、下記のソースを記述します。

functions.php

functions.phpファイル追加後、WordPress設定画面にナビゲーション項目が反映されていればOKです。

メニュー有り画像
メニュー設定画面あり

※通常PHPのコードは 「<?php」 で始まり、 「?>」 で終わりますが、functions.phpは終了の「?>」を省いてもよしとされており、かつそれが推奨されています。

ナビゲーションのHTMLをPHPに変更

ナビゲーションメニューが記述されている箇所のHTMLをPHPに変更します。

今回の場合ですと、PC画面のナビ(headerのナビゲーションのul要素)とスマホ用のナビ(headerのナビゲーションのul要素)全てを削除し、次のPHPを挿入します。

<?php wp_nav_menu(~~~  ~~?>

このタグを挿入することによって、その箇所にWordPress設定画面から追加するナビゲーションメニューに準じたHTMLが出力されるようになります。

PHP挿入後、テーマ画面を確認するとナビゲーションメニューは消えています。

ナビ無し画面PC
ナビ無し画面スマホ

これは挿入したPHPの引用先(WordPressで追加したメニュー)がまだ存在しないためです。

WordPressでナビゲーション項目の追加

WordPress設定画面から、カテゴリーや固定ページなどのメニューを作成します。

今回は5つのメニュー(1つは2階層)を作成します。

テーマ画面を確認すると、メニューバーが表示されていると思います。

メニューPC
PCのグローバルメニュー
メニュースマホ
スマホのメニュー

しかし、テーマ画面を確認すると、メニューバーのスタイルがくずれている事があります。

これはPHPによって出力されたHTMLのclass名等がもともと作成していたCSS等と一致していないためです。

今回はスマホだけ表示が一部おかしくなっています(ドロップダウンが開きっぱなしかつ2階層が見えない)。

Chromeのデベロッパーツールでhtmlを精査して原因を探す

Chromeのデベロッパーツールを使えばPHPから出力されたHTMLを細かく確認する事ができます。

今回の場合、確認すると、どうやらPHPでナビゲーションを呼び出した場合、ナビの項目は全て<a>タグでマークアップされてる感じです。

デベロッパーメニュー

2階層のメニューにしていた「ブログ」の項目は、もともと<p>タグでマークアップしていましたが、そこが<a>タグになってしまったため、javascriptがうまく動作していなかったことになります。

header.phpのjavascriptを修正します。

変更したheader.phpはこちら。

ul li p を ul li a に変更しました。(2か所)

CSSも修正します。(モバイル用に上書き張り付け。)

header.php変更後、テーマ画面のスマホメニュー表示が正しく表示される事を確認します。

スマホ用のドロップダウンメニューを有効にする

今回のテーマではスマホ用(レスポンシブ)に縦並びのドロップダウンメニューを実装しています。

これはjavascriptで動作するようになっていますが、1点問題があり、メニューの親要素にリンクが入っている場合、クリックするとリンクに飛んでしまうので、ドロップメニューが開きません。

これを解消するために、2階層になっているメニューの親要素(今回はblog)からリンクを外します。

リンクを外すには、「カスタムメニュー」を利用します。

カスタムメニュー

WordPressの管理画面から「メニュー」の追加で「カスタムメニュー」を選びます。

名前を付けて、適当にリンクを入れて親要素に配置します。

その後、設定変更でリンクを削除し、保存を押せば親要素からリンクが外れます。

ドロップダウンが有効になっています。

Javascriptの読み込み

インラインスクリプトと外部スクリプト

今回のテーマで使っているjavascriptはスマホのドロップダウンメニューだけですので、phpファイルに直接埋め込む形式(インラインスクリプト)にしています。

しかし、これが他にも多くjavascriptを使用するようになると、PHPの記述が長くなってしまうので、基本的には外部ファイルを参照する「外部スクリプト」での使い方が推奨されています。

動作的にはどちらも同じみたいですが、javascriptを外部スクリプトに変更する場合は「js」の拡張子ファイルを作成し、そこにjavascriptを記述します。ファイル名は「test.js」とします。

js

header.phpの下記の部分をカットしてtest.jsに貼り付け。

functions.phpに外部スクリプトの記述を追加します。

最後にJavascriptが読み込めているか、ナビゲーションの動作確認をして終わりです。

次回はphpのループ関数を使ってトップページの作成(ブログカード表示)、single.php(投稿ページ)、page.php(固定ページ)の作成に入ります。