初心者でも簡単!WPでSEO対策

無料で利用できるWordPressを使って、SEO初心者でも簡単に検索エンジン上位表示できる情報をお届けします。

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

 

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

 

スポンサードリンク

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

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

WPPデフォルト設定のレイアウト
 

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

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

WPPレイアウト変更後

注意事項

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

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

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

  • style.css

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

▼この記事の環境

  • WordPress 4.5.1-ja
  • AFFINGER
  • Google Chrom

ウィジェットの設定

Posts settingsShoten titleDisplay post thumbnailHTML Markup settingsUse custom HTML Markupにチェックを入れて[保存]をクリックし、当項目の詳細設定項目を表示させます。

WPPウィジェット詳細項目表示設定
 

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:に表示するアイキャッチのサイズを入力します。

WPPウィジェットの設定1
 

Shorten title

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

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

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

 

Display post thumbnail

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

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


 

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

WPPウィジェット設定2  
 

コピペするソース

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

 

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

 

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

CSSのソース追加

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

WordPress外観−テーマの編集画面
 

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

/* 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;
}

  WPPレイアウト用ソースの追加
 

アイキャッチの横幅を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} カテゴリー

 

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

WPPレイアウト変更−閲覧数の追加
 

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

WPPレイアウト変更−閲覧数の追加ソース例
 

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

<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に追加する方法もあります。

 

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

   
 

 - SEO 内部対策, 便利なプラグイン , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,