[WordPress] はてなAPI から新しくクエリを作って人気記事を表示する

[WordPress] はてなAPI から新しくクエリを作って人気記事を表示する

ブログのテーマを作りかえました!トップページの右サイドに はてなAPI からブックマークが多い5件を Popular Post として表示することにしました。このブログで行った、はてなAPI 情報を元に WordPress のクエリを作成し、表示するまでをまとめてみました。

はてなブックマーク人気記事をPHPで表示する方法は過去に記事にしています。
PHPを使ってはてなブックマークの人気エントリーを表示する | memocarilog

流れとしては、はてなからデータを受け取る→データのアドレス情報から記事IDを取得し配列データにする→配列を元にクエリを作成する→ループで記事情報の表示 という感じです。

最終的なコード」は下のほうになります。

はてなAPIからデータを受け取る

まず、以下のコードではてなAPIから人気記事データを受け取ります。過去記事では cURL を使っていましたが、このくらいコードの受け取りなら file_get_contents で問題ないようなので、file_get_contents を使っています。

// ↓ 'http://〜' にデータを取得したいアドレスを記入する。
$url = 'https://memocarilog.info/';
// ↓ はてなにアドレスを送って情報をもらう
$jsonp = file_get_contents( "http://b.hatena.ne.jp/entrylist/json?sort=count&url=".urlencode( $url ) );
// ↓ jsonp 形式でかえってくるので json 形式に変換する
$json = substr($jsonp,1,-2);
// ↓ PHP で扱えるように配列に変換する
$hatenas_lists = json_decode($json, true);

はてなAPIのURLから記事IDを調べて記事IDのみの配列をつくる

前項のコードで以下のようなデータが $hatenas_lists にブックマークが多い順で10件入ります。

array(10) {
  [0]=>
  array(3) {
    ["link"]=>
    string(51) "https://memocarilog.info/wordpress/theme-custom/3554"
    ["count"]=>
    string(2) "65"
    ["title"]=>
    string(82) "Wordpressの投稿記事内の画像の最初の1枚をサムネイルとして..."
  }
  [1]=>
  array(3) {
    ["link"]=>
    string(35) "https://memocarilog.info/jquery/5217"
    ["count"]=>
    string(2) "48"
    ["title"]=>
    string(81) "jQueryで作るスクロールしたら出現してスクロールに追随し..."
  }
  〜 こんな感じのが10件分入っています 〜

このデータの URL([“link”])より、記事IDを調べます。

記事ID を調べるには url_to_postid() を使います。以下のように、url_to_postid( $url ) の $url に アドレスを渡すと、記事IDを返してくれます。($postid に記事IDが入ります)

<?php $postid = url_to_postid( $url ); ?>

上記までのことを記事の件数分1つ1つに行うようにすると以下のようなコードになります。
以下のコードでは上位5件分のIDが $post_ids に配列で入ることになります。

$count = 0;				      	       
foreach($hatenas_lists as $hatenas_list){
	// ↓5件以外の件数で表示したい場合は数字を変更して下さい。
	if( $count < 5 ){
		$htn_link = $hatenas_list['link'];
		// ↓ アドレスから記事IDを取得し配列にいれる
		$post_ids[] = url_to_postid( $htn_link );
		$count++;
	}
}  

IDの配列を元に新しくクエリを作成する

以下のように WP_Query で記事IDの入った配列からクエリを作ります。

$post_ids_query = new WP_Query ( 
 	array( 'post__in' => $post_ids )
);

ただこのままだとループで表示した際に、配列の順番ではなくなってしまうため、posts_orderby フィルターを使って順番を指定します。posts_orderby フィルターを使うとSQL文の ORDER BY で順番を変更できるようになります。コードは以下のようにし、$post_ids_query = new WP_Query() よりも前に記述します。

global $fieldid;
$fieldid = 'FIELD(ID, '.implode( ', ', $post_ids ).')';
// ↑ 「 FIELD(ID, id番号, id番号, id番号, id番号 」のようなSQL文になるように配列を統合する。

function filter_orderby($orderby = '') {
  	global $fieldid;
  	$orderby = $fieldid;
  	// $orderby を 先に定義した $fieldid の順番にする
   	return $orderby;
}
add_filter('posts_orderby', 'filter_orderby');

これで新しいクエリができました!あとはループ内で表示するだけです。

はてなAPIからクエリを作るまでをまとめたコード

ここまでのコードをまとめたのが以下になります。これをテンプレートファイルへ記入します。

<?php 
	$url = 'https://memocarilog.info/';
	$jsonp = file_get_contents( "http://b.hatena.ne.jp/entrylist/json?sort=count&url=".urlencode( $url ) );
	$json = substr($jsonp,1,-2);
	$hatenas_lists = json_decode($json, true);
			
	$count = 0;				      	       
	foreach($hatenas_lists as $hatenas_list){
		if( $count < 5 ){
			$htn_link = $hatenas_list['link'];
			// ↓ アドレスから記事IDを取得し配列をつくる
			$post_ids[] = url_to_postid( $htn_link );
			$count++;
		}
	}     
	
// idの配列から新しいクエリを作る
	
	global $fieldid;
	$fieldid = 'FIELD(ID, '.implode( ', ', $post_ids ).')';

	function filter_orderby($orderby = '') {
		global $fieldid;
	 	$orderby = $fieldid;
	 	return $orderby;
	}
	add_filter('posts_orderby', 'filter_orderby');
	 
	$post_ids_query = new WP_Query ( 
		array( 'post__in' => $post_ids )
	);
?>

ループ内で記事情報を表示する

あとは通常の投稿と同じようにループで記事情報を表示したりします。

if( $post_ids_query -> have_posts() ){
while ( $post_ids_query -> have_posts()) : $post_ids_query -> the_post(); ?>

	<div>
		<?php if(has_post_thumbnail()) { the_post_thumbnail(); } ?>
		<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
	</div>

<?php endwhile; wp_reset_query(); } ;?>

これで、リンク付きの記事タイトルとサムネイルの表示ができました。

リンク付きの記事タイトルとサムネイルの表示例

Related Article

No Comments & Tracbacks

Leave a Comment

Emailは公開されません。*は必須項目です。


*


Categorys

Tags

CSS3 ダッシュボード ヘッダー トラブル コードサンプル スライドショー コンテンツ 素材 jQueryプラグイン Facebook php 引っ越し お知らせ JavaScript CSS カテゴリー Shareボタン IE 投稿タイプ seo Photoshop レスポンシブ Macアプリ ナビゲーション タクソノミー HTML5 WPセキュリティ Git カスタムメニュー サイドバー PHPリファレンス SVG query_posts API WP使い方 iTunes データベース コメント function RSS 条件分岐 get_posts() スマートフォン Sass/Compass マルチサイト機能