ブログ・サイト

【WordPress】コクーンで人気記事一覧ページを作成する方法【超簡単】

ブログ・サイト
この記事は約3分で読めます。

とっちゃん@nyanco! です。

今回はワードプレスの無料多機能テーマ、Cocoon(コクーン)で「人気記事一覧アーカイブページ」を作成する方法のご紹介です。

WordPress、デフォルトでは人気記事一覧を出力する方法は用意されておらず、実現するにはfunction.phpに色々記述する必要があり、初心者にはなかなか敷居が高いカスタマイズになるんですが、なんとコクーンにはショートコードが用意されているのでめちゃくちゃ簡単にできちゃいます!

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

Cocoonで人気記事一覧ページを作成する

固定ページを新規作成

固定ページを新規作成し、適当なタイトルを入力(「人気のある記事」など)しておきます。

本文にショートコードを入力

あとは本文中の好きなところに下記のショートコードを入力するだけで、一覧が出力されます!

[popular_list]

めちゃくちゃ簡単ですね!

さらに、ショートコードに下記のように引数(オプション)を指定すると色々カスタマイズまでできちゃいます!

[popular_list days="30" rank="0" pv="0" count="50" type="default" cats="all" arrow="1"]

上記の例だと、それぞれ以下のような意味となります。

  • days=”30″:データ(アクセス数)を集計する期間を設定。”30″だと過去30日間からの集計となる。集計を全期間にしたい場合は”all”を指定する(デフォルトが全期間なので設定なしでもOK)。
    デフォルト値:”all”(全期間)
  • rank=”0″:ランキング番号を表示するかどうかを設定。表示したい場合は”1″を指定。
    デフォルト値:”0″(表示しない)
  • pv=”0″:PV(ページビュー)数を表示するかどうかを設定。表示したい場合は”1″を指定。
    デフォルト値:”0″(表示しない)
  • count=”50″:ランキング何位まで表示するかを設定。”50″だと「1~50位」までの表示となる。
    デフォルト値:”5″
  • type=”default”:一覧表示の見た目を予め用意されている5種類から指定。詳しくは公式ページへ
    デフォルト値:”default”
  • cats=”all”:一覧に表示させたいカテゴリをIDで指定。猫ではない。
    デフォルト値:”all”
  • arrow=”1″:一覧リストに矢印「>」を表示するかどうかを設定。表示したい場合は”1″を指定。
    デフォルト値:”0″(表示しない)

ちなみに、上記はあえてデフォルト値を明示的に設定しているので、もっとシンプルにオプション設定するとこうなります。

[popular_list days="30" count="50" arrow="1"]

他にもオプションがあるので、詳しくは下記公式ページまで!

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

CSSで微調整

上記設定で次のような表示になります。

500

が、赤枠部分の「更新日・公開日」の表示は記事一覧ページには不要ですよね。

このページだけ「更新日・公開日」を非表示にしたい場合、固定ページの「カスタムCSS」を利用すると簡単です。

上記の箇所に下記のCSSコードを入力します。

.read-time { display:none; }

すると、「更新日・公開日」が非表示なってスッキリしました!

URLスラッグを設定して公開

最後にURLとなるスラッグ(「popular-posts」など)を設定して、公開後、メニューなどからこのページに飛ぶリンクを貼ればOKです!

本記事がどなたかの参考になれば幸いです。

今回は以上となります。
最後まで読んでいただきましてありがとうございました!
それではまた〜✧٩(ˊωˋ*)و✧

コメント