wordpress5.3主题开发第七课：搜索框

一般的网站都带有搜索功能，下面是“石家庄职业技术学院”网站的“搜索框”

添加搜索框

如果搜索框出现在菜单中，可以在functions.php文件中直接写入以下代码，其它的什么也不需要做（前提：导航菜单已经做完）。

/**
 * Add searchbox in menubar
 */
add_filter( 'wp_nav_menu_items','add_search_box', 10, 2 );

function add_search_box( $items, $args ) {
    $items .= '<li>' . get_search_form( false ) . '</li>';
    return $items;
}

介绍一下get_search_form( $echo )

参数 $echo

(布尔值) (可选) 如果是 true 则输出表单； false 则返回表单的字符串。

默认: true

返回值

(字符串string)

如果参数 $echo 设置为 false，就返回表单的HTML代码。

这个函数的结果就是生成一段HTML代码，如果你的主题没有 searchform.php， WordPress 将使用其内置的搜索表单：

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

如果你的主题没有 searchform.php ，将自动使用上面的代码替代。请记住，搜索表单需要一个 Get 方式（method="get" ）到你博客的首页，而且文本输入框应该被命名为 s （name="s"），此外，还必须向上面的例子一样包含 alabel 。

一个自定义的 searchform.php 例子：

<form action="/" method="get">
    <fieldset>
        <label for="search">Search in <?php echo home_url( '/' ); ?></label>
        <input type="text" name="s" id="search" value="<?php the_search_query(); ?>" />
        <input type="image" alt="Search" src="<?php bloginfo( 'template_url' ); ?>/images/search.png" />
    </fieldset>
</form>

注释

searchform.php 存在时，$echo 参数将被忽略。一个解决办法是使用 get_search_form 过滤器（filter）来使表单通过 get_search_form() 。

以下运行结果

搜索框效果颜值不高，可以自定义样式，查看一下源码

<!--  导航菜单-->
<nav class="menu-container"><ul id="menu-%e9%a1%b6%e9%83%a8%e8%8f%9c%e5%8d%95" class="main"><li id="menu-item-40" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-40"><a href="/wordpress" aria-current="page">首页</a></li>
<li id="menu-item-43" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-43"><a href="http://localhost/wordpress/xygk/">学校概况</a>
<ul class="sub-menu">
	<li id="menu-item-45" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-45"><a href="http://localhost/wordpress/xygk/xyjj/">学院简介</a></li>
	<li id="menu-item-44" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-44"><a href="http://localhost/wordpress/xygk/xrld/">现任领导</a></li>
</ul>
</li>
<li id="menu-item-41" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-41"><a href="http://localhost/wordpress/zzjg/">组织机构</a>
<ul class="sub-menu">
	<li id="menu-item-42" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-42"><a href="http://localhost/wordpress/zzjg/gljg/">管理机构</a></li>
</ul>
</li>
<li id="menu-item-46" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-46"><a href="http://localhost/wordpress/category/xydt/">校园动态</a></li>
<li id="menu-item-47" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-47"><a href="http://localhost/wordpress/category/tzgg/">通知公告</a></li>
<li><form role="search" method="get" id="searchform" class="searchform" action="http://localhost/wordpress/">
				<div>
					<label class="screen-reader-text" for="s">搜索：</label>
					<input type="text" value="" name="s" id="s" />
					<input type="submit" id="searchsubmit" value="搜索" />
				</div>
			</form></li></ul></nav>

美化搜索框

在style.css文件中定义搜索框样式

/* 搜索框样式  */
#searchform {
   position: relative;
    width: 260px;
    height: 40px;
}

#searchform  .screen-reader-text{
    display: none;
}

#searchform input[type=text] {
    position: absolute;
    left:0;
    top: 7px;
    width: 250px;
    height: 25px;
    border: none;

}

#searchform input[type=submit] {
    position: absolute;
    top:7px;
    right: 10px;
    width: 50px;
    height: 24px;
    border: none;
}

搜索结果

如果主题没有search.php文件，搜索结果默认使用index.php显示搜索结果

创建一个search.php，显示搜索结果

<header class="page-header">
    <?php if ( have_posts() ) : ?>
        <h1 class="page-title">
            <?php
            /* translators: Search query. */
            echo '<span>' . get_search_query() . '</span>的搜索结果：' ;
            ?>
        </h1>
    <?php else : ?>
        <h1 class="page-title"><?php echo '未查到' ?></h1>
    <?php endif; ?>
</header><!-- .page-header -->

<?php if (have_posts()):    while (have_posts()): the_post();
        the_title('<h3>','</h3>');
        the_excerpt();
        the_content();
    endwhile;
endif;
?>

李书明

发布了159 篇原创文章 · 获赞 45 · 访问量 2万+

私信关注