使用 get_search_form() 函数将搜索栏/表单添加到 Wordpress 中的自定义 HTML 导航答案

【问题标题】：Adding search bar/form to a custom HTML navigation in Wordpress using get_search_form() function使用 get_search_form() 函数将搜索栏/表单添加到 Wordpress 中的自定义 HTML 导航
【发布时间】：2020-06-06 03:10:14
【问题描述】：

我的问题是我在 WordPress 小部件区域的“顶部”部分中构建了导航菜单（这可能是一个错误，因为我无法在其中添加 php）。假设我的菜单是这样构建的：

<nav>
<div class="title-and-logo">...</div>
<div class="menu-links">...</div>
<div class="search-bar">   </div>
</nav>

相关的css：

nav{
display: flex;
}

我需要将搜索栏添加到 .search-bar div 中。我的解决方案是将整个导航菜单移出小部件区域并进入functions.php。（我对 PHP 还不是很满意，这就是为什么我不愿意乱用它）。

我的问题：有没有办法将 get_search_form() 生成的搜索栏添加到 class="search-bar" 的部分中，而无需在允许 PHP 的地方删除我的代码？

或者：我可以使用 HTML 生成一个普通的搜索栏而不需要使用 WordPress 提供的 get_search_form() 吗？（但也许 WordPress 的搜索功能更好？）。

感谢任何帮助。您也可以建议 javascript 和 jquery 修复。

【问题讨论】：

您是否已经尝试过使用搜索小部件？
据我所知，搜索小部件只能放在侧边栏或其他定义的地方。它不能添加到自定义创建的 html 元素中。

标签： php html wordpress search

【解决方案1】：

您可以在 functions.php 中为您的顶部导航创建一个自定义小部件区域，如下所示：

<?php
/**
 * Register our sidebars and widgetized areas.
 *
 */
function my_custom_widget_area_init() {

    register_sidebar( array(
        'name'          => 'Top Nav - Search',
        'id'            => 'top_nav_search',
        'before_widget' => '',
        'after_widget'  => '',
        'before_title'  => '',
        'after_title'   => '',
    ) );

}
add_action( 'widgets_init', 'my_custom_widget_area_init' );
?>

然后您调整主题以显示小部件：

<nav>
    <div class="title-and-logo">...</div>
    <div class="menu-links">...</div>
    <?php if ( is_active_sidebar( 'top_nav_search' ) ) : ?>
    <div class="search-bar"><?php dynamic_sidebar( 'top_nav_search' ); ?></div>
    <?php endif; ?>
</nav>

【讨论】：

谢谢你的洞察力，但我正在寻找一种方法，我不需要在与 HTML 相同的位置（工作表/小部件）添加 php 代码。如果没有其他方法，我可能会选择这个，谢谢你的帮助。

【解决方案2】：

好的，我有一个非常具体的问题，我怀疑其他人会遇到，但无论如何，这是我解决它的方法：

我已经安装了一个名为“widget shortcode”的插件，它将我拥有的任何小部件转换为可以在网站文本区域内使用的短代码。

有点不相关，但记得我也将导航放置在 HTML 小部件中（但我没有将它用作短代码，它直接放置在“顶部小部件区域”中。）

所以我所要做的就是获取搜索小部件的简码（因为我们在 Wordpress 上默认有一个搜索小部件）并将其插入到我的导航的 HTML 中。

问题：事实证明，默认情况下我们不能将短代码放入 html 小部件中。解决方案：在functions.php中放置一行代码，这样我们就可以这样做。问题解决了。

【讨论】：