WordPressのサイドバーウィジェットをタグ付け関連記事でカスタマイズ

 

サイドバーウィジェット,カスタマイズ,wordpress

 

ここ最近、Swift入門というプログラミングの入門記事を書いています。

Swift入門記事を読んでもらっている方に、関連する入門記事も読んでもらいたかったので、

サイドバーにタグ付けされている記事を一覧表示するようにカスタマイズしてみました。

 


サイドバーウィジェットの見た目


 


下記のようにタグ付けされている関連記事を表示することができます。


タグ付けされている単一記事を読んでいる時だけ、サイドバーに一覧を表示される仕組みです。


※トップページなどの記事一覧には表示されません。


より目立たせたかったので、項目の部分は色を変更しています。



サイドバーウィジェット,カスタマイズ,wordpress


 


カスタマイズウィジェットを追加してみよう!


 


ワードプレスの [外観] → [ウィジェット] でPHP Codeをサイドバーウィジェットに追加します。


※PHP Codeがウィジェットに表示されていない方はプラグインをインストールしてください。


 


サイドバーウィジェット,カスタマイズ,wordpress


 


 


ウィジェットを編集して、タグ付けされている関連記事を表示してみよう!


 


先ほど追加した、ウィジェットに下記のソースコードを追記してください。

<?php
if (is_singular()) {
$menu_title = ‘Swiftリファレンス’; // サイドバーメニューのタイトル
$tag_slug= ‘swift-biginner’; // タグのslug
$is_the_tag = false;
foreach(get_the_tags() as $tag) {
if ($tag->slug == $tag_slug ) {
$is_the_tag = true;
}
}
if ($is_the_tag) {
$the_query = new WP_Query( ‘tag=’ . $tag_slug );
if ( $the_query->have_posts() ) {
echo ‘<h4 class=“menu_underh2” style=“background-color: #e74c3c;”>’ . $menu_title . ‘</h4>’;
echo ‘<ul>’;
while ( $the_query->have_posts() ) {
$the_query->the_post();
echo ‘<li><a href=“‘;
the_permalink();
echo ‘”>’ . get_the_title() . ‘</a></li>’;
}
echo ‘</ul>’;
}
wp_reset_postdata();
}
}
?>


 


14行目のbackground-colorでメニューバーの色を変更することができます。


 


関連記事をサイドバーに表示によって、特集など組むことも可能ですし、


平均セッション時間も伸ばすことも可能です。


もちろん、PV数を伸ばすことも可能でしょう。


 


より、関連度が高い記事を表示して、読者さんの満足いくコンテンツを


一緒につくり上げていきましょう!


 


comments powered by Disqus