買って良かった睡眠系アイテム

【プラグインなし】WordPressへグラフを挿入する方法を解説!【Chart.js】

本サイトのコンテンツには、プロモーションが含まれている場合があります。

【プラグインなし】WordPressへグラフを挿入する方法を解説!【Chart.js】

ブログを運営中の人なら誰しも

  • ブログ運営報告時にグラフを載せたい。
  • 資産運用の結果をかっこよくのせたい
  • グラフがあればもっと分かりやすく記事が書けそう!

なんて思ったことがあると思います。

今回はプラグインを使用せずにグラフをWordPressの記事に挿入する方法をお伝えします。

どのテーマを使用している人でもできますし、棒グラフでも折れ線グラフでも可能です。

この記事を参考にグラフを記事に挿入するだけで、表よりも分かりやすく記事が書けますのでぜひ試してみてください。

WordPressでグラフを挿入したときの見た目

完成品の見た目は以下の通りです。

折れ線グラフだけでなく、棒グラフも載せることができます。

両者ともに、見たい部分をタップ/ホバーすることで詳細を見ることができます。

(リロードしたらわかると思いますが)表示の最中には動的に動いてくれるので、インパクトも強いですよね。

詳細を見たいという人にもわかりやすいので優秀!
そしてカッコイイ。

もちろん線の色なども変更可能ですので、ブログテーマカラーに合わせることも可能です。

【WordPressにグラフを載せる】Chart.jsの使い方

どのようにグラフを追加するのかを説明します。

コピーして、カスタムHTMLブロックに貼りつけて、グラフの数値を変えるだけです。

クラシックエディタの方は、「HTMLとして編集」の状態で貼り付けでもOKです。

Chart.jsというものを使用して、グラフを表示させます。

プラグインだとサイト全体が重くなる恐れがあるのですが、この方法だと重くなるのはグラフを載せたページのみです。

・・・といっても、微々たるものですので安心。

折れ線グラフのコード

まずは折れ線グラフのコードから。

HTML
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<canvas id="myChart" style="padding: 0px 10px 0px 10px;"></canvas>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
 type: 'line',
 data: {
   labels: ['1か月', '2か月', '3か月', '4か月', '5か月', '6か月'],
   datasets:[{
     label: 'PV',
     data: [100, 200, 400, 1000, 2000, 5500],
     borderColor: "rgba(50,205,50,0.8)",
     backgroundColor: "rgba(50,255,50,0.8)",
     fill: false,
     lineTension: 0,
   }]
  }
});
</script>

これをWordPressの編集モードを「テキスト」の状態にして貼り付けるだけでできます。

いつも記事を書いている感覚で入れ込むだけですね。

その後、数値を変えていくだけです。

数値については、以下を参考にしてください。

グラフの数値をカスタマイズ
  • 横軸の名前変える
    labelsの中を変更。〇か月の部分です。
  • グラフのタイトルを変える
    labelの中を変更。PVの部分です。
  • グラフの値を変える
    dataの中を変更。100とか200とかの場所で、labelsの数とdataの数が一致するようにしましょう。

色を変えたいなら、borderColorが線の色、backgroundColorが接点の色になっていますので、お好みで変更しましょう。

棒グラフのコード

続いて棒グラフのコード。

HTML
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<canvas id="myChart" style="padding: 0px 10px 0px 10px;"></canvas>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['1か月', '2か月', '3か月', '4か月', '5か月', '6か月'],
    datasets:[{
      label: 'PV',
      data: [100, 200, 400, 1000, 2000, 5500],
      borderColor: "rgba(30,255,30,1)",
      backgroundColor: "rgba(50,255,50,0.8)",
    }]
  }
});
</script>

同様に、テキストモードにしてWordPressに貼り付けるだけです。いつも記事を書いている感覚で挿入できるのでいいですね。

maipyon
maipyon

グラフの詳細な数値については棒グラフと変更場所は同じです。

折れ線グラフ+棒グラフのコード

最後に、複合したグラフのコードを紹介します。

PVと収益のグラフにするときとかに使えそう。

こんな感じの複合グラフができます。

上記のグラフのコードは以下の通り。

HTML
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<canvas id="myChart" style="padding: 0px 10px 0px 10px;"></canvas>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data : {
    labels: ['1か月', '2か月', '3か月', '4か月', '5か月', '6か月'],
    datasets:[{
      type: 'line',
      label: 'PV',
      data: [100, 200, 400, 1000, 2000, 5500],
      borderColor: "rgba(30,255,30,1)",
      backgroundColor: "rgba(50,255,50,0.8)",
      fill: false,
      lineTension: 0,
    },
    {
      type: 'bar',
      label: '収益',
      data: [0, 300, 650, 680, 800, 1100],
      borderColor: "rgba(54,162,255, 1)",
      backgroundColor: "rgba(54,162,235,0.8)",
    },
]}
});
</script>

くっつけた感じなので、これを元に数値をいじるだけで簡単に狙い通りのグラフが作れるのではないかと思います。

記事内に複数個グラフを挿入したい場合

1つの記事内に複数個所グラフを挿入したい場合には、コードを多少いじる必要があります。

コードをいじる場所は簡単で、myChartの後に数値を付けるだけでOKです。

分かる人向けの説明をすると、「引数の名前をページ内で重複させないようにする」だけです。
分からない人でも、3か所変えるだけで済むので安心してください。

例:1つ目のグラフはmyChart1、二つ目はmyChart2・・・
というように、グラフごとに違う名前を付けていけば大丈夫。

『myChart』と書かれている部分はすべて変更しましょう。

コードの上側の部分に変更すべき箇所が3か所ありますので、そこを変更していただければ全部表示できるようになります。

Chart.jsを使用してWordPressにグラフを挿入するメリット

メリットはいくつかあるのですが、何と言っても「プラグインを使用しなくていい」という点が大きいです。

しかも、記事内にて使用するための宣言や読み込みを行っているので、ページ速度が重くなったとしても、挿入した記事内のみ。

サイト全体への影響はありません。

プラグインだとそうはいきませんし、プラグインの脆弱性があれば危険にさらされる恐れもあるので、プラグインはできるだけ使わないのが良いですね。

プラグインの脆弱性って?

もしプラグインのセキュリティがゆるい場合、プラグイン経由で悪質なユーザーが悪さをする可能性があるという事です。

実際に起きていることなので、できればプラグインは少なめにしたいところ。

WordPressでChart.jsを使ってグラフを入れる方法まとめ

今回は、Chart.jsを使用して記事内にグラフを挿入する方法について説明しました。

テキストモードの時のカーソルの位置が原因なので、プレビューを確認してグラフがない場合、再度コードを確認し、変なものが混じってないか確認してください。

googleアナリティクスや、googleアドセンスのデータはスクリーンショットなどで載せてはいけないことになっています。

そのため、自作でグラフを作るしかない!といった場合に気軽に使えそうです。

ただ、PVやアドセンス収益の数値をそのまま使うのはGoogleの規約違反。

数値を100の位で四捨五入するなど、多少いじるようにはしましょう。

maipyon
maipyon

ちょっと難しいかもしれませんが、円グラフやレーダーチャートなどもできますので、カッコいいグラフがむちゃくちゃ簡単に描ける!Chart.js 2.0がスゴいの記事を参考にしてやってみるのもいいですね。

かっこよく、そして分かりやすいグラフを掲載して分かりやすい記事を書いてみてください。

WordPressのカスタマイズについてまとめた記事はコチラ

【コピペでOK】WordPressのカスタマイズ集15選【ほぼ必須のカスタマイズあり】 【コピペでOK】WordPressのカスタマイズ集15選【ほぼ必須のカスタマイズあり】 今までにやってきたブログカスタマイズをまとめた記事になっています。必須レベルのカスタマイズも紹介。綺麗なブログに近づけたい人に向けて、コピペでカスタマイズできるようなものを集めました。

グラフを使った記事例はコチラ

ブログ運営半年後のPV・収益を公開【初心者は継続が一番大事】 ブログ運営半年後のPV・収益を公開【初心者は継続が一番大事】 ブログ運営半年でどれくらPVが伸びるものなの?初心者がブログを始めて半年たった結果、どのくらいのPV数・収益につながったのかについて解説し、半年間で経験した失敗談を元に得た、PV上昇のためのコツなども合わせて初心者のためのアドバイスを紹介していきます。