初学者!让我们用WordPress制作自己的搜索功能!

WordPress的是一种CMS,经常在媒体网站和官方公司网站上使用。

WordPress的的功能之一是志愿者正在积极开发主题。通过使用该主题,您可以创建一个完全不了解html的网站。

可以使用的功能因主题而异,但是搜索表单已在大多数主题中实现。但是,有极少数的Wordpress主题没有实现搜索表单。

在这种情况下,为什么不放弃搜索表单功能并自己创建呢?

使用Wordpress创建自己的搜索表单比您想象的要容易,因为简单的表单不需要安装插件,并且代码量很小。

如果您几乎不懂html,肯定可以在30分钟内完成操作,因此,如果您要搜索表格,请参见此页面并完成!

1.搜索功能的结构

搜索功能是

  • searchform.php
  • search.php

搜索功能由这两个文件组成。
简单介绍每个

在searchform.php中

  • 用于输入搜索词的搜索窗口
  • 搜索窗口旁边的搜索按钮

相关信息

在search.php中

  • 显示搜索结果的信息

是写的。在这里,让我们创建一个非常简单的搜索表单,该表单在搜索窗口旁边有一个按钮,并在您搜索时提供搜索结果。

2.努力做到

2.1创建一个搜索窗口(searchform.php)

让我们首先从搜索表单中进行选择。

首先做一个搜索窗口

在WordPress中创建searchform.php

在此searchform.php中创建一个搜索窗口。
将照片中的代码输入到searchform.php中

 
<form method="get" action="<?php echo home_url('/'); ?>" >
<input name="s" type="text">
 

用于表单和输入的非常简单的代码。

请为表单操作指定博客顶部的URL。尽管在输入中将name设置为s,但是在创建Wordpress搜索窗口时必须将name设置为s。

这是搜索窗口的唯一设置,但仅此一项,搜索窗口本身尚未设置。

显示搜索窗口

<?php get_search_form(); ?>


您需要在要显示的地方编写代码。

因此,在首页的index.php中

我把这段代码放进去了。

如果输入代码,则如下图所示“搜索窗口”应该显示。

截图2016-03-14 pm 10.18.26 pm

没有搜索按钮,仅显示搜索窗口。没有搜索按钮,但是您可以自己搜索。

它太简单和孤独了,所以让我们创建一个按钮来对其进行搜索。

在前面的代码中添加另一行。

 
<form method="get" action="<?php echo home_url('/'); ?>" >
<input name="s" type="text">
 
<input type="image" src="<?php bloginfo('template_url'); ?>/images/search.png">
 

在底部添加了新代码。

此代码从Wordpress主题文件夹中的图像调用search.png。
现在,如果您看一下结果

屏幕截图2016-03-14 pm 10.29.08

如您所见,该按钮显示在搜索窗口旁边。
但是,按钮的位置和搜索窗口的位置略有不同。

现在,通过为按钮指定CSS来解决此问题。

<input type="image" src="<?php bloginfo('template_url'); ?>/images/sesarch.png"
   
   style="
       vertical-align:middle;
       height:32px;
   ">

它是在输入标签中使用样式指定的,以便可以一起查看,但是在实际创建网站时,让我们在CSS文件中对其进行描述。

将“垂直对齐”设置为“中间”,以使图像位于搜索窗口的中心,并使搜索窗口和按钮的高度相同。然后

屏幕截图2016-03-14 pm 10.34.11

显示准备就绪。这样就完成了搜索表单的创建。

但是,不能单独使用搜索功能。因为没有文件可显示搜索结果。

现在,让我们编写一个显示搜索结果的php。

2.2。创建搜索结果

	<?php if ( have_posts() ) : ?>


<h1><?php printf( __( 'Search Results for: %s', 'altitude' ), '<span>' . get_search_query() . '</span>' ); ?></h1>

					
		<?php while ( have_posts() ) : the_post(); ?>
				<?php get_template_part( 'content', 'search' ); ?>
		<?php endwhile; ?>

		<?php else : ?>


該当なし

		<?php endif; ?>

在search.php中编写类似上面的代码。

这也是一个非常简单的代码。

我正在编写代码以显示在h1中搜索的关键字。即使您不编写h1本身,它也可以工作,因此,如果不需要显示搜索词,则无需编写它。

如果可以,请实际搜索并查看搜索结果。我在这里搜索“ Hello”。

截图2016-03-14 PM 10.42.56 pm

如果使用浏览器检查搜索结果,则会看到此类搜索结果。

利用这种搜索功能,可以用简单的代码实现它。

带有插件的增强搜索功能!

这是一个非常简单的搜索表单,但是您可能需要具有更多功能的搜索表单。推荐给这类人的插件WP自定义字段搜索介绍。

在安装插件后,您可以轻松地使用它

<?php if(function_exists('wp_custom_fields_search')) wp_custom_fields_search(); ?>

让我们写。
如果你看看写的地方

屏幕截图2016-03-14下午11.13.51

仅此一项就创建了具有类别过滤功能的搜索表单。

截图2016-03-15 AM 10.59.22
该图像是WP自定义字段搜索的设置屏幕。

您可以选择“标签”是否为名称,选择要通过“日期类型”缩小的数据,文本是“小组件”中的复选框。

概要

添加搜索功能非常容易,因此,如果要使用搜索功能,建议您创建一个。

如果您自己创建搜索功能时甚至一点也不了解html / css,则可以通过玩这次创建的文件来按自己的喜好安排搜索结果显示等。

最好使用分布式主题,但是如果要详细自定义主题,则必须自己修改代码,因此要养成尽可能简单的习惯。我们走吧。

如果您自己做一些简单的事情,添加一些新功能就可以自己做!

撰写本文的人

我是一名自由网页工程师。博客://uetani33.net/