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%にすることでウィジェットにピタッとフィットしてくれます。
実装して管理画面を見てみると……

データポータルのレポートをWordPressに表示

できた！＼(^o^)／
これでログインするたびに目にすることになるでしょう。まぁ、個人的にはダッシュボードに出すのであればウィジェットの上部に広々と出すか、別にメニューを増やして1画面で見れるようにしたほうがいいかな。（そこまで来るともはやデータポータルを見ろという話にはなりますが……）

参考サイト

WordPress.org Common APIs Handbook: Dashboard widgets API
https://developer.wordpress.org/apis/handbook/dashboard-widgets/