好きなもの、好きなだけ、盛り合わせ

【WordPress】おすすめ記事をテキスト形式で表示する方法!

   

サイト内の回遊率を高めるために、いろんな施策を試しているんですが、記事下に「おすすめ記事」を表示しているサイトをたまに見かけるので、当サイトでも同じことができるようにカスタマイズしてみました。

ちなみに、以前、記事下にピックアップ記事(画像+テキスト)を表示するカスタマイズもしていたんですが、今回のカスタマイズでは「テキスト形式」を採用しました。

▼実際の表示はこのようになります。

コピペだけでできるカスタマイズなので、ぜひ参考にしていただければと思います:D

HTMLコード

まずは、下記のHTMLコードを表示したい場所(single.phpなど)にコピペします。

<!-- 記事下ピックアップ -->
<?php $args = array(
 'numberposts' => 3,//表示する記事数(1なら1記事、5なら5記事表示)
 'post_type' => 'post',
 'orderby' => 'rand',//ランダム表示適用(ランダム表示しない場合は削除)
 'tag' => 'recommend'//追加するタグの名前
);
$recommend = get_posts($args);
if($recommend) : ?>

<div id="under-post-pickup">
<?php foreach($recommend as $post) : setup_postdata( $post ); ?>
<p>
<span>注目</span>
<a href="<?php the_permalink() ?>"><?php the_title(); ?></a>
</p>
<?php endforeach; ?>
<?php wp_reset_postdata(); ?>
</div>

<?php endif; ?>
<!--/ 記事下ピックアップ -->

テキストの左側には「注目」と表示していますが、

  • recommend
  • おすすめ
  • pickup

など、名前は適宜修正してOKです。

CSSコード

次に、style.cssに下記のコードをコピペします。

/* 記事下ピックアップ */
#under-post-pickup {
 padding-bottom: 20px;
}
#under-post-pickup a {
 text-decoration: underline;
}
#under-post-pickup span {
 background-color: #ff0000;
 color: #fff;
 font-size: 12px;
 margin-right: 5px;
 padding: 3px;
 border-radius: 2px;
}
  • テキストリンクの下のアンダーラインを削除
  • テキストリンクの左側に表示する名前の背景色
  • フォントサイズ

などは、適宜修正してみてください:D

記事にタグを追加

最後に、記事にタグを追加して終了です。タグ名を追加しない場合は表示されないようにしています。

(今回ご紹介したコードをコピペした場合は「recommend」というタグ名になります)

まとめ

バナー広告と違い、記事の中に自然に溶け込みますし、「テキストリンクの方がクリック率が高い」というデータをどこかで見た気がするので、意外と効果があるかもしれません。

「この記事読んで欲しいけど、検索エンジン経由で読まれるまでにはまだ時間がかかるな〜」なんて困っている方は、ぜひ試してみてはいかがでしょうか?

カテゴリー WordPressカスタマイズ

注目 会計ソフト「MFクラウド確定申告・経理」の使い方を徹底解説!

注目 クラウド会計ソフト「freee」の使い方とスマホでの操作方法!

注目 初めての就職・転職で失敗しないためのおすすめサービス一覧!

この記事が気に入ったらいいね!しよう

最新情報をお届けします

この記事を書いた人:シェフ

WEBメディア「MORIAWASE」の運営者。求人広告会社の元施設長で、趣味は音楽制作(DTM)。育児に奮闘中です!

閉じる

CLOSE

アーカイブ

CLOSE