wp_pp_ogp

みなさんこんにちは。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 をインストール

https://ja.wordpress.org/plugins/wordpress-popular-posts/

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

wp_pp_install

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

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

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

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

pp_widget_1

 

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

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

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

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

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

wp_pp_html_1

 

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分でサイトを立ち上げた話」です。お楽しみに。

Author Profile

石川栄和代表取締役
名古屋のウェブ制作会社数社に10年程度務めた後、株式会社ベクトル設立。
企画・運営・コンサルティング〜WordPressを中心としたシステム開発まで幅広く携わる。
[ 著書 ]
・いちばんやさいいWordPressの教本(共著)
・現場でかならず使われているWordPressデザインのメソッド(共著)
[ 最近のWordPressコミュニティでの活動 ]
2016 WordCampTokyo LT
2016 WordCampKansai ハンズオン世話役
2015 WordCampTokyo セッションスピーカー
2015 WordCampKansai セッションスピーカー
2014 WordFesNagoya 実行委員 & セッションスピーカー
2013 WordCampTokyo セッションスピーカー(パネラー)
2013 WordFesNagoya 実行委員 & セッションスピーカー
2013 WordCrabFukui セッションスピーカー

ビジネスにもブログにも。シンプルでカスタマイズしやすいWordPressテーマ

※このエリアは多機能プラグイン「VK All in One Expansion Unit」で一括挿入しています。投稿タイプ毎または記事毎に表示内容を変更する事も可能です。

Lightningは twitter Bootstrap ベースのシンプルでカスタマイズしやすいWordPressテーマです。
プラグイン VK All in One Expansion Unit とセットで使う事でビジネスサイトにもブログにも活用できます。