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

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

新規登録して質問してみよう
ただいま回答率
85.45%
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

解決済

1回答

2770閲覧

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

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グッド

2クリップ

投稿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👍を押しています

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

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

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

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

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

guest

回答1

0

ベストアンサー

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

投稿2018/02/13 15:23

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

chef

2018/02/14 02:03

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.45%

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

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

質問する

関連した質問