クリエイターハートブログ

クリエイターハートブログはものづくりの心からおくるブログです。

WordPressカスタムメニュー作成手順

   

WordPressにおけるカスタムメニューの作成手順を解説します。

WordPressをこれから始めるという初心者の方でも分かりやすいように心がけていますが、分かりにくい場合はコメントを頂けると幸いです。

目次

  • 目標とする結果
  • 目標とする結果までのToDoリスト
    1. 管理画面から【外観】→【メニュー】
    2. 【メニューを編集】画面で【メニューの名前】を記述し保存
    3. メニューに追加する固定ページ・カテゴリー等を選択して追加
    4. メニュー構造を整える
    5. メニューの位置
    6. 保存

目標とする結果

ここでは以下の画像のように、Wordpressにてカスタムメニューを作成し画面に反映させることを目標とします。

20150221_custommenu_08

※上画像は私が使用しているテスト環境にWordpressテーマ「Twenty Fifteen」を適用したものです。お使いのテーマによっては見え方が異なります。

目標とする結果までのToDoリスト

①管理画面から【外観】→【メニュー】

管理画面から【外観】→【メニュー】をクリックします。

20150221_custommenu_01

②【メニューを編集】画面で【メニューの名前】を記述し保存

20150221_custommenu_02メニューを編集画面から【メニューの名前】に任意の名前を記述します。※半角英数での入力をオススメします。

【メニューを作成】をクリックします。

③メニューに追加する固定ページ・カテゴリー等を選択して追加

メニューを作成しただけではまだメニューに何も追加されていないので、メニューで表示させたい項目を固定ページ・リンク・カテゴリーから選択し追加します。

20150221_custommenu_03※上記画像のように、【すべて表示】タブを選択すると分かりやすくなるかもしれません。

追加したい項目を選択し、【メニューに追加】をクリック。

上画像では、固定ページのみの追加となりますが、下画像のようにカテゴリーから追加することも可能です。

20150221_custommenu_04

④メニュー構造を整える

先ほど名前を付けて作成したメニューに参考例として以下のように無事追加できましたら、メニュー構造を整えます。

20150221_custommenu_05項目をドラッグして表示する順番を入れ替えたり、上画像のように追加したメニュー項目を親子関係にしたりできます。

⑤メニューの位置

上項目画面の下部に【メニュー設定】とあるので、その中の【テーマの位置】の右、【ナビゲーション】にチェックを入れます。

20150221_custommenu_06

⑥保存

【メニューを保存】をクリックして、保存します。これで作業は終了です。

サイトに反映されているか確認して、下画像の左側のようにメニューが反映されていたら無事完了です。

20150221_custommenu_08

無事、カスタムメニューが表示されました。

ご質問等ございましたら、コメントを頂けると幸いです。対応させて頂きます。

 - WordPress , , ,







Message

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

CAPTCHA


  関連記事

no image
サイトタイトルをロゴに変更しました。

所要時間5分程度で作ったロゴをサイトのトップに。 最近、私地元でMr.child …

no image
wordpressをこれから始める初心者の方はまずこの一冊。

私、wordpressを始めてから約1年が立とうとしています。 今でもわからない …

no image
子テーマの重要性

あー、やっちまったよ と思いましたが後の祭りでした。 先日、一年ほど前から運営し …

【WordPress】Twenty Twelve にヘッダーウィジェットを追加する方法。

前回の記事Twenty Twelve テーマにヘッダーウィジェットを追加しました …

no image
author をウィジェットで表示する方法。

先日、制作兼管理人の情報をウィジェットエリアに追加しました。 自分の写真を乗っけ …

【ご報告】【WordPress】Stinger3をドロップダウンメニューに対応させてみました。(stinger3ver20131217対応)【Stinger3】 記事の一部修正【改善】

本記事はStinger3でのドロップダウンメニュー実装記事です。Stinger5 …

no image
wordpress:twenty twelve 「コメントをどうぞ」 を消す方法

コメントをどうぞってのは大歓迎なんだけど場所悪くね? と感じたので調べてコメント …

no image
twenty twelve フッター部分にウィジェットを追加する方法(参考URLあり)

みなさま、こんにちわ。 え、「なんかデザイン変わってね?」。HAHAHA。いろい …

【WordPress:プラグイン】google xml sitemapsを マルチサイトで使用できるようにしてみました。

皆さんこんにちわ。最近仕事に忙殺されている私です。 今回は初めて(?)プラグイン …

no image
Twenty Twelve サイトタイトルをロゴに変更する方法

先日、サイトタイトルをロゴに変更しました。という記事を書きました。 以下はそのコ …