站长百科 | 数字化技能提升教程 数字化时代生存宝典
首页
数字化百科
电子书
建站程序
开发
服务器
办公软件
开发教程
服务器教程
软件使用教程
运营教程
热门电子书
WordPress教程
宝塔面板教程
CSS教程
Shopify教程
导航
程序频道
推广频道
网赚频道
人物频道
网站程序
网页制作
云计算
服务器
CMS
论坛
网店
虚拟主机
cPanel
网址导航
WIKI使用导航
WIKI首页
最新资讯
网站程序
站长人物
页面分类
使用帮助
编辑测试
创建条目
网站地图
站长百科导航
站长百科
主机侦探
IDCtalk云说
跨境电商导航
WordPress啦
站长专题
网站推广
网站程序
网站赚钱
虚拟主机
cPanel
网址导航专题
云计算
微博营销
虚拟主机管理系统
开放平台
WIKI程序与应用
美国十大主机
编辑“
WordPress:Theme Development
”
人物百科
|
营销百科
|
网赚百科
|
站长工具
|
网站程序
|
域名主机
|
互联网公司
|
分类索引
跳转至:
导航
、
搜索
警告:
您没有登录。如果您做出任意编辑,您的IP地址将会公开可见。如果您
登录
或
创建
一个账户,您的编辑将归属于您的用户名,且将享受其他好处。
反垃圾检查。
不要
加入这个!
<span style="border:1px solid #000; text-align:center; float:right; padding:6px;"><strong>导航:</strong> [[WordPress:WordPress文档|上一级]] | [[WordPress]] | {{Template:WordPress导航}}</span> <div style="clear:both;"></div> __TOC__ 下面的文章是关于发展和设计你自己的WordPress主题。如果你想要学习更多的关于怎样安装和使用主题的知识,请查看关于[[WordPress:Using Themes|使用主题]]的文件。这个话题与[[WordPress:Using Themes|使用主题]]不同,因为它探讨了写代码来创建你自己的主题而不是激活主题,或者在哪儿能得到新主题的技术方面。 你可能因为自己使用或者[[WordPress:Designing Themes for Public Release|因为发行]]而发展新主题。 ==为什么要创建WordPress 主题== WordPress主题是合作在一起的文件和样式用来创建一个WordPress站点的外观或者呈现方式。每个主题可能有所不同,为每个用户提供许多选择,用户利用这些选择来立即地更改它们的站点的外观。你为什么要创建你自己的WordPress主题? *创建你自己的独特的WordPress站点外观 *要利用[[WordPress:Stepping Into Templates|模板]], [[WordPress:Template Tags|模板标签]], 和 [[WordPress:The Loop in Action| WordPress Loop]]来产生不同的网页结果和外观。 *为具体的站点功能提供可供选择的模板,例如[[WordPress:Category Templates|类别网页]]和搜索结果网页。 *快速地在两个站点布局之间进行切换,或者利用一个[[WordPress:Plugins|主题或者样式切换器]]来允许用户改变你的站点的外观。 *设计WordPress主题这样其他人可能通过公共发行的版本喜欢你的设计。 一个WordPress主题也拥有许多的优势。 *将呈现样式和[[WordPress:Stepping Into Templates|模板文件]]从系统文件中分开,这样站点更新的时候,不会使站点的视屏产生巨大的变化。 *它允许自定义那个主题独特的外观和网页内容。 *它能够快速地改变一个WordPress站点的外观和整体效果。 *它不需要WordPress用户来学习CSS,HTML,和PHP来拥有一个好的站点外观。 你为什么应该创建你自己的WordPress主题?这才是真正的问题。 *这是学习更多的关于CSS,HTML/XHTNL,和PHP知识的一次机会。 *这是一个能利用你的专业知识使CSS,HTML/XHTML,和PHP运行的机会。 *这具有创造性。 *这非常地有趣(大多数时间)。 *如果你[[WordPress:Designing Themes for Public_Release|将它公开发行]],你会感觉良好,因为你与之分享,并且返回了一些东西[[WordPress:Contributing_to_WordPress|WordPress 团队]] (好的,bragging rights!) ==一个主题的解析== WordPress主题位于<tt>wp-content/themes/</tt>中的子目录中。主题的子目录包含有所有的主题的样式表文件,[[WordPress:Stepping Into Templates|模板文件]],一个任意的函数文件(<tt>functions.php</tt>),和图像。例如,一个叫做"测试"的主题可能会在<tt>wp-content/themes/test/</tt>目录中。 WordPress包含有两个主题可以下载,一个是"经典的" 一个是"默认的"主题。这两个主题是不同的并且使用不同的函数和标签来产生它们的网页内容和外观。为这些主题仔细地检查文件来知道怎样更好地建立你自己的主题文件。 WordPress主题除了图像外,包括三种主要类型的文件。一是样式表称为<tt>style.css</tt>,这控制了网页的外表(外观), 二是有选择的函数文件(<tt>functions.php</tt>). 其他的文件是[[WordPress:Stepping Into Templates|模板文件]],这控制着从数据库到被展示成一个网页的网页产生信息的方式,让我们看下这些个性化的。 ===主题样式表=== 除了提供你的主题的CSS样式信息外,样式表,<tt>style.css</tt> '''''必须'''''提供评论形式主题的详细信息。'''''两个主题不能有同样的详细信息'''''列在它们的评论标题上,因为这会引起[[WordPress:Administration_Panels#Design_-_Change_the_Look_of_your_Blog|主题选择对话]]的错误。如果你通过复制一个现存的主题来制作你自己的主题,首先要确定你已经更改了这个信息。 下面是样式表前几行的例子,称作样式表标题,是主题的"Rose": <pre>/* 主题名: Rose 主题 URI: 主题的主页 描述: 一个注意的描述 作者:你的名字 作者URI: 你的-URI 模板: 使用-这个-来-定义-一个-母-主题—任意的 版本: 一个-数字—有选择的 . 如果有的话,一般的评论/许可声明。 . */</pre> 如果存在的话,最简单的主题只包括一个<tt>style.css</tt>文件和图像。要创建这样的一个主题,你必须通过在<tt>style.css</tt>标题评论中编辑<tt>Template:</tt>行,来规定一套模板来''继承''使用主题。例如,如果你想要"Rose"主题来继承其它的一个称作"测试"的主题的模板,你就会将评论中的<tt>Template: test</tt>放入Rose的tt>style.css</tt>开端。现在"test" 是"Rose"的母主题,只包含有一个<tt>style.css</tt>文件和一个相关的图像,都在<tt>wp-content/themes/Rose</tt>目录中。''(注:规定一个母主题会从主题&mdash中继承''所有的''主题文件;意思是子主题目录中的任何模板文件都会被忽视。)'' <tt>style.css</tt>中的评论标题行要求WordPress能够辨别一个主题并且将它显示在[[WordPress:Administration_Panels#Design_-_Change_the_Look_of_your_Blog|设计]] > [[WordPress:Administration_Panels#Themes|主题]]下的[[WordPress:Administration_Panels|管理面板]]上作为一个拥有其它安装主题的可供选择的主题选项。 '''注''' : ''当在评论标题的<tt>Template:</tt>部分定义一个母主题的时候,你必须使用那个样式的目录名。例如,将默认的WordPress主题用作母主题,不要写成<tt>模板: WordPress 默认</tt>,要写成<tt>模板: 默认</tt>,因为默认是这个主题的目录。'' ===函数 文件=== 一个主题可以有选择的使用一个函数文件,这个文件在主题子目录中,并且命名为<tt>functions.php</tt>。文件基本像一个[[WordPress:Plugins|插件]]那样运行,而且如果它呈现在你使用的主题中,会在WordPress初始化(管理网页和外部网页)的时候,自动载入。建议使用这个文件: *定义你的主题多个文件中使用的函数 *设置一个管理界面,提供给用户颜色,样式,和你的主题的其它方面的选项 "默认"WordPress主题包含一个<tt>functions.php</tt>文件,这个文件定义了函数和一个管理界面,这样你可能想将它用作一个模型。因为<tt>functions.php</tt>基本起一个插件的作用,[[WordPress:Function_Reference|函数_参考]]列出了拥有关于你怎样处理这个文件的更多信息的最后位置。 ===主题模板文件=== [[WordPress:Stepping Into Templates|模板]]是PHP原始文件,根据访客要求,用来产生网页的。让我们来看看可以被定义为主题的一部分的不同的模板。 WordPress能够使你为你的博客的不同部分分别定义模板;然而,使你的博客正常地运行,并不一定需要所有的这些不同的模板文件。模板是根据[[WordPress:Template Hierarchy|模板层级]]选择和产生的,取决于一个特别的主题中有什么样的模板。作为一个主题开发者,你可以选择你想执行使用多少的模板自定义。例如,作为一个极端的例子,你可以为网络博客上产生的和显示的''所有的''网页,只使用一个模板文件,称为<tt>index.php</tt>作为模板。一个更加通常的用法是使用不同的模板文件产生不同的结果,允许最大化的自定义。 ===='''基本的模板'''==== 在最小化值的时候,一个WordPress主题包含有两个文件: * <tt>style.css</tt> * <tt>index.php</tt> 这两个文件都归属于主题的目录。<tt>index.php</tt> [[WordPress:Stepping Into Templates|模板文件]]非常地灵活。它可以被用来包括关于标题,工具条,页脚,内容,类别,归档,搜索,错误和你的站点上的用户创建的其它的网页的所有参数。或者它可以被''再次地分''到模块模板文件,每个部分都具有一部分的工作量。 如果你没有提供其它任何的模板文件,WordPress会使用内置的默认文件。例如,如果你既没有一个<tt>comments.php</tt>也没有一个<tt>comments-popup.php</tt>模板文件,WordPress就会自动地使用<tt>wp-comments.php</tt> 和<tt>wp-comments-popup.php</tt>模板文件,使用[[WordPress:Template Hierarchy|模板层级]]。这些默认模板可能不太匹配你的主题,因此你可能需要提供你自己的模板。一般基本的文件用来再次地切分(属于主题的目录)是: * <tt>header.php</tt> * <tt>sidebar.php</tt> * <tt>footer.php</tt> * <tt>comments.php</tt> * <tt>comments-popup.php</tt> 使用这些模块的模板文件,你可以将这些模板标签放到<tt>index.php</tt>上级文件中来包括或者''得到''这些units,你想让它们出现在最后产生的网页的位置。 *包含标题,使用<tt>[[WordPress:Include Tags#The Header Template|get_header()]]</tt>模板标签。 *要包含工具条,使用<tt>[[WordPress:Include Tags#The Sidebar Template|get_sidebar()]]</tt> 模板标签。 *要包含页脚,使用<tt>[[WordPress:Include Tags#The Footer Template|get_footer()]]</tt>模板标签。 下面是关于''包含'' 用法的一个例子: <pre><?php get_sidebar(); ?> <?php get_footer(); ?></pre> 关于这些不同模板运行以及怎样在模板里面产生不同信息的更多内容,请阅读[[WordPress:Templates|模板]]文件。 ===='''以询问为基础的模板'''==== WordPress可以为不同的''询问'' 形式载入不同的[[WordPress:Stepping Into Templates|模板]]。有两种方法可以做到这一点:作为内置的[[WordPress:Template Hierarchy|模板层级]]的一部分,通过在模板文件中的[[WordPress:The Loop|Loop]]使用[[WordPress:Conditional Tags|引起条件反应的标签]]。 要使用[[WordPress:Template Hierarchy|模板层级]],你只要提供特别目的的模板文件,这个会自动地用来覆盖<tt>index.php</tt>。例如,如果你的主题提供一个模板叫做<tt>category.php</tt>,并且提供一个正被查询的类别,<tt>category.php</tt>而不是<tt>index.php</tt>将会被载入。如果<tt>category.php</tt>没有出现,<tt>index.php</tt>会照常使用。 通过提供一个例如,称作<tt>category-6.php</tt>的文件,你可以在模板层级中得到更加详细的信息---当为一个ID号码为6的类别产出网页的时候,这个文件而不是<tt>category.php</tt>会被用到。(如果你以一个站点管理者的身份连接主机,你可以在[[WordPress:Administration_Panels#Manage_-_Change_your_content|管理]] > [[WordPress:Administration_Panels#Categories|类别]]中找到类别的ID数字)。更详细地看看这个过程是怎样进行的,请看看[[WordPress:Category Templates|类别模板]]。 如果你的主题需要更多地控制使用的模板文件而不是[[WordPress:Template Hierarchy|模板层级]]中所提供的内容,你可以使用[[WordPress:Template Hierarchy|引起条件反应的标签]]。引起条件反应的标签基本上是用来检查看看在[[WordPress:The_Loop_in_Action|WordPress Loop]]内的,一些特别的条件是否是真的,然后你就可以根据那个情况,载入一个特别的模板,或者在屏面上放一些特别的文本。 例如,给一个特别类别中的文章产出一个样式表,代码可能看起来像这样的: <pre><?php if (is_category(9)) { //查找类别9中的文章 include(TEMPLATEPATH . '/single2.php'); } else { // 每隔一篇文章便放入一个这个 include(TEMPLATEPATH . '/single1.php'); } ?></pre> 或者,使用一个查询,这个查询可能看起来像: <pre><?php $post = $wp_query->post; if ( in_category('9') ) { include(TEMPLATEPATH . '/single2.php'); } else { include(TEMPLATEPATH . '/single1.php'); } ?></pre> 在任一的情况下,这个例子代码会产生不同的模板,这些模板的使用取决于类别上显示的文章。询问条件并不局限于类别,然而—请看看[[WordPress:Conditional Tags|引起条件反应的标签]]文章来看看所有的选项。 === 媒体图标 === '''这个特色是 [http://trac.wordpress.org/ticket/6751 当前在 WordPress 2.5中破坏了]。''' WordPress使用媒体icons来代表你的博客和管理界面上的[[WordPress:Using_Image_and_File_Attachments|附属文件]],前提是这些icons存在。 它要查找当前主题的<tt>images</tt>目录中的媒体类型所命名的图像文件。(对于Wordpress2.2而言,默认的主题只有一个媒体图标,<tt>audio.jpg</tt>.) 例如,对于[http://en.wikipedia.org/wiki/Internet_media_type MIME 类型] <tt>audio/mpeg</tt>的一个附属装置,WordPress在这些位置中寻找一个图标文件,在找到第一个匹配文件后,便停止(请看看<tt>[[WordPress:Function_Reference/wp_mime_type_icon|wp_mime_type_icon]]</tt>): # <var>我的_主题</var>/图像/audio.jpg # <var>我的_主题</var>/图像/audio.gif # <var>我的_主题</var>/图像/audio.png # <var>我的_主题</var>/图像/mpeg.jpg # <var>我的_主题</var>/图像/mpeg.gif # <var>我的_主题</var>/图像/mpeg.png # <var>我的_主题</var>/图像/audio_mpeg.jpg # <var>我的_主题</var>/图像/audio_mpeg.gif # <var>我的_主题</var>/图像/audio_mpeg.png ===主题模板文件列表=== 下面是WordPress 识别的主题模板文件的列表。当然,你的主题可以包含任何其它的样式表,图像,或者文件。''只要牢记下面的内容对于WordPress具有一些特别的意思—更多的信息请看看[[WordPress:Template Hierarchy|模板层级]]。 '' ;<tt>style.css</tt>:主要的样式表。这个'''必须'''包含在你的主题中,而且它必须为你的主题包含信息标题。 ;<tt>index.php</tt>:主要的模板。如果你的主题提供它自己的模板,<tt>index.php</tt>必须呈现。 ;<tt>comments.php</tt>:评论模板。如果没有出现,来自"默认"主题的<tt>comments.php</tt>正被使用。 ;<tt>comments-popup.php</tt>:弹出的评论模板。如果没有出现,来自"默认"主题的<tt>comments-popup.php</tt>正被使用。 ;<tt>home.php</tt>: 主页是模板。 ;<tt>single.php</tt>:单一的文章模板。当一篇单一的文章被查询的时候,便会用到这个模板。对于这个和其它的查询模板,如果查询模板没有出现,就会用到<tt>index.php</tt>。 ;<tt>page.php</tt>:网页模板。当一个单独的[[WordPress:Pages|网页]]得到查询的时候,便会用到这个。 ;<tt>category.php</tt>: The [[WordPress:Category Templates|类别模板]]。当一个类别得到询问的时候,便会用到这个。 ;<tt>author.php</tt>:[[WordPress:Author Templates|作者模板]]。查询一个作者的时候,会使用到这个。 ;<tt>date.php</tt>:日期/时间模板。当查询一个日期或者时间的时候,便会用到这个模板。年,月,日,时,分,秒。 ;<tt>archive.php</tt>:归档模板。当查询一个类别,作者或者日期的时候,便会用到这个模板。注意这个模板会被<tt>category.php</tt>, <tt>author.php</tt>, 和<tt>date.php</tt>覆盖,因为后者有各自的查询形式。 ;<tt>search.php</tt>:搜索结果模板。当执行一个搜索的时候,便会用到这个模板。 ;<tt>404.php</tt>:'''[[WordPress:Creating_an_Error_404_Page|404 没有找到]]'''模板。当WordPress找不到匹配查询的一篇文章或者网页的时候,便会用到这个模板。 这些文件有关于WordPress的特别意思因为这些文件用来作<tt>index.php</tt>替代品,条件是这些文件存在,根据[[WordPress:Template Hierarchy|模板层级]],而且相应的[[WordPress:Conditional Tags|引起条件反应的标签]] (a.k.a <tt>is_*();</tt> 函数) 返回是真。 ===来自一个模板的参考文件=== WordPress默认主题(以Michael Heilemann的[http://binarybonsai.com/kubrick/ Kubrick]WordPress1.2布局为基础)提供了一个非常好的例子,关于查询是怎样映射进模板的。 代码<tt><?php bloginfo('template_directory'); ?></tt>将模板目录的URL嵌入了模板产出中。你可以将任何额外的URI信息添加到你的主题的参考文件的这个输出中。 代码<tt><?php bloginfo('stylesheet_directory'); ?></tt>嵌入了目录的URI,这个URI将当前的主题样式表包含到模板输出中。你可以添加任何额外的URI到你的主题的参考文件的输出中,特别是样式表使用的那些。 恒量TEMPLATEPATH是当前主题模板目录绝对路径的一个参考(后面没有/)。 注意用在样式表中的URIs与样式表相关,但是与指代样式表的网页并不相关。这就避免了在CSS文件中包含PHP代码来规定类别。例如,如果你的主题包含了一个<tt>images/</tt>目录,你只需要在CSS中规定这个相关的目录,像这样的: <pre style="font-size: 0.9em">h1 { 背景图像: URL(图像/my_background.jpg); }</pre> 对于模板中的参考文件以以上的方式使用URIs是一个好的做法,因为,这样你的模板就不会取决于绝对路径了。 ===定义自定义模板=== 使用WordPress插件系统来定义额外的模板,这种模板以你自己自定义的标准为基础,是可能的。这个高级的功能通过使用<tt>template_redirect</tt> [[WordPress:Plugin API#Current Hooks For Actions|action hook]]可以得到实现。更多的关于创建插件的信息可以在[[WordPress:Plugin API|插件API]]参考中找到。 ===插件API Hooks=== 当开发一个主题的时候,最好牢记你的主题应该得到了设置,这样它就能够很好地配合你(或者其它的主题用户)可能决定安装的WordPress插件。插件通过"Action Hooks"来给WordPress添加泛函性(请看看[[WordPress:Plugin API|插件API]]得到更多的信息)。大多数Action Hooks是在WordPress核心PHP代码内部,因此你的主题不要为它们的运行准备任何特别标签。但是有几个Action Hooks的确需要呈现在你的主题上,为了使插件能够直接地在你的页眉,页脚,工具条,或者在网页上显示信息。下面是你需要的特别Action Hook模板标签列表: ; wp_head : Goes in the [[WordPress:Glossary#HTML|HTML]] <tt><head></tt> 主题元素; <tt>header.php</tt> 模板. 例子插件使用: 添加 javascript 代码。 : 用法: <tt><nowiki><?php do_action('wp_head'); ?></nowiki></tt> :''-or-'' <tt><nowiki><?php wp_head(); ?></nowiki></tt> ; wp_footer : 在一个主题的"页脚"中; <tt>footer.php</tt> 模板。例子插件使用: 在页脚的底部,嵌入需要在所有内容运行之后运行的PHP代码。 : 用法: <tt><nowiki><?php do_action('wp_footer'); ?></nowiki></tt> :''-or-'' <tt><nowiki><?php wp_footer(); ?></nowiki></tt> ; wp_meta : 通常在主题的菜单或者工具条的<tt><nowiki><li>Meta</li></nowiki></tt>部分; <tt>sidebar.php</tt> 模板。 例子插件使用: 包括一个旋转的广告或者一个标签cloud。 : 用法: <tt><nowiki><?php do_action('wp_meta'); ?></nowiki></tt> :''-or-'' <tt><nowiki><?php wp_meta(); ?></nowiki></tt> ;评论_形式 : 在 <tt>comments.php</tt> 和<tt>comments-popup.php</tt>中, 直接在评论形式的关闭标签 (<code><nowiki></form></nowiki></code>)前面。 例子插件使用: 显示一个评论预览。 : 用法: <tt><nowiki><?php do_action('comment_form', $post->ID); ?></nowiki></tt> 对于一个真正的世界用法的例子,你将会发现这些插件hooks包含在默认主题的模板中。 ==主题开发一般指导方针== 请明白你的文件中的以下内容(一个包含在你的主题中的README文件帮助许多用户克服了许多潜在的障碍物): #明确地指出你的主题和模板文件要获得什么。 #如果你的主题有什么缺陷的话,将它指出来。 # 明确地指出模板和样式表文件中[[WordPress:Commenting_Code|评论]]任何特别的修改。给更改,模板部分,CSS样式,特别是给那些包含模板文件的添加评论。 # 如果你有什么特别的要求,这些要求可能包括自定义RewriteRules,或者使用一些额外的,特别的模板,图像或者文件,请清楚地描述一个用户应该采取那些措施,以使你的主题运行。 #试着并且测试你的主题[[WordPress:CSS_Fixing_Browser_Bugs|通过浏览器]]至少发现几个[[WordPress:CSS_Troubleshooting|问题]],主题的用户不久可能会发现这些问题。 #如果可能的话,提供联系信息(网页或者电子邮件),来支持信息和问题。 花一些时间来通读[[WordPress:Designing Themes for Public Release|为了公共发行而设计主题]],这篇文章有许多好的贴士,关于怎样准备你的主题来公共发行。 ==参考和资源== 在[[WordPress:Templates|模板]]文章中有WordPress主题和模板文件资源。
摘要:
请注意,您对站长百科的所有贡献都可能被其他贡献者编辑,修改或删除。如果您不希望您的文字被任意修改和再散布,请不要提交。
您同时也要向我们保证您所提交的内容是您自己所作,或得自一个不受版权保护或相似自由的来源(参阅
Wordpress-mediawiki:版权
的细节)。
未经许可,请勿提交受版权保护的作品!
取消
编辑帮助
(在新窗口中打开)
本页使用的模板:
模板:WordPress导航
(
查看源代码
)(受保护)