WordPressメニューの作り方｜CocoonでPC・スマホに表示する方法

WordPressのメニューとは

WordPressの「メニュー」は、サイト内のページやカテゴリーなどへのリンクを、好きな順番でまとめて表示するための機能です。

たとえば、サイトの上部にある次のような案内部分に利用できます。

メニューに追加できるのは固定ページだけではありません。

• 固定ページ
• 投稿
• カテゴリー
• カスタムリンク

などを組み合わせて、サイトに合ったメニューを作ることができます。

一度作成したメニューは、テーマ側で用意されている複数の表示場所に設定することもできます。

今回は1つのメニューを作成し、パソコンではヘッダー、スマートフォンではスライドインメニューとして使用する手順をご案内します。

新しいメニューを作成する

WordPressの管理画面からメニューを作成します。

開く「外観」「メニュー」

まだメニューを作成していない場合は、新しいメニューを作成する画面が表示されます。

すでに別のメニューがある場合は、「新しいメニューを作成しましょう」をクリックしてください。

メニューに表示したい項目を追加する

メニューを作成したら、次にサイト上に表示したい項目を追加します。

左側には、固定ページや投稿、カスタムリンク、カテゴリーなどの項目が表示されています。

固定ページを追加する

「ホーム」「お問い合わせ」「プロフィール」などの固定ページをメニューに表示したい場合は、「固定ページ」から追加します。

追加した固定ページは、右側の「メニュー構造」に表示されます。

同様に、カテゴリーやカスタムリンクを追加することもできます。

メニューの順番を並び替える

メニューに追加した項目は、ドラッグ操作で好きな順番に並び替えることができます。

実際にサイトで表示したい順番に整えます。

並び替えができたら、「メニューを保存」をクリックしてください。

メニューの表示位置を指定する

メニューを作っただけでは、まだサイト上には表示されません。

作成したメニューをどこに表示するかを指定します。

Cocoonでは、メニュー編集画面の下にある「メニュー設定」の「メニューの位置」から表示場所を選択できます。

パソコンのサイト上部に表示する場合は、「ヘッダーメニュー」にチェックを入れます。

設定ができたら、「メニューを保存」をクリックします。
これで、作成したメニューがパソコンのヘッダー部分に表示されます。

同じメニューをスマートフォンにも表示する

Cocoonでは、先ほど作成した同じメニューをスマートフォン用にも利用できます。

今回は、画面横から開く「モバイルスライドインメニュー」として表示します。

もう一度、メニュー編集画面の「メニュー設定」を確認してください。

「メニューの位置」で

• ヘッダーメニュー
• モバイルスライドインメニュー

の両方にチェックを入れます。

「メニューを保存」をクリックします。

これで、1つのメニューをパソコンとスマートフォンの両方で利用できます。

スマートフォンでメニューボタンを開くと、設定した項目がスライドインメニューとして表示されます。

まずは1つのメニューを作ってみよう

WordPressのメニューは、一度基本的な作り方を覚えてしまえば、さまざまな場所で活用できます。

今回行った操作は次のとおりです。

• 新しいメニューを作成する
• 固定ページやカテゴリー、カスタムリンクなどを追加する
• 表示順を並び替える
• Cocoonのヘッダーメニューに設定する
• 同じメニューをモバイルスライドインメニューにも設定する

最初は、よく使うページを数個並べたシンプルなメニューから始めれば十分です。

WordPressのメニューは、ヘッダー以外にもサイドバーやフッターなどで活用できます。

また、項目を階層化したり、Cocoonのボックスメニューに利用したりすると、さらに使い方が広がります。

ボックスメニューの活用方法については下の記事をお読みくださいね。

【Cocoon】サイドバーに似合うボックスメニューの作り方とオリジナルカスタマイズ方法

Cocoon「ボックスメニュー」の作り方ブログのサイドバーにあるカテゴリー一覧、文字ばかりで少し寂しい印象になっていませんか？無料テーマ「Cocoon」には、アイコン付きでタイル状に美しく整理できるボックスメニューという素晴らしい機能が標準...

まるっと。Creative

2026.07.11