WordPressの使い方

Cocoonでホーム(トップ)ページに人気記事をタイル表示する方法

はじめに

ホーム(トップ)ページの初期状態は「新着記事」を新しい順番に表示します。
その設定を「人気記事」と「新着記事」の両方を表示するように変更しました。
ただ表示するだけならば、固定ページをホーム(トップ)ページに設定し、その固定ページにウィジェットで「人気記事」と「新着記事」を設定するだけです。
さらにタイル表示のように横並びにする場合はスタイルシートの設定が必要となります。
意外と色々と設定が必要だったので、手順をまとめました。

以下はこのページで説明する最終的なホーム(トップ)ページのイメージ画像です。
※実際は新着記事は横並びにしていません。また画面幅の狭いスマホでみると横並びにならないようにしています。

5100-1.最終イメージ

テーマの設定

Cocoon Child をインストールしています。

5001-1.テーマの設定

Cocooのスキンの設定

①[Cocoon設定]→②[スキン]タブ
スキン一覧で③[Child]スキンテンプレート を選択

5002-1.Cocoonスキン設定

ホーム(トップ)ページ用の投稿を追加する

ホーム(トップ)ページをカスタマイズするために、ホーム(トップ)ページ用の投稿が必要です。
ここでは「固定ページ」で作成します。通常の投稿でもできます。

①[固定ページ]→②[新規追加]をクリック

5101-1.固定ページ追加

①[タイトルを追加]→タイトルを入力
②[URLスラッグ]→任意で入力。数字のままでもOKです。
③[公開]をクリック

5101-2.固定ページ追加
入力例

①[タイトルを追加]→トップページ
②[URLスラッグ]→index
③[公開]をクリック

5101-3.固定ページ追加

①[公開]をクリック

5101-4.固定ページ追加

ホームページの表示を設定

①[設定]タブを選択
②[ホームページの表示]で[固定ページ]を選択
③[ホームページ]に追加しておいたホーム(トップ)ページ用の投稿を選択
④[変更を保存]をクリック

5102-1.固定ページ設定

ウィジェットの設定

追加したページに「ウィジェット」を配置して、カスタマイズします。

[c]人気記事を追加

①[ウィジェット]タブを選択
②[利用できるウィジェット]で[人気記事]を選択

5103-1.ウィジェット設定

①「[c]人気記事」の[▲]をクリックするとリストが表示されます。
※「人気記事」ではないことに注意してください。
②リストから[固定ページ本文上]を選択
③[ウィジェットを追加]をクリック

5103-2.ウィジェット設定

[c]新着記事を追加

①「[c]新着記事」の[▲]をクリックするとリストが表示されます。
※「新着記事」ではないことに注意してください。
②リストから[固定ページ本文上]を選択
③[ウィジェットを追加]をクリック

5103-3.ウィジェット設定

ウィジェットの追加確認

右側で[固定ページ本文上]の[▼]をクリックすると、設定されているウィジェットが表示されます。
①[c]人気記事、②[c]新着記事が追加されていればOKです。

5103-4.ウィジェット設定

[c]人気記事の設定

[c]人気記事の[▼]をクリックして、設定項目を開きます。

[表示モード]、[人気記事のタイトル]、[表示数]は任意のものを設定します。
①[表示タイプ]→大きなサムネイル を選択します。
または、タイトルを重ねた大きなサムネイル でもOKです。

5104-1.人気記事ウィジェット

①[表示設定]をクリックして設定項目を開きます。
②[ウィジェットの表示]のメニューで[チェック・入力したページで表示]を選択
③[ページ]タブで、④[トップページのみ]をチェックします。
⑤[保存]をクリック

5104-2.人気記事ウィジェット

または
①[ウィジェットの表示]のメニューで[チェック・入力したページで表示]を選択
②[固定ページ]タブで、③[固定ページID入力]に追加したページのIDを入力します。
④[保存]をクリック

5104-3.人気記事ウィジェット

①「保存しました」と表示されたら、②[完了]をクリック

5104-4.人気記事ウィジェット

[c]新着記事の設定

[c]新着記事の[▼]をクリックして、設定項目を開きます。

[表示モード]、[新着記事のタイトル]、[表示数]は任意のものを設定します。
①[表示タイプ]→タイトルを重ねた大きなサムネイル を選択
または、大きなサムネイル でもOKです。
②[表示設定]をクリック

5104-5.新着記事ウィジェット

表示設定の設定項目が表示されるので、以下を設定します。
①[ウィジェットの表示]のメニューで[チェック・入力したページで表示]を選択
③[ページ]タブで、④[トップページのみ]をチェックします。
⑤[保存]をクリック

5104-6.新着記事ウィジェット

または
①[ウィジェットの表示]のメニューで[チェック・入力したページで表示]を選択
②[固定ページ]タブで、③[固定ページID入力]に追加したページのIDを入力
④[保存]をクリック

5104-6.新着記事ウィジェット

①「保存しました」と表示されたら、②[完了]をクリックします。

5104-7.新着記事ウィジェット

ホーム(トップ)ページの表示確認

トップページを開いて、ウィジェットの表示を確認します。
まだこの段階ではタイル表示ではありません。

5105-1.トップページ確認

[人気記事]が配置されています。
下へスクロールすると、[新着記事]も配置されています。

5105-2.トップページ確認

投稿のサムネイルを横並びにする

ソースコードでCSS(スタイルシート)を調べる

ホームページを表示します。
キーボードで[F12]を押下します。
右側にHTMLが表示されます。
①のボタンをしてクリックして、人気記事が表示されている当たり(②)をクリックします。

5106-1.人気記事

id と class を確認します。

5106-2.人気記事

新着記事も同じように id と class を確認します。

5107-2.新着記事

ホームページの編集画面にCSSを追加

CSSを入力する場所

ホームページ用の固定ページの編集画面を開きます。
下へスクロールして、[カスタムCSS]を表示します。

5108-1.カスタムCSSに入力

[カスタムCSS]の①[▼]をクリック

5108-2.カスタムCSSに入力

[カスタムCSS]に入力して[更新]をクリック
ソースコードで調べておいた id 、class を参考にCSSを作成します。
入力内容は次の項で作成します。

[人気記事]のCSSを設定

[人気記事]を横並びにするCSS

#popular_entries-3 .popular-entry-cards  {
  display: flex;
  flex-wrap: wrap;
}

[人気記事]のサムネイルの横幅を設定するCSS

#popular_entries-3 .popular-entry-cards a  {
    width: 32%;
    display: inline-block;
}

スマホなど画面サイズが小さい場合は横並びにしない

@media screen and (min-width: 480px){
#popular_entries-3 .popular-entry-cards a  {
    width: 32%;
    display: inline-block;
  }
}

@media screen and (max-width: 479px) {
#popular_entries-3 .popular-entry-cards a  {
    width: 100%;
    display: inline-block;
  }
}

[新着記事]のCSSを設定

[新着記事]を横並びにするCSS

#new_entries-4 .new-entry-cards  {
  display: flex;
  flex-wrap: wrap;
}

[新着記事]のサムネイルの横幅を設定するCSS

#new_entries-4 .new-entry-cards a  {
  width: 32%;
  display: inline-block;
}

スマホなど画面サイズが小さい場合は横並びにしない

@media screen and (min-width: 480px){
#new_entries-4 .new-entry-cards a  {
    width: 32%;
    display: inline-block;
  }
}

@media screen and (max-width: 479px) {
#new_entries-4 .new-entry-cards a  {
    width: 100%;
    display: inline-block;
  }
}

[人気記事]と[新着記事]の両方を設定

CSSはまとめて記述できます。

[人気記事]と[新着記事]の両方を横並びにして、画面サイズが小さい場合は横並びにしない。

.widget-page-content-top-title{
  font-size: 120%;
  font-weight: bold;
  line-height: 120%;
}

#popular_entries-3 .popular-entry-cards ,
#new_entries-4 .new-entry-cards {
  display: flex;
  flex-wrap: wrap;
}

@media screen and (min-width: 480px) {
#popular_entries-3 .popular-entry-cards a ,
#new_entries-4 .new-entry-cards a  {
    width: 32%;
    display: inline-block;
  }
}

@media screen and (max-width: 479px) {
#popular_entries-3 .popular-entry-cards a ,
#new_entries-4 .new-entry-cards a  {
    width: 100%;
    display: inline-block;
  }
}

ホームページの表示確認

PCで見たとき
サムネイルは横並びで表示されます。

5109-1.表示確認PC

下へスクロール

5109-2.表示確認PC

ウィンドウ幅が480pxの場合
キーボードの[F12]でDevToolsを表示
①のアイコンをクリック
②のウィンドウ幅に480を入力
サムネイルは横並びで表示されます。

5109-3.表示確認480

ウィンドウ幅が479pxの場合
キーボードの[F12]でDevToolsを表示
①のアイコンをクリック
②のウィンドウ幅に480を入力
サムネイルは横並びで表示されません。

5109-4.表示確認479以下

下にスクロールして新着記事を表示します。

5109-5.表示確認479以下

さいごに

ひとつ問題というか、あったらいいなと思ったものは、もっとみるリンク
この設定だと事前に決めた個数しか表示できません。
例えば、表示する記事数を3にすると、4番目以降は不明です。
特に新着記事は過去にさかのぼってみることができないのでもったいないですね。
まだ気がついていないだけで、そういう設定があるのかな（？）

-WordPressの使い方