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

PHP不会解析JS文件，因此您无法访问get_template_directory_uri()等函数。

快速而肮脏的方式

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

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

正确的方式

您应该使用wp_register_script()和/或wp_enqueue_script()以正确的Wordpress方式加载js。如果您这样做，您可以使用Wordpress函数wp_localize_script()并为该脚本提供您喜欢的任何信息。

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

CSS

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

Answer 2

克里斯·赫伯特（Chris Herbert）表现不错但如果有人需要将其写入innerHTML，例如按钮上的

1。）插入example.php文件：

<ul>
  <li>Link-1</li>
  <li>Link-2</li>
  <li>Link-3</li>
  <li>Link-4</li>
  <li>Link-5</li>
</ul>

<div id="output"></div>

2。）在script.js文件中：

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

也许有帮助

Jquery和CSS中的get_template_directory_uri（）

2 个答案:

快速而肮脏的方式

正确的方式

CSS