站长百科 | 数字化技能提升教程 数字化时代生存宝典
首页
数字化百科
电子书
建站程序
开发
服务器
办公软件
开发教程
服务器教程
软件使用教程
运营教程
热门电子书
WordPress教程
宝塔面板教程
CSS教程
Shopify教程
导航
程序频道
推广频道
网赚频道
人物频道
网站程序
网页制作
云计算
服务器
CMS
论坛
网店
虚拟主机
cPanel
网址导航
WIKI使用导航
WIKI首页
最新资讯
网站程序
站长人物
页面分类
使用帮助
编辑测试
创建条目
网站地图
站长百科导航
站长百科
主机侦探
IDCtalk云说
跨境电商导航
WordPress啦
站长专题
网站推广
网站程序
网站赚钱
虚拟主机
cPanel
网址导航专题
云计算
微博营销
虚拟主机管理系统
开放平台
WIKI程序与应用
美国十大主机
编辑“
WordPress:Stepping Into Templates
”
人物百科
|
营销百科
|
网赚百科
|
站长工具
|
网站程序
|
域名主机
|
互联网公司
|
分类索引
跳转至:
导航
、
搜索
警告:
您没有登录。如果您做出任意编辑,您的IP地址将会公开可见。如果您
登录
或
创建
一个账户,您的编辑将归属于您的用户名,且将享受其他好处。
反垃圾检查。
不要
加入这个!
__TOC__ 模板文件是你的WordPress站点的积木。它们就像一个个迷一样地组合在一起,在你的站点上制作出网页。一些模板(例如标题和页脚模板文件)能在所有的网页上使用,然而其它的模板文件只能在一些具体情况下才能使用。 一个传统的网页包括两个文件: * [[Wordpress:Glossary#XHTML|XHTML 网页]]保存网页结构和内容还有 *[[Wordpress:Glossary#CSS|CSS 样式表]]保存网页的呈现方式。 在WordPress中,(X)HTML和CSS样式表是显示的,但是''内容''是通过不同的[[Wordpress:Templates|模板文件]] "在后台"产生的。模板文件和样式表作为一个[[Wordpress:Using Themes|WordPress 主题]]被保存在一起。学习更多的关于创建主题的内容,阅读[[Wordpress:Theme Development|主题开发]]。 == WordPress 网页结构 == 一个简单的WordPress网页结构由三个基本的"积木"组成:标题,内容和页脚。每一块都由当前WordPress中的一个模板文件产生。 <div style="margin:5px;float:right"> <div style="background:white; border:2px blue solid;margin:5px; padding-top:10px; font-size: 130%; text-align: center; width:120px; height:50px"> Header </div> <div style="background:white; border:2px red solid;margin:5px; padding-top:10px; font-size: 130%; text-align: center; width:120px; height:50px"> Content </div> <div style="background:white; border:2px purple solid;margin:5px; padding-top:10px; font-size: 130%; text-align: center; width:120px; height:50px"> Footer </div> </div> *'''标题'''包含了所有应该在''上面的''信息— 例如在<tt style="font-weight:bold; color:#036"><nowiki><head></nowiki></tt> tag &mdash里面; 在你的 XHTML网页, 例如 <tt style="font-weight:bold; color:#036"><nowiki><doctype></nowiki></tt>, <tt style="font-weight:bold; color:#036"><nowiki><meta></nowiki></tt> 样式表的标签和链接. 它也包括打开的 <tt style="font-weight:bold; color:#036"><nowiki><body></nowiki></tt> 标签和可见到的你的博客的[[Wordpress:Designing Headers|标题]] (通常包括你的站点的标题,导航菜单,标示语条,以及对你的站点的描述,等等。). * '''内容'''块包括了你的博客的文章和网页,例如你的站点的"肉类" * '''页脚'''包括了你的网页的底部的信息,例如,在 [[Wordpress:Good_Navigation_Links|导航菜单]]上对于你的站点的其它的[[Wordpress:Pages|网页]]或者类别的链接,版权和联系信息,以及其它的详细信息。 === 基本的模板文件 === 在[[Wordpress:Using Themes|WordPress 主题]]中产生一个这样的结构,从你的主题目录中的一个<tt style="font-weight:bold; color:#036">index.php</tt>模板文件开始。这个文件有两个主要的功能: * 包含或者 "访问"其它的模板文件 * 包含 [[Wordpress:The Loop|WordPress Loop]] 从数据库(文章,网页,类别,等等中)收集信息 对于简单的结构,我们只要包括两个其它的模板文件: '''标题''' 和 '''页脚'''。这些必须命名为<tt style="font-weight:bold; color:#036">header.php</tt> and <tt style="font-weight:bold; color:#036">footer.php</tt>. [[Wordpress:Template Tags|模板标签]] 包含了它们,使它们看起来像: <pre><?php get_header(); ?> <?php get_footer(); ?></pre> 为了显示你的博客的文章和网页(并且自定义它们显示的方式),你的<tt style="font-weight:bold; color:#036">index.php</tt>文件应该在标题和页脚命令之间运行[[Wordpress:The Loop|WordPress Loop]]。 == 更多复杂的网页结构 == <div style="margin:5px;float:right"> <div style="background:white; border:2px blue solid;margin:5px; font-size: 130%; text-align: center; padding-top:10px; width:120px; height:50px"> 标题 </div> <div style="background:white; border:2px red solid;margin:5px; padding-top:10px; font-size: 130%; text-align: center; width:120px; height:50px"> Content </div> <div style="background:white; border:2px green solid;margin:5px; padding-top:10px; font-size: 130%; text-align: center; width:120px; height:50px"> 工具条 </div> <div style="background:white; border:2px purple solid;margin:5px; padding-top:10px; font-size: 130%; text-align: center; width:120px; height:50px"> 页脚 </div> </div> 许多WordPress主题包含了一个或者几个的'''工具条''',包含了[[Wordpress:Customizing Your Sidebar|导航功能]]和更多的关于你的站点的信息。工具框有一个叫做<tt style="font-weight:bold; color:#036">sidebar.php</tt>的模板文件产生的。它可以包含在你的<tt style="font-weight:bold; color:#036">index.php</tt>模板文件中,有下面的[[Wordpress:Template Tags|模板标签]]: <pre><?php get_sidebar(); ?></pre> === Beef在哪儿? === 注意我们没有包括一个模板标签来"得到"我们的网页的''内容''。这是因为内容是在[[Wordpress:The Loop|WordPress Loop]]中产生的,在<tt style="font-weight:bold; color:#036">index.php</tt>里面。 也注意主题的样式表决定了用户的浏览器界面的标题,页脚,工具条和内容的外观和设置。关于设计你的WordPress主题和网页的更多信息,请看[[Wordpress:Blog Design and Layout|博客设计和布局]].... == 模板文件中的模板文件 == 你看到了WordPress怎样将标准的模板文件(标题,页脚,和工具条)包含在了the <tt style="font-weight:bold; color:#036">index.php</tt> 模板文件中。你也可以将其它的模板文件包含到任何你的模板文件中。 例如,<tt style="font-weight:bold; color:#036">sidebar.php</tt>也许包含一个模板文件,这个文件产生一个搜索形式— <tt style="font-weight:bold; color:#036">searchform.php</tt>.因为这不是WordPress标准的模板文件之一,包含它的代码可能有所不同: <pre><?php include (TEMPLATEPATH . '/searchform.php'); ?></pre> 我们不是使用一个WordPress模板标题来包含文件,我们使用[http://us3.php.net/manual/en/function.include.php PHP 命令<tt style="font-weight:bold; color:#036">include</tt>],这就需要知道文件的位置(<tt style="font-weight:bold; color:#036">TEMPLATEPATH</tt>是WordPress中一个特别的变数,指向主题的模板文件目录)。 <div style="margin:5px; float:right"> <div style="background:white; border:2px blue solid;margin:5px; font-size: 130%; text-align: center; padding-top:10px; width:120px; height:50px"> 标题 </div> <div style="background:white; border:2px red solid;margin:5px; padding-top:10px; font-size: 130%; text-align: center; width:120px; height:50px"> 内容 </div> <div style="background:white; border:2px #FF9900 solid;margin:5px; font-size: 130%; text-align: center; width:120px; height:80px"> 评论形式 </div> <div style="background:white; border:2px green solid;margin:5px; padding-top:10px; font-size: 130%; text-align: center; width:120px; height:50px"> 工具条 </div> <div style="background:white; border:2px #FF148A solid;margin:5px; padding-top:10px; font-size: 130%; text-align: center; width:120px; height:50px"> 搜索形式 </div> <div style="background:white; border:2px solid purple;margin:5px; font-size: 130%; text-align: center; width:120px; height:50px"> 页脚 </div> </div> 大多数WordPress主题在其它的模板中包含许多的模板文件,在站点上产生网页。下面的模板文件是一个WordPress站点的主模板的典型: * <tt style="font-weight:bold; color:#036">header.php</tt> ** <tt style="font-weight:bold; color:#036">theloop.php</tt> (The Content) ** <tt style="font-weight:bold; color:#036">wp-comments.php</tt> * <tt style="font-weight:bold; color:#036">sidebar.php</tt> ** <tt style="font-weight:bold; color:#036">searchform.php</tt> * <tt style="font-weight:bold; color:#036">footer.php</tt> 然而,这个结构是可以更改的。例如,你可以将搜索形式放到你的标题上。也许你的设计不需要一个页脚,那么你就可以完全地不管那个模板。 == 特殊的模板文件 == WordPress在WordPress站点的网页上拥有两个'''核心页面浏览'''。当网页只显示一篇文章时,可以使用'''唯一的文章浏览'''。'''多篇文章浏览'''列出了多篇文章或者文章摘要,并且应用到类别归档,日期归档,作者归档,(通常是)你的博客主页的"一般的"浏览。你可以使用<tt style="font-weight:bold; color:#036">index.php</tt>模板文件来产生所有的这些形式的网页,或者依赖WordPress的[[Wordpress:Template Hierarchy|模板层次]],根据不同的情况,选择不同的模板文件。 WordPress模板层次回答了以下的问题: <blockquote> ''当正在显示一个特别形式的网页的时候,WordPress会使用什么模板文件? '' </blockquote> WordPress 能自动地识别带有标准名称的模板文件并将它们用于一些特别形式的网页。例如,当一个用户点击到一个博客文章的标题,WordPress知道他们只想看看它的网页内的一篇文章。 WordPress [[Wordpress:Template Hierarchy|模板层级]]会使用 <tt style="font-weight:bold; color:#036">single.php</tt> 模板文件而不是 <tt style="font-weight:bold; color:#036">index.php</tt>来产生网页 —如果你的主题有一个 <tt style="font-weight:bold; color:#036">single.php</tt> 文件。同样地,如果一个用户点击一个特别类别的链接, WordPress 会使用 <tt style="font-weight:bold; color:#036">category.php</tt> 模板,如果这个模板存在的话;如果这个模板不存在,它会寻找 <tt style="font-weight:bold; color:#036">archive.php</tt>, 如果这个模板也不存在, WordPress 会继续向前使用主要的 <tt style="font-weight:bold; color:#036">index.php</tt> 模板。你甚至可以为特别的种类使用特别的模板文件(看看[[Wordpress:Category Templates|类别模板]]得到更多的信息)。 == 模板文件小贴士 == 下面是一些关于创建WordPress模板文件的一些贴士: ;'''追踪打开的和关闭的标签''' : 模板文件包括使用 [[Wordpress:Glossary#XHTML|XHTML]] 标签和 [[Wordpress:Glossary#CSS|CSS]] 参考资料。 HTML 要素和CSS 参考资料可以穿过模板文件,在一个中开始,在另一个中结束。 例如, <tt style="font-weight:bold; color:#036">html</tt> 和<tt style="font-weight:bold; color:#036">body</tt> HTML 要素通常以<tt style="font-weight:bold; color:#036">header.php</tt> 开始并且以<tt style="font-weight:bold; color:#036">footer.php</tt>结束。大多数WordPress 主题利用了 HTML <tt style="font-weight:bold; color:#036">div</tt> 要素, 它也可以跨越几个文件。例如,主要的<tt style="font-weight:bold; color:#036">div</tt> 关于的页面内容可能以<tt style="font-weight:bold; color:#036">header.php</tt> 开始,并且以<tt style="font-weight:bold; color:#036">index.php</tt> 或者 <tt style="font-weight:bold; color:#036">single.php</tt>结束。如果你 [[Wordpress:Theme Development|开发,设计或者修改一个主题]]追溯到一个HTML成份开始和结束的位置会变得复杂。 使用[[Wordpress:Commenting Code|评论]]在模板文件中记录,一个大的container标签打开并且关闭,这样你可以追踪哪个 <tt style="font-weight:bold; color:#036">div</tt>是不同部分的最后中的哪一个 ;'''在不同的浏览下的测试模板文件''' :如果你对评论,工具条,搜索形式,或者任何其它的模板文件做了更改,要确保你使用了不同的网页浏览(单独的文章,不同形式的归档和网页)将它们测试了。 ;'''评论偏差''' :如果你正[[Wordpress:Designing Themes for Public Release|设计主题以公开发行]],牢记有的人下载你的主题,可能想将主题稍微改一下以供他们自己使用。如果你在模板文件上,在你从默认的和/或者经典的主题的逻辑上做了更该的地方,做上笔记,这是很有用的。如果你在其它的地方有样式信息(例如在你的 <tt style="font-weight:bold; color:#036">header.php</tt> 文件或者在HTML标签上),在你的主题的主要样式文件上添加评论,也是一个好注意。 ;'''关闭你后面的标签通道''' 如果你在一个模板文件中启动了一个HTML标签或者 <tt style="font-weight:bold; color:#036">div</tt> ,确保你在另一个模板文件中包含了关闭标签。WordPress论坛得到了许多关于"我的主题怎么了"的问题,当他们移动了脚页模板文件却没有关闭标题模板文件前面的标签时。返回到你的标签,确定它们已经关闭了。(一个证实这个是正确的好方法,就是用一个[http://validator.w3c.org HTML validator]来测试你的单独的和归档的页面浏览。 ;'''模板中的CSS 样式''' :你可以在你的模板中使用任何你喜欢的HTML和CSS标签。然而,鼓励你遵循标准的WordPress主题结构(看看[[Wordpress:Site Architecture 1.5|站点体系结构 1.5]])。这可以使你的用户更加地了解你的主题。 == 模板文件资源 == 关于模板文件资源的全面列表,看看[[Wordpress:Templates|模板]]。你也许也想在[[Wordpress::Category:Templates |类别:模板]]和[[Wordpress::Category:Template Tags|类别:模板标签]]中查看更多的文章。
摘要:
请注意,您对站长百科的所有贡献都可能被其他贡献者编辑,修改或删除。如果您不希望您的文字被任意修改和再散布,请不要提交。
您同时也要向我们保证您所提交的内容是您自己所作,或得自一个不受版权保护或相似自由的来源(参阅
Wordpress-mediawiki:版权
的细节)。
未经许可,请勿提交受版权保护的作品!
取消
编辑帮助
(在新窗口中打开)