WordPress-插件-将WP插件目录中的图像文件放入JS文件

Question

我是为WP创建插件的新手，但我仍在学习。 关于同一问题，我有两个问题：

1：首先，我在插件php-file中包含了js 文件 ：

function theme_name_scripts() {
wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/example.js');
}

add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );

它可以工作，但是我要做的是从我的插件URL（wordpress / wp-content / plugins / example）中找到它，而不是从我的模板目录中找到它。 我该怎么做呢？

2：在我的js文件中 ，我需要包含一些来自插件基本URL（wordpress / wp-content / plugins / example / pix）的图像文件。 当不用作插件时，此脚本有效：

window.onload=function()
{

/* Example */

bp='/pix/', // base url of my images

imgnum=4, // number of images
thumb1=document.getElementById('thumb1'), // id of changing image
combobox1=document.getElementById('selection1'); // id of combobox.

combobox1.onchange=function()
{
thumb1.src=bp+'imagefile'+this.value+'.png';
}

我了解bp='/pix/',是错误的。 但是正确的是什么？ 我想从template_directory的文件夹加载图像。 我该怎么做呢？ 我已经阅读了这两个线程，但似乎无法弄清楚：

WordPress：如何在我的JavaScript文件中选择插件目录？

在javascript警报中编写php

Answer 1

您可以使用plugins_url()使插件目录中的脚本入队。

在您的情况下，它将类似于：

function theme_name_scripts() {
  wp_register_script('script-name', plugins_url('js/example.js', __FILE__));
}

要使插件url路径在javascript中可用，可以将wp_localize_script()与例如plugin_dir_url()结合使用wp_localize_script()在我想上面也可以使用...）。

因此，最终结果将类似于：

function theme_name_scripts() {
  // register your script
  wp_register_script('script-name', plugins_url('js/example.js', __FILE__));
  // or
  // wp_register_script('script-name', plugin_dir_url(__FILE__) . 'js/example.js');

  // make variables available in javascript
  wp_localize_script('script-name', 'wordpress_vars', 
                     array('plugin_path' => plugin_dir_url(__FILE__)));
}

在您的JavaScript中，您将可以使用wordpress_vars变量。 您的插件路径将为wordpress_vars.plugin_path 。

请注意，我已经修改了wp_localize_script以将数组作为第三个参数发送。