WP Popular Posts：レイアウト変更：AFFINGERの関連記事ぽい表示

WordPressの人気記事を簡単に表示してくれるプラグイン“WordPress Popular Posts”の表示を検索エンジンとアフィリエイトに強いと評判の無料テンプレート“AFFINGER”の関連記事のようなレイアウトに変更する設定とソースです。アクセスアップにお役立てください。

サイト内の回遊率を上げる方法のひとつが、人気記事のランキング表示です。

そのランキング表示を簡単に追加できるプラグインが“WordPress Popular Posts”略して“WPP”ですが「あの人気無料テンプレート“AFFINGER”にはデフォルトのレイアウトは合わない！」と思いませんか？

そこで今回は、AFFINGERの関連記事と同じような表示に変更する方法をご紹介します。

変更後は、下図のようになります。

注意事項

テーマファイルを改変しますので、失敗するとサイトが表示されなくなる可能性があります。

失敗してもすぐに戻せるように、必ずファイルのバックアップを取っておきましょう。

▼バックアップするファイル

style.css

環境によってうまくいかない可能性がないとは言い切れませんので、自己責任でお願いします。

▼この記事の環境

WordPress 4.5.1-ja
AFFINGER
Google Chrom

ウィジェットの設定

Posts settingsのShoten titleとDisplay post thumbnail、HTML Markup settingsのUse custom HTML Markupにチェックを入れて［保存］をクリックし、当項目の詳細設定項目を表示させます。

▼ Posts settings

Shorten title	チェック
Display post thumbnail	チェック

▼ HTML Markup settings

Use custom HTML Markup

チェック

Shorten titleは、shorten title toに表示する文字数を入力、charactersを選択し、Display post thumbnailは、Set size manually選択で、Width:とHeight:に表示するアイキャッチのサイズを入力します。

▼ Shorten title

shorten title to	タイトル文字の表示数（以上切り捨て）
characters	選択

タイトル文字数は、半角英数字でカウントされますので、日本語では思い通りの長さにならない場合があります。

指定された文字数以上は切り捨てて、末尾に「…」が表示されます。

▼ Display post thumbnail

Set size manually	選択
Width:	アイキャッチの横幅
Hight:	アイキャッチの縦幅

ここでは、横幅を80pxに設定しています。※80px以外は、CSSソースも編集してください。

HTML Markup settingsのPost HTML Markup:の枠内に下記のソースをコピペします。

▼ コピペするソース

<div class=wpp-container>
<div class=wpp-img>{thumb}</div>
<p>{title}</p>
</div>

設定が完了したら［保存］をクリックします。

次に、このレイアウト用のCSSを追加します。

CSSのソース追加

［外観］-［テーマの編集］の順位に進み、スタイルシート（style.css）の編集画面を表示します。

下記のソースをコピペして［ファイルを更新］クリックします。

/* WP Popular Postsのカスタムレイアウト */
.wpp-container {
        margin: 0 auto;
        padding: 10px 0 10px;
        border-top-color: #ccc;
        border-top-style: dotted;
        border-top-width: 1px;
        overflow: hidden;
}
.wpp-img {
        width: 80px;
        float: left;
	margin-right: 10px;
}
.wpp-img img {
        max-width: 100%;
        width: auto;
        height: auto;
}
.widget-area .wpp-container p {
        width: 81.25%;
        margin-bottom: 10px;
        font-size: 14px;
	font-weight: bold;
        line-height: 16px;
        float: right;
}
.wpp-container a {
	font-size: 14px;
	font-weight: bold;
	color: #333;
	text-decoration: none;
}
.wpp-container a:hover {
	color: #b22222;
}

アイキャッチの横幅を80px以外にした場合は、下記の数値を変更してください。

.wpp-img {
        width: 80px;
        float: left;
	margin-right: 10px;
}

スタイルシートに直接記述したくない場合は、“CSS編集”に追加しても表示されると思います。たぶん…（確認してません。すみません…）

表示項目の追加

ここまでの解説では、アイキャッチとタイトルだけを表示させていますが、ビューカウントや抜粋文を表示することもできます。

下記は、表示できる項目とコードの一例です。

Display comment count	{comments}	コメント数
Display views	{views}	閲覧数
Display author	{author}	投稿者
Display date	{date}	投稿日
Display category	{category}	カテゴリー

例えば、下図のように閲覧数をタイトル下に表示することができます。

この場合、Post HTML Markupの記述を下記のようにします。

▼ タイトル下に閲覧数を小さく表示するソース

<div class=wpp-container>
<div class=wpp-img>{thumb}</div>
<p>{title}<br />
<span style="font-size: 12px;">{views}&nbsp;PV</span></p>
</div>

文字サイズを12pxにして、単位に“PV”をつけてみました。

スタイルを直接記述してありますが、CSSに追加する方法もあります。

お好みのレイアウトでお楽しみください。