サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL:
相談内容:
不具合の発生手順:
解決のために試したこと:
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え(FAQ)
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw)
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
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 12か月前 by 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>
This post was modified 12か月前 by Akira
Topic starter
2023年10月27日 14:22
返信ありがとうございます。
1ページに1カ所の場合は、これでいいのですね!
(試してみました。表示されてびっくりです!)
実は、1ページに4カ所使いたいのです。
よろしくお願いいたします。
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>
This post was modified 12か月前 2回 by Akira
Topic starter
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>
Topic starter
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'
);
}
}
});
This post was modified 12か月前 by 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 は使えません。
This post was modified 12か月前 2回 by Akira
わいひら reacted
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 12か月前 by 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)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。