LightningやBizVektorで人気の投稿一覧をキレイに表示する

みなさんこんにちは。Lighting＆BizVektorコア開発者の石川です。

この記事は「WordPress Theme Lightning & BizVektor 他 Advent Calendar 2016」の5日目の投稿となります。

前回は立花さんが「はじまりは Lightning – Lightning & BizVektor アドベントカレンダー4日目」を書いていただきましたが、LightningやBizVektorは某他社の有料テーマと違ってちゃんと100%GPLを守っていますので、自由に使っていただいて結構ですよ！っと言うか逆に僕がとやかく言えないです。

さて、そんな前回の記事で僕のスケボーブログが紹介されてましたが、このブログでは人気の記事がサイドバーに表示されています。

で、これはプラグイン「WordPress Popular Posts」というプラグインを使っているのですが、こういった人気の記事表示機能は需要は非常に高いと思いつつ、何故ExUnitとかに実装していないかというと、この方式だと構造上処理が重くってサーバー負荷が高いんですよ。

でまぁ軽い方法と言えば「Simple GA Ranking」というプラグインがあるのですが、こちらはちょっと一般のユーザーさんには設定のハードルが高くって、本当はこちらを利用するのがおすすめなので、わかる方は下記に使い方がわかりやすくまとめてあったのでトライしていただければと思いますが、今回は「WordPress Popular Posts」での設定を紹介します。

【WordPress】サーバ負荷が軽い「Simple GA Ranking」プラグインで人気記事ランキングを表示する方法

WordPress Popular Posts をインストール

WordPress Popular Posts

WordPress Popular Posts は公式プラグインなので、管理画面の「プラグイン」→「新規追加」で、キーワード入力欄に「WordPress Popular Posts」と入力して検索すれば出てきますので、インストールして有効化します。

Popular Posts のウィジェットの基本的な設定

Popular Postsを有効化するとPopular Posts用のウィジェットが利用できるようになりますので、お好みの場所に配置してください。

※設定しても最初のデータが集計されるまで投稿リストは表示されません。

サムネイル画像も表示させたいので、Posts settings のチェックボックスの「Display post thimbnail」をチェックして一度保存してください。保存するとその下の項目が表示されますので、ラジオボタンの「Use predefined size」で thumbnail を選択します。

 

出力するHTMLをカスタマイズする

さて、このまま設置しても、Popular Postsから出力される記事リストにCSSがあたっていないので、デザインがイマイチかっこ悪い状態になってしまいます。

そこで、Lightning及びBizVektor用に出力するHTMLをカスタマイズします。

まずはWordPress Popular Postsのウィジェットの下の方にある HTML Markup settings で「Use custom HTML Markup」をチェックします。チェックして一度保存すると、その下にHTMLの入力欄が表示されます。

チェック以下のHTMLは適用しているWordPressのテーマによりますので、個別に記載します。

 

Lightningの場合

Before / after title:

<h1 class="widget-title subSection-title">

</h1>

Before / after Popular Posts:

<div>

</div>

Post HTML Markup:

<div class="media">
<div class="media-left postList_thumbnail">{thumb}</div>
<div class="media-body"><h4 class="media-heading">{title}</h4></div>
</div>

BizVektorの場合

Before / after title:

<h3 class="localHead">

</h3>

Before / after Popular Posts:

<div class="ttBoxSection">

</div>

Post HTML Markup:

<div class="ttBox">
<div class="ttBoxTxt ttBoxRight">{title}</div>
<div class="ttBoxThumb ttBoxLeft">{thumb}</div>
</div>

これで人気の記事が表示できます。

ただし、冒頭でも記載しましたがこのプラグンはサーバー負荷が高いので通常の安価なレンタルサーバーの場合、アクセスが多いサイトだとあまりお勧めしていません。サーバースペックにもよりけりなのでなんとも言えませんが、月間20万PVくらいのサイトで使うと、サーバー会社から「重いよ！」ってメールが来て一時的に止められるかもしれませんので ご注意を。

明日はCherry Pie Web 川井さんの「Lighning+EXUnitで30分でサイトを立ち上げた話」です。お楽しみに。

この記事を書いた人

石川栄和代表取締役

名古屋のウェブ制作会社数社に10年程度務めた後、株式会社ベクトル設立。
企画・運営・コンサルティング〜WordPressを中心としたシステム開発まで幅広く携わる。
[ 著書 ]
・いちばんやさしいWordPressの教本（共著）
・現場でかならず使われているWordPressデザインのメソッド（共著）
[ 最近のWordPressコミュニティでの活動 ]
WordCamp Tokoy 2023 セッションスピーカー
WordCamp Asia 2023 セッションスピーカー（LT）
WordCamp Niigata 2019 セッションスピーカー
WordCamp Haneda 2019 セッションスピーカー
WordCamp Osaka 2018 セッションスピーカー
WordCamp Kyoto 2017 セッションスピーカー
他

最近の投稿

• WordPress2024年12月1日ベクトル製品リリースタイムラインから見る開発の裏話と進化の歴史
• WordPress2024年10月30日ブロックテーマで編集権限のユーザーでもメニューを編集できるようにする
• WordPress2024年4月9日WordPress 6.5 で導入された新しい翻訳システムへの対応方法
• WordPress2024年3月16日WordCamp Asia 2024 振り返り