如何将 Wordpress php 代码添加到 JavaScript答案

【问题标题】：How can I add Wordpress php code into JavaScript如何将 Wordpress php 代码添加到 JavaScript
【发布时间】：2019-03-23 00:40:22
【问题描述】：

我有以下 javascript 代码：

$(window).scroll(function() {
    if($(this).scrollTop() > 50)  /*height in pixels when the navbar becomes non opaque*/ 
    {
        $('.navbar-default').addClass('sticky');
        $('.navbar-brand img').attr('src','assets/images/logo.png'); //change src
    } else {
        $('.navbar-default').removeClass('sticky');
        $('.navbar-brand img').attr('src','assets/images/logo__footer.png')

    }
});

是否可以插入wp自定义php代码

<?php the_custom_logo(); ?>

而不是这个静态属性

.attr('src','assets/images/logo.png');

非常感谢。

【问题讨论】：

这个 javascript 是作为 php 脚本的一部分创建的，还是在您链接到页面的 .js 文件中
@RiggsFolly 嘿，这是 js 文件的一部分
那我觉得amsnwer不行，直接不行。

标签： javascript php wordpress

【解决方案1】：

你需要在模板中设置变量：

<script>
    var logoImage = <?php the_custom_logo(); ?>;
    var logoImageFooter = <?php the_custom_logo()?> //here footer logo
</script>

然后，在你的 js 文件中使用它

$(window).scroll(function() {
    if($(this).scrollTop() > 50)  /*height in pixels when the navbar becomes non opaque*/ 
    {
        $('.navbar-default').addClass('sticky');
        $('.navbar-brand img').attr('src',logoImage); //change src
    } else {
        $('.navbar-default').removeClass('sticky');
        $('.navbar-brand img').attr('src',logoImageFooter)

    }
});

【讨论】：

嗨@vasyl-zhuryk，非常感谢。请告诉我我必须在哪个模板中设置变量？
@Jamdev 现在，我没有 wordpress 服务器，也看不到文件。但是你可以自己找到它。你的模块中的 html 文件，它与你的 js 文件一起加载
非常感谢！

【解决方案2】：

你的 Js 代码：

$(window).scroll(function() {
    if($(this).scrollTop() > 50)  /*height in pixels when the navbar becomes non opaque*/ 
    {
        $('.navbar-default').addClass('sticky');
        $('.navbar-brand img').attr('src','custom_logo.png'); //change src
    } else {
        $('.navbar-default').removeClass('sticky');
        $('.navbar-brand img').attr('src','logo_footer.png')

    }
});

HTML 代码：

<?php $customLogo= 'custom_logo'; ?>
<?php $footerLogo= 'footer_logo'; ?>
<html>
  <body>
    <script type="text/javascript">  
      // notice the quotes around the ?php tag         
      var customLogo="<?php echo $customLogo; ?>";
      var footerLogo="<?php echo $footLogo; ?>";
      alert(customLogo);
      alert(footerLogo);
    </script>
  </body>
</html>

【讨论】：

【解决方案3】：

如果您需要带有 php 代码输入的 jquery，则需要 wp_localize_script() 函数。 More information

 var logoImage = <?php the_custom_logo(); ?>;
var logoImageFooter = <?php the_custom_logo()?> //here footer logo

// Register the script
wp_register_script( 'some_handle', 'path/to/myscript.js' );

// Localize the script with new data
$translation_array = array(
    'logo_image' => the_custom_logo(),
    'logo_image_footer' => the_custom_logo()'
);
wp_localize_script( 'some_handle', 'object_name', $translation_array );

// Enqueued script with localized data.
wp_enqueue_script( 'some_handle' );

您可以通过如下方式访问 JavaScript 中的变量：

    <script>
        alert( object_name.logo_image);
        alert( object_name.logo_image_footer);
    </script> 


 $('.navbar-brand img').attr('src',object_name.logo_image); //change src

【讨论】：