【SANGOカスタマイズ】記事下に人気記事と関連記事を並べ回遊率を上げる

ブログ運営の上で大切なのが回遊率。

アナリティクスでは『ページ/セッション』なんて難しい言い方をしていますが、要は１人のユーザーがブログ内でどれだけグルグルしてくれたかという数値です。

これを上げるにはどうしようかと言うといくつか選択肢があるのですが

思いっきり2ch世代の私はまとめサイトに親しみがあることもあって、いまだにまとめサイトっぽい仕様を気に入ってしまっているので今回はそれをSANGOで実装しようと。

果たして、下品の権化『まとめサイト』と美しさが取り柄のテーマ『SANGO』を合成することはできるのか……。

そして回遊率は上がるのか。

完成イメージ図

使うプラグイン2つ

今回は2つプラグインを使用しますのでインストールしましょう。

１、Yet Another Related Posts Plugin
２、WordPress Popular Posts

ちなみにYet Another Related Posts Plugin（YARPP）は、その名の通り関連記事を表示するプラグイン

WordPress Popular Postsも名前の通り人気記事を表示するための有名プラグインです。

インストールできたらそれぞれ設定していきます。

YARPPの設定

日本語表記なので分かりやすく、特筆すべき点はあまりないのですが、2つだけ。

１、関連スコアの設定

画像内にも『なるべく合わせて』と書いてあるように、この設定にするまでエラーが発生しまくりました。

SANGOとプラグインの相性のせいか、他のプラグインとの兼ね合いなのか、私の環境のせいなのかも原因がハッキリ分からない状況ですので、とりあえず画像の設定と合わせておけば問題はないかと思います。

２、『関連記事表示を囲むタグ』と『各関連記事を囲むタグ』について

『関連記事表示を囲むタグ』

→左の空欄：

<center><span class="sns-btn__title dfont">Related</span></center><br>

→右の空欄：（空欄にする）

『各関連記事を囲むタグ』

→左の空欄：（空欄にする）
→右の空欄：

<br>

ここまで無事に設定が終わっていたら記事ページを開いたときに関連記事が表示されますので確認してみてください！

WordPress Popular Postsの設定

WP Popular Postsは設定ではなくウィジェットからいじっていきます。

タイトルの前/後

左の空欄：

<center><span class="sns-btn__title dfont">

右の空欄：

</span></center>

また、『投稿のHTMLマークアップ』内のデフォルトのコードに<li></li>があるかと思いますが、そちらも削除しました。

CSSを微修正

以下のコードを追加してください。

.wpp-post-title {
    font-weight: bold;
}

.sns-btn__title {
    display: inline-block;
    position: relative;
    padding: 0 25px;
    color: #cccfd7;
    font-size: 22px;
    font-weight: bold;
    line-height: 1;
    letter-spacing: 1px;
    margin: 1em;
}

これで終わりです！出来栄えは……

おわり