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

WordPress
スポンサーリンク

こんにちは朱夏です。

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

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

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

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

 

functions.php

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

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

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

 

ナビゲーションバー

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

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

<変更前>

 

<変更後>


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

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

1.外観>メニュー を選択

メニュー管理画面を表示します。

 

2.メニュー名(任意)を入力

表示させるメニューバーに任意の名前を付けます。
ここでは「ナビゲーションバー」と名前を付けました。

 

3.「メニューを作成」を押下

ナビゲーションバーという名前のメニューが作成されます。
これは”枠”が出来たというイメージです。

 

4.メニュー項目を追加の「カテゴリー」を展開

メニューに表示させる項目を選択するために、「カテゴリー」を展開します。

 

5.必要な項目にチェック

メニューに表示させる項目にチェックを付けます。
ここでは、カテゴリー内の全てにチェックを入れています。

 

6.「メニューに追加」を押下

チェックを入れたものが、ナビゲーションバーに表示する項目に追加されます。

 

7.メニュー構造>メニュー設定>メニュー位置>グローバル にチェック

このナビゲーションバーを「どこに」表示させるかを選択するチェックです。
コードでヘッダーにグローバルナビゲーションを表示する様に書いているので、グローバルにチェックを入れます。

 

8.「メニューを保存」を押下

作成したメニュー「ナビゲーションバー」の設定を保存します。


以上でメニューの設定は完了です。
結果を確認してみます。

 

HTMLで書かれていたメニュー項目が、管理画面から設定したカテゴリーにちゃんと書き換わりました。

あとがき

というわけで、今回はナビゲーションバーをWordPress対応していきました。
1つ目を作った時はこの辺りの作業は分割後にやっていたのですが、分割前にやった方がタブの切替などが発生せずスムーズに作業できるので良いかもしれません。

今回は大きな躓きもなく思った通りに実装出来ました。
自分の理解度が多少上がったのと、動画で学習するのがやはり解りやすいですね。

動画をトレースして作業していけば、うまくいかなかった時に、自分がどこで間違えているか辿りやすいので、これから学習するって人にはガチでお勧めです。

今回はここまでです。
次回もよろしくお願いします。

 

タイトルとURLをコピーしました