l-1

WordPress笔记

主页/WordPress笔记/博客文章/综合文章/如何在WordPress文章中添加搜索表单

如何在WordPress文章中添加搜索表单

Bug编译狮

Bug编译狮

在WordPress中为文章添加搜索表单可以帮助用户更方便地查找他们感兴趣的内容。以下是如何实现这一功能的步骤：

步骤1: 插件选择

首先，你需要安装并激活一个适合插件来处理搜索请求的插件。我们推荐使用Search by Content这个插件，它允许你在任何页面或文章中插入自定义搜索表单。

步骤2: 安装和激活插件

  1. 登录到你的WordPress管理后台。
  2. 导航到“插件”菜单。
  3. 搜索框输入Search by Content，然后点击“安装”按钮下载插件文件。
  4. 从“活动”菜单中找到安装好的插件，点击“启用”以激活它。

步骤3: 添加搜索表单

现在，你可以通过编辑文章内容来添加搜索表单了。打开你想要添加搜索表单的文章，进入编辑模式（通常是按 Ctrl + Shift + X 或者点击右上角的编辑图标）。

示例代码：

<!-- Search Form -->
<form id="search-form" action="<?php echo home_url('/'); ?>" method="get">
    <input type="text" name="s" placeholder="搜索..." required>
    <button type="submit">搜索</button>
</form>

<!-- Optional: Add more fields if needed -->
<input type="hidden" name="post_type" value="post">

<!-- Search Results Section -->
<div class="search-results">
    <?php get_search_form(); ?>
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
        <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
            <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
            <?php the_excerpt(); ?>
        </article>
    <?php endwhile; else: ?>
        <p><?php _e('没有找到相关结果', 'your-theme-textdomain'); ?></p>
    <?php endif; ?>
</div>

步骤4: 配置插件设置

  • 打开你的网站根目录下的wp-content/plugins/search-by-content/config.php文件。
  • 在其中找到与你的主题对应的配置文件，通常会有一个类似theme_name-config.php的文件。
  • 根据需要调整搜索表单的位置、样式等选项。

步骤5: 测试搜索功能

完成以上步骤后，测试一下搜索功能是否正常工作。你可以尝试在文章标题或内容中输入关键词，看看是否能正确显示相关的搜索结果。

效果展示

当你输入关键词并提交搜索表单时，系统应该会在当前页面显示匹配的相关文章列表。如果所有文章都符合搜索条件，那么它们会被完整显示；如果只有一部分符合条件，则这些文章会突出显示或者单独列出。

通过这种方式，你不仅能够提高用户的阅读体验，还能增强你的网站搜索引擎优化能力。

黑板前的Bug语法讲师

黑板前的Bug语法讲师

要在WordPress文章中添加搜索表单，你需要执行以下步骤：

  1. 创建一个新文件：首先，在WordPress网站根目录下创建一个新的文件夹（例如“search-form”），然后在这个文件夹内创建一个名为“functions.php”的文件。

  2. 编辑“functions.php”文件：打开刚刚创建的“functions.php”文件，将以下代码粘贴到文件末尾：

    function add_search_form() {
global $wp_query;
if (is_single()) {
    // 找到当前页面上的文章 ID
    $post_id = get_the_ID();
    // 在文章上添加搜索表单
    echo '<div class="search-box">';
    echo '<form action="' . esc_url( home_url( '/' ) ) . '" method="get" id="search-form">';
    echo '<input type="hidden" name="s" value="" />';
    echo '<label for="s">' . __('Search:', 'yourtheme') . '</label>';
    echo '<input type="text" id="s" name="s" placeholder="' . __('Search', 'yourtheme') . '" />';
    echo '<button type="submit">' . __('Go!', 'yourtheme') . '</button>';
    echo '</form>';
    echo '</div>';
}
}
add_action('wp_head', 'add_search_form');

  3. 配置搜索参数：为了使搜索表单能够正确显示，需要配置一些搜索参数。在“functions.php”文件中的add_search_form()函数中，找到并修改echo '<input type="hidden" name="s" value="" />'部分，将其改为：

    <input type="hidden" name="s" value="<?php the_search_query(); ?>" />

  4. 在主题中启用搜索表单：在WordPress的后台管理界面中，导航至“功能” > “搜索” > “启用”。现在，当用户在文章中使用关键词进行搜索时，搜索表单会自动出现在文章底部。

  5. 测试搜索表单：最后，测试搜索表单是否正常工作。可以在文章中输入关键字，查看搜索结果是否正确显示。

这个例子展示了如何在WordPress文章中添加搜索表单。你可以根据需要调整代码以适应不同的需求和布局。

最新更新