人気記事ランキングをサイドバーにプラグインで表示

投稿日:2018年10月29日

前回の記事で「ブログカスタマイズはほぼ終わったー」みたいなこと言った気もしますが、やはりと言いますか、案の定ブログ本公開に向けてまだやらねばならぬカスタマイズ作業が残っていたので、今度こそこの記事を最後のブログカスタマイズ記事とするべく、今日も今日とで WordPress と格闘していくとしましょう。

 

この『ガンプラ気分(仮)』は、前回の発言に偽り無く、ブログを運営していく上で必要最低限のカスタマイズは終わっているのですよ。

そこで前回の記事執筆後に行なっていたのは、主に「あったら便利な機能」の追加です。
具体的に言うと、「新着記事」・「関連記事」・「人気記事」の3項目です。

これらの機能は、訪問者に対し巡回を促す目的で設置されるもので、ほとんどのサイトで用意されていると思います。

今までこのサイトは特に見てほしいような記事もなかったため、文字リンクのみの新着記事一覧をサイドバーに管理用として置いておいてただけでした。
 

それら‘ちょっとした’カスタマイズをまとめて最後のカスタマイズ記事として投稿する予定だったのですが、その内の「人気記事」の導入にかなり手間取ったので、備忘録も兼ねて別個記事として上げることにした次第であります。

 

『AFFINGER4』の機能で人気記事ランキングを表示

私がこのサイトを作るのに使用しているのは、WordPressテーマ『AFFINGER4』です。
有料テーマというだけあって、かなり細かいところにまで手が回ります。 なので、この AFFINGER4 にデフォルトで備わっている機能だけでも、人気記事ランキングくらい作れるんじゃないかと考えました。

結論を先に言いますと、AFFINGER4 の機能で人気記事ランキングを作ることはできませんでした
 

以下に私が試した機能を列挙します。

AFFINGER4管理「関連記事一覧」

投稿記事下に、設定しておいたカテゴリーの中からランダムで記事を表示させる機能。 言葉通り「関連記事」を表示させるものですね。

これをサイドバーに表示させられれば、とりあえずそれっぽく見えるんじゃないかと思いましたが、表示箇所は選べませんでした。
 

AFFINGER4管理「おすすめ記事一覧」

設定項目にサイドバーがあったので期待しましたが、設置できるのはサイドバーのスクロールエリアのみのようです。

また、設定に「人気記事」と書かれているにも関わらず、表示できるのは自分で指定した記事のみ
どうやらこれは自分が見せたい(見てほしい)記事を並べる機能だったみたいです。
 

「STINGER記事別ボックス」ウィジェット
「STINGERカテゴリ別ボックス」ウィジェット

私はてっきり、「指定した記事(カテゴリー)表示するウィジェット」なのかと思いましたが、
これは「指定した記事(カテゴリー)表示するウィジェット」だそうです。

私が表示したい人気記事ランキングは特定カテゴリーのみからのランキングなので、とりあえずで設置しておく分としてこの機能には期待していたのですが、思ってたのと全然違いました。

 

WordPressプラグインで人気記事ランキングを表示

『AFFINGER4』の機能では人気記事ランキングは作れなかったので、ここは無難にプラグインに頼るとしましょう。 私にとってはいつもの光景ですね。
 

見てもらいたい記事――つまりこのサイトにおけるガンプラの記事を全然投稿していない仮運営中の現『ガンプラ気分(仮)』としては、今ランキングなんて導入したところで何の意味も無いんですよね……

将来的には人気記事ランキングを導入することは決めてますが、ランキングに載せる記事すら無い現段階では、‘とりあえず’で特定カテゴリー(ガンプラ記事)のものを順位関係無くただ並べておけばいいかな~、なんて考えてました。

私はランキングは上位5位までを表示しようと思っていますので、最低5つのガンプラレビューをしてから、ということになりますね。
 

ところがぎっちょん、サイドバーに特定カテゴリーをランダム表示させるのなんてすぐできるだろうと思ってたのですが、有料テーマ(AFFINGER4)の力を以ってしてもそれはかないませんでした。

そこで予定を前倒しする形で、人気記事ランキング表示プラグインの導入に踏み切ることにしました。
 

私が人気記事ランキングに求める機能なんですが、

サイドバーに配置
サムネイル画像を表示
特定カテゴリーのみのランキング
順位(「1」~「5」)を表記

ここまでは最低限実装したいですね。

 

ちょっと駄文が続いてしまいましたが、人気記事ランキング表示プラグインの選定に入りましょう。

「WordPress Popular Posts」

まぁ、人気記事表示において「言わずと知れた」プラグイン。 おそらく WordPress製サイトに表示されている人気記事ランキングの大半に使われているんじゃないでしょうか。

簡単かつ高機能ということで、特別な理由が無い限りはこれにしとけば間違いないかと。

利用者が多いということは、カスタマイズ記事も豊富ということですからね。
私が望む順位の表記」はおそらくCSSカスタマイズになると思うので、この情報量の多さというのも強みですね。

一方で、「重い」という意見も多く聞きます。 ‘WordPress Popular Posts’で検索かけると検索候補に出てくるくらいですからね。

ただこれはサイトのアクセス数に比例して重くなるという、アクセス集計の仕様みたいなもののようですが、設定次第である程度は緩和できるらしいです。
 

「Simple GA Ranking」

‘WordPress Popular Posts’+‘重い’ で検索かけると代替品みたいな感じで紹介されることの多いプラグインです。

名前の「GA」はこれもまた言わずと知れた、「Google Analytics」の略だと思います。 …たぶん。

「WordPress Popular Posts」のデメリットとされた、‘アクセス集計による重さ’を「Google Analytics」の集計データを利用することで激減させているそうです。

ここまでなら良いことずくめなのですが、設定の際に「Google Analytics」との関連付けを行なわなければならず、これが面倒なようです。

また、私の希望でもあったサムネイル表示」に対応しておらず、自分でカスタマイズせねばなりません。
 

「WP-PostViews」

このプラグインは WordPress管理画面に記事の閲覧数(view数)を表示させるものなのですが、カスタマイズにより人気記事ランキングとして表示させることも可能だそうです。

しかし、サムネイルが表示されず記事の集計期間が累計(全期間)のみとの事なので、ランキング表示としての用途には向いてないっぽい。

累計ランキング表示にしてしまうと、先に投稿された記事の方が当然集計期間が長いので、ランキングの変動が滅多に起こらなくなってしまうのですよね。
私は最低でも月に1度はランキングを更新したい。 つまり月間ランキングが作りたいのです。
 

「Jetpack」

当サイトでは何度もその名が登場しましたお馴染み多機能プラグイン。
この機能の中に人気記事ランキングを表示するものがあるそうなのです。 ……はて?私は「Jetpack」をそこそこ使ってきましたが、そんな機能あったかね?

この機能を利用するには、簡易アクセス解析機能である[サイト統計情報]と、[追加サイドバーウィジェット]の両方を有効化する必要があるとのこと。 なんか裏技みたいですね(;^ω^)

これで「人気の投稿とページ(Jetpack)」ウィジェットが使えるようになります。

しかしこの機能での人気記事ランキングには、特定カテゴリーのみのランキング」が作れずサムネイル画像もえらく小っちゃいです。
 

「Popular Posts by Webline」

最後の候補はコチラ、「Popular Posts by Webline」。 おそらく誰もが知らないであろうインド製プラグイン。

プラグイン名で検索かけても、日本語サイトは2件しかヒットしません∑(´Д` )

ですが人気記事ランキング表示機能は優秀で、サムネイル画像のサイズ調整、コメント数の表示、そして「特定カテゴリーのみの表示」にも対応していたりと、他にも設定可能項目は多岐に渡ります

個人的には「WordPress Popular Posts」と最後までこの二択で悩むほど魅力的だったのですが、私が欲しい機能である「順位の表記」をCSSカスタマイズする際、情報量の少なさの点において圧倒的不利だったため、見送ることになりました。

もし今後このプラグインの利用者が増えて、カスタマイズ法なんかの情報が出回るようになったら、真面目に再検討していきたいと思ってます。

 

プラグイン「WordPress Popular Posts」

これら5つのプラグイン候補、そしてプラグイン無しで人気記事ランキングを導入する方法なんて物も検討したんですが、結局は無難に「WordPress Popular Posts」に決めました。

私が作りたい人気記事ランキングに必要そうな機能を大体兼ね備えていたという点、利用者が多くカスタマイズ情報が手に入りやすいという点が決め手となりました。

デメリットとして挙げられる「重さ」なんですが、前述の通りサイトのアクセスが多いことによって発生するものらしいので、鼻クソ程度のアクセス数のウチでは度外視していいだろうとの判断です。

 

そんで「WordPress Popular Posts」を実際にインストールして使ってみたのですが……

結果としては大変満足のいく物でした。 結果としては

なんというか……仕様なのか環境に依る相性なのか、独特と表現せざるを得ない様な箇所が多々ありまして。
その私がつまづいた箇所を中心に記していきます。
 

WordPress Popular Posts の主たる設定画面の【ツール】タブ内[データ]の各項目についてなんですが……

こいつは見てもらった方が早いので、以下がデフォルト状態の設定画面

WordPress-Popular-posts

この WordPress Popular Posts を設定する上で、いつも通りプラグインの解説サイトを参考にさせてもらっているのですが、バージョンによって初期値や設定項目が違っていたり、古い物に至っては英語表記だったりするようですね。
 

そして以下がいろんな参考サイトを見て私が最適だと判断してカスタマイズした設定画面

WordPress-Popular-posts

一つずつ見ていきましょうかね。

「閲覧を記録する対象者」
デフォルトではなぜか「全員」となっているのですが、これでは自分のアクセス数もカウントしてしまうので、「訪問者のみ」に変更。

「ログ上限」
デフォルトでは「無効」となっていますが、これだと無限にデータが蓄積されていってしまうので、「データ保存期間」を設定。 日数は自分が計測したい期間以上で。 月間ランキングなら30日以上にしておかないと計測完了前にデータが消えていってしまいます。

「ウィジェットを AJAX 化」
AJAXってのが何なのか私にゃ分かりませんが、とりあえずキャッシュ系プラグインを使用している場合は「有効」にしとけとありますね。
私が使用している「WP Fastest Cache」の場合でもここは「有効」にせよと参考サイトでも言っていたので、その通りに。

……が、私の環境下ではエラーが出ました。
なんか「テーマでサポートされてない」的な文章が記事ランキングに代わって表示されてました。
仕方ないので、ここは「無効」のままで。

「データキャッシュ」
バージョンによって表記がちょくちょく変わってるところ。
ここをデフォルトどおり「キャッシュする」に設定すると、以下の項目が出現。

「キャッシュ更新間隔」
上記と合わせてここで設定した間隔で人気記事ランキングの表示が更新されるようになります。
これは完全に個人の好みですね。 私の場合はデフォルトの「1分」から「1日」へ。

ここで注意点。 この「キャッシュ更新間隔」の設定だけは、なぜかこの画面での設定後にウィジェットを更新しないとサイト表示上の人気記事ランキングに反映されませんでした。 私の場合。

また、この時のウィジェットを更新した時間が、人気記事ランキングが更新される時間として設定されるようです。 0時更新とかではありませんでした。

上記設定項目の「データキャッシュ」を「キャッシュしない」に設定すると、人気記事ランキングは即時反映となります。

「データサンプリング」
どういう仕組みかはよく分かりませんが、ここを「有効」にすると WordPress Popular Posts が一気に軽くなるんだそうです。
が、設定画面に書かれているように、小・中規模サイトでは特に意味なさそうな感じだったんで、極小規模サイトの私はとりあえず「無効」のままで。
 

設定画面の項目についてもう1つ。

ページ一番下の「キャッシュを空にする」を押すと、今までの閲覧数データが全て(1ヶ月以内まで?)削除されます。 これにより【統計情報】タブ内の閲覧数は空っぽになる訳ですが、「履歴データ」と呼ばれる、おそらく内部データは残っているらしく、統計情報では0ビューとなっていますが、サイト表示上の人気記事ランキングは(全期間を計測対象としている場合は)これまで通り表示されていました。 ぶっちゃけよく分かりません。

「WP Fastest Cache」の[Clear Cache]ボタンみたいな感覚で軽ーく押したら、統計情報画面のビュー数とサイトに表示されるランキングの数が合わなくなってしまったので、とりあえずここは押さない方が良い、とだけ言っておきます。

もしも内部データ(多分)である「履歴データ」も削除したくなった場合は、その下の「すべてのデータを削除」ボタンを押せば良いんだと思います。 多分。

 

WordPress Popular Posts の設定は、この設定画面の他に、ウィジェットの設定も合わせて行なわなければなりません。
次はこのウィジェットの設定に関しての注意点をば。

注意すべき点は1つ。 「HTML マークアップ設定」の項目です。
何に使うのかサッパリ分からん機能ですが、試しに使ってみたら面倒くさいことになったので(-_-;)

「カスタム HTML マークアップを使う」にチェックを入れて一度「保存」を押すと、なんか訳分からんコードみたいのが書き込まれるのですが、こうなってしまうと、このウィジェットは更新も削除もできなくなりました。 超焦りました。

何かいじろうとしても、読み込み中に出るあのぐるぐる回る丸いヤツ、あれが延々と消えずに回り続ける羽目になってしまいます。

この時は対処法が分からず、ドラッグでウィジェットごと下部の「使用停止中のウィジェット」まで持って行って外し、また新たに「WordPress Popular Posts」ウィジェットを設定し直すという手間を取らされていました。

後に分かった事ですが、「カスタム HTML マークアップを使う」のチェック下に現れたコードみたいのを全て削除して空欄にすることで、ウィジェットの更新・削除が再び行なえるようになりました。

ネットで探してみると、どうやら同じような症状になった人は他にもいるようです。

この「HTML マークアップ設定」は、私が次にやろうとしているCSSカスタマイズによるデザイン変更の際、人によってはこの項目をいじるやり方もあったようなんですが、私の環境下ではどうやら使用不可っぽいんで、それ以外のやり方に限定されることになりそうです。
 

ちょいっちょいつまづきましたが、どうにか設定が完了しました。

以下が、WordPress Popular Posts 内の設定だけをいじった現時点のサイドバー人気記事ランキングの表示。

WordPress Popular Posts

下半分が WordPress Popular Posts の人気記事ランキングで、上半分は AFFINGER4 の機能で作った新着記事一覧です。

どちらもサイドバーに配置する予定ですので、デザインをなるべく合わせていきたいですね。 前回の「Pz-LinkCard」プラグインでもこんなことやったなぁ。

ウィジェットの設定にてサムネイルのサイズだけはカスタマイズできたので、そこだけはこの時点で合わせています。
手動で調整しなくても、STINGER(AFFINGER)用のサイズが既に用意されていたので簡単でした。

 

お次はいよいよCSSでのカスタマイズ。 ……といっても私には自力でコード書いたりはできんので、参考サイト様からコピペするだけですけどね(^^;

デザインの完成予想図としては、先ほどのスクショの上半分に載せた STINGER系のデザインと合わせるようにしたい。

具体的に言うと、

記事と記事の間に余白
記事間の余白に区切り線
記事タイトルの下線を削除
記事タイトルの文字色を黒に
記事タイトルを太字に
文字サイズを大きく(できれば)

ランキング順位を表記

数にすると結構あるように感じますが、ネットで調べたところ、「STINGER風デザイン」みたいに最初から統一されたデザインのカスタマイズ法が出回っていたので、一番自分好みのデザインを選んで真似する形に落ち着きそうです。

順位表記に関してはプラグイン選定のときから言っていましたね。 プラグインのデフォ機能として備わってれば楽だったのですが。
 

では早速CSSカスタマイズといきたいところなんですが、残念ながら今の私の知識ではどこでCSSを書き換えればいいのかすら分かりません(´゚Д゚`)ポカーン

「プラグイン」>「プラグイン編集」でインストール済みの各プラグインのコードが参照できるのは知っているのですが、ここって親テーマなんですよね。
親テーマをいじってもプラグインにアップデートがあったら、せっかくカスタマイズしたコードも上書きされて消えてしまうはず。

実際、WordPress Popular Posts のCSSカスタマイズを調べていた際、「プラグイン編集」からカスタマイズする方法を載せていたサイトは、自身のサイトの人気記事ランキングのデザインはデフォルトのままとなっていました。
おそらくプラグインアップデートで戻されてしまったのでしょう。

というわけで何とか子テーマを利用するカスタマイズ法が知りたかったんですが、どうやら普通にテーマファイルの「style.css」への書き込みで良かったみたいですね。
今までテーマファイルは何度もいじってきましたが、プラグインをいじるのは初めてだったので、何か違った手順が必要なんじゃないかと思い込んでいました(*^_^*)
 

ほんじゃFTPから子テーマの「style.css」を開きカスタマイズ準備完了。 あとは良さげなコードを見繕うだけ。

膨大なカスタマイズ記事の中から、まずは子テーマへの編集を推奨している人で、実際にそのサイトの人気記事ランキングが WordPress Popular Posts製で私のサイトのデザインに合いそうな物から適当にチョイス。 ついでに順位表記のカスタマイズも一緒にやってくれてるトコだとなお良いですね。

んで、条件に合った物をコピペして試してみたんですが、ちょっと私の思ってた挙動と違っていました。
画像・テキスト部分が一括でマウスオーバーできるようなこじゃれた感じの機能を持たせてありました。

勿論これはこれで良いとは思うのですが、STINGER系の挙動とは異なっていますし、何よりこのタイプって「見えないボタン」を押させられているような?感じで好きじゃないんですよ。
テキスト末尾の空欄とかも押せるようになっているのがちょっとね……
誤クリック狙いみたいでセコい印象があります。(あくまで個人の感想です)
 

見た目はピッタリだったんですが、コードの読めない私にはマウスオーバー時の挙動までは分からなかったため、「思ってたのと違う」状態だった先ほどのコードの失敗を踏まえ、今度は最初から STINGER使いの人がデザインした物を使用させてもらうことにしました。

編集箇所が親テーマだったり、順位表記のカスタマイズまではされていなかったりと、こちらの要望を100%満たしているという訳ではありませんでしたが、順位表記には先ほどのコードから部分的にコピペってくれば大丈夫かなと。

んで、使用させてもらったんですが、なんだか参考サイトの完成品とは微妙ーに出来が違っています。
記事と記事の間隔が狭すぎます。 間に区切り線は入ってはいるものの、ギッチギチな感じです。

試しにコード内の‘padding’の部分を大きくとってみたんですが、変化無し。
……どうやら一部分のCSSだけ反映されてないっぽい…??
 

こっからはトライ&エラーの繰り返しでした。
‘padding’やら‘margin’やらの余白を作るコード(?)を多用していた1つ前の参考サイトのコードに戻し、どの部分のCSSが効かないのかをまずは探り当てることにしました。 ……なーんかCSSを初めていじった時のことを思い出すなぁw

これにより判ったのは、記事間の区切り線と記事タイトルまでの間の調整が効かないという事です。
サムネイル画像周りの余白は取れるので、区切り線と画像までの間には余白が作れるようです。 ……??

ただし、最初の参考サイトのコードでは記事タイトルまでの余白を取ることができていました。
私はこのコードでの、画像・テキスト部分の一括クリック機能を「見えないボタン」と称しましたが、これは‘display: block’とかいうコードで「ブロック形式」で一括りにしていたみたいです。

試しにこれを取っ払ってみたところ、やっぱり画像までの余白は取れるも、タイトルまでの余白は反映されませんでした。
「ブロック形式」で記事タイトルも画像と同じパーツ扱いにして余白を適用させていたんですね。 よく分からんけど凄え。
 

いろいろとCSSについて調べたりもしたんですが、付け焼刃の独学じゃーどうなるモンでも無かったので、今までとは違った書き方のコードで余白を設定している人を探してみることにしました。

長丁場を予想していたのですが、意外とアッサリ見つかりました。
そしてそのコードも素人の私が見ても分かるほどに今までのとは違っていました。

!important ’ ……っ!!

CSSいじりたての頃「CSS 反映されない」で検索し、その解として挙げられていたアレです。 いつぶりだろう、 !important さんを見かけるのは。

驚きと感謝と感動で視界が歪みますが、こちらのコードをコピペしてみたところ、無事余白が適用されていました。 !important さん……!!

こちらの参考サイト様も STINGER使いという事で、デザインは合わせてあったのですが、私は記事タイトルの文字サイズを大きくしたかったので、‘font-size’を書き加えて調整しました。 こんくらいなら私でもできる。 ギリ。
 

STINGER用に合わせてあったデザインを使用させてもらったので、デザイン面での私の要望は一気に叶いました。
残るは、「ランキング順位の表記」だけです。

前述の通り、これには最初の参考サイト様より該当部分のコードだけを使用させてもらいました。

さっきCSSのお勉強をちょっとだけした際、「‘relative’ と ‘absolute’はセットで使う」みたいなことが書いてあったので、この辺もつまづくこと無く設定できました。

あとは位置・形・大きさ・色・透明度などを自分好みに細かく調整し……

完成!!!

WordPress-Popular-posts

例によって下半分が WordPress Popular Posts をCSSカスタマイズして作り上げた人気記事ランキングで、上半分がそのデザインの規範とした AFFINGER4 の機能で作った新着記事一覧。

投稿日時の表記がありませんが、 WordPress Popular Posts のウィジェットで表示させたものは「○○年○月○日に投稿された」という文が末尾に追加されるだけなので、デザイン的にも機能的にもパッとしないので取り除きました。

欲を言えばサムネイル画像に枠線を付けたかったですねー。
上記を見た通り、白背景のサムネだと背景色の白と同化してしまい、どこまでがクリック領域なのかが判別できなくなってしまっています。

順位表記の数字が微妙~~に左に寄ってるのも気に入らなかったんですが、色々やったけど直せなかったのでココは妥協しました。

あと、記事間の区切り線が上記スクショだとほとんど見えませんが、これは私が画像を圧縮しすぎたってだけなので(笑)
完成品は実際にこのサイトのサイドバーをご覧下さい。 たぶん上手くできてるはずです。 たぶん。
 

参考サイトのカスタマイズにはまだ続きがあって、順位表記のトップ3を、金・銀・銅に色分けするやり方も書かれていました。

実はこれもやってみたんですが、私はこのサイトに「テーマカラー」を設定していまして(現在は青)、今後これを変えていこうかなと考えていますので、色を固定されてしまうのは都合が悪いんですよね。 テーマカラーが黄色の時の金色順位とか。

一応、背景色ではなく文字色で色分けしてみようかなとも思い、やってみたんですが、半透明にしているせいなのか、ぜんぜん金・銀・銅に見えなかったのでやめました。

 

このCSSカスタマイズした人気記事ランキングなんですが、通常のPCウィンドウからならちゃんと表示されていたのですが、スマホウィンドウサイズっくらいにまで幅を狭めてみると、カスタマイズ前のデフォルトのデザインに戻ってしまいました

私はよくブログカスタマイズ後のスマホからの実機確認が面倒で、PCウィンドウサイズを縮めてその代わりにしていたんですが、たまにこんな風にCSSが効かない時があるんですよね。
ただ今回の場合は WordPress Popular Posts で設定した部分だけだったので、原因は別な気がします。

実は以前にも同じような事があって、その時は書き加えたCSSの挿入位置を変えたら上手くいったんですよ。

なので、今回もそうなんじゃないかと思って、一番下に書き加えていた人気記事ランキング用のコードを、上段のコードの上に持っていってみました。
すると、無事ランキングにカスタマイズ後のデザインが反映されるようになりました!
 

しかし、念のためスマホからの実機確認を行なったところ、デフォルトデザインに戻っていました。

そこでCSSのコードをもう一段上に持っていくと、CSSデザインが反映されるようになりました。

その後タブレットを使う機会があり、念には念をとコチラからも実機確認すると、またまたデフォルトのデザインに戻ってました。

懲りずにCSSをいじってさらにもう一段コードを上げると、CSSが反映されました。

……なんだこのコントみたいな流れ。

結局その後今回のコードは一番上にまで持ってっときました
それから WordPress Popular Posts のCSSが反映されてないという事態は(今のところ)起こってません。

 

これでCSSが反映されないという問題は解決された訳なんですが、また新たな問題が。
今度はデバイスによって、人気記事ランキングの更新が反映されないことがありました。

私は、「キャッシュ更新間隔」を「1日」に設定したので、24時間経てば人気記事ランキングが更新されるはずなんですが、表示上に変化がありません。

そのままランキングを置いておいても、そうそう順位に変動があるはずもないので、今は分かりやすくビュー数を表示しています。
ビュー数の表示なんて余程の人気サイトでも無いかぎり、表示しておくのは逆効果な気しかしないので、あくまで一時的に、ですね。
 

さて、この問題の原因は明らかですね。 そう、キャッシュです。

古いキャッシュが表示されているであろうことは明白だったので、ここで前述しました「キャッシュを空にする」ボタンを押した結果、ページビューの計測数とランキング上のビュー数がずれるという事態を引き起こしてしまった訳です。

キャッシュの不具合への対処法なんて、私にはもうキャッシュプラグイン「WP Fastest Cache」の[Clear Cache]ボタンを押すぐらいしか手が無かったんですが、コレやってみたら直りました(´m`)
 

もしかしてこれが設定画面にあった「ウィジェットを AJAX 化」を「有効」にしとけと言われていた理由だったんですかね?

しかしこれも前述したように、私の環境ではエラーが出て有効化できなかったので、多少面倒ですがランキングは手動更新ってことになりますかねぇ……

まぁ手動っつっても毎回ランキングが更新されないというわけではなさそうなんで、新しい記事を投稿した時にでもついでに[Clear Cache]しておく、って感じでしょうかね。

仮にしばらく人気記事ランキングの表示に変化が無かったとしても、それで誰が困るって話でもないですし。

 

おわりに

さーて、長かったプラグイン「WordPress Popular Posts」の備忘録もやっと締めに入れそうです。
あと書いておいた方が良さそうなことは……

あ、そうそう、現在閲覧中の記事がサイドバーの人気記事ランキングにも載っている場合、ランキングの方はクリックできなくなる仕様のようですね。 無意味な同ページへの移動を制限しているのかな? 地味に良い機能だと思います。
 

最後に、プラグインにフィルタをかけて無駄な読み込みを減らして動作を軽くする「Plugin Load Filter」なんですが、調べてみたところ、[Page Type]フィルタでサイト表示上のみの読み込みに設定して使用している人がいました。

WordPress Popular Posts が重い(重くなる)プラグインだというなら、積極的にフィルタをかけて少しでも軽くしておきたいところではありますが、私は簡易アクセス解析の「Jetpack-Site Stats(統計情報)」も、キャッシュプラグイン「WP Fastest Cache」も、どちらもフィルタリングせずに[Normal Mode]で使用しているんですよね。

アクセス解析には誤差が出たら嫌だし、キャッシュプラグインなんてなんかもう……「エラーの巣窟」じゃないですか(;´ェ`)
下手な事しておかしくなったりでもしたら困るので、この両方の機能を持つ WordPress Popular Posts もフィルタはかけずに使っていくことにしました。
 

重いと言えば、この WordPress Popular Posts をインストールしてみて、実際にどんぐらい重くなったのかが実感できませんね。 ……まぁアクセス数鼻クソじゃあそんなモンなんでしょうけども。

そこで、「サイト表示速度の高速化」の記事以来となるサイト表示速度の再計測を行なってみることにしました。

以前の詳細な結果は過去記事に書きましたので、↓

前々回の記事にて予告しておいた当サイトの表示速度の高速化なのですが、1ヶ月以上かかってしまいましたがどうにか結果を出すことができたので、...

 
最後の計測の結果だけ書くと、

PageSpeed Insights
パソコン:92
モバイル:89

Test My Site

でした。 いや~、この時はかなり頑張りましたね、今までで一番長い記事になりましたし(;´ρ`)ゲソッ
 

んで、WordPress Popular Posts のインストール後となる今回の計測結果は……

PageSpeedInsights

PageSpeedInsights

パソコン:92点 ⇒ 94
モバイル:89点 ⇒ 95!!

上がった!? なんで??

えー…どういうことなの…? 一応、WordPress Popular Posts のインストール以外にも裏でちょこちょこカスタマイズはしていたんですが……(次回の記事で書く予定)
PageSpeed Insights の点数に影響するような事は何もしてないはずなんだけどなぁ。 新着記事と関連記事の一覧を作ったくらい。
 

ま、いいや。 んじゃ続いて Test My Site の計測結果を。 こっちが重要ですね、実際の速度なんで。

Test My Site

秒 ⇒

ありゃありゃ……やっぱ落ちてしまいましたか。
ん~…こればっかしは仕方ないかねぇ、ここまでやって今さら WordPress Popular Posts を外すってわけにもいかんですし。

 

「おわりに」と言ってからけっこう書いてしまいましたが、これでホントにお終い。

次回の更新なんですが、今度こそ『ガンプラ気分』の本運営開始のご挨拶といきたいですね。

この記事の中でも少し触れましたが、諸々の小カスタマイズをまとめた記事にする予定です。
主には新着記事・関連記事一覧を導入した記録となると思います。

作業自体は既に7割っくらいは完了してるんですが、ちょっと記事下の「関連記事」の表示位置が気に食わなくてですね……
これから久っしぶりにPHPファイルに手を出そうかなと考えてまして、もしかしたら今回みたいに手こずるかも(;´д`)

今回のカスタマイズだって要はプラグイン1つ入れたってだけの話ですからね(笑)
 

そんなこんなで1万3500字も書いてしまいましたが、10年ぶりのガンプラ製作の日は近いぞ!!

-ウェブサイト作成

Copyright© ガンプラ気分 , 2019 All Rights Reserved.