WordPressのテーマCocoonでのメニューの作り方、ヘッダーメニュー、フッターメニュー、サイトマップ|WordPress入門講座(9)

Cocoon
この記事は約6分で読めます。

はじめに

 WordPressの入門講座の第九弾として、WordPressのテーマCocoonでのメニューの作り方、ヘッダーメニュー、フッターメニュー、サイトマップについて紹介します。

 レンタルサーバーを借りるならば、価格対費用効果の良いCoreserverV2プランがおすすめ。

CORESERVER.JP(コアサーバー)は、
PHP+MySQLの快適性を重視した大容量の次世代レンタルサーバーサービスです。
左のバナーまたは下のボタンをクリック下さい。

  この記事を読むと次の疑問について知ることができます。

●メニューとははどのようなもの?
●ヘッダーメニューの作り方はどうするの?
・ホーム画面の作成
・カテゴリーの作成
・タグの作成
・メニューの作成
●フッターメニューとサイトマップはどのように作るの?

メニューとは?

 メニューにもいろいろありますが、トップに表示させるヘッダーメニュー、サイドに表示させるサイドメニュー、フッターに表示させるフッターメニューなど。

 所謂、あなたのサイトの内容を大雑把に分類して、メニューをクリックすることにより、クリックしたところに飛んで、訪問者が読みたい記事に直ぐにたどりつけるようにするための一つの方法がメニューであろうと思います。

 ここでは、ヘッダーメニューとフッターメニュー、それとサイトマップについて紹介します。

ヘッダーメニューの作り方

 ヘッダーメニューに表示させる項目の数は多いと2段になってしまい、余り見栄えも良くありません。

 したがって、項目の数は、項目名にもよりますが多くとも5~6個ぐらいが良いと思います。

メニューに入れられる項目名につは、次のものがあります。

  • 固定ページ(例えば、ホーム、メルガマ登録フォーム、サイトマップなど)
  • 投稿ページ(今まで書いてきた記事)
  • カスタムリンク
  • カテゴリー
  • タグ

 良く見られるヘッダーメニューは、ホーム、カテゴリーやタグから3~4つほど、サイトマップ又はメルマガ登録フォームなどが項目として入っているものが多いです。

 カテゴリーやタグは、記事を書くにしたがって増えていくものですが、最初に作っておくこともできます。

 ヘッダーメニューに入れる項目を、ホーム、カテゴリー(旅行ー国内旅行、海外旅行、花ー赤い花、白い花、黄色の花、スマホーiphone、Android、WordPress)、サイトマップを作ってみましょう。

 ここで、旅行ー国内旅行、海外旅行の意味は、「旅行」をクリックしたときに「海外旅行」と「国内旅行」のサブメニューが表れるようにするということです。

 上述の項目名で、カテゴリーとして作成するのは、旅行、国内旅行、海外旅行、花、スマホ、iphone、Android、WordPressとします。

 赤い花、白い花、黄色の花は、タグで作ることにします。

ホーム画面の作成

 ホームは、あなたのサイトの最初に表示される部分であり、十分にあなたの個性を入れ込むところでもあります。

 しかし、ここでは、簡単にするために、単に記事一覧を表示するのみとしますが、他のサイトを見ながらあなたの個性を生かしたホームページを作成するのは、あなた自身にお任せすることにします。

 ホームページを作成するためには、WordPressの左メニューの「固定ページ」の「新規追加」をクリックします。

 新規固定ページ追加画面がでますので、タイトル追加の部分に「ホーム」と記入し、本文には、Cocoonの記事一覧のショートコードである次のコード

[new-list]

を記入して、「公開」をクリックします。

 次に、WordPressの左メニューの「外観」⇒「カスタマイズ」⇒「ホームページ設定」⇒「ホームページの表示」で「固定ページ」を選択し、「ホームページ」の部分で先ほど作成した「ホーム」の固定ページを選択し、上部の「公開」をクリックします。

 これでホームページの設定は終わりです。

カテゴリーの作成

 メニューに入れるカテゴリーを作成するには、WordPressの左メニューの「投稿」⇒「カテゴリー」をクリックすると、カテゴリーの画面が開きます。

 新規カテゴリー追加の名前欄に「旅行」と入力し、スラッグに「travel」(英字で入れる)と記入、親カテゴリーはなしで、「新規カテゴリーを追加」をクリックすると、右のカテゴリー一覧に表示されることを確認。

 続いて、花、スマホ、WordPressについても、同様に作成します。

 子ガテゴリーの国内旅行、海外旅行については、親カテゴリーを「旅行」として作成します。

 同様に、子ガテゴリーiphone、Androidについても、親カテゴリーを「スマホ」として作成します。

タグの作成

 メニューに入れるタグを作成するには、WordPressの左メニューの「投稿」⇒「タグ」をクリックすると、タグの画面が開きます。

 新規タグ追加の名前欄に「赤い花」と入力し、スラッグに「red-flower」(英字で入れる)と記入、「新規タグを追加」をクリックすると、右のタグ一覧に表示されることを確認。

 同様にして、白い花、黄色の花についても新規タグで作成します。

メニューの作成

 メニューを作成する準備が整ったので、実際にメニューを作成していきます。

 WordPressの左メニューの「外観」⇒「メニュー」と順にクリックすると、メニュー画面になります。

 右上部に表示オプションがあるので、そこをクリックして「

 「新しいメニューを作成しましょう」をクリックし。「メニュー構造」の「ヘッダーメニュー」と記入、メニュー設定で「ヘッダーメニュー」にチェックを入れ、「メニューを作成」をクリックします。

 次いで、左の「メニュー項目追加」で、

  • 固定ページ : ホームホーム — フロントページにチェックを入れ、「メニューに追加」をクリック
  • カテゴリー : スマホ、Android、iphone、旅行、国内旅行、海外旅行、花にチェックを入れ、「メニューに追加」をクリック
  • タグ : 白い花、黄色の花、赤い花にチェックを入れ、「メニューに追加」をクリック

 メニュー構造に、上述の全てが追加されていることが確認できますが、ここで子カテゴリーとタグに関しては、親項目より一段下げます。

 一段下げる方法は、下げたい項目をクリックしながらドラッグして右にずらしてドロップすればOK。

 最後に「メニュー保存」をクリックして、ヘッダーメニューの出来上がりです。

 なお、サイトマップをメニューに入れるのはサイトマップを作成してからとなりますので、今の時点ではサイトマップがメニューには入っていません。

フッターメニューとサイトマップ

 フッターメニューとサイトマップは、以前に私が記事にしていますのでそちらを参照ください。

おわりに

 如何だったでしょうか?

 メニューとははどのようなもの?、ヘッダーメニューの作り方はどうするの?、ホーム画面の作成、カテゴリーの作成、タグの作成、メニューの作成などについて解説してきました。

 この記事があなたにとって少しでもお役に立てればこれほど嬉しいことはありません。

以上です。

 

コメント

タイトルとURLをコピーしました