jQuery 在 HTML 条评论中生成 PHP (WORDPRESS)

Question

我的网站上安装了 WordPress，目前正在编辑主题。

我已将一个列表项附加到生成的导航菜单的末尾。列表项内部是调用搜索表单的 PHP 块。

我运行遇到的问题是，在附加列表项时，PHP 的块放在 HTML 注释标签内。我不知道为什么并尝试了几种方法来摆脱它。

<li>
    <!--?php get_search_form(); ?-->
</li>

我用来附加列表项和搜索栏的JavaScript是：

$(document).ready(function () {
    "use strict";

    $("header nav .nav-menu").append("<li><?php get_search_form(); ?></li>");
});

WordPress 使用以下内容在 header 模板中生成信息：

<nav id="site-navigation" class="main-navigation" role="navigation">
            <div class="wrapper2">
                <button class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></button>
                <a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ?>"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a>
                <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>

            </div>
        </nav>

根据我的谷歌搜索，我的假设是我将 PHP 嵌套在 PHP 中，但我无法修复它。

存储搜索表单HTML的PHP变量是：

$form = '<form role="search" method="get" id="searchform" class="searchform" action="' . esc_url( home_url( '/' ) ) . '">
                <div>
                    <label class="screen-reader-text" for="s">' . _x( 'Search for:', 'label' ) . '</label>
                    <input type="text" value="' . get_search_query() . '" name="s" id="s" placeHolder="Enter your search here..." />
                    <input type="submit" id="searchsubmit" value="'. esc_attr_x( '&#59394;', 'submit button' ) .'" />
                </div>
            </form>';

我将不胜感激任何帮助或见解，因为我不习惯使用 PHP 或 WordPress 主题。

Answer 1

我不明白，你想在这里做什么....

你的Javascript没有任何意义。 Javascript 在客户端执行，而 PHP 在服务器端执行，这意味着当您的 javascript 运行时，将 php 调用附加到 html，将除了将文本放入其中，不执行任何操作之外什么都不做....

任何 php 代码都必须放在模板中，而不是任何类型的 javascript，除非它是您传递给 javascript 变量的一些数据

Answer 2

试试这个。

检查您是否有 getsearchform.php 文件。如果你这样做，那么这将覆盖该功能。 get_search_form() 先从这个文件中抓取。

在主题的根目录中添加或更改文件 searchform.php。

在此文件中添加表单代码：

<form role="search" method="get" id="searchform" class="searchform" action="' . esc_url( home_url( '/' ) ) . '">
          <div>
               <label class="screen-reader-text" for="s">' . _x( 'Search for:', 'label' ) . '</label>
               <input type="text" value="' . get_search_query() . '" name="s" id="s" placeHolder="Enter your search here..." />
               <input type="submit" id="searchsubmit" value="'. esc_attr_x( '&#59394;', 'submit button' ) .'" />
          </div>
</form>

您还缺少 get_search_form();

之前的回声

你的 JS 应该是：

$(document).ready(function () {
    "use strict";

    $("header nav .nav-menu").append("<li><?php echo get_search_form(); ?></li>");
});

最后，您的 JS 在 .php 文件中，对吗？如果可以的话，这一切都会起作用，并且在某些主题中已经完成，但您应该尽量避免混合使用 php 和 javascript。但这应该有效。

查看此文档：

http://codex.wordpress.org/Function_Reference/get_search_form#Theme_Form

Answer 3

好的，感谢 Playground 解释了为什么我使用 JavaScript 的想法行不通。

还要感谢 w3bmak3r 告诉我有关外部 JS 文件和 link 到 wordpress 站点上 search_form 功能的信息。

我的目标是在导航列表的末尾附加一个搜索栏。我通过在导航列表的开头添加一个列表项来完成此操作。我找到了资料 here on wordpress.

发件人：

<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>

收件人：

<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu', 'items_wrap' => '<ul id="menu-site" class="nav-menu" style=""><li class="thesearchform">' . get_search_form() . '</li>%3$s</ul>' ) ); ?>

接下来，我使用 jQuery 将第一个列表项附加为最后一个子项：

$(document).ready(function () {
    "use strict";
    
    var theSearchForm = $("header nav li.thesearchform");
    $("header nav .nav-menu").append(theSearchForm).find(theSearchForm).append($("header nav .searchform"));
});

是的，这很有效。谢谢两位对我的帮助。

编辑：如果有人知道如何将 <?php get_search_form(); ?> 插入 wp_nav_menu，它会帮助我提高可读性。

编辑，没关系，我想通了并编辑了答案。

jQuery 在 HTML 条评论中生成 PHP (WORDPRESS)

jQuery generates PHP inside HTML Comments (WORDPRESS)

html

javascript

php

wordpress

jquery