日星网 windows 中文论坛

 找回密码
 加入我们

QQ登录

只需一步,快速开始

查看: 55|回复: 0

WordPress模板开发 之一 搜索页

[复制链接]
发表于 2020-9-29 03:20:58 | 显示全部楼层 |阅读模式
本来想详细的进行一次WordPress模板开发的讲解,一直抽不出来时间(看片打游戏)。整好有一个开发WordPress搜索页的项目,在模板开发里先介绍搜索页的介绍吧


1. 搜索页你得先有个搜索框
WordPress其实本身已经带有搜索的完整体系,你只要写好搜索框和搜索页即可。

搜索框一般可以默认,但是既然是我们自己开发肯定想要用自己的代码。在你的模板目录下(我的是wpbootstrap)
创建一个新的php文件,起名为 searchform.php , 这个很重要,不要改成其他的名字

直接上代码(我很懒)
  1. <?php
  2. /**
  3. * Template for displaying search forms in Winbug
  4. *
  5. * @package WordPress
  6. * @subpackage wpbootstrap
  7. * @since wpbootstrap Seventeen 1.0
  8. * @version 1.0
  9. */

  10. ?>

  11. <form action="/" method="get">
  12.     <div class="input-group mb-3">
  13.         <fieldset>
  14.             <span class="fa fa-search"></span>
  15.             <input type="text" class="form-control" placeholder="Search" aria-label="Search" aria-describedby="basic-addon1" name="s" id="search" value="<?php the_search_query(); ?>">
  16.         </fieldset>
  17.     </div>
  18. </form>
复制代码


Form标签以内的内容可以根据你们自己的需求进行修改,不能修改的地方有 name, id, value这三个属性不能动。

2. 搜索页你还得有个页面
在你的模板目录中再创建一个search.php的文件

直接上代码

  1. <?php
  2. /**
  3. * The template for displaying search results pages
  4. *
  5. * @link
  6. *
  7. * @package WordPress
  8. * @subpackage wpbootstrap
  9. * @since wpbootstrap 1.0
  10. * @version 1.0
  11. */

  12. get_header(); ?>
  13. <div class="container" id="contents">
  14.     <div class="row cate_panner">
  15.         <?php get_sidebar('single'); ?>
  16.         <div class="col-md-9 post_content">
  17.             <div class="wp-bootstrap-blocks-row row">
  18.               <div class="col-md-12">
  19.               <?php while ( have_posts() ) : the_post(); ?>
  20.                   <a href="<?php the_permalink(); ?>"><p class="title"><?php the_title(); ?></p><p class="description"><?php the_excerpt(); ?></p></a>

  21.               <?php endwhile; ?>
  22.               </div>
  23.             </div>
  24.         </div>
  25.     </div>
  26. </div>

  27. <?php
  28. get_footer();
复制代码

当然此处也可以根据大家自己的需求进行修改,基本上和建立一个列表页很像

*新人重点
  • the_permalink()  文章链接
  • the_title() 文章标题
  • the_excerpt() 文章摘要


3. 搜索准备好了,你叫我放哪里
这还用我教!! 逗你们玩的。在自己想要添加搜索的地方,添加以下代码

  1. <?php get_search_form(); ?>
复制代码


放心好了,安全无问题。


您需要登录后才可以回帖 登录 | 加入我们

本版积分规则

手机版|小黑屋|日星网

GMT, 2020-10-26 04:31 PM , Processed in 0.016693 second(s), 18 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表