質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

2332閲覧

wordpress に jquery を使ったグラフを functions.php から呼び出したい

blossan

総合スコア154

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2016/12/26 02:44

編集2016/12/26 04:11

御世話になります。

wordpressにjqueryを使った円グラフを表示したいと考えています。
以前こちらのサイトで、google chart の表示の質問をさせて頂きました。
その際、ヒアドキュメントを使うアドバイスを頂き、無事 functions.php⇒ショートコードの流れでグラフを表示できました。

現在、google chart とは異なる、有志で開発された jquery の円グラフを wordpress で表示したいと思います。
wordpressでは、wordpress独自のjqueryがすでに用意されているため、その衝突を回避しなければなりません。

今回、$を使わずjqueryというワードを使うことで、その衝突を回避しようとしましたが、うまくグラフがwordpressに表示されてません。

エラーコードが発生していないため、jqueryが機能していないと考えています。
functions.phpから、jqueryを利用したグラフを表示させるためには、どのようにヒアドキュメントに記載すればよろしいでしょうか?

プログラムは、データベースから通信量の合計値を取得し%に変換し、円グラフで全体の使用率を表示するものになります。

fucntions.phpの記述は以下になります。

php

1function shortcode4Func() { 2 3$dsn = 'mysql:host=ホスト名;dbname=データベース名;charset=utf8'; 4 5$user = データベースのユーザー名; 6$password = データベースのパスワード; 7 8// tryにPDOの処理を記述 9try { 10 // PDOインスタンスを生成 11 $dbh = new PDO($dsn, $user, $password); 12 13// エラー(例外)が発生した時の処理を記述 14} catch (PDOException $e) { 15 // エラーメッセージを表示させる 16 echo 'データベースにアクセスできません!' . $e->getMessage(); 17} 18 19 $sql = "SELECT sum(volume) FROM mtraffics"; //指摘を頂き、「"」を付けて修正しました。 20 $stmt = $dbh->query($sql); 21 foreach ($stmt as $row) { 22 $total = $row["sum(volume)"]; 23 24} 25 26$output = <<< EOF 27<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 28<script src="js/jquery.circliful.js"></script> 29<script> 30 31 jQuery( document ).ready(function() { // 6,32 5,38 2,34 32 jQuery("#test-circle").circliful({ 33 animation: 1, 34 animationStep: 5, 35 foregroundBorderWidth: 15, 36 backgroundBorderWidth: 15, 37 percent: 38EOF; 39 40 $output .= $total/1000000; 41 42$output .= <<< EOF 43 , 44 textSize: 28, 45 textStyle: 'font-size: 12px;', 46 textColor: '#666', 47 multiPercentage: 1, 48 percentages: [10, 20, 30] 49 }); 50 }); 51</script>//訂正して追加 52EOF; 53 54return $output; 55} 56add_shortcode('shortcode4', 'shortcode4Func'); 57

wordpressで呼び出すコードは以下になります。

html

1[shortcode4] 2<div id="test-circle"></div>

jqueryの同時呼び出しが原因と考え、

php

1<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

を削除して実行しましたが、同じく表示が出ない状況です。
どのようにjqueryを使ったグラフを表示すれば良いでしょうか?

訂正
回答頂きありがとうございます。
指摘して頂いた「"」の欠落ですが、テラテイルに質問を投稿する際に、不要な変数や個人情報を消す時に、間違って消してしまったものになります。
文法的なエラーは一応画面上では表示されていません。
よろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

PHP

1// $sql = "SELECT sum(volume) FROM mtraffics; 2// ↑「"」が無い 3 $sql = "SELECT sum(volume) FROM mtraffics";

追記:

jQuery を2重で呼び出しても多分失敗するはず。また読み込みたいjsがどこに配置されているかはわかりませんが、フルパスで記述する必要があります。

PHP

1wp_enqueue_script( 'circliful', get_template_directory_uri().'/js/jquery.circliful.js', array( 'jquery' ), '20161226', true ); // 最後の「true 」は wp_footer 部分にスクリプトを読み込む指定

(以下参考)

【WordPress で jQuery を使う時の注意点 | EastCoder;】
http://eastcoder.com/2014/07/using-jquery-with-wordpress/comment-page-1/

【wordpressでjqueryを使う時の推奨方法まとめ】
http://kiyotatsu.com/web44/

【get_stylesheet_directory_uri:WordPress私的マニュアル】
http://elearn.jp/wpman/function/get_stylesheet_directory_uri.html

【WordPress » Javascriptファイルをロードする | MORILOG】
http://morilog.com/wordpress/js/wp_enqueue_script/

【functions.phpでJSやCSSを一元管理する| WordPressテックラボ | [Smart]】
http://rfs.jp/sb/wordpress/wp-lab/wp_enqueue_script.html

投稿2016/12/26 02:51

編集2016/12/26 05:56
kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

blossan

2016/12/26 05:59

読み込みたいjs関係に原因があると思います。ご指摘ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問