WordPressのダッシュボードにウィジェットを追加する

dashboard

今回は、WordPressのダッシュボードにオリジナルウィジェットの追加方法をご紹介したいと思います。
ダッシュボードには、デフォルトの状態で、4つのウィジェットが表示されていると思うのですが、ここにオリジナルの【マイウィジェット】を追加したいと思います。

利用用途ですが、正直考えると色々とありすぎて一概には言えないのですが、WordPressで制作したクライントに向けての、【投稿の方法&利用方法】や【いつでも連絡出来るように担当した担当者の名前と連絡先】など利用方法はアイデア次第では色々なように使えると思います。

意外と実装すると便利な場面もあると思いますので、こんなことも出来るんだーぐらいの気持ちで見てもらえればいいかなと思います。

ダッシュボードにオリジナルウィジェットを実装方法

ダッシュボードにオリジナルのウィジェットを実装するには、【wp_add_dashboard_widget】関数を利用して追加します。
【wp_add_dashboard_widget】については、下記リンク先をご覧ください。

ダッシュボードウィジェット API

また、add_actionでwpdeshboard_setupをアクションフックすることでダッシュボードにオリジナルのウィジェットを表示しています。
今回は、簡単な文字のウィジェットを追加してみたいと思います。
下記コードを【functions.php】に貼り付けてください。

/*-------------------------------------------*/
/*	ダッシュボードにオリジナルウィジェットを追加
/*-------------------------------------------*/
add_action( 'wp_dashboard_setup', 'my_dashboard_widget' );
function my_dashboard_widget() {
	wp_add_dashboard_widget(
	'my_widget', //ウィジェット スラッグ 
	'Glow-Factory', //ウィジェット タイトル
	'my_widget_display' //ウィジェット コンテンツ
	);
}

function my_widget_display() {
    echo 'Glow Factory(グロウファクトリー)は、巷で流行のWordPressテーマ・テンプレートを無料版70%・有料版30%(と言いたいです)で配布・販売をしているWEBサイトです。ブログ・ビジネス・ポートフォリオ・レスポンシブ・ギャラリー・ネットショップにご利用いただける高品質のWordPressテーマ・テンプレートを配布・販売しております。';
}

上記コードを貼り付け終えたら、ダッシュボードを確認すると下記のように表示されていると思います。

dashboard

上記まで、ダッシュボードにオリジナルウィジェットを追加が出来ました。

RSS情報を表示するウィジェットをダッシュボードに表示し任意のURL変更フォームを設置

RSS情報表示し任意のURL変更フォーム実装する方法は、下記記事が大変わかりやすく参考にさせていただきました。

それでは、参考にさせていただきました実装方法をご紹介します。
ダッシュボードに任意のRSSを表示するには、【functions.php】に下記コードを貼り付けて下さい。

add_action( 'wp_dashboard_setup', 'my_dashboard_widget_rss' );
function my_dashboard_widget_rss() {
	wp_add_dashboard_widget(
	'my_widget_rss', //ウィジェット スラッグ 
	'Glow-Factory-RSS情報', //ウィジェット タイトル
	'my_widget_display_rss', //ウィジェット コンテンツ
	'dashboard_widget_rss_form' // (オプション) ウィジェットオプションフォームの送信を処理し、フォーム要素を表示する関数の名前
	);
}

function my_widget_display_rss() {
	?>
    <?php 
		// dbからfeed urlを取得
		$option = get_option('dashboard_widget_rss');
		// $optionが真ならdbのurlを、falseの場合(初期状態)は任意のURLを利用
		$rss_url = ($option) ? $option : 'http://glow-factory.com/feed/';
	?>
     
    <div class="widget">
     
    <?php wp_widget_rss_output( array(
        'url' => $rss_url,
        'title' => 'Glow-Factory-RSS',
        'items' => 5,
        'show_summary' => 1,
        'show_author' => 0,
        'show_date' => 1 
    ) );
    ?>
    </div>
	<?php
}

function dashboard_widget_rss_form() {
 
    // POSTリクエストか?
    if ( isset( $_POST['rss_url'] ) ) {
        $feed_url = esc_url_raw( $_POST['rss_url'] ); // パラメータのエスケープ処理
    update_option( 'dashboard_widget_rss', $rss_url ); // wp_optionsテーブルに保存
    }
  
    $rss_url = get_option( 'dashboard_widget_rss'); // dbからfeed urlを取得
     
?>
<label for="feed">
RSS URL: <input type="text" name="rss_url" id="rss_feed" value="<?php echo esc_url( $rss_url ); ?>" size="45" />
</label>
<?php
}

上記コードを貼り付けると、下記のようにRSS情報ウィジェットがダッシュボードに表示されます。

dashboard1

また、設定をクリックすると任意のURLを入力する送信フォームが表示されます。

dashboard2

コード側のRSSURLには、初期状態では、当サイトのURLを表示していますので、利用する場合は必ず変更して下さい。

こちらのダッシュボードにオリジナルウィジェットの実装を応用すれば、アイデア次第でとても便利な機能だと思いますし、WordPress人気記事表示プラグイン【Popular Posts】を利用すれば、その日の人気記事をダッシュボードに表示させすぐに確認も出来ますね。
人それぞれで、利用の仕方なども変わってくると思いますので、もし良かったら【こんな使い方してます。】ってのがありましたらコメントしてくれると嬉しいです。

Popular Postsを利用したその日の人気記事を表示するウィジェットの表示方法も書き終わったあとに気づきましたのでwww、この記事で【一応】後日記載したいと思います。

こちらの記事をシェアする

こちらの記事があなたのお役にたちましたら、シェアしていただけますと大変嬉しく今後のブログ更新の糧となりますのでどうぞよろしくお願いします。(^^♪

About

Glow-Facotryでは、無料・有料のWPテーマを配布・販売サイトです。また、Web関連やWPの記事・日常的(ゲームも)なことをブログを利用して発信して行きたいと思っております。
よかったら下記のフォローをお気軽にお願いします。

関連記事

コメント

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

PREVIOUS toolbar-0

【初心者記事】WordPressの管理ツールバーを非表示にする方法

NEXT wp-email-login

WordPressでユーザーがメールアドレスでログインする方法