Cocoon新着記事・人気記事ブロックを横並び／カラム数をサイドバーで切り替えるカスタマイズ

「こんなことできたらいいな～」を考えました！

今回は、ワードプレスのテーマCocoonにおいて「新着記事」「人気記事」のカラム数をサイドバーで切り替える方法を紹介します。

当カスタマイズの実装手順は有料公開です具体的な実装手順を見る

Cocoonでは、ブロック機能で簡単に「新着記事」や「人気記事」を表示でき、特に固定ページを使ったトップページ作成に役立ちます。

トップページの作り方

当サイトで紹介しているサイト型トップページでも使っています。

その際、記事カードを「横並びにしたい」「カラム数を変えたい」ことはないでしょうか。Cocoon設定の「横並び表示」を使う以外、もっと自由にレイアウトするには自分でCSSを追加する必要があります。

この記事では、サイドバーで簡単にカラム数を選択できるようにカスタマイズします。

ここがポイント

サイドバーからクリックするだけでデフォルトの他、４種類のカラムレイアウトが選べる
1. 2カラム（モバイルでも2カラム）
2. 2カラム（モバイルで1カラム）
3. 3カラム（モバイルで1カラム）
4. 3カラム（モバイルで2カラム）
ブロックで表示する「新着記事」「人気記事」の両方に対応
実装方法は２ヶ所にコードを貼り付けるだけ（PHP、CSS）

サイドバーにカスタムスタイルを登録することで、コーディング知識が少ない人でも簡単にレイアウトを変更できます。

Contents

実装イメージ／新着記事・人気記事のカラム数をサイドバーで切り替える

このカスタマイズでは、サイドバーから「新着記事」や「人気記事」のカラム数を4種類のスタイルから選択できるようにします。

レイアウトのバリエーションは以下の通りです。

手動でCSSを入力せずにクリック一つでカラム数が選べます。

これにより、モバイルユーザーとPCユーザーそれぞれに最適なレイアウトを提供することができます。

「新着記事」および「人気記事」ブロックの使い方は、サイドバーでスタイル選択が追加されている他は通常のブロック操作と同様です。

どちらも一時的に解除の上、作業後は設定を元に戻しましょう

実装手順は以下の２ステップ。２ヶ所にコードを設定するだけなので作業時間は５分ほどです。

PHPの設定

スタイル切り替えをエディタに追加

CSSの設定

各スタイルを指定する

カスタマイズ前にバックアップをおこないましょう。

ここから先は有料公開です。コピペで実装できる具体的なコードを掲載します。

特定商取引法に基づく表記
サイト名	Turicco
サイトURL	https://turicco.com/
お問い合わせ	https://turicco.com/contact/
購入方法	コンテンツ販売サービス、codoc(コードク)を利用しています。詳しくは購入者向けFAQをご覧ください。
納品方法	記事公開
販売価格	500円
お支払い方法	クレジットカード、デビットカード、プリペイド型クレジットカード、Apple Pay、Google Pay、コンビニ決済
お支払い方法	※クレジットカード情報はSSLで暗号化され、決済システムサービスを提供するStripe社に直接送信されます。管理人が知ることはありませんのでご安心ください。
返金・キャンセルについて	codoc株式会社利用規約第10条（返金）に基づき、原則として購入いただいた記事のキャンセル、返金等を受けられないことを了承ください。