创建搜索页面

搜索页面是具有自定义页面模板的 WordPress页面,可为用户提供更多信息以搜索您的站点。

你需要知道的事情 #

不同的 WordPress 主题具有不同的模板文件。有些包括search.php模板文件。这不是一个搜索页面,它只是一个显示搜索结果的模板。还有一个名为searchform.php. 这是一个模板文件,通常包含在许多主题的侧边栏中,并生成搜索框表单。如果您的主题中没有,您可以轻松地从默认主题中复制它。

要创建您自己的自定义搜索页面,您需要创建一个页面模板以包含您的搜索表单以及您希望用户在搜索您的网站之前看到的信息。

检查您的 WordPress 主题以查看它是否包含page.php模板文件。默认 WordPress 主题确实包含此模板,但很多都没有。如果是这样,请按照这些说明进行操作。如果没有,我们有您创建自己的.

顶部↑

创建搜索页面模板 #

1. 使用文本编辑器,打开page.php并另存为searchpage.php。如果您没有page.php,您可以根据您的主题index.php模板文件创建一个。

注意:文件名search.php保留为特殊模板名,避免使用;建议searchpage.php只是使在文件列表中易于识别。

2.保存后,编辑文件:

  • 删除循环(即基本上您的内容中的所有内容div),保持div标签完好无损。
  • 添加标题,例如“搜索帖子”或类似内容。您可以使用 CSS 样式表中的现有类,也可以创建一个新类。
  • 将以下内容复制到内容或包含您主页内容的div任何其他内容中:div
<?php get_search_form(); ?>
  • 在您的顶部searchpage.php,在其他任何内容之前,添加此内容以为您的搜索页面提供一个 WordPress 将在管理屏幕中识别的标题:
<?php 
/**
* 模板名称:搜索页面
*/
?>

3. 保存文件。

4. 将文件上传到您的主题目录(如果您对style.css样式表文件进行了更改,也请上传)。

如果你searchpage.php在二十七的 page.php 中创建,它会是这样的:

<?php 
/**
* 模板名称:搜索页面
*/

?>
<?php get_header(); ?>

<div class="wrap">
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<?php get_search_form( ); ?>
</main><!-- #main -->
</div><!-- #primary -->
</div><!-- .wrap -->

<?php get_footer();

顶部↑

创建搜索页面 #

基于搜索页面模板,我们将创建搜索页面。

  1. 管理屏幕中,转到页面 > 添加新的。
  2. 在标题字段中输入Search
    不要在内容区写任何东西。
  3. 仍在同一页面上时,在右侧菜单中查找页面属性。
  4. 选择Template中的下拉菜单,然后选择Search Page
  5. 单击发布按钮。

它将显示简单的搜索表单,例如

顶部↑

链接到您的搜索页面 #

您现在可以通过多种方式链接到您的自定义搜索页面。

顶部↑

使用页面 ID #

无论您是否使用永久链接,您都可以使用页面的页面 ID 号链接到新的搜索页面。在您的任何帖子、页面或模板中插入下一行

<a href="index.php?page_id=17" title="Search Page">Search Page</a>

或者您可以将下一行插入模板

<a href="<?php echo home_url(); ?>/?page_id=17">Search Page</a>

顶部↑

使用 Page Slug #

Page slug 在编辑页面屏幕中设置。如果您使用的是永久链接,则它是页面的名称。您可以手动更改此设置。Page slug 链接的一个示例是:

<a href="/wordpress/search-page/" title="Search Page">Search Page</a>

当 slug 为“搜索页面”时,适用于任何帖子、页面或模板。或者您可以将下一行插入模板

<a href="<?php echo home_url(); ?>/wordpress/search-page/" title="Search Page">Search Page</a>

顶部↑

使用 wp_list_pages() #

如果您使用wp_list_pages()模板标签,页面名称将在您的页面列表中自动生成。

顶部↑

自定义您的搜索页面 #

现在您已经创建了自定义搜索页面,您可以自定义显示。searchpage.php在文本编辑器中打开您的并在那里进行编辑。

上面的get_search_form()功能为你searchform.php的内容div,你可以添加文字来帮助访问者搜索你的网站。

<p>My Site features articles about 
<a title="WordPress Articles" href="/category/wordpress/">WordPress</a>, 
<a title="Web Design Articles" href="/category/web-design/">web page design</a>, 
<a title="Development Articles" href="/category/website-development/">website development</a> 
and <a title="CSS Articles" href="/category/css/">CSS</a>.</p>
<p>To search my website, please use the form below.</p>

您可能希望包含关键字列表或其他信息、图像或详细信息,以自定义您的自定义搜索页面。

顶部↑

保留搜索页面结果和分页 #

将自定义应用到搜索模板时,搜索结果和分页可能会停止工作。为避免这些问题,任何开发人员需要做的第一件事就是将以下代码添加到其搜索模板的开头,以确保保留原始 WordPress 查询。要自定义查询,请将附加参数附加到(array) $search_query。通过新的 $wp_query 对象执行 $search_query,关于 WP_Query 对象的更多信息可以在WP_Query中找到。

<?php
global $query_string;

$query_args = explode("&", $query_string);
$search_query = array();

foreach($query_args as $key => $string) {
	$query_split = explode("=", $string);
	$search_query[$query_split[0]] = $query_split[1];
} // foreach

$search = new WP_Query($search_query);
?>

可以在WP_Query找到其他自定义参数。

顶部↑

显示总结果 #

要访问来自search.php搜索结果页面的搜索结果总数,您应该使用 wp_query 对象检索找到的帖子总数。

<?php
global $wp_query;
$total_results = $wp_query->found_posts;
?>

有关 WP_Query 的更多信息可以在 WP_Query 中找到

Powered by BetterDocs

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

Scroll to Top