Google trendsの埋め込み方

以前の記事でGoogleトレンドのグラフ(javascript)をポストするときにjavascriptを直接投稿できなくてなかなか困りました。その際に行ったことを纏めます。

「wordpress google trends」で検索するといくつかのサイトがヒットします。wordpressのpluginでGoogle Trends Shortcodeというのもありましたが、functions.phpに記載することで同様のことが実現できるのでこちらを採用することにしました。

今回の修正で参考にしたのは以下のサイトです。

使用しているテーマのディレクトリにあるfunctions.phpに以下のコードを追加します。

function wps_trend($atts){
        extract( shortcode_atts( array(
                'w' => '500',           // width
                'h' => '360',           // height
                'q' => '',              // query
                'geo' => '',            // geolocation
        ), $atts ) );
        //format input
        $h=(int)$h;
        $w=(int)$w;
        $q=esc_attr($q);
        $geo=esc_attr($geo);
        ob_start();
?>
<script type="text/javascript" src="https://www.google.com/trends/embed.js?hl=ja&q=<?php echo $q;?>&geo=<?php echo $geo;?>&cmpt=q&content=1&cid=TIMESERIES_GRAPH_0&export=5&w=<?php echo $w;?>&h=<?php echo $h;?>"></script>
<?php
return ob_get_clean();
}
add_shortcode("trends","wps_trend");

functions.phpの先頭と終わりは(当たり前ですが…)”<?php”と”?>”になっている必要があります。

後はGoogle trendsの”</>”ボタンで表示された埋め込みスクリプトの内容をwordpressのショートコードに写すだけです。

<script type="text/javascript" src="//www.google.co.jp/trends/embed.js?hl=ja&q=movabletype,+wordpress,+Drupal,+Joomla,+osCommerce&geo=US&date=1/2004+125m&cmpt=q&content=1&cid=TIMESERIES_GRAPH_0&export=5&w=500&h=330"></script>

ショートコードはこちら。



など

ショートコードの属性は最低限です。他にhlやcid、dateなどありますが、必要に応じてfunctions.phpに埋め込むコードを修正することで対応することができます。新しい属性の値についてはGoogle trendsの埋め込みscriptを参照すれば必要な値がわかります。

ショートコードの作り方は知らなかったのですが、今回の対応で知ることができました。他にも色々と応用が利きそうです。

最後に例としてスポーツのトレンドチャートを表示します。では。