将完整图像路径添加到WordPress javascrip文件

时间：2013-05-21 作者：Jonathan Beech

我目前正在构建一个WordPress主题，在这里我使用jQuery将一些华丽的图像附加到页面模板标记中带有一类beechheader的h4标记上并预先添加。

在将静态html文件转换为WordPress主题之前，下面的代码工作得很好。代码位于名为test的单独文件中。js公司

jQuery代码似乎在函数文件中正确排队，我已经调用了测试。js代码使用

<script src="<?php bloginfo(\'template_directory\'); ?>/javascripts/whatever.js"></script>
就在结束正文标记之前。下面是静态工作正常但现在不工作的代码

 // prepend some images to the headers
$(function() {

$("h4.beechheader")
    .prepend(\'<img src="/images/beechleft.gif" alt="" />\')
    .append(\'<img src="/images/beechright.gif" alt="" />\');
});
我尝试添加

<?php echo get_template_directory_uri(); ?>
在图像之前的尾部斜杠之前，就像在html文件中一样。我的研究使我相信jQuery文件可能需要以不同的方式处理，但我不确定其语法或操作方法。有人能帮忙吗？

2 个回复
最合适的回答,由SO网友:Milo 整理而成

首先，不要像那样直接注入脚本标记，使用wp_enqueue_script 添加javascript文件。然后，可以通过wp_localize_script 作用

function wpa_scripts() {
    wp_enqueue_script(
        \'wpa_script\',
        get_template_directory_uri() . \'/js/script.js\',
        array(\'jquery\'),
        null,
        true
    );
    $script_data = array(
        \'image_path\' => get_template_directory_uri() . \'/images/\'
    );
    wp_localize_script(
        \'wpa_script\',
        \'wpa_data\',
        $script_data
    );
}
add_action( \'wp_enqueue_scripts\', \'wpa_scripts\' );

SO网友:s_ha_dum

使用wp_localize_script 向页面添加Javascript变量。

function set_js_var() {
  $translation_array = array( \'template_directory_uri\' => get_template_directory_uri());
  wp_localize_script( \'jquery\', \'my_data\', $translation_array );
}
add_action(\'wp_enqueue_scripts\',\'set_js_var\');
您需要将该数据“注册”到已加载的脚本中。这就是为什么我用jquery 这是WordPress加载其捆绑的jquery库时使用的句柄，但它可以是页面上加载的任何脚本句柄。有关详细信息，请参阅法典。

搜索页面源，您应该会看到您的数据。

您应该能够使用访问Javascript变量my_data.template_directory_uri. 例如

function test_var() {
  echo \'<script type="text/javascript">alert(my_data.template_directory_uri);</script>\';
}
add_action(\'wp_footer\',\'test_var\',1000);
我真的不应该像那样将脚本塞进页脚（而不是将其排队），但这只是为了测试。大概您已经有了一个正确排队的脚本，您将在中使用它。

所以你会想要像。。。

.prepend(\'<img src="\' + my_data.template_directory_uri + \'/images/beechleft.gif" alt="" />\');

结束
标签： jquery   小码农  

相关推荐

JQuery插件在单个页面上不起作用

我使用一个新闻自动收录器jQuery插件来显示最后的帖子。代码位于header.php 在主页上可以很好地归档和工作，但不能在单个页面上。链接已加载，但不会移动。这是home page 这里是single page.