tontotakumi.com

web制作、Wordpress、料理、書評などを中心に、web制作初心者「tontotakumi」が作るブログ

ナビメニューに投稿で作成したカテゴリーを任意で選択して表示(追加)する方法

   

ヘッダー下のナビメニューにカテゴリーを入れる方法

ある程度ページの制作が進んでくると、ヘッダー下のメニューの内容を変更したくなってきますよね。いろいろいじっていると、固定ページを追加すると勝手にメニューに追加されるのが分かってくるんですが、普通に投稿した記事をカテゴリー分けしていると、そのカテゴリーの内容だけ表示出来たらいいなぁ~って思ったんですね。

んで、探してみること数十分・・・。それらしきページが出てきたんですが、見た目がちょっと違うんですよね。でも、それに従ってやってみたらできたので、もう少しわかりやすく表示してみようかと。。。そして自分用の備忘録用にも!!

ちなみに設置状況は、wordpress3.5.1 を使って、テンプレートはtwenty twelveをベースにカスタマイズしています。

1. 初期のナビメニューの状態

初期のナビメニュー

初期のナビメニュー

初期の状態に、2つの固定ページを設定している状態です。「ホーム」には、投稿した記事が順番に表示されているんですが、「TONTOTAKUMIについて」と「お問い合わせ」は固定ページに内容を書き込んでいく感じになっています。
ダッシュボードの投稿から記事を新規で入れる際に、カテゴリーを設定して内容を分けれるようにしているんですが、そのカテゴリを「ナビメニュー」に入れてしまいたいですよね。そうすれば、投稿で追加していったものが勝手に仕分けされてわかりやすく表示されるので。。
ちなみに、完成した状態はこんな感じになりました。

完成したナビメニュー

完成したナビメニュー

「メモ的な」「web制作」「備忘録(wordpress)」っていう部分が今回カスタマイズして表示されるようになりました。投稿に設定している「カテゴリー」の内容をこんな感じで、表示する方法をは下記の通りになっています。ちなみに、メニューの中にさらに子メニューを表示もできちゃいます。上の画像で言うと、「web制作」の下に表示されている「備忘録(wordpress)」の部分ですね。子カテゴリーを追加すると、そこの下に表示が出来るようですよ!!

2. まずはカテゴリーの準備

メニューの中に追加する準備として、「カテゴリー」を先に作成します。追加するときには、設定済みのカテゴリーから選択するので、カテゴリーが無い状態だと選択することが出来ません。
ということで、ダッシュボードの、[投稿≫カテゴリー]を選択して

ダッシュボード カテゴリー

ダッシュボード カテゴリー


カテゴリーを作成します。
カテゴリー作成

カテゴリー作成


こんな感じで、いくつか作ってあげます。
ちなみに、さっきの完成図には、表示されていない内容があるのですが、カテゴリーを作成しても、記事の中身が無いと追加が出来ないようです。(のちほど、説明しますね。)
とりあえず、これで入れて上げれる素材が出来ました。

3. メニューからナビメニューをカスタマイズする

次にダッシュボードの、[外観≫メニュー]を選択します。

外観>メニュー

外観>メニュー


初期の状態はこんな感じ。
初期メニューの中身

初期メニューの中身


右側のメニューの名前ってところだけ色が濃くなっていて、記入したりできるんですが、左側は色が薄くなっていていじることが出来ません。でも大丈夫。
ここで、新しいメニューを追加することでナビメニューの内容を自由に変更することができるようになります。

右側の「メニューの名前」ってところに、あとで自分が分かるように名前を付けてください。なんでも大丈夫です。とりあえず僕は「navi menu」としてみました。で、「メニューを保存」をクリックするとこんな見た目にちょっと変わります。

メニューの名前追加後の見た目

メニューの名前追加後の見た目


さっきは選択できなかった左側の色が濃くなっていじることができるようになったと思います。そして右側には、「メニュー項目 (固定ページ、カテゴリーリンク) を左のボックスから選び、カスタムメニューを作成してください。」って表示されていますよね。
ついにここまで来ました。ここで言っているカスタムメニューっていうのが、目指しているカスタマイズされたナビメニューになります!!!
説明に従い、左側のリストから入れたいものを選択し、「メニューに追加」ボタンを押します。
メニューを選択して追加

メニューを選択して追加


んで、追加を押すとこんな感じに右側の作成したメニューの中に、選択したものが追加されます。
メニューを選択して追加2

メニューを選択して追加2


ここに表示されたものの順番がそのまま反映されます。この画面だと上から下に並んでいるものが、実際の画面だと左から右へ並ぶので、クリックアンドドロップで順番を好きなように入れ替えてください。
メニューを並び替え

メニューを並び替え


画像をよく見てもらうと分かるかと思うんですが、「備忘録(wordpress)」っていうのが、「web制作」の下でちょっと右にずれていると思います。これは、「web制作」ってメニューの中の子メニューになるってことのようです。
これをしてあげると、完成図にあったように、「web制作」にマウスがのっかると「備忘録(wordpress)」が表示されて、選択できるようになります。
完成したナビメニュー

完成したナビメニュー


こんな感じです。

4. ホームを設定する

ここまでで、自分の好みの「カテゴリー」をメニューに追加できたと思います。ただ、よく見ると「ホーム」がないじゃん!!ってことになると思います。設定を変更する前のトップページにあたるとこです。すべての記事が表示されるとこがなくなっちゃったらまずいっすよね!!しかも、左側に選べるものが無い!!ってなります。・・・でも大丈夫です。

左側の枠に「カスタムメニュー」っていうのがると思うのですが、そこに好きなページを選択して名前を付けることで追加することが出来ちゃいます。ここに、トップページのURLを入れて、「ホーム」って名前を入れてあげれば、以前の「ホーム」と同じように表示することが出来ます。

ホーム設定

ホーム設定


図のように入れてあげるんですが、URLの所は自分のサイトのURLを入れてくださいね。ラベルっていうのは、ページに表示される名前になるので「ホーム」って入れるとそのまま表示されます。(ワードプレスってホントよく作られてますよね)

5. 最後にこのメニューをサイトに適応させる

やっと最後の段階です。今の状態だと、新しいカスタムメニューは作成できたのですが、それを利用しますよ!!って設定をしてあげなくちゃいけません。で、その設定も左側にある枠の「テーマの場所」ていうところで、設定出来ちゃいます。
枠の中にメインメニューってなっているところが、今は空白になっていると思うのですが、入力部分の右にある下向き三角をクリックすると、さっきまで作っていた「navi menu」があると思います。

テーマの場所設定

テーマの場所設定


それを選択して、保存をします。

そして、サイトを表示してみてください!!
どうですか?ちゃんと表示されてますか?? これで自由にナビメニューの内容をいじれるようになったと思います。とりあえず、設定だけなんですが、あとはデザインとかをいじってあげればきれいになっていくかと思います。

僕も早く、デザインをきれいにできるようになりたい!!

※このブログに記載されている情報は、僕(結構な素人)の考えや経験に基づいて掲載しております。
掲載記事を参考にして修正した際に起こる損害については、その責任を負いかねます。
自己責任で、掲載情報を参考にして頂ければ幸いです。

 - web制作, 備忘録(wordpress)

広告

広告

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

  関連記事

アコーディオンメニュー
WordPressで、CSS3とhtmlだけでアコーディオンメニューを作る方法

アコーディオンのように、クリックするとコンテンツが開いて表示される「アコーディオ …

Advanced Custom Fields
Advanced Custom Fieldsを使って、wordpressの記事入力項目を作り替える

前回の記事(WordPressで複数の会員が独自のページを作成し、内容を管理・更 …

無料ウェブサイト作成サービス”WiX”を使ってみた

「WiX」っていう無料ウェブサイト作成サービスを知っていますか?以前、Jimdo …

Adsense
WordPressのmoreタグの直後に、Adsenseのレスポンシブ広告を出す方法

自分用の備忘録として、「WordPressのmoreタグの直後に、Adsense …

[GitHubの使い方:画像付き] GitHubデビューが意外と簡単だった!!環境を作ってプッシュするまでの流れ

以前から気になっていた「GitHub」なのですが、黒画面を使うって聞いていて、ビ …

no image
【wordpress】のプラグインで不具合が・・・((+_+))

wordpressにプラグインを入れるときにはバージョンチェックをしましょう 初 …

no image
3ステップで、簡単にサイドのカラムにGoogle Adsenseを入れる方法

右サイドのウィジェットにAdsenseを入れて、カラムの幅を調整 ブログにGoo …

表示設定
htmlで作られているサイトをWordPressに作り変える時、index.htmlを残したまま裏で制作する方法

htmlで運営しているサイトをWordpressに作り変える際に、サイトの運営を …

Identity Mask(Chromeウェブストア)
Googleアカウントなどを複数同時に見たいときに使える拡張機能「Identity Mask」

スマフォで時間があるときによくGunosyを見ているんですが、昨日見た記事で以前 …

Th-MakerXアイキャッチ
Macで画像をまとめてリサイズするときに便利な「Th-MakerX」を入れてみた(無料で)

WindowsからMacに乗り換えてから色々と必要なソフトが出てきました。ブログ …