web-dev-qa-db-ja.com

javaScriptファイル内のテーマパス

テーマファイルへのパスをjavascriptファイルに含める必要があります。これについてはどうしたらいいでしょうか。私はすでに試してみました：

var templateUrl = "<?php get_stylesheet_directory_uri(); ?>";

function LightboxOptions() {
  this.fileLoadingImage = "'"+templateUrl+"/img/loading.gif'";
  this.fileCloseImage = "'"+templateUrl+"/img/close.png'";
  this.resizeDuration = 700;
  this.fadeDuration = 500;
  this.labelImage = "Image";
  this.labelOf = "of";
}

これでパスがわかりませんが、実際のパスの代わりに<?php get_stylesheet_directory_uri(); ?>を挿入するだけです。何か案は？前もって感謝します！

theme-developmentthemesjavascriptpaths
12
charlenemasters

探しているのは wp_localize_script function です。

スクリプトをエンキューするときにこのように使用します

wp_register_script( 'my-script', 'myscript_url' );
wp_enqueue_script( 'my-script' );
$translation_array = array( 'templateUrl' => get_stylesheet_directory_uri() );
//after wp_enqueue_script
wp_localize_script( 'my-script', 'object_name', $translation_array );

Style.jsでは、次のようになります。

var templateUrl = object_name.templateUrl;
...
31
david.binda

JavaScriptファイルにテーマパスを追加するには、次の2つの方法があります。

1） あなたのfunctions.phpファイルでは wp_localize_script（） を使うことができます。これにより、ヘッダにJavascriptオブジェクトが作成され、実行時にスクリプトで利用できるようになります。

例：

wp_register_script('custom-js',get_stylesheet_directory_uri().'/js/custom.js',array(),NULL,true);
wp_enqueue_script('custom-js');

$wnm_custom = array( 'stylesheet_directory_uri' => get_stylesheet_directory_uri() );
wp_localize_script( 'custom-js', 'directory_uri', $wnm_custom );

次のようにあなたのjsファイルで使用することができます：

alert(directory_uri.stylesheet_directory_uri);

2） テンプレートディレクトリuriを変数に保存するJavascriptスニペットを作成し、後で次のように使用することができます。パス。例：

<script type="text/javascript">
var stylesheet_directory_uri = "<?php echo get_stylesheet_directory_uri(); ?>";
</script>

次のようにあなたのjsファイルで使用することができます：

alert(stylesheet_directory_uri);
5
Vinod Dalvi

私はWordPressテーマディレクトリを取得し、それをグローバルJavaScript変数として保存するために、この便利で小さな方法を使い始めました（すべてJavaScriptファイル内から）

function getThemeDir() {
    var scripts = document.getElementsByTagName('script'),
        index = scripts.length - 1,
        myScript = scripts[index];

    return myScript.src.replace(/themes\/(.*?)\/(.*)/g, 'themes/$1');
}
themeDir = getThemeDir();

これは、 以下の条件 が満たされる場合にのみ機能します。

1. このスニペットは、外部のJavaScriptファイルを介して実行されます。

<script src="/wp-content/themes/themename/assets/app.js"></script>

2. jsファイルは、サイトのテーマディレクトリ（またはサブディレクトリ）内にあります。

1
blizzrdof77

これが私のやり方です。

JavaScriptファイルと画像をtheme-folder/assetsに配置します。

そして、以下のファイルを編集してください。

Functions.php内

/* for javascript (only when using child theme) */
wp_enqueue_script('my-script', get_template_directory_uri() . '-child/assets/test.js');
wp_localize_script('my-script', 'myScript', array(
    'theme_directory' => get_template_directory_uri() 
));

あなたのjavascriptファイルに

var url = myScript.theme_directory + '-child/assets/';
1
TakaSoft

あなたはあなたのjavascriptファイルをローカライズすることができます、あなたにはPHP定義された値で埋められたjavascript配列を生成する機会を与えます（ローカライズやディレクトリのような）。

wp_enqueue_scriptまたはwp_register_scriptを介してJavaScriptファイルをロードする場合は、次のように簡単に設定できます。

function localize_vars() {
    return array(
        'stylesheet_directory' => get_stylesheet_directory_uri()
    );
}

wp_enqueue_script( 'my_script', plugins_url( 'my_plugin/my_script.js' ), array( 'jquery' ) );
wp_localize_script( 'my_script', 'my_unique_name', localize_vars() );

JavaScriptファイルでは、これらの変数を次の方法で呼び出すことができます。

my_unique_name.stylesheet_directory
1
Mike Madern

JavaScriptファイルが管理ダッシュボードからロードされている場合は、このJavaScript関数を使用してWordPressインストールのルートを取得することができます。

function getHomeUrl() {
  var href = window.location.href;
  var index = href.indexOf('/wp-admin');
  var homeUrl = href.substring(0, index);
  return homeUrl;
}

それからちょうどあなたのテーマへの道を以下のように連絡してください。

var myThemePath = getHomeUrl() + '/wp-content/themes/myTheme';
0
Jam Risser