WordPressでFeedを取得するダッシュボードウィジェットを自作する方法
プラグインで新しいダッシュボードを表示する
ダッシュボードウィジェットを追加するプラグインの開発手順についての記事。
シンプルな状態で管理画面のダッシュボードに新規ウィジェットを追加した上で、そのウィジェットを拡張していく手順を紹介していくエントリー。
ウィジェットの種類
WordPressのウィジェットには2種類存在する。
- サイドバーウィジェット
- ダッシュボードウィジェット
本エントリーで対象とするのは後者のダッシュボードウィジェットになる。サイドバーウィジェットは、管理画面の
外観 → ウィジェット
で設定でき、WordPressのAPIを利用することでダッシュボードウィジェット同様、プラグインとして制御されたウィジェットを開発することが可能になっている。サイドバーウィジェットについては別の機会に作成方法を記事にする予定である。
作り方
WordPressのプラグインには標準プラグイン情報が必要。今回は以下のヘッダーを追加した。
/* Plugin Name: Dashboard Widget Feed Plugin Plugin URI: http://dim5.net/ Description: plugin to get feed lists in WordPress dashboard widgets Version: 1.0 Author: dim5.net Author URI: http://dim5.net/ */
このコードを適当なファイル名(今回はdashboard-widget-feed.phpとした)で、
wp-content\plugins
に保存する。この作業により、WordPressの管理画面のプラグインリストに
Dashboard Widget Feed Plugin
というプラグインが追加されたことが確認できる。プラグインを有効化することが出来るが、有効化しても特に効果が無いプラグインとなっている。
標準プラグイン情報が有効に機能していることが確認できたので、シンプルなダッシュボードウィジェットを追加する。
add_action( 'wp_dashboard_setup', 'dashboard_widget_feed' );
wp_dashboard_setupアクションフックを利用することで管理画面のダッシュボードにウィジェットを追加することが可能。また、wp_network_dashboard_setupを利用してマルチサイト環境下のネットワーク管理画面にウィジェットを追加することが出来る。
dashboard_widget_feedでwp_add_dashboard_widgetを利用して新しいダッシュボードウィジェットを追加する。
function dashboard_widget_feed() {
wp_add_dashboard_widget('dw_feed', 'Feed Dashboard', 'dashboard_widget_feed_get');
}
引数として3番目に設定したコールバック関数dashboard_widget_feed_getは、ウィジェットのコンテンツを返す関数になる。暫定的に以下のように設定しておく。
function dashboard_widget_feed_get()
{
echo "This is feed list.";
}
ここまでの作業でシンプルなダッシュボードウィジェットを追加することができた。
Feedで取得したコンテンツを表示
空のダッシュボードウィジェットが作成できたので、Feedの情報を追加する。今回はamazonの商品情報をfeed urlに指定した。
function dashboard_widget_feed_get()
{
$feed_url = 'http://www.amazon.co.jp/rss/bestsellers/books?tag=assoc-tag';
echo '<div class="widget">';
wp_widget_rss_output( array(
'url' => $feed_url,
'title' => 'Feed Amazon',
'items' => 3,
'show_summary' => 1,
'show_author' => 0,
'show_date' => 1
) );
echo '</div>';
}
dashboard_widget_feed_getを上のコードに置き換えると、amazonの商品情報を取得しダッシュボードに表示することが出来るようになった。
wp_widget_rss_output関数でFeedデータの取得からHTMLの生成まで行っている。
Feed URLの変更フォームを作成
amazonの商品情報を表示することができたので、今度はFeed URLを他のものに変更できるフォームを用意する。
ダッシュボードウィジェットにフォームを追加するためには、wp_add_dashboard_widgetのcontrol_callbackを4番目の引数に設定することで対応可能。
上の方に載せたdashboard_widget_feedを下のコードに変更する。
function dashboard_widget_feed() {
wp_add_dashboard_widget('dw_feed', 'Feed Dashboard', 'dashboard_widget_feed_get', 'dashboard_widget_feed_form');
}
4番目の引数に指定したdashboard_widget_feed_formコントロールコールバック関数では、
- 入力フォームの定義
- POSTデータ処理
を以下のコードで行う。
function dashboard_widget_feed_form() {
// POSTリクエストか？
if ( isset( $_POST['feed_url'] ) ) {
$feed_url = esc_url_raw( $_POST['feed_url'] ); // パラメータのエスケープ処理
update_option( 'dashboard_widget_feed', $feed_url ); // wp_optionsテーブルに保存
}
$feed_url = get_option( 'dashboard_widget_feed'); // dbからfeed urlを取得
?>
<label for="feed">
フィード URL: <input type="text" name="feed_url" id="rss_feed" value="<?php echo esc_url( $feed_url ); ?>" size="45" />
</label>
<?php
}
コードのポイント部分にコメントで説明を追加したので参考にしてほしい。送信ボタンによるPOSTリクエストが発生した場合には、WordPressのupdate_optionでデータベースにfeed urlを格納する処理を行っている。この処理により、
- dbにfeed urlがある場合はそのfeedを取得
- dbにfeed urlが無い場合はamazonのfeedを利用
という条件分岐をすることが出来るようになる。
そのため、dashboard_widget_feed_getを一部変更する。
// dbからfeed urlを取得
$option = get_option('dashboard_widget_feed');
// $optionが真ならdbのurlを、falseの場合(初期状態)はamazonのfeedを利用
$feed_url = ($option) ? $option : 'http://www.amazon.co.jp/rss/bestsellers/books?tag=assoc-tag';
ここまでの作業でFeed URLの変更フォームが完成したことになる。
WordPressのDashboard Widgets APIを活用すれば、アイデア次第で効果的なダッシュボードにすることが出来る。