WordPressで「人気記事ランキング」のプラグインと言えば、「WordPress Popular Posts」が有名だ。
通常はサイドバーに表示されるが、固定ページ（トップページ）に表示することは出来ないのだろうか？
プラグインを使って「人気記事ランキング」を固定ページに表示する方法がネットで公開されているが、プラグインを使わないで簡単に表示できる方法がある。
プラグインを使わないで「人気記事ランキング」を固定ページ（トップページ）に表示する方法。
「人気記事ランキング」を表示する理由
「人気記事ランキング」を表示する理由は、サイトの回遊率を上げる為と言うのが通説だ。
「関連記事」も同じ。
プラグインを使う方法
固定ページに「人気記事ランキング」を表示する方法をネットで検索すると出てくるのがウィジェットを固定ページに表示する方法だ。
そしてこれを実現する為にはプラグインを使う必要がある。
以下のプラグインがあった。
ウィジェットを固定ページに表示するプラグイン
●Page Builder by SiteOrigin
●Display Posts Shortcode
●Custom Content Shortcode
●Widgetize Pages Light
●Widgets On Pages
●Widget Shortcode
●Elementor Page Builder
いくつかインストールしてみたが、設定がややこしい。
「WordPress 5.3.2から利用可能」というものもある。
※「Widgets On Pages」はプラグインが見つからなかった。
その中で操作が簡単そうだったのが、「Widget Shortcode」。
「Widget Shortcode」
以下のコードをビジュアルエディタに貼り付けるというのだが、何故か、人気記事ランキングが表示しない。
<ul class=”wpp-list”>
<li style=”list-style-type: none;”>
<ul class=”wpp-list”>
<li>{thumb} {title} <span class=”wpp-meta post-stats”>{stats}</span></li>
</ul>
</li>
</ul>
そこで、プラグインを使わないで「人気記事ランキング」を固定ページ（トップページ）に表示する方法を探すことにした。
プラグインを使わない方法
プラグインを使わないで「人気記事ランキング」を固定ページに表示する方法は簡単だ。
以下のコードをテキスタエディタに貼り付けるだけ。
※最初と最後の［］は半角に変えて下さい。
値を変えるだけで細かい設定もできる。
コード
［wpp range=”weekly” thumbnail_width=”75″ thumbnail_height=”75″ order_by=”visitors” limit=”5″ post_type=”post” stats_views=”0″ title_length=”40″ excerpt_length=”45″ stats_comments=”0″ wpp_start=’
- ‘ wpp_end=”
” post_html=’
{thumb}
{text_title}
{summary}
‘］
コードの解説
●wpp range=”weekly”：ランキングの計測期間
“weekly”＝1週間、”monthly”＝1ヶ月、”all”＝全期間
※但し、「90日（90days）」等日数では設定できない。
●thumbnail_width=”75” thumbnail_height=”75″：サムネイルの画像サイズ
値を変えることでサムネイルの画像サイズを変更できる。
“75” を”60″ や”100″ といった具合。
幅（width）と高さ（height)は同じ値を設定するのが無難だ。
●limit=”5″：表示するランキングの数
●title_length=”40″：タイトルの文字数
●excerpt_length=”45″：説明文の文字数
CSS
上記は人気ランキングらしく、順位を数字で表示する為のコードだ。
見栄えを良くする為の以下のCSSを編集ページの下部にある「この投稿だけの個別css/JS記述欄」に以下のコードを貼る。
<style>
.wpp-list2{
margin: 0!important;
counter-reset: no;
}
.wpp-list2 li{
line-height:1.5em;
margin:0;
padding:0;
}
.wpp-list2 li:before{
content: counter(no);
counter-increment: no;
color: #fff; /*文字色*/
background-color: #84662A; /*背景色*/
text-align: center;
opacity: .999;
float: left;
line-height: 30px;
width: 30px;
height: 30px;
border-radius: 2px;
-moz-border-radius: 2px;
margin-right: -25px;
}
</style>
実際の表示
尚、上記のコードを実際に表示すると以下になる。
※今回のテーマは「固定ページ」に「人気記事ランキング」を表示することだが、投稿ページの任意の位置にも表示可能だ。
サムネイルが表示しない時は？
サムネイルが表示しない時は、「WordPress Popular Posts」の「ツール」画面で「Lazy Load」が「はい」になっていのが原因であることが大半。
「いいえ」に変更して「適用」をクリックすると、大抵は表示する。
