こんにちは、purinです。
私はこのサイトをWordPressのcocoonというテーマを利用して作成しています。
WordPressはサイトを色々とカスタマイズできるメリットがある一方で、初心者にはハードルが高く感じられてしまうデメリットもあります。
以前ブログをやった際はstingerを利用したのですが、今回改めてサイトを作るにあたって色々と比較した結果、私のようなあまりパソコンに精通していない人間にはcocoonの方が向いていると感じました。
このサイト自体始めたばかりで現在絶賛カスタマイズ中ですが、実際、以前stingerで作成した時と比べるとびっくりするくらい作業が簡単で驚いています。
自分の忘備録も兼ねて、cocoonのカスタマイズに関しては今後も記事にしていきたいと思いますが、早速今回はcocoonでグローバルナビゲーションをサイトに設置する方法を説明していきたいと思います!
グローバルナビゲーションとは
いろんなサイトのトップ画面に
赤丸で囲ってあるようなメニュー画面が出てきます。
カーソルを合わせると、こんな感じでさらに細かいカテゴリーが表示されるやつです。
これがグローバルナビゲーションです。
(グローバルメニューとも呼ばれますし、多分どっちでも通じます。)
グローバルナビゲーションを設置する意味
これは人によって色々とご意見はあると思いますが、私の場合はサイトを訪れた人が興味のある記事に辿りつきやすくするためのもの…というのは表向きで、ぶっちゃけ、広告のクリック率を上げるためです。
サイトはページをたくさん見てもらえればもらえるほど、比例して広告をクリックしてもらえる確率も上がります。
記事をたくさん見てもらえるようにして、広告収入を上げるためのもの、それがグローバルナビゲーション…!!(私にとっては)
もちろん上に書いた通り見る人にとっても記事が探しやすいので、サイトを訪れる人にとっても、サイトを作る側にとってもグローバルナビゲーションはあって得しかしないと思います。
グローバルナビゲーションを作成する
では早速グローバルゲーションの作成方法を説明していきます!
カテゴリーを作成する
まず、投稿をクリックしてからカテゴリーを選択します。
すると、下のように新規カテゴリーを追加と出てくるので名前の部分に赤丸で囲っているように自分の好きなタイトルを付けます。
ここでは例としてメインカテゴリー(親)として投資関連を、サブカテゴリー(子)として株を作成する過程を挙げてみます。
下のスラッグは日本語をローマ字にしたものでも、英語に翻訳したものでも、要は英数であれば何でも大丈夫です。
ここでは、一番上の階層(親カテゴリー)が投資関連のため、親カテゴリーはなし、となります。
投資関連のカテゴリーのなかに株を入れたい(投資関連>株という階層にしたい)場合は 、親カテゴリーで上の階層にあたるカテゴリー(=投資関連)を選択します。
同様の手順で他のカテゴリーも作成すると
このように親階層の下に枝分かれ(ハイフンバー)でカテゴリーが細分化できていることが確認できます。
カテゴリーを完成させたら、今度はトップページに反映させましょう!
グローバルナビゲーションを表示させる
外観をクリックしてからメニューを選択します。
メニュー名と出たところに名前を付けます。
私はナビゲーションメニューと入力していますが、これは実際に表示される訳ではないので正直何でも大丈夫です。
名前を付けたらメニューを作成クリック。
すると左側にメニュー項目を追加が表示されるので、下の方にあるカテゴリーを選択します。
そこからさらに、すべてを表示を選択すると先ほどカテゴリーで作成したタイトルが表示されます。
このなかから、グローバルナビで表示させたいものを選択し、メニューに追加をクリックします。
すると、先ほど選択したカテゴリーが一覧として表示されます。
ここで注意したい点が、先ほどカテゴリーで階層まで作成したはずなのに、投資>株というように階層になっておらず、全てが同列で、親カテゴリーのようになっています。
というのも、先ほど作成したカテゴリーはあくまでブログ記事のカテゴリー階層なのです。
そこで、ちょっと面倒ではありますがグローバルナビゲーション用に再度階層だけ設定します。
とはいえ、カテゴリーの横の▼をクリックして、赤丸で囲ってあるように下の階層へをクリックすれば良いだけなので簡単です!
このように、 親カテゴリーから少し右側に表示がずれていれば、階層になっています。
最後に、下にあるメニュー設定から、好みの表示方法を選びます。
とりあえず私はヘッダーメニューとヘッダーモバイルメニューを選択しました。
これでメニューを保存をクリックすれば終了です。
念のためブログのトップページを確認し、グローバルナビが表示されていれば無事完了です。
お疲れさまでした!!