12搜索调用–新手小白，快速使用静态页面建立wordpress主题

22.09.2025 76

在调用之前我们需要建立一个搜索页面，在搜索页面中我们需要调用搜索框和搜索结果，
搜索页面放在主题根目录下面，文件名为search.php (保留的特殊文件名称)
比如在主题根目录下面创建searchform.php文件，

直接用search.php文件，

搜索调用：
1.1默认的搜索函数

TEXT

1234567

<form role="search" method="get" id="searchform" class="searchform" action="<?php echo home_url( '/' ); ?>">
    <div>
        <label class="screen-reader-text" for="s"><?php _x('Search for:', 'label'); ?></label>
        <input type="text" value="" name="s" id="s" />//搜索值为空，name="s" id="s" 
        <input type="submit" id="searchsubmit" value="<?php esc_attr_e('Search'); ?>" />
    </div>
</form>

注意：

搜索框的id是s
搜索按钮的id是searchsubmit
搜索框的name是s
搜索按钮的name是submit
搜索框的value是空
搜索按钮的value是Search
搜索框的type是text
搜索按钮的type是submit

本次模版案例：搜索定义原代码：

TEXT

1234567891011121314

 <!-- 搜索面板 -->
    <div class="search-panel" id="search-panel">
        <div class="container">
            <div class="search-panel-content">
                <form class="search-form">
                    <input type="text" placeholder="请输入搜索关键词...">
                    <button type="submit"><i class="fas fa-search"></i></button>
                </form>
                <div class="search-close" id="search-close">
                    <i class="fas fa-times"></i>
                </div>
            </div>
        </div>
    </div>

更改后的代码：

TEXT

123456789101112131415

<!-- 搜索面板 -->
    <div class="search-panel" id="search-panel">
        <div class="container">
            <div class="search-panel-content">
                <form class="search-form" id="searchform" action="<?php echo home_url( '/' ); ?>">//增加了action，id="searchform"
                    
                    <input type="text" placeholder="请输入搜索关键词..." name="s" id="s" value="">//增加了value="" name="s" id="s" 
                    <button type="submit" value="<?php esc_attr_e('Search'); ?>"><i class="fas fa-search"></i></button>
                </form>
                <div class="search-close" id="search-close">
                    <i class="fas fa-times"></i>
                </div>
            </div>
        </div>
    </div>

相比较静态代码增加了

TEXT

12345

  1. id="searchform" action="<?php echo home_url( '/' ); ?>"//在form中增加了action，id="searchform"

    2. value="" name="s" id="s" //在搜索栏中增加了value="" name="s" id="s" 

    3. value="<?php esc_attr_e('Search'); ?>"//在搜索按钮中增加了value="<?php esc_attr_e('Search'); ?>"

搜索结果
2.1 搜索结果页面的模板

TEXT

12345678910111213141516171819202122

<?php get_header(); ?>
<div id="container">
    <div id="content" role="main">
        <h1 class="page-title">Search Results for: <?php the_search_query(); ?></h1>
        <?php if ( have_posts() ) : ?>
        <div id="nav-above" class="navigation">
            <div class="nav-previous"><?php next_posts_link() ?></div>
            <div class="nav-next"><?php previous_posts_link() ?></div>
        </div>
        <?php while ( have_posts() ) : the_post(); ?>
            <?php get_template_part( 'content', get_post_format() ); ?>
        <?php endwhile; ?>
        <div id="nav-below" class="navigation">
            <div class="nav-previous"><?php next_posts_link() ?></div>
            <div class="nav-next"><?php previous_posts_link() ?></div>
        </div>
        <?php else : ?>
            <p><?php _e( 'Sorry, but nothing matched your search criteria.' ); ?></p>
        <?php endif; ?>
    </div>
</div>
<?php get_footer(); ?>

« 上一篇: 11首页信息调用–新手小白，快速使用静态页面建立wordpress主题
下一篇: 13小工具的使用–新手小白，快速使用静态页面建立wordpress主题 »