ワードプレスのトップページをカテゴリー別にしたい!【初心者向け・Cocoon】

のアイコン画像

・ブログの固定ページを見やすく変えたい
・いろんな記事にアクセスしやすくして回遊率をあげたい

こんな悩みを解消します。

ブログのトップページ作りは読者が見やすいページにアクセスしやすくするために重要です。

せっかくアクセスしても、見たいページにすぐに飛べないとそのまま離脱してしまいますよね。

この記事では昨夜遅くまで固定ページ作成で苦戦していたヤマネ(@yamanebass)が、同じく悩めるブログ初心者の方へ作成方法をお伝えします。

本記事の内容を読むと以下がわかります。

  • 記事をカテゴリー別にするメリット
  • トップページで記事をカテゴリー別に表示する方法

※参考:ほどなくして有料テーマSWELLを購入し、時間をかけずカスタマイズ出来るようになりました!

目次

ワードプレスのトップページをカテゴリー別にしたい!【初心者向け】

 

カテゴリー別にするメリットとは

ブログのトップページをカテゴリ別にするメリットは、

  • パッと見がかっこいい
  • 興味のある記事へアクセスし易くなる
  • 少し記事数が増えてきたブログ

こんなところでしょうか。

逆に、固定ファンがついていて日付順に記事を見せたい場合はカテゴリ分けする必要はないと思います。

あなたのブログのタイプによって見極めてくださいね♪

トップページをカテゴリ別にする方法

すでに記事をカテゴリーに分けてある方で、固定ページもカテゴリー別にしたい方に向けてご紹介します。

 

作業にうつる前に、プラグイン「Classic Editor」をプラグイン追加しました。

※すごーく平たく言うと記事入力などの形が変わり、入力しやすくなるプラグインです。

 

導入前↓↓↓

 

導入後↓↓↓

ダッシュボードー固定ページー新規作成をクリック

H3タグでタイトルを入力(新着記事など)(H2で入力すると上に目次が出来てしまいます)

その下に以下を入力

[new_list type=border_partition arrow=1]

こちらはヤマネと同じように記事を薄い点々で区切るためのタグです。

ご自身で色々調整されたい場合、Cocoonテーマを作成したわいひらさんの以下のサイトを見ましょう。↓↓↓

タグー2カラムを選択

④カラム一つずつ作成。H3タグでカテゴリ名を入力。

カラム内の④の下に以下を入力

[new_list cats=◯ type=border_partition arrow=1]

※◯の部分にはそれぞれのカテゴリごとのIDを入力しましょう。

確認方法は、自身のIDを知りたいカテゴリー別投稿ページを開き、

カテゴリーの編集をクリック

トップページのカテゴリ分け

次に出てくる画面のURLをチェック。

「tag_ID=」の後に出てくるID番号をそれぞれ先ほどの画面に入力しましょう。

トップページのカテゴリ分け

続いて、

スタイルーボタンより好きな色のボタンを選択(ヤマネはライトブルー中です)

以下のように入力出来ているでしょうか。

※ボタンを押すとカテゴリーページへとぶようにリンクを貼るのを忘れずに

地道ですがファイトです(´ω`)

トップページのカテゴリ分け

それぞれのカテゴリーにも同じことを行い完成させましょう。

トップページのカテゴリ分け

全て入力してプレビューを押すと、

トップページのカテゴリ分け

このようにカテゴリー別になっているかと思います。

入力出来たら必ず「下書きに保存」を押して保存しましょう。

作成したカテゴリーをトップページに表示させる

いよいよ作成したカテゴリーをトップページに表示させましょう。

ダッシュボード内 設定ー表示設定をクリック

トップページのカテゴリ分け

②ホームページ表示がデフォルトだと「最新の投稿」になっているので、

固定ページーホームページで該当の固定ページを選択ー変更を保存を押す

お疲れ様でした。

この方法でトップページがカテゴリーごとに変わったかと思います。

固定ページの上の方に日付を表示させたくない方は、

子テーマの外観ーテーマエディター内スタイルシートの

/************************************
** 子テーマ用のスタイルを書く
************************************* 

の下に↓のコードを貼って保存をして見てください。

日付がなくなるかと思います。(◯の部分は、固定ページのID番号を入力してください)

/* 固定ページの投稿更新日時 */
#post-◯ .date-tags {
display: none;
}

まとめ:ブログのトップページを見やすくして回遊率を上げよう!

ブログにせっかくアクセスしてもらっても見づらいページだとあなたの記事が読まれない可能性も。

せっかく書いた記事だから、たくさんの方に読んでもらえるように見やすいサイトにしましょう♪

小ヤマネくんのアイコン画像小ヤマネくん

おねえさん昨日難しいかおして遅くまでこれやってたのか〜

ヤマネのアイコン画像ヤマネ

初心者は大変なのよ子ヤマネくん

おわり★

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!

コメント

コメントする

目次
閉じる