カテゴリの人気記事を表示する方法

投稿日:


本日の人気記事BEST10

所要時間目安: 約 3

カテゴリの人気記事一覧画像

WordPress カスタマイズ 伝えたいこと 備忘録

カテゴリの人気記事一覧画像

 

記事を読んで頂いていて該当記事を読み終わった後に、同じカテゴリーに属する人気記事を表示する方法です。

せっかく訪問して頂いて記事を読んでもらった後に同じカテゴリー内で人気のある記事が表示されていたら、読んで頂ける可能性が高くなると思われます。

車に関する記事を読んでいてその下に、
同じカテゴリーの車、メンテナンスに含まれる人気記事が表示されるということです。



スポンサーリンク

目次に戻る

具体的な方法としては、

 

<!--カテゴリの人気記事を入れた場所ここから-->

<h4 class="under_single_h4">「<?php the_category(', ') ?>」の人気記事</h4>
 <div id="cateninki">
 <?php if ( function_exists('wp_is_mobile') && wp_is_mobile() ) :?>
 <?php
 wp_reset_query();
 $cat = get_the_category();
 $cat_id = $cat[0]->cat_ID;
 $cat_name = $cat[0]->cat_name;
 ?>
 <?php
 $wpp = array (
 'cat' => ''.$cat_id.'',
 'limit' => '5', 
 'range' => 'all',
 'order_by' => 'views',
 'post_type' => 'post',
 'stats_comments' => '0', 
 'stats_views' => '0', 
 'thumbnail_width' => '100', /*画像のwidth(px)*/
 'thumbnail_height' => '100', /*画像のheight(px)*/
 'title_length' => '200', 
 'stats_category' => '0', 
 'post_html' => '<dl class="clearfix"><dt>{thumb}</dt><dd><h5>{title}</h5></dd></dl>',
 ); 
 wpp_get_mostpopular($wpp);
 ?>
 <?php else: ?>
 <?php
 wp_reset_query();
 $cat = get_the_category();
 $cat_id = $cat[0]->cat_ID;
 $cat_name = $cat[0]->cat_name;
 ?>
 <?php
 $wpp = array (
 'cat' => ''.$cat_id.'',
 'limit' => '6', 
 'range' => 'all',
 'order_by' => 'views',
 'post_type' => 'post',
 'stats_comments' => '0', 
 'stats_views' => '0', 
 'thumbnail_width' => '180', /*画像のwidth(px)*/
 'thumbnail_height' => '150', /*画像のheight(px)*/
 'title_length' => '200', 
 'stats_category' => '0', 
 'post_html' => '<dl class="clearfix"><dt>{thumb}</dt><dd><h5>{title}</h5></dd></dl>',
 ); 
 wpp_get_mostpopular($wpp);
 ?>
 <?php endif; ?>
 </div>

<!--カテゴリの人気記事を入れた場所ここまで-->

 

 

以上のコードをsingle.phpの自分が表示させたい場所に記載します。

それだけでも表示はされますが、
おそらくイビツかもしれません。

そういう場合はCSSで調整します。

スポンサーリンク

当ブログのCSSは以下になります。(参考までに)

 

/*カテゴリの人気記事を記事下ここから*/


 #cateninki {
 padding-top: 10px;
 }

/* タイトル名 */
 #cateninki dd h5 {
 font-size: 16px;
 font-weight: bold;
 padding: 0px;
 margin-bottom: 5px;
 }

#cateninki dt {
 float: left;
 width: 100px;
 }

#cateninki dt img {
 width: 100px;
 }

#cateninki dd {
 padding-left: 110px;
 }

#cateninki dl {
 margin-bottom: 10px;
 padding-bottom: 10px;
 border-bottom-width: 1px;
 border-bottom-style: dotted;
 border-bottom-color: #ccc;
 }

#cateninki dl:last-child {
 margin-bottom: 20px;
 padding-bottom: 20px;
 border-style: none;
 }

/*カテゴリの人気記事を記事下ここまで*/

 

すると、以下のように表示されるようになります。

カテゴリの人気記事一覧画像

これで、
同じカテゴリーに属する人気記事が表示させたい分だけ表示されるようになり、離脱率を低く出来るかもしれません。

お試しになってみて下さい。

-WordPress, カスタマイズ, 伝えたいこと, 備忘録

関連記事一部広告

スポンサーリンク

+ クリックで展開します

おすすめ!!

加圧シェイプで24時間無意識運動状態が可能!! 引き締め効果で魅力的なシルエットをサポート!! 運動している時だけでなく、仕事やプライベート就寝中にも!! 通気性がよく、体の動かしやすい伸縮性のある素材です!! 常に体が引き締まって、着心地いい!! 毎日着たい方用にセットも充実!!

女性必見のバストアップにおすすめ!!

マンガでの商品説明を販売ページに採用しています。 商品のメリットや良さが伝わりやすいです。 ★知名度と信頼度!ニュースアプリや芸能人ブログでも話題! (インスタグラム SmartNews yahoo アメーバ crooz 楽天) ●知名度が高く購入率の高い商品です。 ●ニュースサイトの紹介でも話題となり、有名タレント、モデル等にも使用して頂きブログなどでも紹介されている信頼度の高い商品です。 ●まとめ買いが多いのが特徴です。

関連記事

はてブボタン

SNS インターネット カスタマイズ ツール 伝えたいこと 備忘録

はてブボタンオリジナル作成方法

現在のサイトには企業のホームページやサイト、そして個人のブログやサイトには、 必ずあると言っても過言ではないソーシャル系のSNSボタンです。 その中のはてなブックマークボタンのオリジナルの作成方法につ・・・続きを読む

ChromeCookie個別削除方法

WordPress 不具合 伝えたいこと 備忘録

WordPressプレビュー出来ない。権限がありません。解決方法保存版

えー、はぁ( ´Д`)=3良かった…。 一昨日から続いていたWordPressで新規投稿記事や過去記事のプレビューが出来ないという問題・不具合について、 見事(やっと)解決できたので、 備忘録としての・・・続きを読む

YouTube

WordPress カスタマイズ カスタマイズ 伝えたいこと 備忘録

YouTube動画が遅い。重い時、掲載しても遅くならない方法

すごいっ!! YouTubeの動画をブログに貼り付けても重くならない・遅くならない方法があったなんて…。 WordPressでも応用可能かと思って試してみました。 たぶん、多くのテーマでも可能なのでは・・・続きを読む

コマンドrobocopyバックアップ

PC Windows10 カスタマイズ 備忘録

Windows10でWindows.old削除でなくバックアップ方法

多くの方々がWindows10にアップグレードした後に、 Cドライブ直下に「Windows.old」というフォルダがあり、 さらに結構な容量があります。 なので、 HDD容量が少なめの方やWindow・・・続きを読む

目次に戻る

よろしかったらシェアよろしくお願いします。



この記事が良かったら
いいね!お願いします(#^.^#)

WordPressデビュー津々浦々の
最新情報をお届けします

言えないことはTwitterで!!



  • この記事を書いた人
  • 最新記事

izumi

プロフィールページ詳細

はじめまして、izumiの旦那です。医療ミスにより長胸神経麻痺になってしまい若干の障害がありブログをさせていただいています。共同運営(しばらくは単独になると思います。)になりつつありますがよろしくお願いいたします。

Follow Me !

Copyright© WordPressデビュー津々浦々 , 2019 All Rights Reserved Powered by AFFINGER5.