Cocoonフォーラム

2018.02.102023.01.25

書き込みの前に以下の3点をご確認ください。

1つのトピックにつき1つの質問を書き込んでください
不具合・カスタマイズ対象ページのURLを提示し高速化を無効にしてください
該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります

何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。

不具合・カスタマイズ対象ページのURL：

相談内容：

不具合の発生手順：

解決のために試したこと：

※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：

※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。

環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/

フォーラム利用ガイドリンク

フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。

共有:

通知

すべてクリア

[解決済] Google チャートを利用するための準備。

ブログ相談

最新の投稿 : ayataka 1年前

14 投稿

2 ユーザー

10 Reactions

693 表示

RSS

ayataka

(@ayataka)

Estimable Member Registered

結合: 1年前

投稿: 112

Topic starter 2023年10月27日 12:41

こんにちは

度々すみません。

グラフを挿入するのに、Chart.jsを使っていたのですが、
作成出来ないタイプのグラフがありましたので、
次に、プラグイン（Visualizer: Tables and Charts for WordPress）を入れて
作成していたのですが、固まってしまう現象が起きました。

今回 google charts を検討しているところです。

ライブラリを読み込む | Charts | Google for Developers

こちらに記載があるのですが、
＞例外を除いて、Google チャートを使用するすべてのウェブページでは、ウェブページの <head> に次の行を含めます。

これをどちらに記載したらいいのか、教えて下さい。
よろしくお願いいたします。

This topic was modified 1年前 by ayataka

トピックタグ

google charts

Akira

(@akira)

Famed Member Registered

結合: 7年前

投稿: 1657

2023年10月27日 13:29

どこにどのように書けばいいのかは、どのように Google チャートをお使いになるのかで違います。例えば、1 つのページで複数の Google チャートをお使いになることはあるでしょうか？

また、<head> に含めなさいと書かれてはいますが、<head> に含める必要はありません。例えば、投稿ページの編集でカスタム HTMLブロックにクイックスタートのコードを以下のように追加するとGoogle チャートが表示されます。

<!-- この<div>にGoogleチャートが表示されます -->
<div id="chart_divs"></div>

<!-- これより以下は<head>に含めなさいと書かれている<script>です -->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">

  // Load the Visualization API and the corechart package.
  google.charts.load('current', {'packages':['corechart']});

  // Set a callback to run when the Google Visualization API is loaded.
  google.charts.setOnLoadCallback(drawChart);

  // Callback that creates and populates a data table,
  // instantiates the pie chart, passes in the data and
  // draws it.
  function drawChart() {

    // Create the data table.
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Topping');
    data.addColumn('number', 'Slices');
    data.addRows([
      ['Mushrooms', 3],
      ['Onions', 1],
      ['Olives', 1],
      ['Zucchini', 1],
      ['Pepperoni', 2]
    ]);

    // Set chart options
    var options = {'title':'How Much Pizza I Ate Last Night',
                    'width':400,
                    'height':300};

    // Instantiate and draw our chart, passing in some options.
    var chart = new google.visualization.PieChart(document.getElementById('chart_divs'));
    chart.draw(data, options);
  }
</script>

ですので、1 つのページに 1 つの Google チャートしかお使いにならない場合は、カスタム HTMLブロックを使うのが簡単です。

※ 1 つのページに複数の Google チャートをお使いになる場合もカスタム HTMLブロックに書けば表示はされます。ただ、以下の <script> を複数書く必要はないのが気になっています。

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

This post was modified 1年前 by Akira

わいひら and ayataka reacted

ayataka

(@ayataka)

Estimable Member Registered

結合: 1年前

投稿: 112

Topic starter 2023年10月27日 14:22

返信ありがとうございます。

１ページに１カ所の場合は、これでいいのですね！

（試してみました。表示されてびっくりです！）

実は、１ページに４カ所使いたいのです。
よろしくお願いいたします。

Akira

(@akira)

Famed Member Registered

結合: 7年前

投稿: 1657

2023年10月27日 16:21

@ayataka さん

申し訳ないです。複数の Google チャートをお使いになる場合もカスタム HTML ブロックに書くので問題ありません。

以下の同じ <script> を複数書いた場合、その分ページの表示速度が遅くなると懸念していました。ですが、1 回書いても 4 回書いてもページの表示速度は同じでした。

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

カスタム HTML に書く方法は簡単な反面、毎回 <script> を書かないといけないのが面倒ではありますが。

もし、同じ <script> を複数書くのが気になる場合は、子テーマの functions.php に以下のようなコードを追加してもいいかもしれません。

add_action( 'wp_enqueue_scripts', function() {
  // 投稿ページに限定します
  if ( is_single() ) {
    // 投稿ページの本文を取得します
    $content = get_the_content();
    // 投稿ページの本文に id="chart_ があるかを調べます
    if ( strpos( $content, 'id="chart_' ) !== false ) {
      // 投稿ページの本文に id="chart_ があればGoogleチャートの<script>を<head>に追加します
      wp_enqueue_script(
        'google-charts',
        'https://www.gstatic.com/charts/loader.js'
      );
    }
  }
});

そして、投稿ページの本文にカスタム HTML ブロックを使い、id がchart_ から始まる <div> と <script> を書きます。

<!-- この<div>のidは chart_ から始めます -->
<div id="chart_sample"></div>

<!-- Googleチャートの例にある2つ目の<script>だけを書きます -->
<script>

  // Load the Visualization API and the corechart package.
  google.charts.load('current', {'packages':['corechart']});

  // Set a callback to run when the Google Visualization API is loaded.
  google.charts.setOnLoadCallback(drawChart);

  // Callback that creates and populates a data table,
  // instantiates the pie chart, passes in the data and
  // draws it.
  function drawChart() {

    // Create the data table.
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Topping');
    data.addColumn('number', 'Slices');
    data.addRows([
      ['Mushrooms', 3],
      ['Onions', 1],
      ['Olives', 1],
      ['Zucchini', 1],
      ['Pepperoni', 2]
    ]);

    // Set chart options
    var options = {'title':'How Much Pizza I Ate Last Night',
                    'width':400,
                    'height':300};

    // Instantiate and draw our chart, passing in some options.
    var chart = new google.visualization.PieChart(document.getElementById('chart_sample'));
    chart.draw(data, options);
  }
</script>

これで投稿ページの本文に id="chart_ があれば、自動的に以下の <script> が <head> に追加されます。

<script src="https://www.gstatic.com/charts/loader.js?ver=6.3.2" id="google-charts-js"></script>

わいひら and ayataka reacted

ayataka

(@ayataka)

Estimable Member Registered

結合: 1年前

投稿: 112

Topic starter 2023年10月27日 16:47

@akira

ありがとうございます。

やってみたのですが、4個表示するのが困難です。

すみませんが、4個表示する場合の方法を教えて下さい。

①id がchart_ から始まる <div> と <script> を書きます。

②黒い長い表記のところですが、4つにして書いて頂けませんか？

よろしくお願いいたします🙏

This post was modified 1年前 3回 by ayataka

Akira

(@akira)

Famed Member Registered

結合: 7年前

投稿: 1657

2023年10月27日 17:04

@ayataka さん

複数のチャートで同じ id を使われていませんか？

チャート毎に <div> の id を変えないといけません。また、<script> の中にも <div> の id を書く場所があるため、そこも変えないといけません。

<!-- 1つ目のチャート -->
<!-- <div>のidは chart_sample と仮定します -->
<div id="chart_sample"></div>
<script>
  省略
  function drawChart() {
    省略
    // <div>のid chart_sample を書く必要があります
    var chart = new google.visualization.PieChart(document.getElementById('chart_sample'));
  }
</script>

<!-- 2つ目のチャート -->
<!-- <div>のidは chart_sample_second と仮定します -->
<div id="chart_sample_second"></div>
<script>
  省略
  function drawChart() {
    省略
    // <div>のid chart_sample_second を書く必要があります
    var chart = new google.visualization.PieChart(document.getElementById('chart_sample_second'));
  }
</script>

This post was modified 1年前 2回 by Akira

ayataka and わいひら reacted

ayataka

(@ayataka)

Estimable Member Registered

結合: 1年前

投稿: 112

Topic starter 2023年10月27日 19:04

@akira

何かが間違っているようで、表示されません。
すみませんが、教えて下さい🙏

// Load the Visualization API and the corechart package.

google.charts.load('current', {'packages':['corechart']});

// Set a callback to run when the Google Visualization API is loaded.

google.charts.setOnLoadCallback(drawChart);

// Callback that creates and populates a data table,

// instantiates the pie chart, passes in the data and

// draws it.

function drawChart() {

// Create the data table.

var data = new google.visualization.DataTable();

data.addColumn('string', 'Topping');

data.addColumn('number', 'Slices');

data.addRows([

['Mushrooms', 3],

['Onions', 1],

['Olives', 1],

['Zucchini', 1],

['Pepperoni', 2]

]);

// Set chart options

var options = {'title':'How Much Pizza I Ate Last Night',

'width':400,

'height':300};

// Instantiate and draw our chart, passing in some options.

var chart = new google.visualization.PieChart(document.getElementById('chart_sample'));

chart.draw(data, options);

}

// <div>のid chart_sample を書く必要があります

var chart = new google.visualization.PieChart(document.getElementById('chart_sample'));

}

</script>

// Load the Visualization API and the corechart package.

google.charts.load('current', {'packages':['corechart']});

// Set a callback to run when the Google Visualization API is loaded.

google.charts.setOnLoadCallback(drawChart);

// Callback that creates and populates a data table,

// instantiates the pie chart, passes in the data and

// draws it.

function drawChart() {

// Create the data table.

var data = new google.visualization.DataTable();

data.addColumn('string', 'Topping');

data.addColumn('number', 'Slices');

data.addRows([

['Mushrooms', 3],

['Onions', 1],

['Olives', 1],

['Zucchini', 1],

['Pepperoni', 2]

]);

// Set chart options

var options = {'title':'How Much Pizza I Ate Last Night',

'width':400,

'height':300};

// Instantiate and draw our chart, passing in some options.

var chart = new google.visualization.PieChart(document.getElementById('chart_sample'));

chart.draw(data, options);

}

// <div>のid chart_sample_second を書く必要があります

var chart = new google.visualization.PieChart(document.getElementById('chart_sample_second'));

}

</script>

ayataka

(@ayataka)

Estimable Member Registered

結合: 1年前

投稿: 112

Topic starter 2023年10月27日 19:23

@akira

何度もすいません。
これはfunctions.php入力しないでいいのですよね？
先ほど、入れたら画面が背景色のみになってしまいました。

add_action( 'wp_enqueue_scripts', function() {
  // 投稿ページに限定します
  if ( is_single() ) {
    // 投稿ページの本文を取得します
    $content = get_the_content();
    // 投稿ページの本文に id="chart_ があるかを調べます
    if ( strpos( $content, 'id="chart_' ) !== false ) {
      // 投稿ページの本文に id="chart_ があればGoogleチャートの<script>を<head>に追加します
      wp_enqueue_script(
        'google-charts',
        'https://www.gstatic.com/charts/loader.js'
      );
    }
  }
});

This post was modified 1年前 by ayataka

Akira

(@akira)

Famed Member Registered

結合: 7年前

投稿: 1657

2023年10月27日 19:33

@ayataka さん

1 つ目のチャートです。URL 先のコードをそのままカスタム HTML ブロックに貼り付けます。

https://notepad.pw/share/zNSnnaybXbsYGaogGFD0

もし、子テーマの functions.php にコードを追加されない場合は、以下の URL 先のコードをお使いください。

https://notepad.pw/share/JcJ7Da7nXvNlw1nIncmY

2 つ目のチャートです。URL 先のコードをそのままカスタム HTML ブロックに貼り付けます。

https://notepad.pw/share/ey1W5Zi4jtcetPr916oE

もし、子テーマの functions.php にコードを追加されない場合は、以下の URL 先のコードをお使いください。

https://notepad.pw/share/69DgwtUlLwL1FyWHUxon

※ 以下の赤文字の部分が一致していないといけません。

var chart = new google.visualization.PieChart(document.getElementById('chart_sample'));

また、赤文字の部分は、チャート毎に変えないといけません。id は一意のため、同じページで同じ id は使えません。

This post was modified 1年前 2回 by Akira

わいひら reacted

ayataka

(@ayataka)

Estimable Member Registered

結合: 1年前

投稿: 112

Topic starter 2023年10月28日 08:05

本当にありがとうございます。

今後のことを考えるとfunctions.phpに入力をしておきたいのですが、

入力してみるとこんな画面になります。

ayataka

(@ayataka)

Estimable Member Registered

結合: 1年前

投稿: 112

Topic starter 2023年10月28日 08:06

入力は現在消去しましたが、

こちらの場所で合っていますか？

ayataka

(@ayataka)

Estimable Member Registered

結合: 1年前

投稿: 112

Topic starter 2023年10月28日 08:06

@akira
すみませんが、よろしくお願いします。

----------------------------------------------
サイト名：子どもが東大生になるまで
サイトURL： https://kodomo-daigaku.com 
ホームURL： https://kodomo-daigaku.com 
コンテンツURL：/wp-content
インクルードURL：/wp-includes/
テンプレートURL：/wp-content/themes/cocoon-master
スタイルシートURL：/wp-content/themes/cocoon-child-master
親テーマスタイル：/wp-content/themes/cocoon-master/style.css
子テーマスタイル：/wp-content/themes/cocoon-child-master/style.css
WordPressバージョン：6.3.2
PHPバージョン：8.2.12
ブラウザ：Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/118.0.0.0 Safari/537.36 Edg/118.0.2088.69
サーバーソフト：LiteSpeed
サーバープロトコル：HTTP/1.1
エンコーディング：gzip, deflate, br
言語：ja,en;q=0.9,en-GB;q=0.8,en-US;q=0.7
----------------------------------------------
テーマ名：Cocoon
バージョン：2.6.8.4
カテゴリー数：7
タグ数：9
ユーザー数：1
----------------------------------------------
子テーマ名：Cocoon Child
バージョン：1.1.3
style.cssサイズ：6839バイト
functions.phpサイズ：0バイト
----------------------------------------------
Gutenberg：1
AMP：0
PWA：0
Font Awesome：5
Auto Post Thumbnail：1
Retina：0
ホームイメージ：/wp-content/uploads/2023/09/523cd3743a1f23371051ba3b9e35f543.jpg
----------------------------------------------
ブラウザキャッシュ有効化：1
HTML縮小化：0
CSS縮小化：0
JavaScript縮小化：0
Lazy Load：1
----------------------------------------------
利用中のプラグイン：
Ad Invalid Click Protector 1.2.8
Akismet Anti-spam: Spam Protection 5.3
BackWPup 4.0.1
Broken Link Checker 2.2.3
Code Snippets 3.5.0
Contact Form 7 5.8.2
EWWW Image Optimizer 7.2.1
Flexible Table Block 3.0.1
Jetpack 12.7.1
LiteSpeed Cache 5.7.0.1
SiteGuard WP Plugin 1.7.6
Visualizer: Tables and Charts for WordPress 3.10.4
WP-Ban 1.69.1
WP Content Copy Protection & No Right Click 3.5.7
WP Multibyte Patch 2.9
XML Sitemap Generator for Google 4.1.13
----------------------------------------------

This post was modified 1年前 by ayataka

Akira

(@akira)

Famed Member Registered

結合: 7年前

投稿: 1657

2023年10月28日 11:41

@ayataka さん

書く場所は正しいのですが、子テーマの functions.php に元々書かれていたものを消されているため上手くいかないです。

※ 子テーマの functions.php の元々の状態は、以下の URL で確認できます。

cocoon-child/functions.php

ですので、いったん子テーマの functions.php に書いているものを全て消して、以下のコードを貼り付ければ上手くいくと思います。

<?php //子テーマ用関数
if ( !defined( 'ABSPATH' ) ) exit;

//子テーマ用のビジュアルエディタースタイルを適用
add_editor_style();

//以下に子テーマ用の関数を書く

add_action( 'wp_enqueue_scripts', function() {
  // 投稿ページに限定します
  if ( is_single() ) {
    // 投稿ページの本文を取得します
    $content = get_the_content();
    // 投稿ページの本文に id="chart_ があるかを調べます
    if ( strpos( $content, 'id="chart_' ) !== false ) {
      // 投稿ページの本文に id="chart_ があればGoogleチャートの<script>を<head>に追加します
      wp_enqueue_script(
        'google-charts',
        'https://www.gstatic.com/charts/loader.js'
      );
    }
  }
});

わいひら and ayataka reacted

ayataka

(@ayataka)

Estimable Member Registered

結合: 1年前

投稿: 112