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

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

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

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

no image
ロリポップレンタルサーバーで記事を編集中に「403エラー」が出た時もしかしたらこの対処をすると大丈夫かもしれない。

先日、wordpress twenty twelve に子テーマを設定する。(前 …

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

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

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

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

no image
【WordPress:ボロス兵士の日誌】にwordpress popular postsをインストールして横並びにしてみました。※レスポンシブ対応

私がこの前開設してなかなか順位が上がらない困ったサイトちゃんのお話です。 ボロス …

no image
wordpress 作成した記事が「お探しのページが見つかりません」状態になった時の対処法。

私、首をひねりました。「記事は必ず存在する。だのに”お探しのページが …

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

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

no image
簡単にCSSでのグラデーションを実現!「Ultimate CSS Gradient Generator」!

記事のタイトルの背景が無色透明だと無味乾燥だなぁ・・・とは思いませんか? そこで …

no image
MANP環境のWordPressをマルチサイト化した方法。

さすがに本番環境であれこれ触りまくって公にしてしまうのはどうかと今更ながらに感じ …

【デザイン】ブログのデザインについての考察(その1)【ブログ】

皆さんこんにちわ。 今回はブログのデザインについての私なりの考察(その1)を記事 …