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

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

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

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

PHP

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

Q&A

解決済

外部JSファイルでPHPの値を扱う方法について

chef
chef

総合スコア15

WordPress

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

PHP

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

1回答

1グッド

2クリップ

2457閲覧

投稿2018/02/13 09:28

前提

WordPressのビジュアルエディタでオリジナルのボタンを追加し、そのボタンを押すと吹き出しテンプレートが読み込まれる…という機能を自作WordPressテーマに実装しようと考えています。

参考サイト

WordPress:ビジュアルエディタをカスタマイズする際の備忘録の8つ目の項目「オリジナルのボタンを追加する」を参考に基本的なことはできました。

実現したいこと

その次にやりたいことは、吹き出しテンプレートのアイコン(画像)を動的に扱うことです。

理想は、アバター画像がセットされていれば、それを使う(get_avatar関数でしょうか)

その次は、テーマカスタマイザーでセットされた画像を使う(この機能の実装は問題ありません)

何もなければテーマ側で用意した画像を使う

です。

PHP側でこの条件分岐をするのは問題ないのですが、これを外部のJSファイルで読み込む方法がわかりません。

試したこと

php

1add_filter( 'mce_external_plugins', 'add_original_tinymce_button_plugin' ); 2function add_original_tinymce_button_plugin( $plugin_array ) { 3 $plugin_array[ 'original_tinymce_button_plugin' ] = get_template_directory_uri() . '/admin/editor-button.js'; 4 return $plugin_array; 5}

このコードのget_template以下をPHPファイルにし、JavaScriptの処理をscriptタグで囲めば簡単なんですが、無理でした

試したこと2

WordPress TinyMCE ビジュアルエディタカスタマイズの例の記事にある、以下のコード。

php

1 2function addHidden() 3{ 4 $path = get_bloginfo( 'template_directory' ); 5 echo '<input type="hidden" id="templateDirectory" value='."{$path}".' />'; 6} 7add_action('admin_menu', 'addHidden'); 8

js

1 2var path = $('#templateDirectory').val(); 3

セキュリティリスクはよくわかりませんが非常に便利だと思い、PHP側のget_bloginfo〜の部分をいじってみたところ、テーマカスタマイザーでアップした画像は読み込めたんですが、プレビュー以降画面が真っ白になり、不具合の原因がわからず頓挫しました。(何かと干渉したのか、アクションフックが違うのか…)

試したこと3

[WordPress] WordPress から JavaScript へ値を渡す方法

こちらも試してみたんですが、やり方が悪かったのか解決には至りませんでした。

お願いしたいこと

タイトル選定迷いましたが、大枠としては、外部JSファイルでPHPの値を扱うことです。WordPressの関数で解決できるのであればそれに越したことはありません。
お知恵をお借りできれば幸いです。
よろしくお願いいたします。

aaaaaaaa👍を押しています

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

回答1

2

ベストアンサー

やり方としては2つしか無いように思います。
・グローバル変数として渡す
・html 内の値として渡す(カスタムデータ属性「data-*」とか)

投稿2018/02/13 15:23

退会済みユーザー

退会済みユーザー

総合スコア0

kei344, chef👍を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

chef

2018/02/14 02:03

回答いただきありがとうございます! 「試したこと2」のアクションフックを変更したところ、プレビューのエラーもなく進めることができたんですが、教えていただいたカスタムデータ属性の方が扱いやすいので、こちらを採用してみようと思います。 ありがとうございました!

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

ただいまの回答率
86.02%

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

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

質問する

関連した質問

同じタグがついた質問を見る

WordPress

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

PHP

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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