get_template_directory_uri() 在 Jquery 和 CSS 中

Question

我正在尝试使用 get_template_directory_uri() 将图像加载到 jquery.backstretch.js 文件以及我的 styles.css。到目前为止，我将我的图像直接添加到名为 "img" 的文件夹中的主题文件夹中，并将其用于我的 HTML:

 <img src="<?php echo get_template_directory_uri(); ?>/img/logoyellow.png" class="hidden-xs" alt="logo" />

效果不错！

但我在 jquery 文件 (jquery.backtretch.js) 中执行了以下操作：

  $(document).ready(function () {
       $("#home-section").backstretch("<?php echo get_template_directory_uri(); ?>/img/background-image2.jpg");
   });

但是没有雪茄 :( 我也想知道如何将它装入我的 CSS。像这样的东西：

  #milestones-section {
      background: url('<?php echo get_template_directory_uri(); ?>/img/hbg.jpg') center center;
  }

提前致谢！

Answer 1

JS 文件未被 PHP 解析，因此您无法访问 get_template_directory_uri().

等函数

快速而肮脏的方式

您可以通过在每个页面的 <head> 中放置类似这样的内容来使 Javascript 可用：

<script>
    theme_directory = "<?php echo get_template_directory_uri() ?>";
</script>

正确的方法

您应该以正确的 Wordpress 方式加载 js，使用 wp_register_script() and/or wp_enqueue_script()。如果这样做，您可以使用 Wordpress 功能 wp_localize_script() 并使您喜欢的任何信息都可用于该脚本。

更多信息：http://codex.wordpress.org/Function_Reference/wp_localize_script

CSS

您的 CSS 文件应该已经在主题目录中，因此您可以使用相对路径。

Answer 2

Chris Herbert 表现不错但是如果有人需要它把它写到 innerHTML，例如在一个按钮上：

1.) 插入 example.php 文件：

<?php 
function loadDirectory() { ?>
<script type="text/javascript">
    var theme_directory = "<?php echo get_template_directory_uri() ?>";
</script> 
<?php } 
add_action('wp_head', 'loadDirectory'); ?>

2.) 在 script.js 文件中：

document.getElementById('exampleButton').innerHTML = '<img src="' + theme_directory + '/svg/icons/cursor.svg" width="32" height="32" title="">Example';

也许有帮助

get_template_directory_uri() 在 Jquery 和 CSS 中

get_template_directory_uri() in Jquery and CSS

wordpress

codex

快速而肮脏的方式

正确的方法

CSS