PR
※当サイトには、アフィリエイト広告等が含まれています。閲覧者様が商品の購入や広告を見ていただくだけで広告主からの収益が発生します。閲覧者様には感謝の念に堪えませんが、当サイトは広告主から収入を得ることで記事内容が左右されることは一切ありません。令和5年10月1日からステルスマーケティングは景品表示法違反となります。消費者庁

WordPressで最初のメニューの作り方からCocoonで解説

スポンサーリンク

WordPressメニューの作り方ロゴ画像

こんにちは、解説ゾロです!

WordPressの初期設定も終わり「さぁて、今度はメニューを作ろうかな!」と、一番最初のメニューの作成画面を見てみると、何から始めていいのかもわからずに「なんかムズ!」って悩んでしまいます!

イヤイヤ、初めてなんだから悩むのが普通です!でも、大丈夫!「解説ゾロ」が解決いたします。(快傑ではありません)笑!

今日は、WordPressで初めてメニューを作ろうとした時の、一番最初のメニューの作り方から、次から色々作る新しいメニューの作成方法までを、初めてメニューを作る方にもわかりやすいように画像を見ながら、Cocoonでじっくりと解説いたします。簡単ですので、一緒にやりましょ!

前回の記事はこちら⇩
Cocoon マイクロコピーでボタン近くの文字や吹き出しの作り方
初めてのCocoon マイクロコピーの簡単な作り方です。登録や購入ボタン周りの上下や中央にテキストの文字はもちろん、吹き出しのデザインもCocoonのマイクロコピーならすぐに作れます。クリックを促す効果のあるマイクロコピー、一緒にマイクロしましょ!
スポンサーリンク
スポンサーリンク
スポンサーリンク

WordPress「一番最初のメニュー」の作り方

WordPressの一番最初のメニュー画面は、2回目から作る時とちょっとだけ違う表示がされていますが、この手順を踏めば問題ありません。では、ダッシュボードの、
の「外観」にマウスポインターを乗せると、新しい項目が表示されますので、
の「メニュー」をクリックしてください。するとWordPressのメニューを作る一番最初の画面が表示され、
には「最初のメニューを以下で作成しましょう」とちょっとだけ違う表示がされています。また、WordPressデフォルトの「Twenty Twenty-One」というテーマですと最初のメニュー設定画面には、
のように「メインメニュー」と「サブメニュー」の2つの「メニューの位置」しか選べませんが「Cocoon」テーマをインストールして有効化していれば、
のように6か所のメニューの設置位置が簡単に選べます。(テーマによって変わります)今回は「グローバルメニュー」というメニューを例として作りますので「メニューの位置」は、グローバルメニューと同じ意味合いの「ヘッダーメニュー」を選びチェックを入れます。次は、
の「メニュー構造」下の「メニュー名」にわかりやすい名前を入力します。今回はグローバルメニューと入力しました。このメニュー名は基本的にブログ内には表示されません。次は、
の「メニューを作成」をクリックしてください。

WordPress最初のメニューの作り方

【図解だから簡単】CocoonテーマをWordPressにインストール
超初心者の方でも、無料のCocoonテーマをWordpressで使える(有効化)まで、一から丁寧に説明します。難しい言葉よりも分かりやすい画像を見ながら、1つ1つ進めていけば、簡単にすぐ使えるようになります。一緒にやりましょ!

すると、グレーアウトになっていた「メニュー項目の追加」の部分が入力できるようになります。今はまだグローバルメニューという1つのメニュー名しか登録していませんので、そのまま続けてグローバルメニューを編集してメニューを作っていきます。

現在、グローバルメニューという名前のメニューの中は空っぽですので、どの様な内容(記事)を入れたメニューにするかをメニュー項目から選んで入れていきます。

グローバルメニューはメインメニューですので、ブログを開いたらすぐに目に入る場所に設置することを考えて、閲覧者様にどの様な内容の項目を最初に見て欲しいかを考えて入れていきます。

WordPress「メニュー項目を追加」の内容説明

  • 「固定ページ」・・・・・・あなた様が「固定ページ」で書いた記事のことです。
    主に、プロフィールやプライバシーポリシー、お問い合わせなどのページでメニューなどに固定して使い、投稿一覧には表示されません。
  • 「投稿」・・・・・・・・・あなた様が「投稿」で書いた記事のことです。
    ブログのコンテンツ、内容を書いていくページです。
  • 「カスタムリンク」・・・・・・希望の場所へのリンクとリンク文字を設定できます。
    メニューからあなた様が希望するサイトに飛ばせるリンクです。
  • 「カテゴリー」「タグ」・・・投稿記事を、あるくくりりで分類されているグループです。
    記事を投稿する時にカテゴリーやタグに設定したグループを拾い上げて表示します。
スポンサーリンク

WordPressのメニューに「固定ページ」の記事を入れる

このWordPressは、まだ初期の状態で記事がありませんので、サンプル記事などを例にして解説していきます。はじめに「固定ページ」にあるサンプル記事を選んで「グローバルメニュー」に入れてみます。

「メニュー項目を追加」のエリアで、
の「固定ページ」が下図のように展開されていなければ、
の「▼」をクリックして開いてください。そして、
の「すべて表示」をクリックして、その項目の記事を全部表示させます。この場合はサンプルページの2つだけが表示されますので、例として、
の「Sample Page」にチェックを入れて、
の「メニューに追加」をクリックすると、
のように右側に「Sample Page」が表示され、右端には、コレは「固定ページの記事ですよ!」とわかります。続けて違う項目もこのグローバルメニューに入れたいので、まだメニューを保存はクリックしません

WordPressメニューの固定ページをメニューに入れる

スポンサーリンク

WordPressのメニューに「カテゴリー」の記事を入れる

同じ要領で、今度はカテゴリー内の記事をグローバルメニューに入れてみます。
の「カテゴリー」をクリックすると展開しますので、
の「すべてを表示」をクリックしますと、ここも2つのサンプル記事だけが表示されますので、
の「ワードプレス」にチェックを入れて、
の「メニューに追加」をクリックすると、
のように、右側のグローバルメニューの中に入り、これはカテゴリーから来たよとわかります。できましたら、
の「メニューを保存」を忘れずにクリックしてください。これで、「Sample Page」と「ワードプレス」という記事が入った「グローバルメニュー」ができました。実際にはもっと多くの項目を入れることになるかと思います。

WordPressカテゴリーをメニューに入れる

2つ目からのWordPressメニューの作り方

では、もう一つメニューを作ってみます。2つ目以降から作るメニューは、
の「新しいメニューを作成しましょう」のクリックからはじめます。クリックしたら、
の「メニュー名」に今度は「フッターメニュー」を例として入力し、下にあるメニューを作成をクリックしてください。(下図に「メニューを保存」と同じ場所です)すると、上の方にある、
の「編集するメニューを選択」の欄に今のメニュー名の「フッターメニュー」が表示され、グレーアウトになっていた「メニュー項目の追加」の部分が入力できるようになりますので、そこから、
の「固定ページ」から、例として選択してみますので、
の「すべて表示」をクリックし、
の「Sample Page」にチェックを入れて、
の「メニューに追加」をクリックすると、
のように右側に表示され、フッターメニューの中に入ります。メニューの位置の設定は「フッターメニュー」にチェックを入れます。できましたら、忘れずに、
の「メニューを保存」をクリックです。メニューが複数作ってあり次回からメニューを使う時や編集をする場合は、③の右端にある「∨」をクリックすると作ったメニューが一覧表示されますので、必要なメニューをクリックしてから、
の「選択」をクリックすると、クリックしたメニューの「メニュー構造」が表示されますので、編集ができます。また、
のように「メニュー項目を追加」に「タグ」が表示されていなくて、必要な場合は、画面右上にある、
の「表示オプション」をクリックすると展開しますので「タグ」にチェックを入れると「メニュー項目を追加」に追加表示されます。再度表示オプションをクリックすれば、展開が閉じます。

WordPressメニュー2つ目からの作り方

メニューはストックできる

現段階では、投稿記事も無くサンプルページも少ないのですが、各項目の記事が増えてくるとメニューの利用価値も広がります。例えば、ボックスメニューを作成してストックしておけば、使いたい時にメニュー名を入力すればサイドバーなどにボックスメニューを簡単に表示することもできます。

ボックスメニューが簡単にできた!Cocoonカスタマイズ
Cocoonメニューをボックスメニューにカスタマイズします。Cocoonなら無料のアイコンフォントを利用してとてもオシャレなメニューが完成します。実際の画像を見ながら1つ1つ丁寧に解説しますのでとても簡単にできちゃいます。一緒にやりましょ!

WordPress(Cocoon)メニューの設置場所

メニューを表示する場所の多くは、ブログの最初と最後です。では、具体的なイメージをつかんでもらうために、当サイトの画像を表示しますので、見てください。

グローバルメニューの設置場所

WordPress(Cocoon)のメニューの設置場所は、ブログ上部に設置されている、
が「グローバルメニュー(ヘッダーメニュー)」と呼ばれるメニューです。
グローバルメニュー例
WordPressメニューの作り方グローバルメニューの位置

上図のメニュー名の下に、小さな文字が見えると思います。このようにタイトルをわかりやすくする「説明」の文言を入れたい場合は、
の「▼」をクリックしますと、
のように「展開」しますので、「説明」の欄に、例えば、
のように「サンプルページ」と入力して、
の「メニューを保存」をクリックすれば、グローバルメニューのメニュー名の下に表示されます。もし「説明」の欄が表示されていない場合は、先ほどの、右上にある「表示オプショ」をクリックして展開された中から「説明」にチェックを入れると「説明」の入力欄が追加表示されます。

WordPressメニューの説明文の入れ方

フッターメニューの設置場所

もう1つは、ページ最後の下部に設置する、
「フッターメニュー」といわれるメニューです。
フッターメニュー例
WordPressメニューの作り方フッターメニューの位置

基本のWordPress Cocoonのメニューの作り方を解説いたしました。お疲れさまでした!

まとめ

今日は、WordPressテーマのCocoonで、一番最初に作るメニューの作り方から、2つ目以降のメニューの作り方まで解説いたしました。

手順を覚えてしまえばメニュー作成がとても簡単にできてしまいます。そうなれば、もうこっちのもの!ご自分のオリジナルメニューを考えてサイドバーや追従ウィジェットなどにもジャンジャン使えて、見やすいブログになっていきます。

自分のブログが少しずつ「らしく」なるのって、楽しいです・・・よね!笑

最後までお読みいただき、大変ありがとうございました。
では、また。解説ゾロでした!

関連記事:Cocoon マイクロコピーでボタン近くの文字や吹き出しの作り方
関連記事:ボックスメニューが簡単にできた!Cocoonカスタマイズ
関連記事:5分で解決!ステマ規制をCocoonで簡単に対策する方法

ブロガーにも超オススメな最適マウス!
【開梱レビュー】ケンジントン スリムブレード K72327JP
ケンジントン スリムブレード トラックボール K72327JPの開梱レビューです。私はレスポンスが安定する有線タイプを購入しましたが保証期間が3年に変更されていないか心配でしたが5年モノが手に入ったので安心です。一緒に開梱しましょ!
タイトルとURLをコピーしました