第9回 のんびり研究所構築日記｜メニューとサイドバーを設定して記事を探しやすくする

前回は、シリーズ案内を同期パターンに変更し、複数の記事で使っている内容を一括で管理できるようにしました。今回は、サイト上部に表示するヘッダーメニューと、記事の横に表示するサイドバーを設定します。

以前作成した「日記」と「神社」のカテゴリや、サンプル記事を使いながら、サイト内を移動しやすくしてみます。

さらに、記事の中から別の記事へ移動できるリンクも追加します。

きょろぽん

メニューがあると、見たい記事を探しやすくなるのかな？

ノン

カテゴリや記事への入口を作れるので、記事が増えてきたときに探しやすくなります。

今回行うこと

• ヘッダーメニューを作成する
• メニューへカテゴリを追加する
• サイドバーへカテゴリ一覧を表示する
• カテゴリごとの記事数を表示する
• 神社の記事をもう1件追加する
• 記事の中に別の記事へのリンクを追加する

今回使用するカテゴリと記事

今回の設定では、第6回で作成した次のカテゴリと記事を使用します。

カテゴリ

• 日記
• 神社

すでに作成している記事

• ブログ始めました
• 近くの神社へ参拝しました

「ブログ始めました」は「日記」カテゴリ、「近くの神社へ参拝しました」は「神社」カテゴリへ登録しています。

今回は、さらに沖縄で撮影した神社の写真を使い、神社カテゴリの記事をもう1件追加します。

この記事で紹介している管理画面には、現在の「のんびり研究所」ですでに設定しているメニュー項目も表示されています。今回追加または変更する部分は、スクリーンショット内を赤枠で囲んで紹介します。

ヘッダーメニューを作成する

まずは、サイト上部へ表示するヘッダーメニューを設定します。

WordPressの管理画面を開き、左側のメニューから「外観」にマウスポインターを合わせます。

表示された項目から「メニュー」をクリックします。

編集するメニューを確認する

メニューの編集画面が表示されます。

すでにメニューを作成している場合は、編集するメニューを選択します。(メニューが1つの場合は選択できません)

新しく作成する場合は、「新しいメニューを作成しましょう」をクリックします。

メニュー名は、管理画面で見分けるための名前です。

今回は、分かりやすいように「menu」と入力し、メニュー作成を押します。

メニュー名はサイト上に表示されません

メニュー名は、WordPressの管理画面でメニューを区別するために使用します。「ヘッダーメニュー」など、自分が分かりやすい名前を付けても大丈夫です。

ホームを追加する

最初に、サイトのトップページへ戻るための「ホーム」を追加します。

画面左側にある「カスタムリンク」をクリックして開きます。
URLへ「サイトのトップページのURL」を入力します。
リンク文字列へ「ホーム」と入力し、「メニューに追加」をクリックします。

画面右側のメニュー構造へ「ホーム」が追加されます。

カテゴリをメニューへ追加する

続いて、「日記」と「神社」のカテゴリをメニューへ追加します。

画面左側にある「カテゴリー」をクリックして開きます。

「すべて表示」をクリックすると、作成済みのカテゴリが一覧で表示されます。

「日記」と「神社」にチェックを入れ、「メニューに追加」をクリックします。

メニュー構造へ「日記」と「神社」が追加されました。

メニューの並び順を変更する

メニュー項目は、ドラッグして上下へ移動できます。

今回は、次の順番に並べます。

1. ホーム
2. 日記
3. 神社

項目を少し右へずらすと、上にある項目の子メニュー（サブ項目と表示される）になります。

今回はすべて同じ位置にそろえ、横並びのメニューとして使用します。

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

画面下部にある「メニュー設定」を確認します。

Cocoonでは、ヘッダーやフッター、スマートフォン用メニューなど、複数の表示位置を選択できます。
今回は、パソコン画面の上部へ表示するため、「ヘッダーメニュー」にチェックを入れます。

設定が終わったら、「メニューを保存」をクリックします。

今回は必要最低限の設定として「ヘッダーメニュー」だけを使用します。

スマートフォン用メニューやフッターメニューは、必要になったときに追加できます。

サイト上でヘッダーメニューを確認する

サイトを表示をクリックし、サイトが表示されたら画面上部を確認します。

「ホーム」「日記」「神社」が表示されていれば、ヘッダーメニューの設定は完了です。

それぞれの項目をクリックし、トップページやカテゴリ一覧が表示されることも確認します。

きょろぽん

これで記事が増えても、カテゴリから探せるね。

ノン

記事を公開したあと、メニューやリンクを実際にクリックして確認するところまでが設定だよ。

サイドバーへカテゴリを表示する

続いて、記事の横にあるサイドバーへカテゴリ一覧を表示します。

WordPressの管理画面から「外観」を開き、「ウィジェット」をクリックします。

カテゴリーウィジェットを追加する

ウィジェットの設定画面には、サイトへ追加できる機能と、機能を表示する場所が並んでいます。

利用できるウィジェットの中から「カテゴリー」を探します。

「カテゴリー」をサイドバーへドラッグで追加します。

使用しているWordPressの画面によっては、「カテゴリー」をクリックして表示場所を選択する方法もあります。「カテゴリー」をクリックし、サイドバーにチェックが入ってるのを確認後「ウィジットに追加」をクリック

カテゴリごとの記事数を表示する

追加したカテゴリーウィジェットの設定を開きます。
タイトルには、サイト上に表示したい見出しを入力します。

今回は「カテゴリー」とします。
「投稿数を表示」にチェックを入れます。これにより、それぞれのカテゴリに登録されている記事数がカテゴリ名の横へ表示されます。

設定を保存し、サイトを表示します。

サイドバーに「日記」と「神社」が表示され、それぞれの記事数が表示されていることを確認します。

記事を公開しても数字が変わらない場合は、記事に指定したカテゴリと、記事の公開状態を確認してください。

下書きのまま保存されている記事は、通常、公開中の記事数には含まれません。

神社カテゴリの記事をもう1件作成する

現在、神社カテゴリには「近くの神社へ参拝しました」の1件が登録されています。

もう1件記事を追加し、サイドバーに表示されている記事数が変化するか確認します。

WordPressの管理画面から「投稿」を開き、「新規投稿を追加」をクリックします。

【画像を挿入：新しい投稿を追加する画面】

沖縄の神社の記事を作成する

今回のサンプルでは、沖縄で撮影した神社の写真を使用します。

記事タイトルには、例として次のように入力します。

沖縄の神社へ参拝しました

本文の書き出しは、次の文章にします。

今日も近くの神社に行ってきました。

ノン

前の記事は埼玉県の秩父でしたよね。今度は沖縄ですか？

きょろぽん

今日も近くの神社に行ってきました。

ノン

近くの範囲が広すぎます（笑）

本文の続きには、参拝したときの様子や、写真について簡単に入力します。

たとえば、次のような内容で構いません。

境内を歩きながら、気になった場所を写真に残しました。

これから少しずつ、参拝した神社の記録も増やしていく予定です。

沖縄の神社で撮影した写真を記事へ追加します。

神社カテゴリを設定する

投稿の設定から「カテゴリー」を開き、「神社」にチェックを入れます。

初期状態で「未分類」にチェックが入っている場合は、「未分類」のチェックを外します。

ついでにスラッグも設定しておきましょう。スラッグは「okinawa」

プレビューで表示を確認し、問題がなければ記事を公開します。

神社カテゴリの記事数を確認する

記事を公開したら、サイトのサイドバーを確認します。

神社カテゴリの記事数が「1」から「2」へ増えていれば、正しくカテゴリが設定されています。

ヘッダーメニューの「神社」をクリックすると、神社カテゴリに登録した2件の記事が一覧で表示されます。

きょろぽん

埼玉と沖縄、同じ日本です！

ノン

よくわからない「どや顔」されてもね・・・。「近く」の意味について考えるきっかけにはなりそうです（笑）

記事の中に別の記事へのリンクを追加する

ヘッダーメニューやサイドバー以外にも、記事の文章から別の記事へ移動できるようにすると、関連する記事を読んでもらいやすくなります。

今回は、「ブログ始めました」の記事から「近くの神社へ参拝しました」へリンクを設定します。

ブログ始めましたの記事を編集する

WordPressの管理画面から「投稿」の「投稿一覧」を開きます。

「ブログ始めました」にマウスポインターを合わせ、「編集」をクリックします。

「これから書きたいこと」の文章の後へ、次の文章を追加します。

近くの神社へ参拝したときのことも記事にしてみました。

「近くの神社へ参拝しました」も、よかったらご覧ください。

記事タイトルへリンクを設定する

追加した文章の中から、「近くの神社へ参拝しました」の文字を選択します。

ブロックツールバーに表示されるリンクボタンをクリックします。

リンクの入力欄へ「近くの神社へ参拝しました」と入力します。

作成済みの記事が検索結果に表示されたら、該当する記事をクリックで選択します。

リンクが設定されたら、記事を更新（右上の保存）します。

サイト内の記事へ設定するリンク

同じサイト内にある記事同士をつなぐリンクは、「内部リンク」と呼ばれます。

関連記事へ自然に移動できるようにすると、読者がほかの記事も探しやすくなります。

リンクを実際にクリックして確認する

更新した「ブログ始めました」の記事を表示します。

リンクを設定した「近くの神社へ参拝しました」の文字をクリックし、正しい記事が表示されるか確認します。

内部リンクをクリックして神社の記事が表示された画面

リンクの文字が表示されているだけでは、正しく設定できているか判断できません。

記事を公開または更新したあとに、実際にクリックして確認しておきましょう。

今回のまとめ

今回は、ヘッダーメニューとサイドバーを設定しました。

• ヘッダーメニューへホーム、日記、神社を追加した
• メニュー項目の順番と表示位置を設定した
• サイドバーへカテゴリ一覧を追加した
• カテゴリごとの記事数を表示した
• 沖縄の神社の記事を追加した
• 神社カテゴリの記事数が1から2へ増えることを確認した
• 記事の中から別の記事へ移動する内部リンクを設定した

記事が少ないうちは、トップページからすべての記事を探すこともできます。

しかし、記事が増えてくると、メニューやカテゴリ、記事同士のリンクが重要になります。

最初から複雑な構成にする必要はありません。

まずは必要最低限のメニューを作り、記事が増えるたびに少しずつ整理していきます。

きょろぽん

埼玉と沖縄の神社が並んだけど、ちゃんとカテゴリでまとまったね。

ノン

場所は離れていますが、どちらも神社カテゴリなので問題ありません。「近く」という言葉以外は（笑）

次回も、実際にサイトを使いながら、必要な設定を少しずつ追加していきます。