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

ランキング情報が取得出来ないクリティカルな問題が出たので修正しました。

以前に、【WP】はてブされた記事をサムネイル付きでランキング表示するプラグインとして、公開していたプログラムで「情報が取得できない」というメッセージをいただいたので、修正を致しました。

既にお使いの方はプログラムの一部修正を、これからお使いいただく方は、ファイルの取得をしていただければと思います。

既にお使いの方の修正箇所

既に以前のプログラムをお使いの方は、下記部分を変更していただければ、データの取得が可能になります。

変更前

変更後

お手数をおかけいたしますが、上記のように修正いただければ幸いです。

 

使い方

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

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

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

 

plugin_view

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

 

ウィジェット

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

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

 

add_widget

ドラッグ後、メニュー右の▼を押すと、設定メニューが表示されるので、枠に表示したい名称を「タイトル」の枠に、ランキングとして表示をしたい件数を「表示ランキング数」に入力して下さい。
(表示ランキング数の最大値は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を追加して表示のカスタマイズをするといった場合でも、簡単に出来るのではないかと思います。

コメントを残す

このページの先頭へ