【 Cocoon 】ホーム画面をお手軽カスタマイズ!ポイント紹介

WordPress

みなさんこんにちわ、にゃーお。です。

先日ご紹介したWordPressテーマの「Cocoon(コクーン)」。
Cocoon機能とWordPress機能、HTML&CSSのみで特にプラグインを使わなくてもお手軽にカスタマイズできます!
今回は当ブログのカスタマイズ例をベースにデザインカスタムのポイントについてご紹介したいと思います^^

スポンサーリンク

最初に:今回やってみたかったこと



今回はタイトルの通り、ホーム画面の変更を考えたいと思います。
ずばり、「ホーム画面上に複数のカテゴリ枠を設けて、それぞれ異なる新着記事を順番に表示する!」です。

当ブログでは記事のジャンルが複数になってきたので、ホーム画面のグローバルメニュー(タイトルのとこのメニューです)で記事を探す事もできるのですが、やはりホーム画面からジャンル別に表示出来れば新着記事を探さずに済むので便利じゃないかと思いまして。前からやりたかったんです。

とりあえず絵に書くとこんな感じですかね。

これを順を追って作っていきたいと思います。

スポンサーリンク

カラムの作成



さてホーム画面のイメージも固まったところで骨組みを作っていくのですが、トップページに複数の新着記事を表示するにはどうすれば良いのでしょうか。

これは「カラム」を複数設置することで好きなコンテンツを複数表示できるようになります。
「カラム」とは文書における、ひとつの意味のある文章の固まりの事です。文章のレイアウトではブロックに分けて配置する事が多いです。今回の場合ではカテゴリ毎の新着記事リストが該当します。

WordPressの場合はゼロからコードを書かなくても楽に作れます!以下のどちらでも可能です。

方法1.固定ページでカラムを追加してホーム画面に表示設定する

方法2.ホーム画面にウィジェットを追加配置してカラムを表現する

どちらを選んでもレイアウトの配置方法をウィジェットで設定するか編集画面でコードで設定するかの違いですので特に問題無く作成可能です。今回は両方とも作成方法をご紹介します!

方法1.固定ページを作成してレイアウトしホーム画面に表示設定する



通常の記事と同じように「固定ページ」を作成する事で表示できるようになります。

「固定ページ」とは、通常の記事とは異なり、投稿といった概念がなく記事とは関係無く独立したページとして自由に作成できます。任意のデザイン、任意のコンテンツを記事とは関係無く作る事ができますので、特定の連絡先の記載やWebサイトのポリシーといった使い方が想定されていますが、カスタマイズ性が非常に高いのでこれに限らず好きに使用できます。

固定ページはWordPress管理画面より「固定ページ」->「新規作成」で作成できます。

こちらが編集画面です。通常の記事と同様に編集できます。

さて目的のカラムの設定ですが、Cocoonの場合、ビジュアルエディタ機能で超簡単!にカラム設定ができてしまいます。便利です~!

記事内を2カラム・3カラム・4カラムに分ける方法
投稿記事内に手軽に2カラム・3カラムレイアウトを挿入する方法です。ビジュアルエディターからクリック操作のみで入力可能です。

固定ページを自分で好きなレイアウトで作り、これをホーム画面表示に設定したい場合はこのビジュアルエディタ機能を使えると良いですね。

上記の公式サイトで詳細に解説されていますが、ここでも少しご紹介しますと、WordPress管理画面で編集したい記事を表示し(今回は仮でトップページ用の固定ページ作成を想定)、「ビジュアル」タブをクリックして編集画面にします。

「タグ」をクリックすると好きなカラム構成を選択できますので好きなレイアウトをクリックしましょう。

するとビジュアルエディタ上にカラム設定された状態で表示されます。

実際のブログ上での画面でもきちんとカラムを分けて表示されます。

後はWordPress管理画面上で「設定」->「表示設定」をクリックし「ホームページの表示」の箇所で「固定ページ」を選択します。そして先程作成した固定ページを選択すれば、今後ホーム画面にアクセスするたびに固定ページが表示されるようになります。

後はこのカラム内に新着記事を表示するようコードを記載すれば完成です。
新着記事の表示は本記事の後半で紹介します!

おまけ:コードでカラムを表現したい場合



上記のカラムの設定をコードで表現できます。

こんな感じ。


<div class="column-wrap column">
 <div class="column-left">
  <div class="topcat"><div class="top_h1">カラム右側 タイトル</div></div>
 カラム右側 記事内容
</div>
 <div class="column-right">
  <div class="topcat"><div class="top_h2">カラム左側タイトル</div></div>
 カラム左側 記事内容
</div>
</div>

カラム右側 タイトル

 カラム右側 記事内容

カラム左側タイトル

 カラム左側 記事内容

これをコピペすればどこでもカラム構成で表示できます。

方法2.ホーム画面にウィジェットを追加配置してカラムを表現する



続いて固定ページを作らないで表現する方法です。

やり方は超簡単!

WordPress管理画面上で「外観」->「ウィジェット」をクリックし「カスタムHTML」を選ぶだけ!

現状のホーム画面に「ウィジェット」を追加したい場合、「インデックスリスト(デフォルトの新着記事一覧)」に追加するようにします。
今回の場合はデフォルトの新着記事はちょっと残して表示させつつ、その下にカテゴリ毎の記事一覧を表示させたいので「インデックスリストボトム」を選びました。

「インデックスリストトップ」の場合はデフォルトの新着記事一覧の上部に、「インデックスリストミドル」であればデフォルト新着記事一覧の真ん中に割り込ませて表示できます。

するとウィジェット画面右側の「インデックスリストボトム」の欄に「カスタムHTML」が追加されていますので、この中にカラム分けするコードを書けば完成です!

※ちなみに、ウェジットの設定は固定ページでも追加可能です。

上記の方法1でもウェジットを任意に貼り付ける事で表現可能です。

スポンサーリンク

ジャンル毎の新着記事一覧表示



続いてジャンル毎に分けた新着記事一覧の表示設定です。これも簡単!

Cocoonテーマでは新着リストを表示させるショートコード機能が付いており、これを使わない手はありません。

新着記事一覧を表示するショートコードの利用方法
新着記事ウィジェットのようなリスト表示を実現できるショートコードの利用方法です。

以下のコードを固定ページ内の一番頭に書いておけばOKです。

[

[ new_list cats=xxxx count=xxxx children=1 ]

]

公式サイトで解説されていますが少しご紹介します。

・count:記事一覧の表示数。表示したい数を記入します。
・cats:カテゴリのID。表示したいカテゴリをピンポイントで指定できます。
・type:記事の表示形式。
 - default:通常のエントリーカード ※スニペッド表示無し
 - large_thumb:大きなサムネイル表示。記事タイトルはサムネイルの外に表示。
 - large_thumb_on:大きなサムネイル表示。記事タイトルはサムネイルの中に表示。
・children:子カテゴリを含める場合は”1″、そうでない場合は”0″。

上記のように自由に設定できるのでここでポイントになるのは「cats」!これで表示したいカテゴリだけ指定すればジャンルを絞る事ができます。

確認の仕方はちょっと面倒ですがWordPress管理画面上で「投稿」->「カテゴリ」をクリックし表示させたいカテゴリの編集画面を表示させます。

この時のURL表記に注目!「tag_ID」と表示されていますのでこの数字を記入してください。

ショートコードの例

[

[ new_list cats=3,10,14,22 count=4 children=1 ]

]

この場合、カテゴリID3,10,22に該当する記事を4記事まで一覧で表示します。

スポンサーリンク

完成形



今回は方法2の「ホーム画面にウィジェットを追加配置してカラムを表現」で作成してみました。
実際のトップ画面です。

ホーム画面で設定するか固定ページで設定するかですが、今回はホーム画面で設定しました。

というのも、ひとつ違いとしてインデックスリストのエントリーカード(スニペッド付き)をトップ画面で使いたい場合は、固定ページでは子テーマにphpコードを追加しない限り表示ができないようです。
今回はスニペッド付きの新着記事リストも表示させたかったので今回はホーム画面をそのまま使いつつウィジェットで設定する事にしました。

スポンサーリンク

さいごに



これでカラムを分けてトップページを表示できるようになりました!
今回はウィジェット+カラムコードで設定したので楽に作れました。更にCocoonの場合はショートコード機能が便利ですね、レイアウトのカスタマイズに興味ある方はぜひチャレンジしてみてください^^

コメント