WordPressで無料のオープンソースJavaScriptライブラリのChart.jpを使って、チャートを表示させる方法を紹介します。WordPress特有の癖や表示速度なども考慮しています。
はじめに
Chart.jpはMITライセンスの下で利用できる無料のオープンソースJavaScriptライブラリです。
HTML5キャンバスでチャートの作成ができます。
公式サイト
日本語のドキュメント？
WordPressでChart.jpでチャートを表示させる
以下の参考サイトにもあるようにChart.jpを表示させることは可能です。
しかしWordPress特有なところがあり、少しハマったので皆さんの参考になれば幸いです。
参考サイト
なお、今回は、Chart.jpの説明は省略します。
Javascript（JS）を外部ファイルとして読み込む
各ページに表示させるなどの場合、テーマのfunctions.phpを編集するのが常套手段です。
子テーマを利用している場合としていない場合で少し異なりますが基本は同じです。
function chartjs_scripts() {
if (is_single(array(123))){
wp_enqueue_script(
'Chart.min.js',
'//cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js',
array(),
false,
true
);
wp_enqueue_script(
'chartjs-plugin-annotation.min.js',
'//cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/0.5.7/chartjs-plugin-annotation.min.js',
array(),
false,
true
);
}
}
function MyJavascript_scripts() {
if (is_single(array(123))){
wp_enqueue_script(
'MyJavascript.js',
get_stylesheet_directory_uri().'/MyJavascript.js',
array(),
false,
true
);
}
}
add_action( 'wp_enqueue_scripts', 'chartjs_scripts' );
add_action( 'wp_enqueue_scripts', 'MyJavascript_scripts' );以下は、ソースの説明です。
外部ファイルを読み込む
Chart.min.jsとプラグインのchartjs-plugin-annotation.min.jsなどはwp_enqueue_scriptを使って読み込ませます。
wp_enqueue_scriptのパラメーター
| パラメータ | 意味 | 初期値 |
|---|---|---|
| $handle | 識別名（一意の名称 | ー |
| $src | JSのパス | false |
| $deps | 本JSが読み込まれる前に読むこむJSの$handle | array() |
| $ver | JSのバージョン | false |
| $in_footer | JSを読み込む場所：true=header、false=footer） | false |
自分で作成したJavascript（JS）を外部ファイルとして読み込む
自分で作成したJSが短ければ記事の本文に記載することも可能ですが、長いプログラムの場合は、Wordpressが自動でPタグを入れたりする場合がありますのでおすすめできません。
自分で作成したJSは外部ファイルにすることが最良だと思います。
JSのアップロードあ「メディア」からはアップロードできません。
FTPソフトでアップロードします。
アップロード先は、テーマの子テーマフォルダが最適だと思います。
wp_enqueue_scriptの$srcに記載するパスは以下のどちらかで指定する。
- 子テーマを利用している場合
- get_stylesheet_directory_uri().’/MyJavascript.js’,
- 子テーマを利用していない場合（親テーマのfunctions.phpを使う
- get_template_directory_uri().’/MyJavascript.js’,
記事のページIDを使って表示させるページを指定する
ライブラリを全ページで読み込むと、表示速度の遅延につながりますので、ページIDを指定して読み込ませることにします。
if (is_single(array(123))){
123がページIDになり、記載してあるページID場合に読み込ませます。
ここでの注意が、is_singleはfunction内でしか利用できないということです。add_actionの前に同じようにIF文を入れたいところですが、使えないようです。
ちなみに、他のglobal $postやthe_ID()、get_post()、get_post_field()も同様です。
この方法であれば、私のようにURLのパーマリンク設定を%postname%/としていてもページIDで振り分けることができます。
複数ページの場合は、array(123)をarray(123,456)のようにカンマ区切りで追記すればいいです。
ページにChart.jpを表示させる
基本的には旧エディタのテキストに切り替えて以下のソースを追加するだけです。
<div><canvas id="canvas" height="100"> </canvas></div>
ここの注意が、WordPressが勝手にソースを消してしまう恐れがあります。
上記のように、
- canvasタグの間にスペースを入れる
- divタグなどでcanvasタグを隙間なく挟む
とすれば、ソースが消されることはないようです。
補足
JS内でCSVファイルなどを読み込ませる場合は、CSVファイルをWordPressの管理画面のメディアからアップロードします。JS内は、ドメインからのルートパスを記述することをおすすめします。
コメント