在WordPress中添加动态PHP代码通过jQuery HTML替换？

Question

我坚持在WordPress中使用一个主题，因为在响应式视图中标题很糟糕。我可以使用桌面宽度，但是由于客户的需求，任何低于768px的东西都需要有完全不同的标记 - 任何试图通过CSS尝试这样做的尝试都会导致更多的UI灾难。我希望利用jQuery的.html()功能来交换<768px的Bootstrap网格元素。这是一个片段示例 - 说我需要将徽标从桌面的最右侧位置移动到标题左侧的第一个元素。我正确使用主题的动态徽标声明：

if($(window).width() < 768) {
        $('.top-bar').html('<div class="col-md-3"><?php vg_ebuilder_display_logo_sticky(); ?><div class="logo-inside"><?php vg_ebuilder_display_top_logo(); ?></div></div>');
    }

但这返回注释掉了PHP：

<!--?php vg_ebuilder_display_logo_sticky(); ?-->

和

<!--?php vg_ebuilder_display_top_logo(); ?-->

那么，这里可能有两个问题：有没有办法通过.html()上的jQuery $(document).ready函数在WordPress中添加这样的动态PHP，并且假设它可以，如果在DOM之后加载它确实是动态的吗？

Answer 1

不，PHP在服务器上运行，而不是客户端。 javascript需要调用一个端点来执行php逻辑，返回一个响应，并将响应放在页面上。不会调用在客户端上插入php。

Answer 2

我不能“评论”给你的建议，因为我的声誉还不到50，所以希望这是正确的答案。我发现这对我来说在Joomla（Q48891999）中有类似的问题。

在您要更改的div中，添加一个唯一的类，例如“助剂”。然后，如果需要，编写一个新的css类或以

@media (max-width: 767px) {
  .your_new_class {
   }
}

- 但是没有为新类使用名称“builder” - 在您想要更改的div的自定义css文件中。

然后使用jquery .addClass将css类应用于index.php中的div。像这样的东西：

<script>
$( ".builder" ).addClass( "the_class_you_want_to_apply another_class" );
</script>

括号和双引号之间的空格是有意的，如jquery网站上的示例中所使用的那样。

就我而言，我在关闭body标签之前将其添加到index.php的底部。

您可能需要将多个脚本应用于不同的元素。