WordPress個別サポート

WordPress Popular Postsプラグインを使うとサイドバーなどに「よく読まれている記事」を表示することができます。

サイドバーに「よく読まれている記事」を表示

サイドバーに「よく読まれている記事」を表示

すでに使用中の方もいると思いますが「固定ページは対象外にしたい」とか「デザインをカスタマイズしたい」という方もいると思います。以下、WordPress Popular Postsプラグインのカスタマイズ例を紹介します。

スポンサーリンク

WordPress Popular Postsプラグインの使い方

「プラグイン」‐「新規追加」メニューからWordPress Popular Postsプラグインをインストール、有効化します。

WordPress Popular Postsプラグインのインストール

WordPress Popular Postsプラグインのインストール

「外観」-「ウィジェット」メニューを開いて画面左側の「利用できるウィジェット」から「WordPress Popular Posts」を適当なサイドバーに追加します。

「WordPress Popular Posts」をサイドバーに追加

「WordPress Popular Posts」をサイドバーに追加

この時点でサイドバーに人気記事の一覧が表示可能になりますがアクセス数データが空なので実際に表示されるまでには少し時間が必要です。取り急ぎテストしたいときは、いろいろなブログ記事にアクセスして擬似的にカウントを増やしてみてください。

初期設定では人気記事の一覧は次のように表示されます。

WordPress Popular Postsによる人気記事の一覧

WordPress Popular Postsによる人気記事の一覧

テーマにBizVektorを使ったときの例です。以下、表示する項目を設定したりデザインをカスタマイズする例を紹介します。

固定ページをランキングから除外する

初期設定ではブログ記事だけでなく固定ページも一覧の対象になっています。場合によっては「問い合わせ」などが上位にランクされてしまうので、固定ページを除外しておくと良いでしょう。

意外な固定ページが上位にランクされることも

意外な固定ページが上位にランクされることも

以下、すべての固定ページを除外する方法と、特定の固定ページのみを除外する方法を紹介します。

すべての固定ページを除外する設定

固定ページを除外してブログ記事のみを対象にするには、ウィジェットパーツのメニュー「Post type」を「post」とします。初期設定では「post,page」(投稿および固定ページ)になっています。

表示対象を投稿のみに限定

表示対象を投稿のみに限定

特定の固定ページのみを除外する

すべての固定ページを除外するのではなく「問い合わせ」のような特定の固定ページのみを対象外にする場合は、「Post type」を「post,page」(投稿および固定ページを対象に)として、「Post(s) ID(s) to exclude」に除外したい固定ページのID(例:93)を入力します。

特定のページのみを対象外に

特定のページのみを対象外に

複数の場合は「93,42」のようにカンマ区切りで指定します。

投稿や固定ページのIDは編集画面でブラウザのアドレスバーの「post=99999」の部分を見るとわかります。この例では「お問い合わせ」という固定ページのIDが「93」だとわかります。
投稿や固定ページのIDを調べる

投稿や固定ページのIDを調べる

カスタム投稿タイプ(BizVektorのお知らせなど)を対象にする

BizVektorの「お知らせ」など、カスタム投稿タイプをランキング対象にするには、「Post type」に追加します。たとえば、BizVektorの「お知らせ」はカスタム投稿タイプが「info」なので「post,page,info」のようになります。投稿とお知らせを表示対象にする場合は「post,info」です。

カスタム投稿タイプを表示対象に追加する

カスタム投稿タイプを表示対象に追加する

カスタム投稿タイプを調べるには、カスタム投稿タイプ(例:お知らせ)のメニューをクリックします。ブラウザのアドレスバーの「post_type=?????」にカスタム投稿タイプが表示されます。この例では「info」だとわかります。
カスタム投稿タイプ名を調べる

カスタム投稿タイプ名を調べる

記事の抜粋やアイキャッチ画像を表示する

設定画面下の「Posts settings」や「Stats Tag settings」のチェックボックスでは、記事の抜粋やアイキャッチ画像の表示/非表示を設定することができます。初期設定ではアクセス数を表示する設定(Display views)になっています。

表示項目の設定

表示項目の設定

  • Posts settings --- 表示項目の設定
    • Shorten title --- タイトルを指定文字に短くして表示します。
    • Display post excerpt --- 抜粋を表示します。
    • Display post thumbnail --- アイキャッチ画像を表示します。
  • Stats Tag settings --- 記事情報の表示設定
    • Display comment count --- コメント件数を表示します。
    • Display views --- アクセス数を表示します。
    • Display author --- 著者名を表示します。
    • Display date --- 投稿日を表示します。
    • Display category --- カテゴリーを表示します。
抜粋やアイキャッチ画像などはチェック後に「保存」ボタンをクリックすると具体的な文字数などを設定できるようになります。

デザインのカスタマイズ

初期設定では見た目がイマイチかも…

WordPress Popular Postsではリスト(ul・li)で記事を一覧表示しているので、テーマによっては微妙なデザインになってしまいます。BizVektorの例では、初期設定で人気記事を一覧表示すると次のようになります。

BizVektorでの使用例

BizVektorで人気記事を表示した例

Stinger5(stinger5ver20150505b)での使用例は次のようになります。

Stinger5での使用例

Stinger5で人気記事を表示した例

デザインのカスタマイズ例(BizVektor)

BizVektorを例によく読まれている記事のタイトル、アイキャッチ画像、アクセス数のレイアウトをカスタマイズする例を紹介します。

まずは、アイキャッチ画像を表示するため、サイドバーに配置した「WordPress Popular Posts」の「Display post thumbnail」をチェックして「保存」ボタンをクリックします。

アイキャッチ画像を表示する

アイキャッチ画像を表示する

アイキャッチ画像のサイズ設定画面が開くので、「Use predefined size」から既定サイズの画像を選ぶか、「Set size manually」をチェックして好きなサイズに設定します。ここでは「Set size manually」を選んで幅(Width)と高さ(Height)をそれぞれ320px、80pxに設定しました。

 アイキャッチ画像のサイズ設定

アイキャッチ画像のサイズ設定

これが唯一の正解ではありません。使用中のテーマに合わせて試行錯誤をお願いします。

BizVektorのサイドバーは220pxですが、ここで幅を320pxにしているのは、スマホ表示のときにピッタリサイズになることを想定しています。

スマホでの表示イメージ

スマホでの表示イメージ

PC表示の場合、BizVektorでは画像サイズの最大幅が100%(max-width: 100%;)に設定されているので220pxより大きくても大丈夫だという前提です。他のテーマの場合は、さらに調整が必要な場合もあります。

完了したら「保存」ボタンをクリックします。

続いてスタイルを調整するため次のCSSを「外観」-「CSSカスタマイズ」メニュー、または子テーマのstyle.cssに入力します。

これで完成です。表示結果は次のようになります。

人気記事のデザインカスタマイズ例

人気記事のデザインカスタマイズ例

アクセス数(9999pv)を消したい場合は上記のウィジェット設定画面で「Display views」のチェックを外してください。

表示項目によっては、さらにデザインのカスタマイズが必要な場合もあります。上記のCSSや設定を参考にしていただき、いろいろ試行錯誤してみましょう。

この記事をSNSで共有する
WordPressでお困りのときはご相談を
この記事を書いた西沢直木が直接、WordPress個別サポートで対応します。
こんなときはご相談を
  • WordPressの使い方(ページやメニューの作り方を教えてほしい)
  • カスタマイズ(機能の追加やデザイン調整をお願いしたい)
  • トラブル対応(画面真っ白・「ログインできない」を解決したい)
マンツーマンなので相談内容は自由です。いただいた課題をその場で解決、CSSやPHPも目の前で修正します。気軽にご相談ください。
wordpress講座受講予約
WordPress講座の問い合わせ先

関連記事

BizVektorのカスタマイズ

WordPressによるサイト作成のヒント

WordPressプラグイン

スポンサーリンク
西沢直木によるWordPress講座の紹介
ホームページ作成講座WordPress個別サポート