無料素材を投稿しています

皆さんのブログなどに利用していただける様に色んな素材を投稿しています

無料DLはこちら
写真素材のピクスタ
WordPress関連

【 WordPress 】cocoonトップページ カスタマイズ 図解でわかりやすく解説

WordPressの看板
スポンサーリンク

ブログ訪問ありがとうございます。

雪丸です。

雪丸
雪丸

皆、素敵なトップページ作っているけど
どうやって作ったんだろ?

自分もCocoon使っているけど
教えるよ?

皆さんびブログを見ていると、とても手が込んでいたりキレイにされていますよね😃

特に見やすいと思うのが【 カテゴリ別 】

になっているものは
見やすい!

知りたい情報の記事が探しやすいと思いませんか?


私も初めはトップページ作成に時間を要しました😥
探しても古い情報だったりして、困りました。

同じ様な苦労をしてもらいたくないので記事に
しました。

スポンサーリンク
スポンサーリンク

固定ページを作成しよう!

WordPressダッシュボード

ダッシュボード内『 固定ページ 』の

新規追加 』で新たに作成しましょう。

固定ページ内容

これはわたしのトップページになりますが、
キーワード(題名)は何でも良いです。

なぜなら、このページは表示されるものでは無いからです。

雪丸
雪丸

緑ボタンの「プロフィールはこちら」の
作成方法は別記事でご紹介します

まずは全体の構図を作りましょう。

まずどの様なトップページを作りたいか?

わたしは「最新記事」が一番上に来るように設定してます。

関連記事

404 NOT FOUND | 雪丸ブログ
ペット・美容・健康情報など色々な事を書いてます

そのため上の様に『 単独で!

新着記事一覧[  new_list count=”3″ type=”default” cats=”all” children=”0″ post_type=”post”  ]

と打ち込んでいるのが解ると思います。

【 最新記事一覧 】とありますがコレは
自分でキーワード入力します。

人によっては【 更新記事 】とか色々ありますよね😃

そして下段にカテゴリー別に表示されるようにしています。

トップページ詳細設定

まずはクラシックモードにしましょう。

クラシックモード

『 タグ 』▲を開きます。

cocoonタグ内2カラム設定

『 2カラム 』を指定します。
(コレは個人で好きな配置にしたいかです

そうすると、下の様な画面になりましたよね?

cocoon2カラム内容

そしたら中に打ち込むのが『 カテゴリー名 』 コード貼り付けです。

美容・口コミ[ new_list count=”5″ type=”default” cats=“27” children=”0″ post_type=”post” ]

【 美容・口コミ 】も自分の記事(カテゴリをそのまま使用でもOK)に
あわせて入力してます。

[ new~~ ]となっていますが実際は空白は入りません。
 
そのまま載せてしまうと私のページが表示されてしまうため、

空白を作ってますので、コピペする場合は空白を詰めて使って下さい。

そして27とは? カテゴリーIDです。

カテゴリーIDの調べ方

雪丸
雪丸

IDが何処で表示されるのか
ここでつまづきましたね😥

じつはかなり調べたのですが、WordPressの古いバージョンでの記事は沢山あったのですが、現在の更新されてからのが数が少なくて時間がかかりましたね😓

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

『 投稿 』→『 カテゴリー 』を選びましょう。

トップページの表示させたいカテゴリーポインター⬆を持っていきます

青い文字のところに ⬆ を持っていくと・・・

『 左下 』にID番号が表示されます!

カテゴリID表示

この【 43 】という数字を先程の27と書いてある場所に書き換えれば

トップページでWordPress関連の記事が表示されます。

[ new_list count=”5″ type=”default” cats=“27” children=”0″ post_type=”post” ]

この27を43に書き換えます。

※newとなっているのは、カテゴリ内の更新された新しい記事が一番上に来ます。

表示させる記事数を変える方法

雪丸
雪丸

3記事づつ表示させたいな!

超簡単! 上のコードをちょっと変えるだけだよ😃

count=”5“の数字を変えるだけ!

雪丸
雪丸

カウントって書いてあるね

もうおわかりですかね? カウント5は記事が5個表示されます。

雪丸
雪丸

記事を3つだから
count=”3”にするだけ?

正解!

children=”0″ とありますがコレは小カテゴリを含めて表示させるか?!
という事です。

小カテゴリが有り表示させたい場合

例)children=”1″ と変更しましょう

2カラム 下段 2カラム の様にやっていけば

4カテゴリできますね😃

これでカテゴリー別に表示されるようになったと思いますよ😃

トップページ見本

私はこの様に配置してます。

これで【 公開する 】にしてください。

雪丸
雪丸

結構 簡単にできました😃

さ~あなたもレッツチャレンジ!!

トップページを表示させよう!

カスタマイズが出来たら、次は表示させましょう😃

WordPressダッシュボード設定内訳

ダッシュボードの中の『 設定 』『 表示設定 』

WordPress表示設定内

『 固定ページ 』にチェックを入れ
最大投稿数等を自由に変更したら
『 変更を保存 』

出来上がったトップページはこちら

スポンサーリンク
シェアしてみよう
雪丸をフォロー
スポンサーリンク
雪丸ブログ
タイトルとURLをコピーしました
にほんブログ村 にほんブログ村へ
にほんブログ村