Cocoonフォーラム

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

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

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

相談内容:

不具合の発生手順:

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

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

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

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

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

  1. フォーラムガイドライン
  2. よくある質問と答え(FAQ)
  3. サポート対象外のケース
  4. 原因不明の不具合用トラブルシューティング
  5. トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw
  6. 真っ白画面でのエラーメッセージの確認方法
  7. ブラウザ環境チェックツール
  8. Cocoonカスタマイズ依頼

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

Google チャートを利用するための...
 
共有:
通知
すべてクリア

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

14 投稿
2 ユーザー
10 Reactions
640 表示
ayataka
(@ayataka)
Estimable Member Registered
結合: 1年前
投稿: 112
Topic starter  

こんにちは

度々すみません。

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

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

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

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

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

This topic was modified 12か月前 by ayataka

   
トピックタグ
(@akira)
Famed Member Registered
結合: 7年前
投稿: 1657
 

どこにどのように書けばいいのかは、どのように 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 12か月前 by Akira

   
わいひら and ayataka reacted
ayataka
(@ayataka)
Estimable Member Registered
結合: 1年前
投稿: 112
Topic starter  

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

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

(試してみました。表示されてびっくりです!)

 

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


   
(@akira)
Famed Member Registered
結合: 7年前
投稿: 1657
 

@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  

@akira 

ありがとうございます。

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

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

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

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

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

This post was modified 12か月前 3回 by ayataka

   
(@akira)
Famed Member Registered
結合: 7年前
投稿: 1657
 

@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 12か月前 2回 by Akira

   
ayataka and わいひら reacted
ayataka
(@ayataka)
Estimable Member Registered
結合: 1年前
投稿: 112
Topic starter  

@akira 

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

<div id="chart_sample" style="width: 100%; height: 400px;"></div>

<div id="chart_sample_second" style="width: 100%; height: 400px;"></div> 

 

<!-- 1つ目のチャート -->

<!-- <div>id chart_sample と仮定します -->

<div id="chart_sample"></div>

<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 を書く必要があります

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

  }

</script>

 

<!-- 2つ目のチャート -->

<!-- <div>id chart_sample_second と仮定します -->

<div id="chart_sample_second"></div>

<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  

@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 12か月前 by ayataka

   
(@akira)
Famed Member Registered
結合: 7年前
投稿: 1657
 

@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

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

<div id="chart_sample" style="width: 100%; height: 400px;"></div>

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

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

This post was modified 12か月前 2回 by Akira

   
わいひら reacted
ayataka
(@ayataka)
Estimable Member Registered
結合: 1年前
投稿: 112
Topic starter  

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

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

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

 


   
ayataka
(@ayataka)
Estimable Member Registered
結合: 1年前
投稿: 112
Topic starter  

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

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


   
ayataka
(@ayataka)
Estimable Member Registered
結合: 1年前
投稿: 112
Topic starter  

@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 12か月前 by ayataka

   
(@akira)
Famed Member Registered
結合: 7年前
投稿: 1657
 

@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
Topic starter  

@akira 

こんにちは
今、変更したら、直りました。

そして、Google チャート も無事に表示され、なんとか活用出来ます。

本当に、本当にありがとうございました🙏


   
わいひら reacted
共有:

問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。

また、有用な回答があった場合は返信右下にある「いいね!」もご活用ください。回答者の励みになります。

「いいね!」機能はフォーラム登録者のみが利用できる機能です。

CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。

フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。

最近の書き込みはこちら。

詳細なカスタマイズ依頼をするならこちら。

タイトルとURLをコピーしました