WordPress構築

WordPressで人気記事ランキングを表示するプラグイン「TOP10」の設定とカスタマイズ!

WordPressで人気記事ランキングを表示させるプラグインとしては、「WordPress Popular Posts」がよく知られていますし、実際使っている方も多いです。私自身も使っていました。

別サイトの話ですがエックスサーバーから「サーバーを圧迫している・・重い・・対処して・・」という内容のメールが届き、その中の対処法として「WordPress Popular Posts」を使っているなら、他の方法に変えてほしい・・という内容の記載がありました。

ということで、「WordPress Popular Posts」の代わりに、人気記事ランキングを表示するプラグイン「TOP10」を導入したので、その設定とカスタマイズの方法をお伝えします。

TOP10のインストールと有効化

早速プラグインのインストールと有効化をしていきましょう。

  • プラグインを選択し、「新規追加」をクリック!

  • キーワードの欄に「TOP 10」を入力
  • プラグインが表示されたら今すぐインストールをクリック!

  • インストールできたら「有効化」をクリック!

有効化まではこれで完了です。

TOP 10のウィジェットをサイドバーに追加する

今、有効化した「TOP 10」のウィジェットをサイドバーに追加します。

外観>ウィジェットと進み、左列に出来た「Popular Posts[TOP 10]」をサイドバーの任意の位置にドロップアンドドラッグで追加します。

↓ ↓ ↓ ↓

TOP 10ウィジェットの設定

ウィジェットからは最低限設定しておいた方がいい!というところを設定していきます。

  • 下向き▼をクリック!
  • Title(タイトル):項目名として表示させたい文字列を入力「人気記事ランキング」とか「よく読まれている記事はコチラ」など
  • No.of Posts:人気記事を何件表示するか、数字を入れておきます
    5とか10など任意の数字をいれます
  • 次はどのくらいの期間を対象にするかを選択します。デフォルトは「Orverll」(すべての期間)になっています。
    • 期間を決めたい場合には上の図のように「Custom time period(Enger below)」を選択し、何日かを入力します。
    • 過去7日間のアクセスを元に表示させたい場合数字は「7」
    • 過去1ヵ月のアクセスと元に表示させたい場合は「30」など数字を入力

  • Thumbnails options:人気記事表示の表示形式を指定します
  • 画像+タイトルを表示ということでプルダウンから「Thumbnails inline, before title」を選択
  • Thumbnail height:サムネイルの高さはひとまず「100」
  • Thumbnail width:サムネイルの横幅もひとまず「100」と入力します
  • 人気記事の対象を選択します「Post」(投稿)にチェック
  • 最後に「保存」をクリック!

以上で最低限の設定は終わりです。

サイドバーにどのように表示されているか確認してみてください。

すると、たしかに人気記事が表示されていますが、以下のように見栄えがよろしくない状態。

というわけで、次に見栄えを設定していきます。

プラグイン「TOP 10」からの設定(カスタマイズ)

このプラグインは、上で見たウイジェットの設定とは別に設定画面で設定できるようになっています。

  • 左のメニューから「TOP 10」をクリック!

  • 「Styles」のタブをクリック!
  • 「Left thumbnails」を選択

  • Save Changes(変更を保存)をクリック!

実際にみてみましょう。

設定前より、良くはなりましたが、太字で字が詰まっている感じが少し気になります。(好みの問題もあるので、このままで良い方はこの先のCSSの設定は必要ありません)

CSSで文字の見栄えをカスタマイズ

先程の「Styles」のタブの中の下方に「Custom CSS」という欄があります。

こちらににCSSを追加で記述します。

  • Stinger、AFFINGERの場合は以下の様に記述すれば良さそうです。

参考

.tptn_posts_daily ul li {
margin-bottom: 1em!important;
}

.tptn_posts_daily span.tptn_title {
line-height: 1.5;
font-weight:initial;
}

タイトルの行間を広げて、太字を普通に戻した、というのと、項目間を広げた、という形です

  • 最後にSave Changes(変更を保存)をクリック!

表示させてみると以下のように変わります。

良い感じになりました。

すべての個別のベージ(single.php)で数値が表示されるのを回避する!

プラグインの有効だけで、基本的にこのTOP 10プラグインは動作を始めます。

ですが、このままでは、すべての個別のベージ(single.php)で数値が表示されています。ここは表示させたくない!という場合は、非表示にしておきましょう。

個別ページのランキング数値表示を消す方法

  • 管理画面から、TOP 10プラグインのSettingsをクリック!
  • TOP 10プラグインの管理画面の「Counter/Tracker」のタブをクリック!

  • 「Display number of views on」にデフォルトで「Posts」と「Pages」にチェックが入っているので、この2つのチェックを外します。

これで非表示になりました。もちろん表示させたい場合は、チェックをつけたままにしておく!ということになります。

まとめ

WordPressに人気記事ランキングを表示するプラグイン「TOP 10」の設定からカスタマイズまでお伝えしてきました。

最近では「Wordpress Popular Posts」に関して、軽くする、早くするための設定について書いてある記事もたくさん出ており、参考になると思います。

が、「Wordpress Popular Posts」を使っていて、重い、表示速度が遅いと感じたら、別のプラグインを試してみるというのも一つの方法です。

ちなみに、私も「Wordpress Popular Posts」、「Simple GA Ranking」をこれまで使っていましたが、今回の「TOP 10」を導入してみました。表示速度がどうなるかなど検証していきたいと思います。

こういったことができるようになると、更に幅が広がります。

同じ目的でも、異なるプラグインが複数あったり、プラグインを使わない方法があったり、日々試行錯誤ですが、それもまたネットビジネスの醍醐味です。

また、更にネットで収益化していきたい、他の人とは一味違うブログ運営がしてみたい、という場合には以下のメルマガにも登録してみてください。

-WordPress構築

© 2020 Netbusiness Labo