【WP】はてブされた記事をサムネイル付きでランキング表示するプラグイン

今回のエントリーはWordpressのプラグインです

今回も、前回に引き続き、web屋らしいエントリーをしたいと思います。

私の仕事は主にプログラムを作ったり、サーバを管理する事が多いのですが、Wordpressのテンプレートを作っているという業務もあるため、Wordpressをクライアント様の案件に利用する機会が多くあります。

このblogがWordpressを利用しているのは、「こんな機能あれば良くない？」というアイデアが出てきた際、実際に動いているblogでデバッグするという場というのが理由だったりします。

そして、時々、アイデア出しの雑談の中で「こんな機能があれば良いよね」と誰かが言ったのを受けて「じゃ、そういうウィジェットを作れば汎用性があっていいよね」という流れになったりするわけです。

今回ご紹介するwordpressウィジェットは「自分がエントリーした記事で、はてなブックマーク数の多い順ランキングが、サムネイル（アイキャッチ）付きでサイドバーに表示できれば便利やんね？」というアイデアから生まれたものです。

「お、面白そうなプラグインやん！」というwordpressユーザーの方、宜しければ使ってみて下さい。

 

使い方

まずは、こちらからプログラムのダウンロードをして下さい。
 
はてブ数が記事ランキングを表示するWordpressプラグイン
 

ダウンロードされるファイルはHatenaBookmarkRanking.zipというzip圧縮されたファイルになります。

このファイルを、wodpressの管理画面にある「プラグイン」→「新規追加」で、アップロードをします。

 

アップロードが終わったら、プラグインのリストから、「HatenaBookmark Ranking」のプラグインを有効化して下さい。

 

有効化すると、ウィジェットのリストの中に、「はてなブックマークランキング」が追加されているので、表示をしたい領域にドラッグします。

例として「メインサイドバー」にドラッグをしてみました。

 

 

ドラッグ後、メニュー右の▼を押すと、設定メニューが表示されるので、枠に表示したい名称を「タイトル」の枠に、ランキングとして表示をしたい件数を「表示ランキング数」に入力して下さい。
（表示ランキング数の最大値は10です）

あとは「保存」ボタンを押せば設定完了です。

対象のサイトのURL配下にある、はてなブックマークに入れられた記事が、指定された件数分だけ表示されます。

ただし、はてなブックマークに入れられている記事が、指定された記事よりも少ない場合は、入っている記事数までの表示となります。

 

プログラムの解説

「使い方はこんなに簡単ですから、ダウンロードして使ってみて下さい」だけでは面白くないので、少しだけプログラムの解説をしておきたいと思います。

WordPressのプラグインを作成してみたいんだけど難しそう…と思っている方でも、こんなに簡単に作れるんだ！と思えてしまうくらいシンプルですので、ぜひ参考にして頂ければと思います。

 

WordPressの宣言をする

まずは、このファイルがWordpressのプラグインであるという宣言をしています。
下記のように、各項目を記述することで、Wordpressがプラグインの情報を読み取って、プラグインリストの中で情報を出力してくれるようになります。

 

クラスの宣言

クラスを宣言します。
class の後に「このプラグインのクラス名」を入力し、extends WP_Widget で、WP_Widgetを継承するようにします。
$name = の後の名称は、ウィジェットを配置する画面での表示名称になります。

このクラスは、他のプラグインと重複しない名称を付ける必要があるので、唯一無二のクラス名になるように、このプラグインの内容を示すような名称となるよう「HatenaBmRkg」としてあります。

 

ウィジェット表示部分のプログラム

表画面にウィジェットを表示させる宣言をしています。
この表記はお決まりという部分ですので、「定型文」としてとらえて下さい。

 

データベースに登録された、設定内容を読み込みます。
今回は、「タイトル」と「表示ランキング数」を、ウィジェットの設定項目にしていますので、この2つを読み込みます。

 

はてなブックマークのAPIに、このblogのURLをパラメータとして渡し、JSONPで受け取ります。
取得したデータを、preg_match_allで、各blog毎に分解し、$json変数に配列として取得します。
APIで正常に取得でき、$json[1]の配列にデータが存在する場合に、下記の表示処理を始めますが、まず最初に「現在の表示件数」を0件でリセットしておきます。

 

表示をするエリアに、<div>を入れて、表示エリアの装飾をし、そのエリア中に、タイトルなどを表示するようにしています。

 

$json[1]の配列をforeachのループ処理をします。
現在の表示件数と、データベースから取得した表示ランキング数を比較し、設定件数に達していない場合は、データの表示をします。
url_to_postid関数を利用し、URLから記事のIDを取得しておきます。

 

取得しておいた記事IDを指定し、記事にアイキャッチ画像が設定されている場合は、アイキャッチを表示するようにします。
表示をする際、アイキャッチの画像サイズを、80×80のサイズにしています。 

もし、アイキャッチ画像のサイズを変更したい場合は、下記のいずれかを指定して下さい。
get_the_post_thumbnail($postid, ‘thumbnail’); // サムネイル
get_the_post_thumbnail($postid, ‘medium’); // 中サイズ
get_the_post_thumbnail($postid, ‘large’); // 大サイズ

 

記事IDを指定して、記事のタイトルを取得します。
はてなブックマークのAPIからもタイトルを取得することは出来るのですが、はてなブックマークの仕様で、<title>に記述された内容が記事のタイトルとなるため、記事の文字だけでなく、サイト名などが入った文字が返却されてきたり、タイトルが長いと途中で省略されてしまいます。

そこで、get_the_titleを用いて、記事のタイトルを再取得するという処理をし、記事のリンクを設定します。

 

表示エリアを終了するためのタグ表示をします。

 

最後に、同梱しているcssファイルを読み込む処理をします。

 

管理画面の設定ボタンでデータベースに書き込む処理

管理画面上でpostされた「タイトル」と「表示ランキング数」をデータベースに登録する関数です。
function update の記述などは定型文としてとらえて下さい。
なお、今回のはてなブックマークAPIは、最大で10件の件数を返却しますので、それ以上の件数が入力された場合は、10件となるように補正をかける処理を入れています。

 

フォームエリアを表示する

ウィジェットのフォームエリアを表示するための処理です。
データベースから、登録されている「タイトル」と「表示ランキング数」を取得し、フォームの初期値として表示するというだけの処理です。
function form($instance) { も定型文としてとらえて下さい。

 

ウィジェットにクラスを読み込みさせる宣言をする

ここまで記述したクラスを、Wordpressのウィジェットとして利用できるように宣言をします。

 
以上、簡単にプログラムの解説をしてきましたが、非常にシンプルなウィジェットですので、特に難しい部分はなかったかと思います。
 
また、同梱しているcssも非常にシンプルな設定しか記述しておりませんので、classを追加して表示のカスタマイズをするといった場合でも、簡単に出来るのではないかと思います。

 

ここまで読んで頂いて恐縮ですが、実はオフィシャルのJSあります

さて、ここまでWordpressのウィジェットについて記述してきましたが、実は、はてなブックマークのランキングを表示するJSスクリプトがオフィシャルで用意されています。

 

今回のシステム系blog、いかがだったでしょうか。
また「あれば便利かな？」と思うようなプログラムを思いついたら、また記事にするかもしれません。
 
もし「こんな機能は出来ないですか？」などアイデアやご要望があれば、コメント頂ければ次回エントリーの参考にさせて頂きたいと思います。
（あくまでも参考なので、出来るかどうかは保証出来ませんので、あらかじめご了承下さい）