WordPress 主题开发 - (十二) Search模板与Page模板 待翻译
The Search Template and The Page Template are vital to any complete WordPress Theme. And they’re both really easy to code.
For both of these Templates, we’ll start with our template-template,single.php
, again. As a refresher, here’s single.php
.
<?php
/**
* The Template for displaying all single posts.
*
* @package Shape
* @since Shape 1.0
*/
get_header ();
?>
<div id="primary" class="content-area">
<div id="content" class="site-content" role="main">
<?php while ( have_posts() ) : the_post(); ?>
<?php shape_content_nav( 'nav-above' ); ?>
<?php get_template_part( 'content', 'single' ); ?>
<?php shape_content_nav( 'nav-below' ); ?>
<?php
// If comments are open or we have at least one comment, load up the comment
// template
if (comments_open () || '0' != get_comments_number ())
comments_template ( '', true );
?>
<?php endwhile; // end of the loop. ?>
</div>
<!-- #content .site-content -->
</div>
<!-- #primary .content-area -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>
But, of course, each one is going to take its own path.
The Search Template
In search.php
we’re going to wrap our loop inside an IF statement—in case we don’t have any posts to loop through.
Here’s how it’ll work: IF we have posts, or, in other words, if there are posts that match the terms we’re searching for, THEN loop through them, sorta just like in index.php
, but IF we don’t have posts to loop through, or, if there aren’t any posts that match our search terms, give our searchers another chance at this searching business.
In code, it would look like this:
<?php
/**
* The template for displaying Search Results pages.
*
* @package Shape
* @since Shape 1.0
*/
get_header(); ?>
<section id="primary" class="content-area">
<div id="content" class="site-content" role="main">
<?php if ( have_posts() ) : ?>
<header class="page-header">
<h1 class="page-title">
<?php printf( __( 'Search Results for: %s', 'shape' ), '<span>' . get_search_query() . '</span>' ); ?></h1>
</header><!-- .page-header -->
<?php shape_content_nav( 'nav-above' ); ?>
<?php /* Start the Loop */ ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php get_template_part( 'content', 'search' ); ?>
<?php endwhile; ?>
<?php shape_content_nav( 'nav-below' ); ?>
<?php else : ?>
<?php get_template_part( 'no-results', 'search' ); ?>
<?php endif; ?>
</div><!-- #content .site-content -->
</section><!-- #primary .content-area -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>
Pretty straightforward, right? Let’s cover a few areas in the code.
First, take a look at everything between if ( have_posts() ) :
(line 14) and shape_content_nav( 'nav-below' );
. If there are search results, this is the markup that controls how the search results page will look. We’ll get a nice title at the top that includes the search term, followed by a listing of the posts returned in the search.
Also, shape_content_nav() works the same way here as it does inindex.php
.
You’ll remember get_template_part()
from earlier lessons. It’s loading the file containing the actual markup for the posts returned in the search. It’ll first look for a file called “content-search.php”, but since we are not creating that file, it’ll use content.php
instead. If you wanted to format your search results posts differently (just like we did for Aside posts), feel free to create a “content-search.php” file and go wild!
Next, let’s look at the code between else :
(line 31) and endif;
(line 35). If there are no search results to display, we want to let our visitor know, nicely. To do that, we load the same no-results.php
file that we created in the index.php
lesson. It sure feels great when we can resuse code without needing to actually paste it into each file.
The Search Form Template
Back in WordPress Theme Template & Directory Structure, we addedsearchform.php
. If you want to customize the markup of your theme’s search form, this is the file you’d use to make that happen. Otherwise, searchform.php
is optional. If your theme doesn’t have asearchform.php
, then WordPress displays the search form with its own built-in markup.
Here’s the code to paste into searchform.php
.
<?php
/**
* The template for displaying search forms in Shape
*
* @package Shape
* @since Shape 1.0
*/
?>
<form method="get" id="searchform" action="<?php echo esc_url( home_url( '/' ) ); ?>" role="search">
<label for="s" class="assistive-text"><?php _e( 'Search', 'shape' ); ?></label>
<input type="text" class="field" name="s" value="<?php echo esc_attr( get_search_query() ); ?>"
id="s" placeholder="<?php esc_attr_e( 'Search …', 'shape' ); ?>" />
<input type="submit" class="submit" name="submit" id="searchsubmit" value="<?php esc_attr_e( 'Search', 'shape' ); ?>" />
</form>
The Page Template
You know what the Page Template is for. WordPress thinks of it as a post out of chronological order. We think of it as, well a page. But largely, it’s defined by what it doesn’t have: all of the usual metadata (such as navigation, timestamps, categories, and tags) included a blog post.
Our Page template file will look very much like single.php
. We will also place the contents of the Page loop inside content-page.php
.
First, let’s set up the Page template. Open page.php
and add the following code.
<?php
/**
* The template for displaying all pages.
*
* This is the template that displays all pages by default.
* Please note that this is the WordPress construct of pages
* and that other 'pages' on your WordPress site will use a
* different template.
*
* @package Shape
* @since Shape 1.0
*/
get_header(); ?>
<div id="primary" class="content-area">
<div id="content" class="site-content" role="main">
<?php while ( have_posts() ) : the_post(); ?>
<?php get_template_part( 'content', 'page' ); ?>
<?php comments_template( '', true ); ?>
<?php endwhile; // end of the loop. ?>
</div><!-- #content .site-content -->
</div><!-- #primary .content-area -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>
Now, let’s place the markup for the actual Page inside content-page.php
. Paste the following into content-page.php
.
<?php
/**
* The template used for displaying page content in page.php
*
* @package Shape
* @since Shape 1.0
*/
?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<header class="entry-header">
<h1 class="entry-title"><?php the_title(); ?></h1>
</header><!-- .entry-header -->
<div class="entry-content">
<?php the_content(); ?>
<?php wp_link_pages( array( 'before' => '<div class="page-links">' . __( 'Pages:', 'shape' ), 'after' => '</div>' ) ); ?>
<?php edit_post_link( __( 'Edit', 'shape' ), '<span class="edit-link">', '</span>' ); ?>
</div><!-- .entry-content -->
</article><!-- #post-<?php the_ID(); ?> -->
It’s a stripped-down version of content-single.php
. We’ve omitted all of the metadata that’s associated with posts.
And with that, you’re done with this lesson. Enjoy your new Page and Search templates.
WordPress 主题开发 - (十二) Search模板与Page模板 待翻译的更多相关文章
- 黄聪:《跟黄聪学WordPress主题开发》
又一个作品完成!<跟黄聪学Wordpress主题开发>,国内最好的Wordpress主题模版开发视频教程!! 目录预览: WordPress官方源文件层式结构讲解 WordPress数据库 ...
- wordpress 主题开发
https://yusi123.com/3205.html https://themeshaper.com/2012/10/22/the-themeshaper-wordpress-theme-tut ...
- 专题开发十二:JEECG微云高速开发平台-基础用户权限
专题开发十二:JEECG微云高速开发平台-基础用户权限 11.3.4自己定义button权限 Jeecg中.眼下button权限设置,是通过对平台自己封装的button标签(<t:dgFun ...
- 敏捷宣言(Agile Manifesto)和敏捷开发十二原则
敏捷宣言 The Agile Manifesto Individuals and interactions over Process and tools 个体与交互 重于 过程和工具 Working ...
- STC8H开发(十二): I2C驱动AT24C08,AT24C32系列EEPROM存储
目录 STC8H开发(一): 在Keil5中配置和使用FwLib_STC8封装库(图文详解) STC8H开发(二): 在Linux VSCode中配置和使用FwLib_STC8封装库(图文详解) ST ...
- WordPress 主题开发 - (八) Head模板 待翻译
THE WORDPRESS THEME HEADER TEMPLATE Now we get into the nitty-gritty: building up your header.php an ...
- WordPress 主题开发 - (二) 理解主题 待翻译
What is “Theme Sense”? What is “Theme Sense”? Theme Sense is an intuitive understanding of WordPress ...
- [转]WordPress主题开发:主题初始化
本文转自:http://www.cnblogs.com/tinyphp/p/4391182.html 在最简单的情况下,一个WordPress主题由两个文件构成: index.php -------- ...
- WordPress主题开发:主题初始化
在最简单的情况下,一个WordPress主题由两个文件构成: index.php ------------------主模版 style.css -------------------主样式表(注意 ...
随机推荐
- C Primer Plus(第五版)4
第四章 字符串和格式化输入输出 4.2 字符串简介 字符串(character string)就是一个或多个字符的序列.下面是一个字符串的例子: “Zing went the strings of m ...
- poj 1007 (nyoj 160) DNA Sorting
点击打开链接 DNA Sorting Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 75164 Accepted: 30 ...
- IOS学习之路--BLOCK
/* 1.定义block变量: 返回值类型 (^block变量名) (参数类型1, 参数类型2, ....); 2.给block变量赋值 block变量名 = ^(参数类型1 参数名称1, ..... ...
- hbase的regionserver宕机
错误日志: regionserver.HRegionServer: Failed deleting my ephemeral node zookeeper.RecoverableZooKeeper: ...
- 【转】Bash脚本实现批量作业并行化
首先附上自己常用的代码 ---------------------------------------------------------------------------------------- ...
- oracle 内存结构 share pool sql解析的过程
1.sql解析的过程 oracle首先将SQL文本转化为ASCII字符,然后根据hash函数计算其对应的hash值(hash_value).根据计算出的hash值到library cache中找到对应 ...
- 部署windows服务
(1) cd C:\Windows\Microsoft.NET\Framework64\v4.0.30319(2) InstallUtil.exe D:\SVN\zhongchao\开发\WeiXin ...
- 解决error C2059: 语法错误:“::”问题
错误代码提示: >f:\opencv\opencv\build\include\opencv2\flann\lsh_table.h(): error C2059: 语法错误:“::”f:\ope ...
- 【测试】手工搭建DG
前言:(一)准备工作: 1.数据库要处于归档模式: 2.监听参数:local_listener 默认值为空--1521 3.关闭闪回(可能会触发数据库的bug,备库不能开闪回) 4.如果有外部表,外部 ...
- 根据文字返回Label高度
NSString分类 @implementation NSString (stringSize) //计算文字显示的所需要的size -(CGSize)sizeWithFont:(UIFont *)f ...