バズログ BUZZLOG

MENU

2018-12-27ホームページ制作

初心者の為のWordPressでフッターメニューの作成と追加する2つの方法

かまとりーぬ 4

目次

WordPressにフッターメニューを追加する方法が知りたい!

WordPressではサイトのナビゲーションの役目をする「メニュー」を2つの場所へ表示させる事が出来ます。

サイト冒頭部分のヘッダーと、サイト下のフッターです。

サイト内の記事数やカテゴリー、固定ページ数が多くなった時にナビゲーションの重要性は高まります。

そんなフッターはフッターメニューが搭載されているテーマであれば、簡単に追加する事が可能です。

しかし中にはフッターメニューが実装されていないテーマもあります。

  • テーマにフッターが実装されているフッターメニューの追加方法
  • テーマにフッターが実装されていない場合の、フッターメニュー追加方法

今回は、上記2つのフッターメニューを追加する方法について詳しく解説していきましょう。

1:いちばん簡単!WordPressフッターメニューの追加方法

テーマにフッターメニューが実装されている場合の追加方法を紹介します。

サイト内で大きな役割を担う「フッター」ですが、どの様に追加していくかご存知ですか?

固定ページや投稿数、カテゴリー数が増えていくとフッターやヘッダーの様なナビゲーションが備わっていないとユーザーにとって非常に不便です。

そんなフッターをサイト内に追加させる事で、サイトの使い勝手を向上させる事が出来ます。

サイトの下部分に表示させるメニュー「フッター」は5つのステップで作成する事が可能です。

  1. 外環➡️メニュー
  2. 新規追加
  3. 名前をつける
  4. 追加したいメニューを選択
  5. 保存して完了

早速、上記5つのステップでフッターを作成する方法について解説していきます。

1-1:かんたん5ステップ!フッター追加手順

フッターをサイト内に追加する手順を紹介していきましょう。

WordPressにログインし設定していきます。

(1) 外観➡️「メニュー」クリック

フッター設定方法

(2) 「新規メニューを作成」クリック

画面トップの「編集するメニューを選択:または新規メニューを作成してください。」の「新規メニューを作成」するをクリックしましょう。

フッター設定方法

(3) メニュー名を入力

①でメニュー名を入力します。今回は分かりやすく「フッターメニュー」とします。

入力後、②「メニューを作成」ボタンをクリックします。

フッター作成

(4) 左カラムからメニュー項目を追加する

固定ページ・投稿ページ・カスタムリンク・カテゴリーの中から追加したいメニュー項目を選択し「メニューに追加」をクリックします。

フッター作成

(5) 追加するとメニュー構造に追加される

フッター作成

(6) 名称とメニューの並び順 変更方法

メニュー構造に追加したメニュータイトル▼をクリックすると以下画像の画面になります。

フッター作成

① ナビゲーションラベル(メニュー名)の変更や②ではメニューの並び替えを行う事が可能です。

フッター作成

メニューの並び替えは、ドラッグ&ドロップで行う事も出来ます。

フッター作成

(7) 「フッターナビ」にチェックを入れる

メニュー設定➡️メニューの位置では、「フッターナビ」にチェックを入れましょう。

フッター作成

(8) 「メニューを保存」クリック

ここまで入力が終わったら「メニューを保存」をクリックします。

フッター作成

(9) サイトを確認してみる

下画像の様に、フッターにメニューが入って入ればOKです。

フッター作成

以上がフッターを追加する方法になります。

2:コピペで簡単!フッターメニューを追加するカスタマイズ方法

サイト内のナビゲーション機能を向上させるフッターですが、全てのWordPressテーマにフッターメニューが実装されている訳ではありません。

使ってるテーマにフッターメニューが実装されていない場合は、どうやってフッターを表示させればいいの?

安心してください、フッターメニューをコピペで簡単に追加する方法を紹介していきます。

今回は、Twenty Sixteenテーマを用いて解説していきましょう。

※Twenty Sixteenの親テーマを直接いじってしまうと、失敗してしまった時に取り返しがつかなくなってしまうので、必ず子テーマで作業する様にして下さい。

フッターが実装されていないテーマにフッターメニューを追加させる手順3ステップで出来ます。

  1. functions.phpにコード追加
  2. footer.phpのコードを一部消去しコードを追加
  3. WordPress管理画面でフッターメニューの作成

上記の順に手順を紹介していきましょう。

2-1:【ステップ1】functions.phpにコードを追加

さっそくフッターメニューを追加する手順を紹介していきます。

まずは、functions.phpにコードを追加します。

(1) 外観➡️「テーマの編集」クリック

フッターメニュー

(2) 「テーマのための関数(functions.php)」クリック

function.php

(3) functions.phpにコードを追加

functions.phpに下記コードを入力します。

register_nav_menu( 'footer-menu', 'フッターメニュー' );

functions.php

‘フッターメニュー’の部分はメニュー名になるので、好きな名前へ変更してもOKです。入力したら、更新をして保存しましょう。

2-2:【ステップ2】footer.phpのコードを一部消去しコードを追加

functions.phpにコードを追加したら、続いてフッターメニューを表示する為にfooter.phpを編集します。

(1) footer.php を開く

footer.php

(2) site-infoクラスのコードを消去する

footer.phpファイルのsite-infoクラスのコードを見つけて消去します。

下記画像部分です。

footer.php

(3) 消去部分にコードを入力する

site-infoクラスのコードを消去した部分に、下記コードを入力します。

<div class="site-info">

    <?php wp_nav_menu( array('theme/location' => 'footer-menu')); ?>

</div><!-- .site-info -->

footer.php

2-3:【ステップ3】WordPress管理画面でフッターメニューの作成

管理画面からフッターメニューが追加されているか、確認し作成してみます。

(1) 外観➡️「メニュー」クリック

フッターメニュー

(2) メニュー追加画面へアクセス

フッターメニュー

(3) フッターメニューが追加されている

メニュー設定に、設定したフッターメニューが追加されています。

フッターメニューに表示したいメニューを追加してサイトを見てみましょう。

フッターメニュー

(4) フッターが表示される

フッターメニュー

3:作成済みのフッターを編集・削除する方法

作成したWordPressのフッターを編集したい!

フッターはいつでもメニューの追加や編集を行う事が可能です。

また、不要なフッターはいつでも削除し作り直す事が出来ます。

作成済みフッターの編集・消去する方法を紹介していきましょう。

3-1:編集方法

作成済みフッターの編集方法を紹介します。

(1) 外観➡️「メニュー」クリック

フッター 編集

(2) 編集するメニューを選択する

フッター

(3) 作成済みフッターが表示される

作成済みのフッターが表示されます。

このページで作成した時と同様に、メニューを追加・名前の変更・並び順の変更等を行う事が可能です。

フッター

3-2:削除方法

作成済みフッターの消去方法を紹介します。

削除するまでの手順は、編集する際の手順と同じです。

(1) 外観➡️「メニュー」クリック

フッター 編集

(2) 削除するメニューを選択

削除したいメニューを選択します。

フッター

(3) 画面下の「メニューを消去」クリック

フッター消去

(4) 確認のメッセージが表示される。「OK」クリック

削除するか確認のメッセージが表示されます。「OK」をクリックしましょう。

フッター消去

(5) プレビューで削除できているか確認し完了

フッター消去

まとめ

WordPressのフッターメニューを追加する方法について紹介してきました。

フッターはサイト内のナビゲーションを行う重要な機能です。

投稿数や固定ページ数、カテゴリー数が多くなればなるほど重要性が高まります。ユーザーが使いやすいサイト構成にする為にも、フッターはサイト内に入れるべきでしょう。

いつでも編集や削除をする事が出来るので、まずは試しに作成してみて下さい。

  • このエントリーをはてなブックマークに追加

  • 4

    • このエントリーをはてなブックマークに追加
    目次
    ページ上部へ