Kanamii

伝えたい想いを自分らしく・・・

kanamii-1127-1-2

スポンサーリンク

STINGERカスタマイズ

プラグイン【WordPress Popular Posts】の設定方法と人気記事を「STINGER PLUS+」と同じスタイル(順位付き)で表示する方法

2016/09/18

無料WordPressテーマ「STINGER PLUS+」は、一覧に表示されるサムネイルを丸くできる点が特徴的。
とても可愛らしいので気に入っています。

サイドバーに表示する他の項目のサムネイルやテキストをテーマのスタイルに合わせてみると、統一感が出てスッキリとした印象になります。
見た目だけじゃなく心なしか気持ちもスッキリ♪(笑)

ここでは、サイドバーなど任意の場所に人気記事ランキングを表示できるWordPressプラグイン「WordPress Popular Posts」のインストールと設定方法、人気記事をSTINGER PLUS+ の新着記事と同じスタイルで表示する方法をご紹介します。

こちらのカスタマイズは、サムネイルを丸く(角丸に設定)していない場合にも応用できます。

kanamii-1127-7

さらに追加のカスタマイズとして、下記のようにランキングを順位付きで表示する方法も追記しました。

kanamii-1127-2-2

また、同じようにサイドバーのプロフィール欄をSTINGER PLUS+ の新着記事と同じスタイルで作成する方法、Twitterウィジェット(埋め込みタイムライン)の導入と背景を透明にするカスタマイズ方法は、下記ページをご参照ください。

【WordPress】サイドバーのサムネイル付きプロフィール欄を「STINGER PLUS+」と同じスタイルで作成する方法

どれも簡単に挑戦できるカスタマイズです。
興味がある方はレッツトライっ!

スポンサーリンク

WordPress Popular Postsのインストールと設定方法

WordPressダッシュボード→プラグイン→新規追加→「WordPress Popular Posts」と検索して表示されるプラグインをインストールして有効化します。

kanamii-1127-2

WordPressダッシュボード→外観→ウィジェットに、「WordPress Popular Posts」という項目が追加されていますので、サイドバーの表示したい場所にドラッグ&ドロップ。
配置した項目をクリックして設定をしていきます。

各項目の設定内容

全ての項目の設定内容の説明です。
お好みに応じて必要な部分の設定を行ってください。

  • Title:見出しタイトル
  • Show up to:表示する記事数
  • Sort posts by:集計方法
    「Comments」→コメント数で集計
    「Total views」→トータルのアクセス数で集計
    「Avg. daily views」→1日の平均アクセス数で集計

Filters

  • Time Range:集計期間
    「Last 24 hours」→24時間(1日)
    「Last 7 days」→1週間
    「Last 30 days」→1カ月
    「All-time」→プラグイン導入からの全期間
    ※「Display only posts published within the selected Time Range」にチェックを入れると、選択した期間の範囲内で公開した記事のみが集計対象となり、過去記事は除外されます。
  • Post type(s):記事のタイプを入力
    「post」→投稿記事
    「page」→固定記事
    「post,page」→投稿記事と固定記事両方
  • Post(s) ID(s) to exclude、Category(ies) ID(s)、Author(s) ID(s):除外したい記事ID、カテゴリID、投稿者IDを指定(複数の場合はカンマ「,」区切り)
    ※記事IDは、投稿・固定記事作成画面のブラウザのアドレスバーで。

    kanamii-590-2

    ※カテゴリIDは、投稿→カテゴリー→カテゴリー名をクリックして表示されるブラウザのアドレスバーで確認できます。

    kanamii-590-3

    ※投稿者IDは、複数の投稿者でのサイトを運営している場合に必要な項目ですので空欄のままでよいかと思います。

Posts settings

以下の項目は、テーマと表示を合わせるために下記のように設定してください。
※チェックを入れた後に、一度「保存」をクリックすると細かい設定項目が表示されます。

  • Shorten title:チェックを入れる
    「words」→チェックを入れる(記事タイトルを全文表示)
  • Display post excerpt:チェックを入れる
    「Excerpt length」→40(抜粋文の文字数指定)
    「characters」→チェックを入れる(文字数指定を適用)
  • Display post thumbnail→チェックを入れる
    「Use predefined size」にチェック→「st_thumb 100(100×100,hard crop)」を選択

Stats Tag settings

コメント数、アクセス数、投稿者名、投稿日、カテゴリーの表示を指定する項目ですが、全てチェックを外します。

HTML Markup settingsでスタイルを指定

最後の項目となる「HTML Markup settings」にチェックを入れてから「保存」をクリックすると、下記のような設定項目が表示されます。
ここで、STINGERのサイドバーの新着記事のスタイルを適用させるためのコードを追加していきます。
・・ソースコードとにらめっこして探しましたよー。

kanamii-1127-6

  • Before / after titleの左側
  • Before / after titleの右側
  • Before / after Popular Postsの左側

    ※サムネイルを角丸に設定していない場合
  • Before / after Popular Postsの右側
  • Post HTML Markup

これで、全ての設定は完了です。
お疲れさまでした。

ランキングを順位付きで表示する方法

【9月18日追記】
Firefoxでの表示崩れの対応としてstyle.cssに追加するコードを修正しました。
記事を参考にして下さった方には大変ご迷惑をおかけいたしますが、コードの入れ替えをお願いいたします。申し訳ありません。
Twitterでお世話になっている ナツキマコト様 @lifejam421、この度は、ご親切にキャプチャ付きのDMにてご報告下さり本当にありがとうございました。

ランキングを順位付きで表示したい場合は、上記で設定した「Post HTML Markup」を下記のように変更します。

※リストのclass名に「number」を追加しています。

次に、WordPressダッシュボード→外観→テーマ→テーマの編集→「style.css」に下記コードを追加します。
カラーコード「#ff6893」の部分はお好みで変更してください。

全てのテーマファイルの編集は「子テーマ」で行うことをおすすめします。
親テーマを編集される際には必ずバックアップをとり、テーマの取り扱いには十分ご注意ください。
▶子テーマについて
また、子テーマのstyle.cssに追加したコードが反映されない場合は、追加場所を先に入力しているコードの前に変更して再度お試しください。

こちらのカスタマイズのコード作成にあたり、下記ページを参考にさせていただきました。
ありがとうございます。

▶counter-reset-スタイルシートリファレンス

また、きっかけを与えて下さったのはTwitterでお世話になっている はれあにーさん @hareannie01 のツイートです。

そして何度かのやり取りの後の私のツイート。
自分が知りたいんかーい!ってね。(笑)

当ブログでもアイデアをお借りして利用させていただくことにしました。
はれあにーさん、素敵なご提案と勉強の機会をありがとうございました♪

PS.その後、記事内にて当ブログをご紹介して下さいました。温かなお心遣いに感謝です。。☆

このブログの見た目について(テンプレート、参考サイト)

表示を確認

全ての設定が完了したら、サイトでの表示を確認します。

WordPress Popular Postsは、ログイン時の自分のアクセスは除外されるようになっていますので、「Sorry. No data so far.(ごめんなさい。今のところデータがありません。)」というメッセージが表示されていたら、一度WordPressの管理画面からログアウトをしてから、適当なページにアクセスして再度確認してみてください。

以上、WordPressプラグイン「WordPress Popular Posts」のインストールと設定方法、人気記事をSTINGER PLUS+ の新着記事と同じスタイルで表示する方法、さらにランキングを順位付きで表示する追加カスタマイズ方法をご紹介しました。

最後までお付き合い下さりありがとうございます。

▶STINGER PLUS+ カスタマイズ全記事一覧へ

この記事が気に入ったら
いいね!しよう

Twitter で

Facebook・Twitterへ最新記事をお届けします

-STINGERカスタマイズ