Cocoonのショートコードを使ってトップページを作成する方法

Cocoonでトップページを作る方法 ブログについて
Cocoonのショートコードを使ってトップページを作る方法

先日、このブログのトップページを変更しました。

以前は、新着記事がずらっと並ぶだけのトップページだったのですけど、いろんなサイトを徘徊してるうちに、「あれ?これってCocoonでもできるんじゃない?」と思い挑戦してみました。

思いのほか評判も良く、意外とニーズがあるかな?と思いましたので記事にしてみました。

参考になりましたら幸いです。

スポンサーリンク

Cocoonを使ってトップページを作成する方法

Cocoonを使ってトップページを作成する方法はいたって簡単です。

固定ページを作って、フロントページとして表示する

これだけです。

固定ページの作成方法は後ほどご紹介するとして、フロントページとして表示させる方法を先にご紹介します。

サイドバーの「設定>表示設定>ホームページの表示」でお好きな固定ページを作成するだけです。

固定ページをトップページとして設定
設定の表示設定からホームページを表示設定をする

ジロ
ジロ

めちゃ簡単

スポンサーリンク

Cocoonでトップページ用の固定ページを作る

新着記事と人気記事のトップページを作る

このブログのトップページはこのようになっています。

トップページのイメージ
トップページはカラム分けしてショートコードで作成

Gutenbergを使ってる人は、ブロックの追加の「Cocoonレイアウト」から2カラム、3カラムを選びます。

クラシック画面を利用されてる方は、「タグ」とかにあったように記憶しています。

各カラムに、新着記事と人気記事をH2で配置します。

こういう場合にH2とかH3の見出しがどう作用するかは分かってなくて、見た目だけでやってますけど、いろいろやり方はあると思います。

そしてショートコードを入力します。

新着記事の方には、[new_list]と入力するだけで、直近の新着記事が自動で5記事掲載されます。

人気記事の方には、[popular_list days=7 rank=1]と入力すれば、直近1週間のアクセスの多い記事が同じく自動で5本掲載されます。

ジロ
ジロ

上のショートコードは[]が全角になっています。

まあ、これだけでもいいような気はするんですけど、今回は少しでもアクセスを集めたいという思いから、各カテゴリによって読んでもらいたい記事をピックアップしてます。

これがナビカードのショートコードなのですが、これが結構時間がかかるので、一旦ここまでで更新しておいてください。

PC上は左右の2カラム、スマホは縦スクロール

PC上では左右の2カラムですが、スマホでは新着記事の次に人気記事が縦スクロールで順に表示されます。

ナビカードのショートコードを作成する

サイドバー「外観>メニュー」から作成していきます。

まず上の「新しいメニューを作成しましょう」をクリックし、新しいメニュー名を決めます。

後々呼び出す時にわかりやすい名前をおすすめします。

その後一旦メニューを保存します。

新しいメニューに左側から右側へ記事やカテゴリを追加していきます。

その際に、右側に出ている▼マークをクリックすると、表示の記事名を変えたり説明を表示させることが出来ます。

表示させるタイトルを変えたり、記事の説明を入れたり、CSS classを入力することで、ブログカードの左上に目印をつけたりすることが出来ます。

詳細についてはCocoonの製作者でもある、わいひらさんの記事を参照してください。

あとは、各カテゴリ毎にショートコードを追記するだけ。

続きはボタンで

どうしても何記事もメニューには追加できないでしょうから、他のカテゴリを表示させたい場合には、ボタン機能を使って、カテゴリリンクを張っておけばOK。

カテゴリの続きはボタンで
ボタンやトグルボックスを使う

トグルボックスでは全記事のリンクを

全部の記事を入れようとするとかなり目ざわりなので、トグルボックスを使って隠してます。

トグルボックスを設置して[sitemap]のショートコードを入力しておくと、全記事が羅列されます。

サムネイルのサイズあわせ

上の画像を見ていただくと、何か「続きを見る」ボタンがずれているのが分かると思います。

これはアイキャッチの高さ方向が異なるため起きる現象の様で、これらのサイズをあわせてやるともう少しすっきり見えます。

現在進行形ですが、「Regenerate Thumbnails」というプラグインを使用しています。

ショートコードについては、こちらのサイトをおすすめします

スポンサーリンク

カテゴリ分けは重要

カテゴリについてはどこまで細かく分けるかというのは、凄く判断が難しいです。

でも今回の作業をしていて、どこまで分けるか?この記事はどちらのカテゴリがふさわしいか?といったことを考えるきっかけにはなりました。

今後カテゴリ分けに少し時間を割いてみようと思います。

スポンサーリンク

まとめ

その他にも案内ボックスや、タブボックスなどを使えば、また違ったトップページが作れるかもしれません。

こちらのサイトではサイドバーをなしにして表示させているのと、ページ下部でカテゴリ検索が出来るプロフィール欄を追加しているので、どちらの印象の方がいいか教えていただけると嬉しいです。

バイクのある生活
新着記事 New新着記事はこちらです 人気記事 Check当サイト人気記事の一覧です バイクライフについてXJR1200の紹介続きを読む愛車歴 ツーリング ~続きを読む~

しばらくトップページ作りにはまりそうです。

コメント

タイトルとURLをコピーしました