WordPressでカスタムメニューを作成する方法【初心者向け】

WordPress(ワードプレス)で【カスタムメニュー】を作成する方法を初心者向けに解説した記事です。固定ページやカテゴリ一覧などのメニューをカスタマイズでき、サイトのナビゲーションを格段に向上できます。記事を見ながら試してみてください!

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

WordPressで作成したWebサイトで、より見やすいサイトナビゲーションに欠かせないのが、「カスタムメニュー」という機能です。

本記事では、カスタムメニューの設定方法について初心者向けにまとめます。

 

なお本記事は、TechAcademyのWordPressオンラインブートキャンプの内容をもとに紹介しています。

 

 

大石ゆかり

田島メンター!!カスタムメニューって何ですか?

田島悠介

カスタムメニューは、自分のオリジナルのメニューをサイドバーに設置できるんだ。カスタムメニューを利用することで、オリジナリティのあるサイトを作れるようになるよ!

大石ゆかり

そうなんですね!使い方を教えてください!

 

カスタムメニューとは

固定ページや、カテゴリ一覧、好きなページなど、オリジナルのメニューを編集・表示できる仕組みです。

メニューの順序や階層も自由にカスタマイズできるので、しっかり作成することでサイトのナビゲーションを格段に向上できます。

 

 

カスタムメニューを作成する

実際にカスタムメニューを作成してみましょう。

まず、ダッシュボード>外観>メニューを開きます。

「新規作成」をクリックすると、新しいメニューを作成することができます。

外観

 

固定ページを追加したいときは、追加したいものをチェックして、「メニューに追加」ボタンを押すだけです。

メニューに追加

 

自分で作成したサイト内のページでなくても、好きなサイトのリンクを載せることもできます。

サイトのリンク

 

作成したカテゴリー自体をメニュー表示にすることもできます。
(カテゴリの一覧ページにリンクします)

カテゴリー

 

「固定ページ」「カスタムメニュー」「カテゴリ」を追加できるので、サイト内外のあらゆるページをメニューに挿入できるのがわかると思います。

また、カスタムメニューはドラッグ&ドロップで簡単に表示順を変更することも可能です。

ドラッグ&ドロップ

 

 

このように親子関係もすぐに作れる優れものです。

親子関係

これでカスタムメニューを作成できました。

 

 

[PR] WordPressで挫折しない学習方法を動画で公開中

作成したカスタムメニューを表示させる

今のままではカスタムメニューを作成しただけですので、作成したカスタムメニューをサイト上に表示させましょう。

 

表示は「ウィジェット」の設定で行います。

ダッシュボード>外観>ウィジェット を開いてください。

カスタムメニューを表示したい場所(今回は、サイドバーに表示してみます)に、左のウィジェットエリアから「カスタムメニュー」をドラッグします。

サイドバー

 

追加できたら、タイトル欄に「サイト上で表示したいメニュー名」を入力し、その下の「メニューを選択」プルダウンから、先ほど作成したカスタムメニューを選びます。

メニューを選択

ここで保存ボタンを押すと、反映されます。

 

サイト上で確認してみると、きちんとサイドバーに表示されていました。
表示確認

 

通常のWebサイトですと、リンク先ページのURLを変更すると全てソースの変更が必要でした。それが、カスタムメニューだと(固定ページやカテゴリなどで追加したメニューに関しては)自動的にURL変更に対応してくれるので、リンク切れになるリスクも少なくなります。

 

カスタムメニューを自分好みに変えて、より使いやすい・オリジナルのサイトを作成してみてください。

さらにWordPressを使いこなしたい場合は、WordPressでカスタム投稿タイプを作成する方法も合わせてご覧ください。

 

大石ゆかり

独自のおすすめページとかを手軽に貼れるようになりましたね♪

田島悠介

そうだね。親子関係のあるサイトなんかもわかりやすく紹介できるから、活用するといいね♪

大石ゆかり

はい♪

 

[お知らせ]TechAcademyでは、WordPressを使ってカスタマイズしたオリジナルサイトを構築できるWordPressオンラインブートキャンプを開催しています。期間中は現役エンジニアのメンターが毎日学習をサポートするので、独学よりも効率的に学ぶことができます。