• wordpress CMS主题:ssmay主题 wordpress CMS主题:ssmay主题
  • 首页 > wordpress CMS主题制作 > WP主题开发16:wordpress主题trans,搜索页模板如何创建?

    WP主题开发16:wordpress主题trans,搜索页模板如何创建?

    作者: 分类:wordpress CMS主题制作 点击: 68 次
    wordpress CMS主题:ssmay主题

      扫描下面的二维码,“关注”我的头条号,我会每天更新免费视频课程。

      wordpress主题的动态模板中,搜索页模板并不是必须的。但是,为了对用户更加的友好,可以让用户在wordpress网站上能够通过搜索来查找自己的想要的文章内容,我们还是有必要给trans主题添加一个搜索页模板。一般情况下,wordpress主题动态模板的搜索页的整体布局和文章列表页模板是差不多的,所以,我们可以参照文章列表页来做。

      第一步:创建一个search.php文件。

      在wordpress主题trans目录下创建一个search.php文件,这是wordpress程序要求的默认搜索页模板的文件,名字必须是search。然后,把trans静态模板search.html文件中的代码全部复制到search.php文件中。

      第二步:修改头部的代码。

      在search.php文件中,删除从< !doctype>到< /header>标签之间的所有代码。然后,在同样的位置,通过wordpress函数来引入公共的头部模板文件:

      < ?php get_header(); //引入头部模板 ?>

      修改头部模板header.php文件中的搜索表单的代码,代码如下:

      < form action="< ?php bloginfo("siteurl"); ?>" method="get">
      < input type="search" name="s" placeholder="搜索...">
      < input type="submit" value="搜索">
      </form>

      WP主题开发16:wordpress主题trans,搜索页模板如何创建?

      注:第一个input输入框的name值必须是 s ,这也是wordpress的硬性要求。否则,就搜索不到任何内容。

      第三步:修改search.php的侧边栏代码。

      在search.php文件中,删除< div class="c_right">标签所包含的所有侧边栏代码,然后,在这个位置上,引入sidebar.php侧边栏公共模板:

      < ?php get_sidebar(); //引入侧边栏模板 ?>

      第四步:修改搜索页模板的底部代码。

      在搜索页模板中,删除从< footer>标签到模板代码结束的所有底部代码,然后,在当前的位置上,添加如下代码引入底部公共模板:

      < ?php get_footer(); //引入底部模板 ?>

      第五步:修改search.php的左侧主体部分的面包屑导航。

      因为是搜索页面模板,所以,这个面包屑导航,我们要体现出搜索结果。所以,我们删除search.php模板中< div class="left_top">标签内部的所有代码,替换成如下的代码:

      < ul>
      < li>< span class="dashicons-before dashicons-admin-generic"></span>搜索</li>
      < li>
      < a href="<?php bloginfo("siteurl"); ?>">< span class="dashicons-before dashicons-admin-home"></span>首页</a> > 搜索结果

      </li>
      </ul>
      < ul>
      关键词“< ?php the_search_query(); ?>”共有 < ?php global $wp_query; echo $wp_query->found_posts; ?> 个搜索结果
      </ul>

      上面代码解说:

      the_search_query():输出要搜索的关键词;
      $wp_query:是wordpress提供的一个全局变量,它包今当前页面的所有查询数据;
      $wp_query->found_posts:搜索当前关键词的数量

      搜索页面面包屑导航的效果如下图:

      WP主题开发16:wordpress主题trans,搜索页模板如何创建?

      第六步:修改搜索页模板左侧的文章列表。

      删除search.php搜索页模板中< div class="left_bottom">标签内部的所有代码,然后,替换成如下代码:

      < ?php
      if ( have_posts() ):
      while ( have_posts() ) : the_post();
      ?>
      < div class="list">
      < ul class="list_h">
      < a href="< ?php the_permalink(); ?>">< ?php the_title(); ?></a>
      </ul>
      < ul class="list_con">
      < ul class="list_con_left">
      < a href="< ?php the_permalink(); ?>">
      < ?php
      if(has_post_thumbnail()) { //如果有特色图片,就调用特色图片
      the_post_thumbnail(
      'thumbnail' ,
      array(
      'alt' => trim(strip_tags( $post->post_title )),
      'title' => trim(strip_tags( $post->post_title ))
      )
      );
      }else { //否则调用文章第一张图片
      echo '< img src="'.catch_first_image().'" alt="'.$post->post_title.'" width="150" height="150" />';
      }
      ?>
      </a>
      </ul>
      < ul class="list_con_right">
      < li>
      < ?php echo mb_substr(strip_tags($post->post_content),0,120,'utf-8'); ?> ...
      </li>
      < li>
      < span class="dashicons-before dashicons-admin-users">
      < ?php the_author(); ?>
      </span>
      < span class="dashicons-before dashicons-calendar-alt">
      < ?php the_time("Y年m月d日"); ?>
      </span>
      < span class="dashicons-before dashicons-visibility">
      < ?php echo get_post_meta($post->ID, 'views', true); ?>
      </span>
      </li>
      </ul>
      </ul></div>

      < ?php
      endwhile;
      endif;
      ?>

      这段代码,我们在archive.php文章列表页模板中我们已经介绍过了,就不多说了。

      第七步:添加分页代码。

      在trans静态模板的代码中,我们没有分布代码,这里,我们添加上搜索结果的分页效果代码:

      < div class="left_page">
      < ?php
      the_posts_pagination( array(
      'mid_size' => 3, //当前页码数的 两边 显示几个页码。
      'prev_text' =>'<', //上一页
      'next_text' =>'>', //下一南
      ) );
      ?>
      </div>

      这里,我们使用到了wordpress提供的分页函数the_posts_pagination()来实现搜索页的文章列表的分页效果。这个函数我们在修改首页模板时,我们就介绍过了,如果想了解它,可以回到我们创建首页模板index.php的文章去看看。

      好了,通过以上几部,我们就完成了wordpress主题动态模板trans的搜索页面模板的创建和修改,从这几节课,我们可以看出,有了公共模板后,我们创建其它动态模板时,就方便多了,只要按照本节的几个步骤,就可以很轻松地创建出wordpress主题的动态模板文件。如果喜欢我的文章,别忘了帮我“点赞、评论和关注我”哦。



      欢迎“关注”我的头条号,我会每天更新免费视频课程。

      头条二维码
      关注我的头条号
      头条二维码
      加入我的QQ群

    文章作者:码不停蹄
    本文地址:http://wanlimm.com/77202006248678.html
    版权所有 © 转载时必须以链接形式注明作者和原始出处!

    上一篇:
    下一篇:
    wordpress CMS主题:ssmay主题

    或许你会感兴趣的文章:

    发表评论

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

    This site uses Akismet to reduce spam. Learn how your comment data is processed.