WordPress基本模板文件

一套完整的WordPress模板应至少具有如下文件:
style.css: CSS(样式表)文件
index.php : 主页模板
archive.php : Archive/Category模板
404.php : Not Found 错误页模板
comments.php : 留言/回复模板
footer.php : Footer模板
header.php : Header模板
sidebar.php : 侧栏模板
page.php : 内容页(Page)模板
single.php : 内容页(Post)模板
searchform.php : 搜索表单模板
search.php : 搜索结果模板
当然,具体到特定的某款模板,可能不止这些文件,但一般而言,这些文件是每套模板所必备的。

基本条件判断Tag

is_home() : 是否为主页
is_single() : 是否为内容页(Post)
is_page() : 是否为内容页(Page)
is_category() : 是否为Category/Archive页
is_tag() : 是否为Tag存档页
is_date() : 是否为指定日期存档页
is_year() : 是否为指定年份存档页
is_month() : 是否为指定月份存档页
is_day() : 是否为指定日存档页
is_time() : 是否为指定时间存档页
is_archive() : 是否为存档页
is_search() : 是否为搜索结果页
is_404() : 是否为 “HTTP 404: Not Found” 错误页
is_paged() : 主页/Category/Archive页是否以多页显示

Header部分常用到的PHP函数

<?php bloginfo(’name’); ?> : 博客名称(Title)
<?php bloginfo(’stylesheet_url’); ?> : CSS文件路径
<?php bloginfo(’pingback_url’); ?> : PingBack Url
<?php bloginfo(’template_url’); ?> : 模板文件路径
<?php bloginfo(’version’); ?> : WordPress版本
<?php bloginfo(’atom_url’); ?> : Atom Url
<?php bloginfo(’rss2_url’); ?> : RSS 2.o Url
<?php bloginfo(’url’); ?> : 博客 Url
<?php bloginfo(’html_type’); ?> : 博客网页Html类型
<?php bloginfo(’charset’); ?> : 博客网页编码
<?php bloginfo(’description’); ?> : 博客描述
<?php wp_title(); ?> : 特定内容页(Post/Page)的标题

模板常用的PHP函数及命令

<?php get_header(); ?> : 调用Header模板
<?php get_sidebar(); ?> : 调用Sidebar模板
<?php get_footer(); ?> : 调用Footer模板
<?php the_content(); ?> : 显示内容(Post/Page)
<?php if(have_posts()) : ?> : 检查是否存在Post/Page
<?php while(have_posts()) : the_post(); ?> : 如果存在Post/Page则予以显示
<?php endwhile; ?> : While 结束
<?php endif; ?> : If 结束
<?php the_time(’字符串’) ?> : 显示时间,时间格式由“字符串”参数决定,具体参考PHP手册
<?php comments_popup_link(); ?> : 正文中的留言链接。如果使用 comments_popup_script() ,则留言会在新窗口中打开,反之,则在当前窗口打开
<?php the_title(); ?> : 内容页(Post/Page)标题
<?php the_permalink() ?> : 内容页(Post/Page) Url
<?php the_category(’, ‘) ?> : 特定内容页(Post/Page)所属Category
<?php the_author(); ?> : 作者
<?php the_ID(); ?> : 特定内容页(Post/Page) ID
<?php edit_post_link(); ?> : 如果用户已登录并具有权限,显示编辑链接
<?php get_links_list(); ?> : 显示Blogroll中的链接
<?php comments_template(); ?> : 调用留言/回复模板
<?php wp_list_pages(); ?> : 显示Page列表
<?php wp_list_categories(); ?> : 显示Categories列表
<?php next_post_link(’ %link ‘); ?> : 下一篇文章链接
<?php previous_post_link(’%link’); ?> : 上一篇文章链接
<?php get_calendar(); ?> : 日历
<?php wp_get_archives() ?> : 显示内容存档
<?php posts_nav_link(); ?> : 导航,显示上一篇/下一篇文章链接
<?php include(TEMPLATEPATH . ‘/文件名’); ?> : 嵌入其他文件,可为定制的模板或其他类型文件

与模板相关的其他函数

<?php _e(’Message’); ?> : 输出相应信息
<?php wp_register(); ?> : 显示注册链接
<?php wp_loginout(); ?> : 显示登录/注销链接
<!–next page–> : 将当前内容分页
<!–more–> : 将当前内容截断,以不在主页/目录页显示全部内容
<?php timer_stop(1); ?> : 网页加载时间(秒)
<?php echo get_num_queries(); ?> : 网页加载查询量

介绍如何定义index.php以及如何派生出其它文件,在index.php文件中,在body元素内,新建如下结构化标记元素,各元素都带有不同的id属性:

<div id=”page”>
<div id=”header”></div>
<div id=”content”></div>
<div id=”sidebar”></div>
<div id=”footer”></div>
</div>

这些不同的属性,分别代表着不同的区域,让人一看就知道是什么意思,下面我们重点探讨header,content,sidebar,footer部分的构建。

(一).构建header

<div id=”header”></div> 元素的两个标签之间输入下列代码:
<h1><a href=”<?php bloginfo(’url’); ?>” title=”<?php bloginfo(’name’); ?>”><?php bloginfo(’name’); ?></a></h1>
<p><?php bloginfo(’description’); ?></p>

这里用到了 WP 内置的 bloginfo 函数来生成内容,其中:

bloginfo(’url’)返回网站主页链接;
bloginfo(’name’)返回网站标题;
bloginfo(’description’)返回网站描述。
保存 index.php 文件,然后在浏览器中按 F5 刷新一下页面,看能看到什么?再通过“查看源文件”,核对一下由 WP 的 bloginfo() 函数生成的相关信息。

(二).构建content

在 <div id=”content”></div> 中,我们要通过循环显示博文,包括每个博文的标题、作者、发表日期以及其他相关信息。并且,可以分页显示博文(取决于 WP 后台的设置)。
首先,在 <div id=”content”> 与 </div> 之间输入下列代码:

<?php while (have_posts()) : the_post(); ?> <div class=”post” id=”post-<?php the_ID() ?>”>
<!– 博文标题及链接 –>
<h2><a href=”<?php the_permalink() ?>” rel=”bookmark” title=”<?php the_title(); ?>”>
<?php the_title(); ?></a></h2>
<!– 发表日期 –>
<div class=”post-date”>
<span class=”post-month”><?php the_time(’M’) ?></span>
<span class=”post-day”><?php the_time(’d’) ?></span>
</div>
<!– 作者 –>
<span class=”post-author”><?php _e(’Author’); ?>:<?php the_author(’, ‘) ?></span>
<!– 类别 –>
<span class=”post-cat”><?php _e(’Categories’); ?>:<?php the_category(’, ‘) ?></span>
<!– 注释 –>
<span class=”post-comments”>
<?php comments_popup_link(’No Comments ?’, ‘1 Comment ?’, ‘% Comments ?’); ?></span>
<!– 内容 –>
<div class=”entry”>
<?php the_content(’更多内容 ?’); ?>
</div>
<!– 其他元(Meta)数据 –>
<div class=”post-meta”>
<?php edit_post_link(’编辑’,’ | ‘,”); ?>
</div> </div>
<?php endwhile; ?><div class=”navigation”>
<span class=”previous-entries”><?php next_posts_link(’前一篇’) ?></span> <span class=”next-entries”><?php previous_posts_link(’后一篇’) ?></span>
</div>
<?php else : ?>
<div class=”post”>
<h2><?php _e(’Not Found’); ?></h2>
</div><?php endif; ?>

看似复杂,其实不然。首先:

<?php while (have_posts()) : the_post(); ?>
<?php endwhile; ?>

这两行,是 WP 中的 while 循环。其中,while 语句通过测试 have_posts() 决定是否调用 the_post() 函数。如果测试 have_posts() 返回 true,则调用 the_post() 函数,初始化与博文相关的内置变量。
在 while 循环内部,首先要注意通过 div、h2、span 这三个元素定义的嵌套语义结构,以及相应元素的 class 和 id 属性(其中只为 class 为 post 的 div 元素定义了一个 id 属性--post-<?php the_ID() ?>)。这是将来使用 CSS 控制外观的关键所在。在这个 div 元素中,为显示博文的相关信息,分别调用了以下 WP 函数:

the_ID():返回博文 ID;
the_permalink():返回博文固定链接 URL;
the_title():返回博文标题;
the_time(’M’):返回发表日期中的月份;
the_time(’d’):返回发表日期中的天;
the_author():返回博文作者;
the_category():返回博文的类别;
the_content():返回博文的内容,其中的参数表示用于“更多内容”的链接文本;
以上函数都是以 the_ 开头的,加上后面的函数名不仅颇有自解释的味道,而且令人联想到 this 关键字。此外
_e() 函数是一个包装函数,这个函数主要用于语言的转换,如果调用该函数并传递标准的 WP 术语,如:Author 或 Categories,则返回你相应语言包中的译文,在中文包中分别是“作者”和“类别”。当然,不用也可。但会失去一些适应性。
还有,omments_popup_link() 和 edit_post_link() 两个函数,分别显示注释和编辑链接,这里不多说了。
另外,在 <?php endwhile; ?> 后面显示了分页导航链接,调用的函数分别是:next_posts_link() 和 previous_posts_link()。此时,如果你的博文总数小于 WP 后台设置的最多显示数目,比如:你在后台设置最多显示 5 篇,而你有 10 篇博文,就会分页显示;否则,如果你的博文少于或等于 5 篇则看不到分页导航链接。
最后,不要丢下 <?php else : ?> 语句后面的内容:

<div class=”post”>
<h2><?php _e(’Not Found’); ?></h2>
</div>

显然,这是一个错误提示信息。

(三).构建sidebar

sidebar 的内容当然要在 <div id=”sidebar”></div> 元素中构建了。sidebar,中文叫侧边栏,其中可以包含很多内容。比如:分类、页面、链接、日历等等导航及相关信息。
在 WP 中,sidebar 中的内容都以无序(ul)或有序(ol)列表的形式输出。因此,需要在 <div id=”sidebar”></div> 中输入以下标记:

<ul>
<?php if ( !function_exists(’dynamic_sidebar’) || !dynamic_sidebar() ) : ?>
<li id=”search”>
<?php include(TEMPLATEPATH .’/searchform.php’); ?>
</li> <li id=”calendar”>
<h2><?php _e(’Calendar’); ?></h2>
<?php get_calendar(); ?>
</li> <?php wp_list_pages(’title_li=<h2>页面</h2>’); ?> <li class=”catnav”>
<h2><?php _e(’Categories’); ?></h2>
<ul>
<?php wp_list_cats(’sort_column=name&optioncount=1&hierarchical=0′); ?>
</ul>
</li>
<li class=”archivesnav”>
<h2><?php _e(’Archives’); ?></h2>
<ul>
<?php wp_get_archives(’type=monthly’); ?>
</ul>
</li>
<li class=”blogrollnav”>
<h2><?php _e(’Links’); ?></h2>
<ul>
<?php get_links(’-1′, ‘<li>’, ‘</li>’, ‘<br />’, FALSE, ‘id’, FALSE, FALSE, -1, FALSE); ?>
</ul>
</li>
<li class=”meta”>
<h2><?php _e(’Meta’); ?></h2>
<ul><?php wp_register(); ?><li><?php wp_loginout(); ?></li>
<?php wp_meta(); ?></ul>
</li>
<?php endif ?>
</ul> 以上代码从第三行开始,分别通过包含 searchform.php 显示搜索表单;

调用 get_calendar() 函数显示日历;
调用 wp_list_pages() 函数显示页面导航;
调用 wp_list_cats() 函数显示分类导航;
调用 wp_get_archives() 函数显示存档导航;
调用 get_links() 函数显示链接导航。
在构建侧边栏时,要为生成搜索框新建一个 searchform.php 文件,其内容如下:

<form method=”get” id=”searchform” action=”<?php bloginfo(’home’); ?>/”>
<div>
<input type=”text” value=”<?php echo wp_specialchars($s, 1); ?>” name=”s” id=”s” size=”15″ /><br />
<input type=”submit” id=”searchsubmit” value=”Search” />
</div>
</form>

将其保存在 myTheme 文件夹中,通过 include 语句包含进来就可以了。注意,常量 TEMPLATEPATH 中保存的是模板路径。
最后,说明一下以上代码第二行和倒数第二行。显然这是一个 if 语句块。那这个 if 语句块包含 sidebar 是何用意呢?这是部件化侧边栏的需要,就是让 sidebar 适合 Widget 插件(WP 2.0 后内置了 Widget,所以不用再安装了)。如果要使用 Widget 插件,必须对 sidebar 进行部件化。这样,在 WP 后台通过 Widget 插件你就可以使用拖动来方便地定义侧边栏的组件了。部件化侧边栏,除了在 ul 元素内侧放入这个 if 语句之外,还必须在 myTheme 文件夹中建立一个文件 functions.php,其内容如下:

<?php
if ( function_exists(’register_sidebar’) )
register_sidebar(array(
‘before_widget’ => ‘<li id=”%1$s” class=”widget %2$s”>’,
‘after_widget’ => ‘</li>’,
‘before_title’ => ‘<h2 class=”sidebartitle”>’,
‘after_title’ => ‘</h2>’,
));
?>

(四).构件footer

footer 中一般都一些版权信息和不太重要的链接。所以可以在 <div id=”footer”></div> 元素中简单地放入下列代码:

<p>Copyright ? 2007 <?php bloginfo(’name’); ?></p>

至此,核心 index.php 文件就算是大功告成了!

接下来,是拆分 index.php 和基于 index.php 派生子模板文件。

在 myTheme 文件夹中新建 header.php、sidebar.php 和 footer.php 三个文件。把 index.php 中的 <div id=”header”></div>、<div id=”sidebar”></div> 和 <div id=”footer”></div> 三个结构化元素及其内容分别转移(剪切)到这三个新文件中。然后,在 <div id=”header”></div> 原来的位置处输入代码:

<?php get_header();?>
在 <div id=”sidebar”></div> 原来的位置处输入代码:
<?php get_sidebar();?>
在 <div id=”footer”></div> 原来的位置处输入代码:
<?php get_footer();?>

前面说过,这三个 get 函数是 WP 专门为包含结构化的文件定义的。现在你的 index.php 文件应该如下所示:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml“><head profile=”http://gmpg.org/xfn/11“>
<meta http-equiv=”Content-Type” content=”<?php bloginfo(’html_type’); ?>; charset=<?php bloginfo(’charset’); ?>” /><title><?php bloginfo(’name’); ?> <?php if ( is_single() ) { ?> ? Blog Archive <?php } ?> <?php wp_title(); ?></title><meta name=”generator” content=”WordPress <?php bloginfo(’version’); ?>” /> <!– leave this for stats –><link rel=”stylesheet” href=”<?php bloginfo(’stylesheet_url’); ?>” type=”text/css” media=”all” />
<link rel=”stylesheet” href=”<?php bloginfo(’stylesheet_directory’); ?>/print.css” type=”text/css” media=”print” />
<link rel=”alternate” type=”application/rss+xml” title=”<?php bloginfo(’name’); ?> RSS Feed” href=”<?php bloginfo(’rss2_url’); ?>” />
<link rel=”pingback” href=”<?php bloginfo(’pingback_url’); ?>” /><?php wp_head(); ?>
</head>
<body>
<div id=”page”><?php get_header(); ?> <!– content –>
<div id=”content”>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?> <div class=”post” id=”post-<?php the_ID() ?>”>
<!– 博文标题及链接 –>
<h2><a href=”<?php the_permalink() ?>” rel=”bookmark” title=”<?php the_title(); ?>”>
<?php the_title(); ?></a></h2>
<!– 发表日期 –>
<div class=”post-date”>
<span class=”post-month”><?php the_time(’M’) ?></span>
<span class=”post-day”><?php the_time(’d’) ?></span>
</div>
<!– 作者 –>
<span class=”post-author”><?php _e(’Author’); ?>:<?php the_author(’, ‘) ?></span>
<!– 类别 –>
<span class=”post-cat”><?php _e(’Categories’); ?>:<?php the_category(’, ‘) ?></span>
<!– 注释 –>
<span class=”post-comments”>
<?php comments_popup_link(’No Comments ?’, ‘1 Comment ?’, ‘% Comments ?’); ?></span>
<!– 内容 –>
<div class=”entry”>
<?php the_content(’更多内容 ?’); ?>
</div>
<!– 其他元(Meta)数据 –>
<div class=”post-meta”>
<?php edit_post_link(’编辑’,’ | ‘,”); ?>
</div> </div>
<?php endwhile; ?> <div class=”navigation”>
<span class=”previous-entries”><?php next_posts_link(’前一篇’) ?></span> <span class=”next-entries”><?php previous_posts_link(’后一篇’) ?></span>
</div>
<?php else : ?>
<div class=”post”>
<h2><?php _e(’Not Found’); ?></h2>
</div><?php endif; ?>
</div><!– end content –><?php get_sidebar(); ?> <?php get_footer(); ?></div>
</body>
</html>

然后,是派生子模板文件。把这个“模块化”的 index.php 文件另存为 single.php、page.php、archive.php、 search.php 和 category.php。当然,都保存在 myTheme 文件夹中。这样,WP 在显示页面时就会调用相应的页面文件了。比如,显示博文详细内容时,会调用 single.php;而显示页面内容时,则调用 page.php。
最后,要做的工作就是自定义这些子模板文件。

一整套WordPress模板制作的教程的更多相关文章

  1. WP主题模板制作修改教程

    WP主题模板制作修改教程 实际上,当我们打开某个主题的文件夹时,看到的并不止这两个文件,而是更多.但一般来说,在一个完整的 WP 主题文件夹中都应该包含下列文件(也称为模板文件):页面 模板文件 用途 ...

  2. 三个小时学会wordpress模板制作

    最近接了一个项目需要用wordpress建站,版面相对简单,ytkah就琢磨着自己来设计wordpress模板,首页栏目页文章页(很多网站无外乎就这些页面),其中栏目页和首页又很像,都是调用文章列表. ...

  3. woocommerce模板制作简易教程

    woocommerce是wordpress里比较好用的电商解决方案,但是制作woocommerce模板相对比较复杂,如果想用woocommerce来建一个展示型的网站,不带下单功能,我们可以很快就能把 ...

  4. wordpress模板制作第一课

    一套完整的WordPress模板应至少具有如下文件: style.css : CSS(样式表)文件 index.php : 主页模板 archive.php : Archive/Category模板 ...

  5. Wordpress模板制作、改造、设计

    如何定义index.php以及如何派生出其它文件,在index.php文件中,在body元素内,新建如下结构化标记元素,各元素都带有不同的id属性: <div id=”page”> < ...

  6. wordpress 模板制作之一

    WP模板工作原理图:

  7. WordPress插件制作教程概述

    接下来的一段时间里,开始为大家讲解WordPress插件制作系列教程,这篇主要是对WordPress插件的一些介绍和说明,还有一些我们需要注意的地方,以及需要掌握的知识. WordPress插件允许你 ...

  8. 新手 WordPress主题制作全过程

    WordPress主题制作全过程(一):基础准备 前言: 我想大多数使用WordPress的朋友都喜欢去尝试新的主题,但是换来换去,总是找不到那么一款适合自己的,让人很郁闷.于是很多人萌生了修改现有主 ...

  9. 【Ecmall】ECMall2.x模板制作入门系列(认识ECMall模板)

    ECMall2.x模板制作入门系列之1(认识ECMall模板) 从ECMall2.0全新架构发布以来,随着版本的不断更新,ECMall已经逐渐走向一个稳定时期,是时候整理一些实用教程了.下面给大家带来 ...

随机推荐

  1. hdu1166 线段树

    Problem Description C国的死对头A国这段时间正在进行军事演习,所以C国间谍头子Derek和他手下Tidy又开始忙乎了.A国在海岸线沿直线布置了N个工兵营地,Derek和Tidy的任 ...

  2. express-11 表单处理(2)

    处理AJAX表单 用Express处理AJAX表单非常简单:甚至可以使用相同的处理程序来处理AJAX请求和常规的浏览器回退. HTML文件 (/views/newsletter.handlebars) ...

  3. Sharepoint超期触发列表工作流提醒

    项目背景 Sharepoint 2010 ,Infopath 2010环境,用Infopath设置好表单把数据提交到Sharepoint的Library库.很常见的需求,其中有一个[状态]字段,[申请 ...

  4. MFC 修改 单文档 SDI 窗体 标题

    程序主窗口标题栏的一般形式为: 文档标题—主窗口标题 1.修改文档标题 修改CExamDoc::onNewDocument()函数为: BOOL CExamDoc::OnNewDocument() { ...

  5. Hadoop中几个基本命令行命令

    对HDFS操作的几个命令(必须是Hadoop命令,否则只是对本地操作) 1. 查看HDFS中某个目录或文件的包含哪些文件和文件夹: bin/hadoop dfs/fs -ls 文件(夹)路径 若是非空 ...

  6. iOS学习21之UILabel, UITextField, UIButton, UIImageView

    1.UILabel 1> 概述 UILabel (标签): 是显示文本的控件.在App中 UILabel 是出现频率最高的控件 UILabel 是 UIView 子类,作为子类一般是为了扩充父类 ...

  7. input属性控制弹出键盘类型

    /**   * ios弹起数字键盘有三种方法   * 1. <input type="number"> 可以弹起带有小数点的键盘,可以键盘不干净,有其它各种字符,可切换 ...

  8. ACM n-1位数

    n-1位数 时间限制:3000 ms  |  内存限制:65535 KB 难度:1   描述 已知w是一个大于10但不大于1000000的无符号整数,若w是n(n≥2)位的整数,则求出w的后n-1位的 ...

  9. cdoj 1334 郭大侠与Rabi-Ribi Label:贪心+数据结构

    郭大侠与Rabi-Ribi Time Limit: 3000/1000MS (Java/Others)     Memory Limit: 65535/65535KB (Java/Others) 最近 ...

  10. css比较容易搞混的三个选择器

    直接后代选择器:> .grid>input[type="button"] 所有后代选择器:空格 .grid input[type="button"] ...