目录
一般的网站都带有搜索功能,下面是“石家庄职业技术学院”网站的“搜索框”
添加搜索框
如果搜索框出现在菜单中,可以在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;
?>