コピペで使えるWordPressのサムネイル付き人気記事の表示コード

wordpressで人気記事を表示させる

そのWEBページがどのような価値があるのか。

これは「一番PVがある記事」に集約されると思います。オウンドメディアでコンテンツファーストな施策を打つにも、アフィリエイトサイトにも人気の記事の表示は必須ですね。

オーガニック検索が8割を超えるこのブログでも、価値あるページを見せたいのでサイドバーに人気記事を表示していますが、トップページのファーストビューにも数件表示しておいた方がユーザーオリエンテッドなのかと思い3件ほど表示させましたので、コードをすべて晒してます。

WordPress Popular Postsを使用

PVから人気記事を出す定番のプラグインです。まずはこちらをインストールします。ウィジェットと連携させて簡単にに扱うこともできますが、好きな場所に好きなだけ表示させたいので、出力コードはすべてマニュアルで書いていきます。

https://ja.wordpress.org/plugins/wordpress-popular-posts/

1日の人気記事を出力するコード

人気記事の表示




’range’を修正すると日間・週間・月間で計測PVが簡単に割り振れます。
{thumb_img}でリンクの内画像を出力できます。{thumb}でパーマリンク付きのサムネイルが生成されますが、今回はテキストと画像両方をリンクでくくってユーザビリティを構造させたいので画像のみを出力します。

詳しくはWordPress管理画面内のWordPress Popular Posts設定画面内に使用可能なコード一覧が記載されています。

レスポンシブ対応させるCSS

次に出力した1日のPV数による人気記事一覧をCSSでレスポンシブ対応させます。最近のブログはレスポンシブが多いので、コーティング作業が複雑になります。

/*
#################################################
## toppopular
#################################################*/

.top_popular_wrapper{
	overflow:hidden;	
	border-bottom:1px solid #CCC;
	ounter-increment:p_count;
	line-height:1.4;
}

.today_popular_title{
	line-height:2;
	background:#FFF;
	border-bottom:1px solid #CCC;
	
}

.today_popular_title span{
	padding:0 10px;
}

.top_popular{
	float:left;
	width:33%;
	border-left:1px solid #CCC;
	box-sizing:border-box;
	position:relative;
	counter-increment:p_count;
	font-size:12px;
}

.top_popular:hover{
	background:#EEE;
}

.top_popular:first-child{
	border:none;
	width:34%;
}

.top_popular:before{	
	content:counter(p_count);
	position:absolute;
	left:10px;
	top:10px;
	background:#333;
	color:#FFF;
	text-align:center;
	width:20px;
	line-height:20px;
}

.top_popular_link{
	padding:10px;
	box-sizing:border-box;
	display:block;
	overflow:hidden;
}

CSS3のcounter-incrementとcounter()のプロパティを使い、数字を自動的に出力するようにしています。人気記事などのコーティングでは定番のCSSです。レイアウト用のHTMLとCSSはお好みに合わせて変更してください。

CSS3による番号の振り分け

  1. ounter-increment:p_count /*この中の要素をカウンタする*/
  2. counter-increment:p_count /*この要素をカウントする*/
  3. counter(p_count) /*カウントを出力する*/

このように使用します。

jQueryAutoHeight.jsを使い、で高さをそろえる

PCブラウザの場合は画像の横にテキストがきますから縦幅は一定になります。しかしスマホでは画像の下にテキストがくるので、テキスト量によって人気記事のボックスの高さがまちまち。そこでjavascriptを使用して高さを揃えます。

http://www.tinybeans.net/blog/download/jquery-plugin/jquery-auto-height.html

WordPressのヘッダー部分でjavascriptを読みこませます。
jQueryのバーションは軽量化重視ならver2.xxを使うとよいと思います。古いライブラリだと動かない可能性があるので私は1.8.3あたりを好んでしようしていています。




ヘッダーにコードを書くことでClass “.top_popular”のボックスの高さを一番大きいサイズに合わせてくれます。次にjQueryAutoHeight.jsを適応させるクラスをボックス要素に付け足します

人気記事の出力HTMLに使わないCSSのクラス”heightLineParent”が書かれていたのはこのためです。

これでスマホでのレスポンシブ対応が完成です。

コメントを残す

メールアドレスが公開されることはありません。

内容をご確認の上、送信してください。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

スポンサーリンク

0
0
0
0
0
0
wordpressで人気記事を表示させる

この記事が役に立ったらいいねをしよう!

Facebookで最新情報をお届けします。

関連記事

同じカテゴリーで読まれている記事