サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
トピックスターター 2023年10月27日 12:41
こんにちは
度々すみません。
グラフを挿入するのに、Chart.jsを使っていたのですが、
作成出来ないタイプのグラフがありましたので、
次に、プラグイン（Visualizer: Tables and Charts for WordPress）を入れて
作成していたのですが、固まってしまう現象が起きました。
今回 google charts を検討しているところです。
ライブラリを読み込む | Charts | Google for Developers
こちらに記載があるのですが、
＞例外を除いて、Google チャートを使用するすべてのウェブページでは、ウェブページの <head> に次の行を含めます。
これをどちらに記載したらいいのか、教えて下さい。
よろしくお願いいたします。
このトピックは1年前からayatakaに変更されました
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>
この投稿は1年前ずつAkiraに変更されました
トピックスターター 2023年10月27日 14:22
返信ありがとうございます。
１ページに１カ所の場合は、これでいいのですね！
（試してみました。表示されてびっくりです！）
実は、１ページに４カ所使いたいのです。
よろしくお願いいたします。
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>
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>
この投稿は1年前 2回ずつAkiraに変更されました
トピックスターター 2023年10月27日 19:04
何かが間違っているようで、表示されません。
すみませんが、教えて下さい🙏
<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>
トピックスターター 2023年10月27日 19:23
何度もすいません。
これは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'
);
}
}
});
この投稿は1年前ずつayatakaに変更されました
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
※ 以下の赤文字の部分が一致していないといけません。
<div id="chart_sample" style="width: 100%; height: 400px;"></div>
var chart = new google.visualization.PieChart(document.getElementById('chart_sample'));
また、赤文字の部分は、チャート毎に変えないといけません。id は一意のため、同じページで同じ id は使えません。
この投稿は1年前 2回ずつAkiraに変更されました
わいひら reacted
トピックスターター 2023年10月28日 08:05
本当にありがとうございます。
今後のことを考えるとfunctions.phpに入力をしておきたいのですが、
入力してみるとこんな画面になります。
トピックスターター 2023年10月28日 08:06
入力は現在消去しましたが、
こちらの場所で合っていますか？
トピックスターター 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 ----------------------------------------------
この投稿は1年前ずつayatakaに変更されました
2023年10月28日 11:41
@ayataka さん
書く場所は正しいのですが、子テーマの functions.php に元々書かれていたものを消されているため上手くいかないです。
※ 子テーマの functions.php の元々の状態は、以下の URL で確認できます。
ですので、いったん子テーマの 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'
);
}
}
});
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。