WordPress Related Posts を STORK に合わせてカスタマイズ

WordPress Related Posts は、アクセスアップを図るためのWordPress用プラグインです。関連記事を自動的に抜粋して表示したり、記事を選んで関連記事として表示できる。

類似するSTORK装備のプラグインと比較しながら、それぞれの特徴を解説。STORKに合わせた独自のカスタマイズも公開します。

Contents

1 プラグインの特徴
- 1.1 STORKに装備された関連記事
- 1.2 WordPress Related Posts
2 プラグインの効果
3 カスタマイズの設定
- 3.1 まずはプラグインの確認から
- 3.2 カスタマイズの設定手順
4 プラグインの使い方
- 4.1 関連記事に特定記事の設定する方法
5 さいごに

プラグインの特徴

記事下に関連記事の画像リンク集を置くことで、PV数を稼いだり、ブログの滞在時間を増やしたりします。そうして直帰率を最小限に抑えることを目的としたプラグインです。

STORKに装備された関連記事

Yet Another Related Posts Plugin というプラグインを使ってデザインされたものがSTORKには装備されています。プラグインを有効化して記事を一定数追加すれば自動的に表示する。

しかし、関連する記事を特定の記事に指定することはできないので、別のプラグインを使わなければなりません。

WordPress Related Posts

WordPress Related Posts は、そうした問題を解決する特定記事を指定できるプラグインです。各記事にそれぞれ特定記事の指定が可能で、指定がなくとも自動的に記事を抜粋する。

機能を追加することに加え、なるべくSTORKのデザインに近いものにカスタマイズします。

プラグインの効果

特定の記事を記事下に置くことで、目的を持った誘導が可能となります。

例えば‥

トレンド新着への誘導
興味を持たせたい無関連記事への誘導
新着アフィリエイトへの誘導
悩み系の記事からアフィリエイトへの誘導

様々な意図する理由によって誘導することでPV数を稼いだり、アフィリエイト報酬を得たりすることが期待できます。

そうしたプラグインの効果を最大に活かすのに、標準のデザインではかえって不自然。できればSTORKのようなデザインに揃えたいと思いました。

そのため一部は非表示ですが、CSSでできる限りSTORKに近いデザインにカスタマイズしてみました。今回の設定内容は、そんなSTORK的なカスタマイズの設定になります。

カスタマイズの設定

このマークを見かけたら
クリックしてね

まずはプラグインの確認から

このプラグインのインストールとプラグインが有効化になっている必要があります。設定はそれから、まずはプラグインの確認をしよう。

プラグインリストの確認

サイドバーからプラグイン
インストール済みプラグイン

❶ リストにプラグインを確認

❷ 停止になっているのを確認

もし停止ではなく有効化だったらプラグインは停止状態なのでプラグインを有効化にします。

有効化停止になったらOK
プラグインは有効化されました

次は設定の手順に進みます

リストにないんだけどぉ

プラグインを新たに追加したいとき

下記の手順でプラグインをインストールする必要があります。プラグインのインストール方法を詳しく確認したいときは、下記の関連記事からプラグインインストール方法を確認下さい。

❶ サイドバーからプラグイン 　新規追加

❷ プラグインのインストールと有効化

WordPress STORK プラグインセットアップのまとめ

2017.02.22

カスタマイズの設定手順

❶ プラグインの設定に移動

サイドバーより設定
WordPress Related Posts

❷ プラグインの設定

下記のコードをコピー

<span class="gf rf">Related Posts</span>	関連記事はこちらです。

1	<span class="gf rf">Related Posts</span> 関連記事はこちらです。

❶ ペースト

❷ 「 4 」を入力

❸ ▼マーク

❸ Advanced settingsの設定

❶ 外す

❷ Enable custom css

下記のコードをコピー

❸ ペースト

❹ Use Custom Size Thumbnails

❺ width「300」height「200」

❻ Save changes

設定は完了です

.related_post_title {
clear: both;
padding: 0 !important;
margin: 0.7em 0 !important;
border: 0 !important;
font-size: 12px !important;
}
ul.related_post {}
ul.related_post li {
display: inline-block;
width: 24%;
min-height: 225px;
font-size: .76em;
font-weight: bold;
margin: 0 1% 1% 0;
padding: 0;
}
@media only screen and (max-width: 480px){
ul.related_post li {
width: 47%;
min-height: 210px;
font-size: .78em;
margin: 0 3% 1% 0;
float: left;
}}
ul.related_post li a {
position: relative;
text-decoration: none;
margin-bottom: 5px;
color: #444 !important;
overflow: hidden;
vertical-align: top;
zoom: 1;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
ul.related_post li img {
margin: 0;
}
.rf {
position: relative;
font-size: 21.6px;
margin-right: 0.5em;
bottom: -2px;
}

.related_post_title {

clear: both;

padding: 0 !important;

margin: 0.7em 0 !important;

border: 0 !important;

font-size: 12px !important;

}

ul.related_post {}

ul.related_post li {

display: inline-block;

width: 24%;

min-height: 225px;

font-size: .76em;

font-weight: bold;

margin: 0 1% 1% 0;

padding: 0;

}

@media only screen and (max-width: 480px){

ul.related_post li {

width: 47%;

min-height: 210px;

font-size: .78em;

margin: 0 3% 1% 0;

float: left;

}}

ul.related_post li a {

position: relative;

text-decoration: none;

margin-bottom: 5px;

color: #444 !important;

overflow: hidden;

vertical-align: top;

zoom: 1;

display: -webkit-box;

-webkit-box-orient: vertical;

-webkit-line-clamp: 3;

}

ul.related_post li img {

margin: 0;

}

.rf {

position: relative;

font-size: 21.6px;

margin-right: 0.5em;

bottom: -2px;

}

カスタマイズの詳細

CSSカスタマイズ
記事表示数４記事
シスポンシブ対応
カテゴリー非表示
閲覧数非表示
日付非表示
SNS非表示
除外カテゴリーは無
関連記事位置変更は無

カスタマイズの内容にあえて非表示にしているものがいくつかありますが、表示することで文字の体裁が崩れたりSTORKとのデザインからかけ離れるのでこんな感じの設定にしました。

また、例外指定や関連記事の位置変更も可能なのである程度、運用しながらの対応でいいかと思います。

初期の画面には、サムネイルのパターンを選ぶ画像がまず目に入ってきます。その設定内容は、❶のチェックを外すと非表示になる。

これは、このプラグインが用意したパターンでカスタマイズするのではなく、独自のCSSでカスタマイズするのでパターンは不要。

問題なく表示が確認できたら、サイトの関連記事を特定記事に置き換えて見てください。その手順はプラグインの使い方で解説します。

プラグインの使い方

特定記事の設定は、WordPress の設定画面でするのではなく、サイトの中で直接設定をします。まずは設定したい記事を表示して関連記事まで進んでください。

さいごに

今回のプラグインは、「デザインにこだわってカスタマイズする」というテーマで記事を作成しました。でもカスタマイズはこれだけでなくまだ他にもあります。

アイキャッチ画像がない場合の設定
表示を除外するカテゴリーの設定
関連記事を表示する場所の設定

最後の表示位置の設定は、高度なPHPを使ってカスタマイズしますが、慣れないうちはオススメしません。それに今回のカスタマイズによって最低限必要な設定は完了すると思います。

ただプラグインを導入しただけでその効果がPV数に反映されるものではなく、上がるように細工するという感じ。なので一連の設定が完了したら各ページに合う記事を選定します。

その選定には、それぞれのページビューを調べた上で選定する人もいるくらいなので、その効果が期待できるのは間違いないですが、なんでもかんでもってワケにいかない。

あくまで訪問者の意図に合うような記事でないとPV数は期待できないので、やはり効果を図る意味でもデータによって確認する必要はありそうです。

要は、「コンビニのレジの横に置かれた、つい買ってしまう駄菓子みたいなもの」その駄菓子を決めるというワケですね。
どんな駄菓子が売れるかなぁぁぁ　楽しみだぁ

最後まで乙です
いつもポチポチ　ありがと

WordPress Related Posts を STORK に合わせてカスタマイズ