目次
GoogleデータポータルとWordPressのコラボ
先日データポータルのリモートセミナーを行った際に「WordPressのダッシュボードにも表示できるんですよ」と発言したらアンケートで「実装方法を知りたい」という声があったので復習も兼ねて記事にしました。
データポータルのレポート作成
まずはデータポータルでレポートを作成します。この作り方は割愛。こんな感じですね。

レイアウトのキャンパスサイズで横幅をダッシュボードのウィジェットサイズぐらいにあわせておきます。横幅を400pxぐらいにしておきましょう。

作成したレポートの共有
レポートが出来上がったら共有する準備をします。データポータルの画面右上にある「共有」ボタンの下矢印をポチッと押して「レポートを埋め込む」を選択します。

すると埋め込み用のiframeのコードが生成されますので、これをコピーします。これで準備完了。

WordPress側の準備
共有用の埋め込みコードを手に入れたら、WordPressにこのコードを実装します。テーマのfunctions.php
に以下のように記述しましょう。
/**
* ダッシュボードにウィジェットを追加する。
* この関数は以下の 'wp_dashboard_setup' アクションにフックされています。
*/
function example_add_dashboard_widgets() {
wp_add_dashboard_widget(
'example_dashboard_widget', // ウィジェットのスラッグ.
'データポータル', // タイトル
'example_dashboard_widget_function' // 表示用の関数
);
}
add_action( 'wp_dashboard_setup', 'example_add_dashboard_widgets' );
/**
* ダッシュボードウィジェットのコンテンツを出力する関数を作成する。
*/
function example_dashboard_widget_function() {
// ここでデータポータルのiframeを指定する
echo '<iframe width="100%" height="500" src="https://datastudio.google.com/embed/reporting/xxxxxxxxxxxxxxxx/page/1M" frameborder="0" style="border:0" allowfullscreen></iframe>';
}
19行目のecho
している部分に埋め込み用のコードを貼り付けます。ポイントは埋め込みコードのiframeタグのwidth属性の値を400から100%に変更している点です。WordPressの管理画面はレスポンシブ+リキッドデザインでできていて、画面の幅でウィジェットの幅が変わることがあるので、100%にすることでウィジェットにピタッとフィットしてくれます。
実装して管理画面を見てみると……

できた!\(^o^)/
これでログインするたびに目にすることになるでしょう。まぁ、個人的にはダッシュボードに出すのであればウィジェットの上部に広々と出すか、別にメニューを増やして1画面で見れるようにしたほうがいいかな。(そこまで来るともはやデータポータルを見ろという話にはなりますが……)
参考サイト
- WordPress.org Common APIs Handbook: Dashboard widgets API
- https://developer.wordpress.org/apis/handbook/dashboard-widgets/