【ヘッダーの設定⑤】完全図解!ヘッダーのカテゴリーを設定する方法

スポンサーリンク

 

 

前回では

【サイトのアウトライン設定④】サイトのロゴを作成しよう

についてお話をしていきました。

今回はヘッダーのカテゴリーを設定していく内容です。

このサイトで言うとここの部分です。

 

 

カテゴリーは固定と投稿ページで作ることができます。

 

教える人

『元料理長ですが何か?』管理人

イウラ(@allezcchiがお送りします。

よろしくお願いします。

 

 

 

サイトの構成を考える

 

カテゴリーを決めていく前に最初の考えることはサイトのトップページの構成を考えることが先決です。

なぜならサイトの構成を考えるとスムーズにサイトが作成できるようになるからです。

また、それぞれのページを作成するときはページの目的にあった『テンプレート』を準備することで無駄なくサイトを作ることができます。

これから作るサイトのテンプレートと構成はこちらです。

(※画像はクリックするとすべて拡大してみることができます)

 

テンプレートに沿って作成した実際のサイトはこちらです。

 

実際のサイト

 

今回はこれを作っていきます。

カテゴリーは固定ページと投稿ページで作ることができます。

テンプレートで見てみましょう。

 

 

この記事はWordPressテーマ『ストーク』を使って説明をしています。

お使いのWordPressのテーマによっては設定方法が違うため注意してください。

 

 

固定ページでカテゴリーを作成した場合

 

 

実際に当てはめてみるとこんな感じです。

 

 

赤枠で囲ってある場所は固定ページで作っていきます。

では投稿ページで作るカテゴリーはどこの場所なのでしょうか?

 

投稿ページでカテゴリーを作成した場合

 

 

 

実際に当てはめてみましょう。

 

 

このような感じでカテゴリーを作ることができます。

実はサイトを作成する前の作業はとても大切でカテゴリーを設定してから情報や記事(ブログ)を書いていくべきなのです。

そうすれば後からあれやこれやと手をつけなくてすみますしスムーズなサイト作成ができるのです。

 

ではテストサイトのようにカテゴリーを作りサイトのヘッダー部分に表示させてみましょう

今からこれを作っていきます。

 

 

手順どおりやっていけば必ず作れるようになるので安心してくださいね^^

 

ヘッダーのカテゴリー設定の手順

 

  1. サイトの構成を考える
  2. 親カテゴリーを設定する
  3. 子カテゴリーを設定する
  4. サイトにアップする
  5. 記事(ブログ)を書いていく

 

1.サイトの構成はこちらのテンプレートに沿って作成していきます。

 

 

2.親カテゴリーを設定する

 

では早速『親カテゴリー』を作っていきましょう

これは固定ページから作っていきます。

手順はこうです。

 

  1. 『ダッシュボード』
  2. 『固定ページ』
  3. 『新規追加』
  4. 『タイトルを入力』
  5. 『公開』

 

ここまでできたらヘッダーのカテゴリーメニューに表示させる作業を行っていきます。

では固定ページからカテゴリーを作っていきましょう。

『サービス内容』という固定ページを作っていきましょう

『ダッシュボード』⇒『固定ページ』を選びクリックします。

 

 

『新規追加』をクリックします。

 

 

表示が切り替わるので赤枠にタイトルを入力しましょう。

 

 

ここでは『サービス内容』と入力しました。

青枠はあなたが顧客にどんなサービスを提供するのか書いていきましょう。

 

※この記事では青枠については触れていませんのであしからず

 

 

 

タイトルを入力するとパーマリンクが表示されるので『URL』を変更します。

 

 

『編集』をクリックすると赤枠のように表示されます。

ここは『サービス内容』という文字はパソコンの『Backspace』キーで消します。

 

 

パーマリンクを欄に『service-contents』と入力します。

入力したら『OK』をクリックします。

 

 

『公開』をクリックしましょう。

 

 

 

これで固定ページを作ることができました。

この手順を繰り返して

サービス内容』⇒『お問い合わせ』⇒『運営者情報』⇒『記事一覧』を作っていきましょう。

 

ヘッダーのカテゴリーメニューに表示させる方法

 

固定ページは作成して公開した時点ではカテゴリーに表示されません。

表示させるには『外観』『メニュー』のタブを使って表示させるようにします。

手順はこうです。

  1. 『外観』
  2. 『メニュー』
  3. 『メニュー名を入力』
  4. 『メニューを作成』
  5. 『表示させる場所をチェックする』
  6. 『タブから固定ページで作ったものを『メニューに追加』するをクリックする』
  7. 『メニューを保存する』

 

このような流れです。

たぶん読んでもなんのことかよくわからないと思いますので、解説していきましょう。

 

『外観』⇒『メニュー』をクリックします。

 

 

表示が切り替わるので赤枠の中に文字を入力します。

 

 

赤枠に中に『ナビゲーションメニュー』と入力します。

 

 

『メニューを作成』をクリックします。

 

 

すると赤枠に様なものが表示されるようになります。

 

※お使いのWordpressのテーマによっては表示のされ方が違うので注意されてください。

解説で使っているWordpressのテーマは『ストーク』を使って解説しています

 

  • 『グローバルナビ』
  • 『グローバルナビ(スマートフォン)』にチェックを入れます。

 

『グローバルナビ』とはカテゴリーに表示するナビゲーションの意味です。

 

 

 

赤枠には公開している固定ページで作ったものが表示されているはずです。

 

 

固定ページで作ったもの全てにチェックを入れましょう。

 

 

『メニューに追加』をクリックします。

 

 

すると先ほど作成した『ナビゲーションメニュー』の中に固定ページが移動したのが確認できるはずです。

 

 

『メニューを保存』をクリックします。

 

 

『ナビゲーションメニューが更新されました』と表示されたらOKです。

 

 

では実際にサイトではどのように表示されているのか確認をしていきましょう。

 

『ライブプレビューで管理』をクリックしましょう。

 

 

プレビュー画面で確認するとこのように表示されているはずです。

 

 

 

 

※デフォルトだとこのような表示はされません。

実は少し調整を入れました。

調整の方法は簡単です。

外観⇒カスタマイズ⇒グローバル設定⇒

[ヘッダー]テキストロゴサイズで文字の大きさを変更

   

[ヘッダー]ロゴレイアウト

  

これで上記のようなカテゴリーが表示されたヘッダーになるはずです。

WordPressのテーマの『ストーク』の仕様なのでお使いのテーマでは変わることがあるので注意をしてください

 

ここまでが親カテゴリーの設定方法です。

テンプレートで見るとこんな感じですよね

 

 

実際のサイトで表示されたものがこちらです。

 

 

 

見比べていただくとわかりますが、テンプレートに近いものを作ることができました。

 

 

2.子カテゴリーを設定する

 

では次に子ページからカテゴリーを作っていきましょう。

これは投稿ページから作っていきます。

作っていく手順

  1. 『ダッシュボード』
  2. 『投稿』
  3. 『カテゴリー』
  4. 『カテゴリー名を入力』
  5. 『スラッグ(URL)を設定する』
  6. 『新規カテゴリーを追加』
  7. 『外観』
  8. 『メニュー』
  9. 『投稿からナビゲーションメニューに移動』

 

このような流れで設定していきます

これも解説していくのでそのまま読み進めてくださいね。

 

『ダッシュボード』から『投稿』⇒『カテゴリー』を選びクリックします

 

 

 

 

表示が切り替わるので赤枠の『新規カテゴリーを追加』の中にカテゴリーの名前を入力します。

 

 

 

『スラッグ』はカテゴリーのURLのことなのでカテゴリーの名前が決まったらスラッグ名も入力します。

 

 

『スラッグ』ここではカテゴリー名と同じもので大丈夫です。ただしアルファベットで入力しましょう。

日本語だとGoogleの検索エンジンにとって好ましくない影響が出てしまうからです。

 

ここでは『category-2』と入力しました。

入力が完了したら『新規カテゴリーを追加』をクリックしましょう。

 

 

クリックすると右の赤枠のようにカテゴリーが追加されたのがわかります。

 

 

テンプレートだとカテゴリーは3つあるので同じ手順を踏んでカテゴリーを3つ作っていきましょう。

 

 

3つ作ることができました。

 

 

では次に『外観』『メニュー』をクリックしましょう。

 

 

すると表示が切り替わるので赤枠の中のをクリックします。

 

 

カテゴリーのタブが表示されるので『すべて表示』をクリックしましょう。

 

 

赤枠の中にある『カテゴリー』の1~3すべてチェックを入れます。

チェックした後に『メニューに追加』をクリックしましょう。

 

 

すると右の赤枠の中に作成したカテゴリーがメニューに追加されているのがわかります。

 

 

次に作成したカテゴリーを『記事一覧』の下に移動させます。

カテゴリー1~3を順番に移動させます。

 

 

カテゴリー1のタブをマウスでドラッグ&ドロップすると動かせるようになります。

 

 

 

このまま記事一覧の下へ移動させましょう。

 

 

ちゃんと移動されたのが確認できたと思います。

 

 

同じように残りのカテゴリーも記事一覧の下へ移動させましょう。

 

 

 

すべて移動できたら『メニューを保存』をクリックしましょう。

 

 

『ナビゲーションメニューが更新されました』と表示されるとOKです。

 

 

では実際にどうのようにサイトに表示されているのかチェックして見ましょう。

 

『ライブプレビューで管理』をクリックしましょう。

 

 

ちゃんとカテゴリーの設定ができていることがわかりますね!

 

 

固定ページと同じように子ページもカテゴリーの設定をすることができました。

テンプレートと比較してみましょう。

 

テンプレート

 

 

実際のサイト

 

 

 

テンプレートと同じものを作ることができましたね!

以上でヘッダーのカテゴリー設定を終わりにしたいと思います。

次の記事⇒【ヘッダーの設定⑥】ヘッダー画像のアップロード方法

 

 

 


■おすすめカテゴリー■

スポンサーリンク




【人材確保に困ったら?】

ぜひ読んで欲しいレポートです!

僕が行った求人成功事例のレポートです。1人のスタッフを入れるつもりが「ある戦略」を使ったことで3人まとめて入れることができました。またここではいえない豪華特典(特別付録)ついてます!総ページ数150ページ以上4万文字以上という大ボリュームの無料レポートです。ぜひあなたの店の求人に役立てください!

ダウンロードするとさらに詳しく求人ができる「ある戦略」を無料で学ぶことができます。あわせて読んでみると効果倍増します。


コメントを残す

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

CAPTCHA


ABOUTこの記事をかいた人

1977年3月広島生まれ。「カレー」と「うどん」が好きです。「カレーうどん」はもっと好きです。その昔、スリランカ人と働いて幅広い視野を持てるようになりました。興味のあることは突き詰めてとことんやる傾向にあります。料理人です。主にイタリア料理とフランス料理をしてました。FBとツイッターからの友達申請待ってます