WPプラグイン

サイドバーに人気記事一覧を表示できる「WordPress Popular Posts」をカード型にカスタマイズ

投稿日: 更新日: 2017年11月07日

どうも!でででーさん(@d3_dayo) です!今回はこのブログのサイドバーでも表示させている人気記事一覧をカード型表示にするためのカスタマイズを紹介します。

 
サイドバーに人気記事の一覧を表示している方はどうやって表示させていますでしょうか?
 
このブログではWordPressプラグインの「WordPress Popular Posts」を使って表示させています。このプラグイン、とても人気があるようで使っている方も多いと認識しております。
 
さて、今回の記事はこの「WordPress Popular Posts」を長方形のカード型で表示させるためのコピペOKなCSSカスタマイズを紹介したいと思います!
 
完成図はこのブログのサイドバー(スマホの場合はページ下)にある「よく読まれている記事」の部分がそのものズバリでございます!アイキャッチを長方形にして、その下にカード型の記事タイトルエリアを表示させます。
 
 

スポンサーリンク

WordPress Popular Posts

WordPress Popular Posts
今回使用するプラグインはこの「WordPress Popular Posts」です。
 
 

プラグインのインストール

ここでは手順紹介のサンプルとして「WP Maintenance Mode」という別のプラグイン導入時のスクリーンショットなどを例にしていますが、導入の手順に変わりはありません。
 
上記リンクのプラグイン紹介ページからプラグインのデータをダウンロードして…
 
f:id:d3dayo:20170916171458p:plain
 
自身のWordPress管理画面のサイドメニューからプラグイン→新規追加でダウンロードしたファイルをアップロードする方法でインストールが可能です
 
f:id:d3dayo:20170916171805p:plain
 
或いは、WordPress管理画面のサイドメニューからプラグイン→新規追加で表示したページにある検索欄に「WordPress Popular Posts」と入力して検索して、そこからインストールをすることも可能です。
 
f:id:d3dayo:20170916172039p:plain
 
 

カード型表示へのカスタマイズ

ここからWordPress Popular Postsで表示する人気記事一覧をカード型で表示するためのカスタマイズ手順を紹介していきます。
 

CSSの適用

まずは以下のコードをWordPress管理画面の外観→テーマの編集→style.cssにコピペします(クラス名とか随分適当につけてしまっているので、わかる方はお好みで変えちゃってくださいまし)

 

WordPress Popular Postsウィジェットの設定

次にWordPressの管理画面から外観→ウィジェットと選択し、サイドバーウィジェットにWordPress Popular Postsを設定します。
 

 
簡単に各項目の設定についても解説していきたいと思います。
 
・タイトル
サイドバーのタイトルとして表示する文言を入力します(人気記事など)
 
・最大表示数
一覧に表示される記事数を設定します。私は5件にしています。
 
・ソート順
人気記事として表示する基準を「総閲覧数」or「1日の平均閲覧数」から選択することができます。
 
・計測期間
人気記事として集計する期間を全期間 or 過去○日間と指定することができます。
 
・投稿タイプ
人気記事として表示する記事のタイプを選択することができます。postは記事でpageは固定ページです。
 
他、このあたりの設定は下の画像と同じ設定で問題ないと思います。
 

 
投稿設定
投稿設定は「アイキャッチ画像を表示」にだけチェックを入れます。またはサイズは「サイズを手動で指定」にチェックを入れて幅400px高さ225pxに設定します(今回のカスタマイズは16:9のアイキャッチ画像を前提にしているため)
 

統計タグの設定
ここは「日付を表示」にだけチェックを入れています。日付フォーマットはお好みのものを選びましょう。
 

 
HTML マークアップ設定
ここでは、まず「カスタム HTML マークアップを使う」に一回チェックを入れて保存すると、新たにカスタムマークアップの設定項目が表示されるようになりますので、以下のように入力していきます(「タイトルの前 / 後: 」以外は、基本的にそのまま該当の箇所へコピペでOKです)
 
タイトルの前

※上記のコードはSTINGERを使っている場合です。テーマによってサイドバータイトルのクラスが違うのでご注意ください。
 
タイトルの後

※上記のコードはSTINGERを使っている場合です。テーマによってサイドバータイトルのクラスが違うのでご注意ください。
 
投稿の前

 
投稿の後

 
投稿の HTML マークアップ

以上の入力が完了したらウィジェットの設定を保存します。これで人気記事一覧がカード型で表示されるようになります。
 
 

まとめ

というわけで、今回は「WordPress Popular Posts」の人気記事一覧を長方形のカード型表示にするカスタマイズ手順を紹介しました。
 
最後の「タイトルの前 / 後: 」部分だけ、STINGERじゃないとコピペでそのままとはいかないので苦戦する可能性も考えられますが、ここは最悪何もコピペしないという方法もあります(それだとサイドバータイトルがカッコよく表示されなくなってしまいますが)
 
もし、自分のテーマでは「タイトルの前 / 後: 」に何と入力すればいいのか?
 
入力する内容にお困りであれば、この記事にコメント頂ければ分かる範囲で回答させて頂きたいと思います!
 
その他の部分は完全にコピペだけでカスタマイズ設定することができるので、ぜひ試してみて頂ければと思います(^^)/

でででーさん

2017年2月21日はてなブログでカキタクナッタラ開設。2017年10月22日にWordPressへ移行しました。基本的に毎日更新。ウェブ・スマホなどIT関連のネタをメインにラーメンのことや雑談記事など幅広く書きます。たまに変なイラストを描いたりウェブ制作をすることもあります。

あなたにオススメ