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

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

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
author をウィジェットで表示する方法。

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

【WordPress:twenty twelve】ナビメニューを上部に固定する方法

皆さんこんにちわ。 今回はtwnty twelveテーマのメニューを上部に固定す …

no image
【WordPress】TwentyTwelve 「続きを読む」を画像に変更する方法。

TwentyTwelveテーマに限らず記事を作成しているときに挿入できるmore …

【※重要なお知らせあり】【WordPress】Stinger3をドロップダウンメニューに対応させてみました。(stinger3ver20131217対応)【Stinger3】

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

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

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

no image
子テーマの重要性

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

no image
ポートフォリオサイト公開しました。

「次週位にポートフォリオサイトを公開します!」と豪語してたのなんだったのと言わん …

no image
wordpress twenty twelve に子テーマを設定する。(前編)※追記【重要】あり

みなさまこんにちは。 先日、くりてすのテーマをなにも考えずに更新しデザインをまっ …

no image
WordPress をマルチサイト化しました。(参考URL有り)

私、複数サイトを制作したくてマルチサイトの勉強を致しました。 参考にさせて頂いた …

no image
ポートフォリオサイトにWEBコンテンツ「ボロス兵士の日誌」を追加しました。

趣味の一つマジックザギャザリングのブログサイトを制作したのでポートフォリオサイト …