memocarilog

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

流れとしては、はてなからデータを受け取る→データのアドレス情報から記事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(); } ;?>

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