blueroll

blueroll

青春はぐるぐるだ。

【実録】WordPressをはじめよう [カスタマイズ編]その2 〜カテゴリーを設定してナビゲーションメニューを作成する〜

f:id:blueroll:20160413092145j:plain

前回の記事では最初の投稿記事(画像入り)の作成をしました。作成した記事は「Webデザイナーへの道」なので、メニューの「Webデザイン」から選択できるようにします。

 

 

ナビゲーションメニュー作成

f:id:blueroll:20160413074252p:plain

この部分ですね。現在は仮でサンプルページが表示されています。さて、ここで考えました。「Webデザイン」のメニューボタンを押すと「Webデザイナーへの道」のページに行くようにしたいのですが、他のWebデザイン関連のページも作りたい…。

 

f:id:blueroll:20160413075111j:plain

こういうことですね。こういうのを「ナビゲーションメニュー」と言うらしい…。WordPressで設定するには「カテゴリー」を設定する必要があるようです。

 

カテゴリー設定をする

f:id:blueroll:20160413080338p:plain

ダッシュボードから「投稿」「カテゴリー」を選択。

 

f:id:blueroll:20160413080411p:plain

カテゴリー設定画面に移ります。

 

f:id:blueroll:20160413080433p:plain

まずは一番上の「Webデザイン」カテゴリーを作成します。名前を入力して「新規カテゴリーを追加」をクリック。

 

f:id:blueroll:20160413080730p:plain

「Webデザイン」カテゴリーが追加されました。このカテゴリーが一番上のメニューになります。

 

f:id:blueroll:20160413081007j:plain

この部分ですね。続いて、その下の3つのメニューを作成していきます。

 

f:id:blueroll:20160413081130p:plain

名前を入力し「親」のプルダウンメニューから、先ほど作成した「Webデザイン」を選択します。これが親カテゴリーとなり、今作った「Webデザイナーへの道」が子になります。親子の構造というのはWebの世界で良く使われる概念のようです。要するに親が上の階層、子が下の階層になるということですね。

 

f:id:blueroll:20160413081545p:plain

「新規カテゴリーを追加」を押すと追加されました。「Webデザイン」カテゴリーの下に「—Webデザイナーへの道」と表示されています。設定した名前の前に「—」が付いています。これが子カテゴリーの印のようです。

 

f:id:blueroll:20160413082050p:plain

他の子カテゴリも追加します。これにてカテゴリー作成は終了です。

 

f:id:blueroll:20160413082809p:plain

前回作成した記事のカテゴリーが未分類のままでしたので「投稿」「投稿一覧」から任意の記事を選択します。

 

f:id:blueroll:20160413082938p:plain

「投稿の編集」画面から、右側の「カテゴリー」の部分のチェックを「未分類」から…

 

f:id:blueroll:20160413083023p:plain

選択したいカテゴリー「Webデザイナーへの道」カテゴリーにチェックを入れて「更新」すると、記事にカテゴリーが設定されます。カテゴリーの設定は新規投稿時に選択できるので、以降は新規投稿する際に、カテゴリー設定も同時に行います。

 

カテゴリーをナビゲーションメニューとして設定する

f:id:blueroll:20160413083803p:plain

設定したカテゴリをメニューに反映させます。「外観」「メニュー」を選択。

 

f:id:blueroll:20160413085550p:plain

「カテゴリー」から「すべて表示」を選択

 

f:id:blueroll:20160413085637p:plain

先ほど作成したカテゴリーのチェックボックスにチェックして、「メニューに追加」します。

 

f:id:blueroll:20160413085733p:plain

作成したカテゴリーがメニューに追加されました。ただし、このままだと全てのメニューが同じ階層になって、横一列に並んでしまいます。

 

f:id:blueroll:20160413085924p:plain

子カテゴリーのメニューを親カテゴリーのメニューの下にクリック&ドラッグします。

 

f:id:blueroll:20160413090004p:plain

子カテゴリーのメニューの名前の後ろに「サブアイテム」と表示されています。これで親子構造のナビゲーションメニューができました。

 

f:id:blueroll:20160413090312p:plain

同様に残りの2つの子カテゴリーもサブアイテムにします。

 

f:id:blueroll:20160413090352p:plain

ちなみに階層はもう一つ下に作ることもできます。この図だと「Webデザイナーへの道」メニューの下に「Webデザイントレンド」が来ています。今回は「Webデザイントレンド」は他の2つ(Webデザイナーへの道、HTML,CSS)と同じ階層にしたいので、この図のように3階層にならないように注意します。

 

f:id:blueroll:20160413090944p:plain

以前の記事で設定したWebデザイン「固定ページ」は仮なので削除してしまいます。

 

f:id:blueroll:20160413091033p:plain

 右側の▼ボタンを展開し「削除」をクリック。

 

f:id:blueroll:20160413091218p:plain

Webデザインメニューは先頭にしたいので、複数選択して上に移動します。

 

f:id:blueroll:20160413091306p:plain

これでナビゲーションメニューができたはず!

 

f:id:blueroll:20160413091337p:plain

できた…けど選択していない子メニューは白文字になって見えない…ここのデザインをいじる必要がありそうです。

 

f:id:blueroll:20160413091427p:plain

クリックすると記事一覧が表示されます。階層がきちんと表示されています。この階層表示を「パンくずトレイ」というらしいです。

 

f:id:blueroll:20160413091536p:plain

f:id:blueroll:20160413091547p:plain

ちなみに他の2つはこんな感じできちんと反映されているのが分かります。

 

おわりに

段々とサイトらしくなってきました〜。色々といじっていくと階層構造のようにWebの概念も覚えられて良いですね。やはりWordPress運営、勉強になります!