「こんなことできたらいいな~」を考えました!
今回は、ワードプレスのテーマCocoonにおいて「新着記事」「人気記事」のカラム数をサイドバーで切り替える方法を紹介します。
Cocoonでは、ブロック機能で簡単に「新着記事」や「人気記事」を表示でき、特に固定ページを使ったトップページ作成に役立ちます。
当サイトで紹介しているサイト型トップページでも使っています。
その際、記事カードを「横並びにしたい」「カラム数を変えたい」ことはないでしょうか。Cocoon設定の「横並び表示」を使う以外、もっと自由にレイアウトするには自分でCSSを追加する必要があります。
この記事では、サイドバーで簡単にカラム数を選択できるようにカスタマイズします。
- サイドバーからクリックするだけでデフォルトの他、4種類のカラムレイアウトが選べる
- 2カラム(モバイルでも2カラム)
- 2カラム(モバイルで1カラム)
- 3カラム(モバイルで1カラム)
- 3カラム(モバイルで2カラム)
- ブロックで表示する「新着記事」「人気記事」の両方に対応
- 実装方法は2ヶ所にコードを貼り付けるだけ(PHP、CSS)
サイドバーにカスタムスタイルを登録することで、コーディング知識が少ない人でも簡単にレイアウトを変更できます。
実装イメージ/新着記事・人気記事のカラム数をサイドバーで切り替える
このカスタマイズでは、サイドバーから「新着記事」や「人気記事」のカラム数を4種類のスタイルから選択できるようにします。
レイアウトのバリエーションは以下の通りです。
- デフォルト(縦並びになっています)
- 2カラム(モバイルでも2カラム)
- 2カラム(モバイルで1カラム)
- 3カラム(モバイルで1カラム)
- 3カラム(モバイルで2カラム)
カラムレイアウト例
- 横並びにするために
display: grid
プロパティを使っています - PC表示のみ、カード間に16pxの余白を設定しています(CSSで調整できます)
2カラム(モバイルでも2カラム)
2カラム(モバイルで1カラム)
3カラム(モバイルで1カラム)
3カラム(モバイルで2カラム)
手動でCSSを入力せずにクリック一つでカラム数が選べます。
これにより、モバイルユーザーとPCユーザーそれぞれに最適なレイアウトを提供することができます。
Cocoon「新着記事」「人気記事」ブロックの使い方
「新着記事」および「人気記事」ブロックの使い方は、サイドバーでスタイル選択が追加されている他は通常のブロック操作と同様です。
- Step1ブロックメニューを選択
投稿ページ、または固定ページのブロックエディタで「新着記事」ブロックを選択します。
人気記事を表示する場合は「人気記事」ブロックを選択します。
- Step2お好みのスタイルを選ぶ
サイドバー「ブロック」タブ→「スタイル」からお好みのスタイルを選んでクリックします。
- 表示する記事の数
- 表示タイプ
- 通常のリスト(小さなカードです)
- 大きなサムネイル表示(当カスタマイズを使う場合はこちらを推奨します)
- Step3カラムスタイルを選択(当カスタマイズで追加)
サイドバーからお好みのスタイルをクリックします。
- デフォルト(縦並びになっています)
- 2カラム(モバイルでも2カラム)
- 2カラム(モバイルで1カラム)
- 3カラム(モバイルで1カラム)
- 3カラム(モバイルで2カラム)
- Step4表示確認
プレビューで表示確認できたら完成です。
当カスタマイズの注意点と特徴
- 検証はスキン「なし」でおこなっています
- ご利用のスキンに同様の機能がある場合は重複する可能性があります
- 子テーマを使うため、比較的安全におこなえます
- 当カスタマイズが不要になったときは追加したコードを削除すれば元に戻ります
- PHPでエラーがでる場合は下記をご確認ください
- サーバー側でベーシック認証(アクセス制限)を設定していないか
- →エラーが表示され編集できません
- サーバー側でWAF設定をONにしていないか
- →エックスサーバーではONにしていても影響ないようです
どちらも一時的に解除の上、作業後は設定を元に戻しましょう
実装方法/Cocoon新着記事・人気記事ブロックのカラム数をサイドバーで切り替える
実装手順は以下の2ステップ。2ヶ所にコードを設定するだけなので作業時間は5分ほどです。
PHPの設定
スタイル切り替えをエディタに追加
CSSの設定
各スタイルを指定する
ここから先は有料公開です。コピペで実装できる具体的なコードを掲載します。
特定商取引法に基づく表記 | |
---|---|
サイト名 | Turicco |
サイトURL | https://turicco.com/ |
お問い合わせ | https://turicco.com/contact/ |
購入方法 | コンテンツ販売サービス、codoc(コードク)を利用しています。 詳しくは購入者向けFAQをご覧ください。 |
納品方法 | 記事公開 |
販売価格 | 500円 |
お支払い 方法 | クレジットカード、デビットカード、プリペイド型クレジットカード、Apple Pay、Google Pay、コンビニ決済 |
※クレジットカード情報はSSLで暗号化され、決済システムサービスを提供するStripe社に直接送信されます。管理人が知ることはありませんのでご安心ください。 | |
返金・キャンセルについて | codoc株式会社利用規約 第10条(返金)に基づき、原則として購入いただいた記事のキャンセル、返金等を受けられないことを了承ください。 |
Comment コメントはこちらへ