アフィリエイト Wordpress SINGER PLUS+

WordPress Popular PostsのスタイルをSTINGER PLUS+に合わせる方法

更新日:

どうもみなさんこんにちは
STIGER PLUS+にテーマを変えたところ、あまりにもカッコよすぎて細かいところが気になってしまいます。

今回は右サイドバーに表示している、記事閲覧ランキングプラグインのWordPress Popular PostsのスタイルをSINGER PLUS+ の新着記事や関連記事と同じスタイルに合わせる方法が分かりましたのでご紹介します。

スポンサーリンク

WordPress Popular Postsのインストール

プラグインですので、インストールはいつも通りです。

「プラグイン」-「新規追加」-「WordPress Popular Posts」を検索-「今すぐインストール」-「有効化」

WordPress Popular Postsの設置と設定

設置はとても簡単で、
「外観」-「ウィジェット」から「サイドバーウィジェット」の好きな場所に「WordPress Popular Posts」をドラッグ&ドロップするだけです。

あとは設定ですが、簡単に私の設定をご紹介します。ご自分のサイトにあった設定を探してみて下さい。

WordPressPopularPosts1

Title:任意のタイトルを記入。
Show up to:何個表示したいかですので、5個にしてあります
Sort posts by:Total viewsに設定。PVですね。

Time Range:Last30 daysに設定。
トレンドサイトの場合はLast24hourとかで、固定のコンテンツの場合はAll-timeでも良いかも知れません。

Post type(s):post,pageを記入。記事と固定ページの両方って事です。

後は表示したくない記事とかカテゴリとか投稿者などですので私は関係ありませんので割愛で

WordPressPopularPosts2

表示するときのタイトル文字数や抜粋文の長さ、サムネイル画像の表示などを設定できます。
私は全て設定してありますが、コンセプトはどんなページ、記事が表示されても全て同じ大きさになる事で設定してあります。そのため全般的に文字数が小さくなっています。

Shorten title:チェックするとタイトルを短く表示します。私は結構長くタイトルを書いてしまうのでチェックしてあります。長さは18文字にしてあります。

Display post excerpt:コンテンツの抜粋文を表示するか?です。私はするのでチェックして長さを25文字にしてあります。だいたい「どうもみなさんこんにちは」が最初に入るので意味ないんですけど(笑)

Display post thumbnail:サムネイル画像を表示するか?です。私はするのでチェックしてサムネイルの大きさを80pxにしていましたが、よく見るとぼやけていたので、「thumbnail(150×150)」にしました。

後の下の設定は無視で

スタイルをSTINGER PLUS+に合わせる

さて、ここまでできると、表示されているランキングがせせこましく、苦しそうに詰め詰めなのが分かるかと思います。
WordPressPopularPosts4

スタイルが合わなかったので何かおかしいのかなぁとGoogle先生に聞いていたら、たまたまお見かけしたサイトで紹介されていました。
style.cssをいじれば良いのは分かっていますが、今回は出来るだけいじりたくなかったので素晴らしい方法です。

まず、これまでの設定の続きで「Use custom HTML Markup」をチェックして一度保存すると設定画面を開きます。
後は下の通り書くだけです。

WordPressPopularPosts3

Before/after title:

<h4 class="menu_underh2">
</h4>

Before/after Popular Posts:

<div class="kanren">
</div>

Post HTML Markup:

<dl class="clearfix">
<dt>{thumb}</dt>
<dd>
<h5>{title}</h5>
<div class="smanone2"><p>{summary}</p></div>
</dd></dl>

もし私の説明で分かりにくかったり、女性向けサイトなどでサムネイル画像を丸くしたい場合は若干変わりますので、せっかくですから引用元のサイトでご確認ください。
とても丁寧に説明されていますし、とても綺麗なサイトをお作りで同じSTINGER PLUS+を使っているとは思えない(笑)少しはうちもデザイン頑張らねば!と思った次第です。

WordPress Popular Postsのまとめ

ずっとお世話になっているプラグインですが、今回はstyle.cssのスタイルシートをいじることなくウィジェットのみの設定で済ませる事が出来たのでとても簡単でした。サイトの統一感も守られて、ますますやる気が出たところで満足して寝ます(笑)

STINGER PLUS+を導入した戦いはこちらです

-アフィリエイト, Wordpress, SINGER PLUS+

Copyright© 上善如水 , 2019 All Rights Reserved.