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

前提

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〜の部分をいじってみたところ、テーマカスタマイザーでアップした画像は読み込めたんですが、プレビュー以降画面が真っ白になり、不具合の原因がわからず頓挫しました。（何かと干渉したのか、アクションフックが違うのか…）