为什么要开发WordPress主题?
WordPress主题由一系列文件和样式表单组成,这些文件和样式表单共同作用生成WordPress网站的外观。每个主题都不同,用户可以通过这些主题随心所欲地更换自己网站的外观。那么为什么我们要自己开发WordPress主题呢?
WordPress主题也有很多好处:
我们自己开发WordPress主题原因还在于:
创建 WordPress 主题其实不难,只要你从现在开始认真学习这个教程,从零一步一步开始,你就会成为一个 WordPress 主题制作高手,至少你会修改现有主题。
下面是一个从零开始制作 WordPress 主题的教程,它会一步一步教你如何制作 WordPress 主题。 看到一个网上的WordPress蛮好的教程,挺适合初学者。分享一下:
小结:
1. WordPress 主题教程:从零开始制作 WordPress 主题
1)网络上已经有很多关于制作 WordPress 主题的教程,并且 WordPress 官方网站上也有指导文章。但是当你不懂这方面的术语的话,这些教程可能不一定会帮助你,甚至还会误导你,所以这个教程会真正从零开始教你如何创建 WordPress 主题。
2)本地安装 WordPress。
3)服务器上安装一个测试版的 WordPress。
4)代码编辑工具。 NotePad++ ,DW。
5)FTP 工具。
6)至少配备三种浏览器,Microsoft Internet Explorer、Mozilla Firefox、Google Chrome,版本暂时不限,用于测试网页是否显示正常。
2.WordPress 主题里面的模版文件介绍
主题的位置:D:\xampp\htdocs\wordpress\wp-content\themes
创建一个新的文件夹,命名 daliu。
页面 |
主题文件中是否必须存在 |
作用 |
备注 |
archive.php |
非必须 |
通用文件:标签页、分类页、自定义分类页、存档页 |
控制存档、分类、日期的输出页面。其实这些内容是可以单独控制的,不过大部分模版都不把它们分开对待。 |
author.php |
非必须 |
作者存档页 |
|
author-bio.php |
|
|
|
attachment.php |
非必须 |
附件页 |
|
category.php |
非必须 |
分类页 |
|
comments.php |
|
|
|
content.php |
|
|
|
content-link.php |
|
|
|
content-none.php |
|
|
|
content-page.php |
|
|
|
content-search.php |
|
|
|
date.php |
非必须 |
时间存档页 |
|
footer.php |
基本文件 |
一般是用来输出页脚信息的,比如放些模版作者,版权信息之类。 |
|
functions.php |
非必须 |
主题函数文件,自定义头部,进入后台主题设置可以看到,可扩展性相当强。 |
|
header.php |
基本文件 |
用来输出标题和菜单项,同时html文件的头信息也放在这 |
|
home.php |
基本文件 |
首页 |
|
image.php |
|
|
|
index.php |
必须 |
通用文件:首页、文章页、分类页、存档页、页面、404页面、搜索结果页、附件页 |
index.php模板文件灵活易用,可以存储关于页眉、侧边栏、页脚、内容、类别、查找、错误以及访问者请求的页面的所有引用信息。index.php还可以划分成模块化的模板文件,每个模块分担部分系统任务。用户不指定模板文件时,WordPress会使用内置的默认文件。 |
page.php |
基本文件 |
|
|
readme.txt |
基本文件 |
|
|
screenshot.png |
基本文件 |
从WP2.0开始,模版选择会提供缩略图,这个文件就是缩略图文件。 |
给你的主题界面截个图,命名为screenshot.png,大小300 * 225,放置到主题目录下作为主题缩略图 |
search.php |
基本文件 |
|
|
sidebar.php |
基本文件 |
用于输出侧栏内容。 |
|
single.php |
基本文件 |
通用文件:附件页、文章页 |
|
search.php |
基本文件 |
搜索结果页 |
|
style.css |
必须 |
主题样式以及说明文件 |
所有所有页面的具体表现样式都由这个文件来控制。 |
tag.php |
非必须 |
标签页 |
|
taxonomy.php |
非必须 |
自定义分类页 |
|
404.php |
基本文件 |
404出错信息,当访问者输入了一个不存在的地址就会看到这个页面,可以在这里写一些有用的提示,或者直接给个404 error。 |
|
必须就是主题必须包含此文件否则无法正常运行,非必须则是可有可无的文件,按需自己求来考虑是否需要创建该文件。通用文件则是可以适用于多种不同类型的文件,我在文件名后面都包含了适用的页面类型。
3. 开始制作一个简单的主题,需要的文件是 index.php ,style.css 和图screenshot.png
style.css 文件的内容:
/*
Theme Name: 这里填主题名称
Theme URI: 这里填主题介绍的网址,没有就填你的博客网址吧
Description: 这里填主题的简短介绍
Version: 版本号
Author: 作者名
Author URI: 作者的网址
Tags: 标签,多个用半角逗号隔开
*/
1 /* 2 Theme Name: daliu_it 3 Theme URI: http://www.cnblogs.com/liuhongfeng/ 4 Description: ITbolg 5 Version: 1.0 6 Author: daliu_it 7 Author URI: http://www.cnblogs.com/liuhongfeng/ 8 9 */
index.php的基本结构:
index.php 是由 4 个模板文件组成: header.php,index.php,sidebar.php 和 footer.php。
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)的标题
<!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"> <title> <?php bloginfo('name'); ?> <?php wp_title(); ?> </title> <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" /> <meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats please --> <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" /> <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" /> <link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" /> <link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" /> <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" /> <?php wp_get_archives('type=monthly&format=link'); ?> <?php //comments_popup_script(); // off by default ?> <?php wp_head(); ?> </head> <body> </body> </html>
说明:
<?php – 开始 PHP 代码
bloginfo(’stylesheet_url’) – 调用 style.css 文件所在的路径的函数
; – 停止调用函数。分号是用来结束一个 PHP 语句。
?> – 结束 PHP 代码
在index.php文件中的body标签进行演示如何调用这些标签来显示内容:
<body> 1.调用博客链接: <a href="#"><?php bloginfo('name'); ?></a> </br> 2.博客名加上链接 : <a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a> </br> 3.给博客的标题添加 H1 的标签: <h1 ></a><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1> </br> 4.添加博客描述 <h1 ></a><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1> <?php bloginfo('description'); ?> <br/> 5.添加 DIV 标签 <div> <h1 > <a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a> </h1> <?php bloginfo(’description’); ?> </div> <br/> 6.添加 Header DIV 标签 <div id=”header”> <h1 > <a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a> </h1> <?php bloginfo(’description’); ?> </div> <br/> </body>
4. 如何调用函数来显示日志和文章等信息。主循环+php函数。
主循环结构:
if(have_posts()) – 检查博客是否有日志。
while(have_posts()) – 如果有日志,那么当博客有日志的时候,执行下面 the_post() 这个函数。
the_post() – 调用具体的日志来显示。
endwhile; – 这里用于关闭 while()
endif; – 关闭 if()
第一,if(have_posts()) 检查博客是否有日志,
第二,while(have_posts()) 执行 the_post() 去调用日志。而 Else 是当博客完全没有日志的时候执行的。
主循环结构代码:
1 <?php if(have_posts()) : ?> 2 3 <?php while(have_posts()) : the_post(); ?> 4 5 <?php endwhile; ?> 6 7 <?php endif; ?>
日志相关函数:
<?php the_title(); ?> 用来调用日志标题
<?php the_permalink(); ?> 用来调用每篇日志地址
<?php the_content(); ?> 调用了 日志的内容
<?php the_ID(); ?> 调用日志的ID号
<?php the_title(); ?> 来输出文章标题
<?php echo mb_strimwidth(get_the_title(), 0, 38, '...'); ?> 输出了字符串的第0位到第38位,根据主题的不同可以自行设置该数值,另外多余长度部分使用“…” 代替。
日志的元数据(Postmetadata):日期(date),分类(categories),作者(author),评论数(number of comments),以及其他和日志有关系的信息。
<?php _e('Filed under:'); ?> 是调用冒号“:”的代码;
<?php the_category(', ') ?> 用来调用日志的在的所有类别;
<?php _e('by'); ?> 。如果你创建的是私人用的的主题, by 外面的 _e() 不是必须的,最后加上 _e() 以便你的主题可翻译化。
<?php the_author(); ?> 输出当前日志作者的名字。
<?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?>
日志的元数据函数参数解释:
调用一个弹出的留言窗口,如果没有激活, 则只是简单的显示留言列表。
No Comments » 是在没有留言的时候显示的。
1 Comment » 是用于当刚好只有1条留言时候。
% Comments &187; 是用于当有多于一条留言的时候。
比如:8 Comments »。百分号 % 用来显示数字。» 是用来显示一个双层箭头 »。
<?php edit_post_link('Edit', ' | ', ''); ?> 当我们以管理员或者作者身份登录的的时候才可见。
简单显示一下基本的日志元数据:
<p class="postmetadata">
<?php _e('Filed under:'); ?>
<?php the_category(', ') ?>
<?php _e('by'); ?>
<?php the_author(); ?><br />
<?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?>
<?php edit_post_link('Edit', ' | ', ''); ?>
</p>
<?php posts_nav_link(); ?> 调用后一页和前一页的链接。
<?php posts_nav_link('in between','befor','after'); ?> 也可以给这个函数3个参数,分别给链接的中间,前面和后面的设置字符第1个参数是显示在后一页和前一页链接的中间。第2个参数显示在前面。第3个参数显示在后面。
说明:
默认情况下,如果没有超过10篇日志的话,是不会显示导航链接,如果没有超过10篇日志,依然想看到导航链接,登录到管理界面,在 设置 > 阅读 页面,把它设置为比所有日志少一篇。如,有6篇日志,就设置为5。
完整的显示一篇日志相关信息:
1 <div id=”container”> 2 3 <?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?> 4 5 <div class=”post” id=”post-<?php the_ID(); ?>”> 6 <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a> 7 </div> 8 <div class=entry> 9 <?php the_content(); ?> 10 11 <p class="postmetadata"> 12 <?php _e('Filed under:'); ?> 13 <?php the_category(', ') ?> 14 <?php _e('by'); ?> 15 <?php the_author(); ?><br /> 16 <?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?> 17 <?php edit_post_link('Edit', ' | ', ''); ?> 18 </p> 19 20 </div> 21 22 <?php endwhile; ?> 23 24 <?php endif; ?> 25 <div class="post" id=”post-<?php the_ID(); ?>” > 26 <?php _e('NOT Found'); ?> 27 </div> 28 <div class="navigation"> 29 <?php posts_nav_link('in between','before','after'); ?> 30 </div> 31 32 </div>
5. 侧边栏,如何显示分类链接。
<?php wp_list_cats(); ?> – 调用分类链接列表
<?php wp_list_pages(); ?> 窗体化(widgetize)侧边栏。
<?php _e('Archives'); ?> – 子标题文本
<?php wp_get_archives('type=monthly'); ?> – 按月调用存档列表链接,并把每个链接放入 <li> 和 </li> 标签中。
<?php get_links_list(); ?> 添加友情链接列表
说明:
默认的分类是 Uncategorized。如果你没有把日志发布到多个分类下面,那么你的列表链接列表应该是只有一个链接 Uncategorized。
sort_column=name – 把分类按字符顺序排列
optioncount=1 – 显示每个分类含有的日志数
hierarchial=0 – 不按照层式结构显示子分类,这就解释了为什么子分类链接是列在列表中第一级。
& – 每次增加另一个参数的时候,需在它之前要输入 & 用来把和现有的参数区分开。如 & – 在 sort_column 和 optioncount之间。
<?php wp_list_pages('depth=3&title_li=<h2>Pages</h2>'); ?>
有四级页面链接。由于布局或者设计的原因使得不能在侧边栏处理那么多级别的链接。为了限制显示列表的层数,增加了 depth 这个参数,并把它设置为 3:(如果你只有一个 about 页面链接,你将不会注意有什么不同。)
简单的调用一下分类目录:
<div class="sidebar">
<ul>
<?php wp_list_pages('depth=3&title_li=<h2>Pages</h2>'); ?>
<li>
<h2><?php _e('Categories'); ?></h2>
<ul>
<?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?>
</ul>
</li>
</ul>
</div>
完整的调用分类目录,存档,分级页面等信息:
<div class="sidebar">
<ul>
<?php wp_list_pages('depth=3&title_li=<h2>Pages</h2>'); ?>
<li>
<h2><?php _e('Categories'); ?></h2>
<ul>
<?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?>
</ul>
</li>
<li>
<h2><?php _e('Archives'); ?> </h2>
<ul>
<?php wp_get_archives('type=monthly'); ?>
</ul>
</li>
<?php get_links_list(); ?>
</ul>
</div>
5. 搜索框
<?php include(TEMPLATEPATH . '/searchform.php'); ?>
include() – 导入任何你想导入的文件。这和使用 WordPress 模板函数去调用模板文件是不同的,因为 include() 只是简单导入已经存在的文件。这里是调用在 searhform.php 文件中的代码。被导入的信息应该在一个博客上基本不会被改变的。
TEMPLATEPATH – 主题文件夹的位置,这里是:wp-content/themes/daliu_it
‘/searchform.php’ – 文件名:/searchform.php
在 TEMPLATEPATH 和 “/searchform.php” 中间的点把它们连接起来,所以最终得到:wp-content/themes/daliu_it/searchform.php
<div class="sidebar"> <ul> <li id="search"> <?php include(TEMPLATEPATH . '/searchform.php'); ?> </li> <?php wp_list_pages('depth=3&title_li=<h2>Pages</h2>'); ?> <li> <h2><?php _e('Categories'); ?></h2> <ul> <?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?> </ul> </li> <li> <h2><?php _e('Archives'); ?> </h2> <ul> <?php wp_get_archives('type=monthly'); ?> </ul> </li> <?php get_links_list(); ?> </ul> </div>
6. 日历框
<?php _e('Calendar'); ?> 日历
<?php get_calendar(); ?> 调用日历函数,输出一个日历
<li id=”calendar”> <?php _e('Calendar'); ?> <?php get_calendar(); ?> </li>
7. 元数据:注册,登入,登出。
<?php wp_register(); ?> 这个函数能产生一组 <li> 和 </li> 标签,如果你没有登陆,它显示注册(Register)链接,如果登录了,它显示的是 站点管理(Site Admin)的链接。
<?php wp_loginout(); ?> 不会产生列表元素标签,所以需要我们手工输入列表元素标签,当你没有登录的时候,得到的是 登录(Login) 的链接,当已经登录的时候,得到的是登出(Logout)链接。
<?php wp_meta(); ?>
<li> <h2><?php _e('Meta'); ?></h2> <ul> <?php wp_register(); ?> <li> <?php wp_loginout(); ?> </li> <?php wp_meta(); ?> </ul> </li>
上面的功能基本告一段落了。
上一下完整的代码:
style.css的完整代码如下:
/* Theme Name: daliu_it Theme URI: http://www.cnblogs.com/liuhongfeng/ Description: ITbolg Version: 1.0 Author: daliu_it Author URI: http://www.cnblogs.com/liuhongfeng/ */
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"> <title> <?php bloginfo('name'); ?> <?php wp_title(); ?> </title> <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" /> <meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats please --> <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" /> <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" /> <link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" /> <link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" /> <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" /> <?php wp_get_archives('type=monthly&format=link'); ?> <?php //comments_popup_script(); // off by default ?> <?php wp_head(); ?> </head> <body> 1.调用博客链接: <a href="#"><?php bloginfo('name'); ?></a> </br> 2.博客名加上链接 : <a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a> </br> 3.给博客的标题添加 H1 的标签: <h1 ></a><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1> </br> 4.添加博客描述 <h1 ></a><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1> <?php bloginfo('description'); ?> <br/> 5.添加 DIV 标签 <div> <h1 > <a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a> </h1> <?php bloginfo(’description’); ?> </div> <br/> 6.添加 Header DIV 标签 <div id=”header”> <h1 > <a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a> </h1> <?php bloginfo(’description’); ?> </div> <br/> 7.主循环代码: <div id=”container”> <?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?> <div class=”post” id=”post-<?php the_ID(); ?>”> <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a> </div> <div class=entry> <?php the_content(); ?> <p class="postmetadata"> <?php _e('Filed under:'); ?> <?php the_category(', ') ?> <?php _e('by'); ?> <?php the_author(); ?><br /> <?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?> <?php edit_post_link('Edit', ' | ', ''); ?> </p> </div> <?php endwhile; ?> <?php endif; ?> <div class="post" id=”post-<?php the_ID(); ?>” > <?php _e('NOT Found'); ?> </div> <div class="navigation"> <?php posts_nav_link('in between','before','after'); ?> </div> </div> 8. 侧边栏 <div class="sidebar"> <ul> <li id="search"> <?php include(TEMPLATEPATH . '/searchform.php'); ?> </li> <li id=”calendar”> <?php _e('Calendar'); ?> <?php get_calendar(); ?> </li> <li> <h2><?php _e('Meta'); ?></h2> <ul> <?php wp_register(); ?> <li> <?php wp_loginout(); ?> </li> <?php wp_meta(); ?> </ul> </li> <?php wp_list_pages('depth=3&title_li=<h2>Pages</h2>'); ?> <li> <h2><?php _e('Categories'); ?></h2> <ul> <?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?> </ul> </li> <li> <h2><?php _e('Archives'); ?> </h2> <ul> <?php wp_get_archives('type=monthly'); ?> </ul> </li> <?php get_links_list(); ?> </ul> </div> </body> </html>
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>
8. functions.php 的应用
<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar() ) : else : ?>
<?php endif; ?>
9. 底部信息,版权之类。
<div id=”footer”> <p> Copyright © 2014 <?php bloginfo(’name’); ?> </p> </div>