4

我正在尝试使用 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;
  }

提前致谢！

4

2 回答 2

15

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

快速而肮脏的方式

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

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

正确的方式

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

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

CSS

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

于 2015-02-04T23:21:23.910 回答
1

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';

也许它有帮助

于 2020-01-13T13:35:21.967 回答