【コピペするだけ】WordPressの記事の後ろに「あわせて読みたい」リンクを自動挿入する方法

「あわせて読みたい」リンクってあるじゃないですか。

いわゆる関連記事だったり、読者を別記事に誘導したいときに設置するものですね。
同じような役割に「関連記事」リンクと言うものがあります。
「関連記事」リンクは大体のワードプレスで採用されておりページ下部に設置されています。
現在使用している「Cocoon」と言うワードプレステーマでも「関連記事」は下の方に表示されています。

ただあの「関連記事」について、読者がそこまでスクロールしてくれているのか正直なところ疑問。
通常は記事を最後まで読み終わったら基本的にはページから離脱してしまい「関連記事」まで目を通してくれません。

そこで今回は「あわせて読みたい」リンクを自動生成して記事の最後に挿入するコードを書きました。
コピペ一発でいけるので、ぜひ試してみてください。

使用方法

functions.phpの一番下に以下のコードをコピペすることで、「あわせて読みたい」リンクを挿入することができます。
挿入する記事は、現在読まれている記事と同一のカテゴリーになります。
4と言う数字を変えることで、表示される記事数が変化します。

functions.phpを編集する際は、一度編集する前のものをコピペしておくことをおすすめします。
ちょっとしたミスで画面が真っ白になるので気をつけてください。まぁ個人的には一度くらい真っ白になることを経験しておいたほうがいいと思っているんですけど。

function add_linklist_afterpost( $content ) {
echo $content;
$cat = get_the_category();
$args = array(
'posts_per_page' =&gt; 4,// この数字を変えることで表示リンク数を変更できます
'category_name' =&gt; $cat[0]-&gt;slug,
'orderby' =&gt; 'rand',
'post__not_in' =&gt; array( get_the_ID() )
);
$the_query = new WP_Query( $args );
if ( $the_query-&gt;have_posts() ) : ?&gt;
<div class="recommend-box"><header>あわせて読みたい</header>
<ul>
    <li style="list-style-type: none;">
<ul><!--?php $the_query-&gt;the_post(); ?-->
    <li></li>
</ul>
</li>
</ul>
&nbsp;

</div>
<!--?php &lt;br ?--> endif;
wp_reset_postdata();
}
add_filter('the_content', 'add_linklist_afterpost');

スタイルについてもいくつかサンプルを書いたので、好きなものを選んでみてください。
style.cssに好きなものをコピペするだけでスタイルが適用されます。

.recommend-box {
border-radius: 6px;
border: 1px solid #5f8fbf;
box-shadow: 0 2px 6px 0 #868686;
line-height: 2;
margin-top: 2.5em;
padding: 15px;
position: relative;
}
.recommend-box header {
color: #fff;
background-color: #4a84b6;
font-size: .9em;
position: absolute;
padding: 0 1em;
top: 0;
transform: translateY(-50%);
}

.recommend-box {
border-radius: 6px;
border: 1px solid #b05080;
box-shadow: 0 2px 6px 0 #868686;
line-height: 2;
margin-top: 2.5em;
padding: 10px 15px 15px;
position: relative;
}
.recommend-box header {
color: #fff;
background-color: #b05080;
font-size: .9em;
position: absolute;
padding: 0 1em;
top: 0;
transform: translateY(-100%);
}

.recommend-box--sample {
padding: 28px 15px 15px;
border-radius: 6px;
border: 1px solid #fb8c00;
position: relative;
margin-top: 1.4em;
overflow: hidden;;
}
.recommend-box--sample header {
font-size: .9em;
transform: translateY(0);
padding: 0 1em;
background-color: #fb8c00;
color: #fff;
top: 0;
left: 0;
}

とても簡単に挿入できるので、「関連記事」リンクの位置に不満のある方は試してみてください。