WordPress 主题教程从零开始.docx
《WordPress 主题教程从零开始.docx》由会员分享,可在线阅读,更多相关《WordPress 主题教程从零开始.docx(86页珍藏版)》请在冰豆网上搜索。
WordPress主题教程从零开始
WordPress主题教程:
从零开始制作
∙创建WordPress主题所需的工具和准备
从零开始制作WordPress主题其实不难,只要你从现在开始认真阅读这个教程,一步一步认真学习,你就会成为一个WordPress主题制作高手。
至少你会修改现有主题。
网络上已经有很多关于制作WordPress主题的教程,并且WordPress官方网站上也有指导文章。
但是当你不懂这方面的术语的话,这些教程可能不一定会帮助你,甚至还会误导你,所以这个教程会真正从零开始教你如何创建WordPress主题。
创建WordPress主题所需的工具和准备
开始真正制作主题之前,你需要使用到下面这些工具:
∙为了测试方便和快速,你首先需要在本地安装WordPress,至于如何在Windows系统上安装WordPress,你可以参考这篇日志:
在WordPress本地安装WordPress。
∙如果由于某种原因不能在本地安装WordPress,那么你也可以的服务器上安装一个测试版的WordPress。
这个时候你必须要有一个支持WordPress主机的服务器,一般我使用LAMP主机(Linux+Apache+MySQL+PHP)主机,Win+IIS主机可能会有很多问题,调试也比较麻烦,而LAMP主机,从我个人使用经验来说,我推荐(MT)MediaTemple主机。
∙代码编辑工具,如NotePad++或者Vim都可以,主要是适合自己个人使用习惯。
∙FTP工具,用于上传主题到服务器上测试,这方面的工具很多,如Filezilla,SmartFTP等,如果你先安装软件麻烦(对啊,现在是云计算时代,谁还装软件),你也可以安装Firefox的FTP扩展,Fireftp,直接在Firefox中上传文件到服务器上。
∙XHTML验证器和CSS验证器。
你将需要这些工具去验证你的主题是否符合XHTML和CSS标准,并且可以使用它查出奇正错误的地方。
这篇就介绍到这里,主要介绍了制作WordPress主题所需的工具和应该做哪些准备,下面就开始要了解和开始制作WordPress主题。
#1:
介绍
∙基本规则:
∙专业术语:
∙层式结构:
WordPress主题教程#1:
介绍是从零开始创建WordPress主题系列教程的第一篇。
从零开始制作WordPress主题的教程不会一次就教会你所有的东西,那样也是不可能的,这个教程也不是WordPress主题制作的参考,我所做的是一步一步从零开始教你如何制作WordPress主题,所以一定要耐心。
所以这一篇介绍首先是WordPress主题制作的一个最基本的介绍。
这里会涉及到HTML和WordPress的基本规则,一些专业术语,以及WordPress主题的层式结。
这些概念是很重要的,在接下来教程的很多地方都会涉及到,所以开始之前一定要搞清楚。
基本规则:
∙规则#1:
以正确顺序关闭所有HTML标签。
在上图中在错误关闭标签的演示中,关闭的ul标签是不按次序的。
每个HTML标签都是在<和>中,如果有斜线/,则说明这个标签是结束标签,没有则是开始标签。
如:
<>是开始标签,而>是结束标签。
在上面的例子中,使用ul(无序列表)li(列表元素)标签。
注意li的开始和结束标签在ul的开始和结束标签的里面,这就是标签正确嵌套方式。
∙规则#2:
每个主题至少要有这两个文件–style.css和index.php。
index.php告诉主题中所有的元素如何布局,style.css则告诉主题中所有的元素该如何展示和样式。
下面是一个完整的主题含有的文件列表(现在我们不用详细了解这个列表每个文件的意思,有个这样的印象就可以了):
ostyle.css
oindex.php
ohome.php
osingle.php
opage.php
oarchive.php
ocategory.php
osearch.php
o404.php
ocomments.php
ocomments-popup.php
oauthor.php
odate.php
专业术语:
∙Template(模板)—其实就是一个代码集,主题中很多地方会利用到这个代码集,所以把它们整合成一个模板,这样就就不必一遍遍输入这些重复代码。
∙Templatefile(模板文件)—一个包含一个或者多个代码集(模板)文件。
每个主题是由多个模板文件组成的,如:
index.php,style.css,sidebar.php等等。
∙Theme(主题)或者WordPresstheme(WordPress主题)—所有你正在使用的文件:
文本,图像,代码等等。
注意:
WordPresstheme(主题)和WordPresstemplate(s)(模板)是两个不同的东西,尽管有些人认为他们一样。
∙Post(日志)—现在你读的就是一篇日志。
此外,它是你blog的一个简单的条目,如:
一个页面或者一篇日记。
∙Page(静态页面)—一种特殊的post,它不是以分类组织的。
它有别于你其他的日志。
注意:
在WordPress,page(页面)和Page(静态页面)是两种不同的东西。
层式结构:
下图就是WordPress的层式结果,它简单的向你展示,一旦你主题中的某个文件丢失了,WordPress主题系统将会寻找什么模板文件来代替。
这里列出了6个文件而不是完整的13个,因为这6个是相对更重要一些,不过在接下来的教程中,余下的文件也都涉及到。
我们可以通过上面这张图的所处位置知道各个主题文件的重要性,越靠左越重要。
这里可能大家有个疑问,为什么会存在WordPress模板文件的层式结构,或者说是重要性级别呢?
因为WordPress利用这个层式结构去寻找相应的模板文件显示页面,并且在相应的文件丢失之后如何处理。
如果archive.php模板文件(用来显示存档页面)丢失了,那么WordPress将会使用index.php来控制存档页面如何显示。
如果single.php模板文件丢失了呢,哪个模板文件它会去寻找用来显示单一日志呢?
它会寻找index.php。
WordPress
#2:
模板文件和模板
∙Header模板文件:
∙Index模板文件:
∙Sidebar模板文件
∙Footer模板文件:
模板文件(templatefiles)和模板(template)是从零开始创建WordPress主题系列教程的第二篇。
开始之前,你要确保你已经看过WordPress主题教程#1:
介绍,否则你将无法理解在教程#2中使用的名词。
在WordPress主题教程#1:
介绍中,我们已经学过了WordPress的两条基本规则和术语,而这篇将会深入讲解模板文件,模板,以及每个页面的结构。
WordPress博客的每个页面是由多个模板文件组成的,下面是首页的例子:
在上图中,我们可以看出主题的index.php是由4个模板文件组成:
header.php,index.php,sidebar.php和footer.php。
Header模板文件:
通常在这个文件中包含博客的标题(title)和描述(description)。
而且它们通常在整个博客中都是一样的。
Index模板文件:
这个模板文件包含你的日志的标题,日志的内容(就是每篇日志的文本和图片)和日志的元数据(元数据是每篇日志的额外信息,如作者是谁,日志发布的时间,在哪个分类下,有多少留言等等)。
Sidebar模板文件
这个模板文件主要用于控制博客的页面列表,类别列表,存档列表,友情链接列表和其他一些列表。
Footer模板文件:
像header.php模板文件一样,footer.php通常不会因为页面的改变而改变,你可以在这里放置任何东西,但是通常是版权信息。
现在让我解释为什么把上面图片中的index.php所在的区域标为红色的。
引文这块区域是会根据不同类型的页面而发生变化。
如果你在单一日志页面,这时候页面将会包含这四个模板文件:
header.php,single.php,sidebar.php和footer。
#3:
开始Index.php
∙第1步:
打开XAMPP控制面板。
∙第2步:
创建你的主题文件夹。
∙第3步:
创建index.php和style.css文件。
∙第4步:
创建style.css。
∙第5步:
安装你的主题。
开始Index.php是从零开始创建WordPress主题系列教程的第三篇。
在介绍了WordPress主题的一些规则和术语,以及对WordPress模板和模板文件了解之后,现在是开始动手创建WordPress主题了的时候。
在这篇中,你将要着手开始写WordPress代码。
这里建议在本地电脑上安装WordPress,而不是安装到服务器上,因为本地更方便测试。
第1步:
打开XAMPP控制面板。
在XAMPP文件夹(通常是:
C:
\xampp),双击xampp-control.exe将会弹出一个新的窗口。
单击Apache和MySQL的启动按钮。
如下图所示:
启动之后你看最小化窗口了。
第2步:
创建你的主题文件夹。
转到你本地安装的WordPress主题文件夹,应该在xampp/htdocs/wordpress/wp-content/themes。
创建一个新的文件夹,命名为tutorial。
第3步:
创建index.php和style.css文件。
打开记事本或者你选择的文本编辑器,把index.txt这个文件中的所有内容都拷贝到你的记事本。
保存为index.php。
打开另外一个记事本,直接保存为style.css到相同的文件夹下.
现在有两个文件了:
index.php和style.css.
index.php解释:
点击上面的图片查看大图。
我会向你解释每个红色圆圈区域是什么意思。
Doctype–指明你用哪种类型的代码来编码你的主题。
这里你暂时还不用管它的详细意思。
是网页开始的地方。
是你的网页头部开始的地方。
每个网页都有一个头部和主体。
是头部结束的地方。
phpbloginfo(’stylesheet_url’);?
>是一个PHP函数,它能取得style.css文件所在的路径,这样主题就能使用style.css样式化页面上所有元素。
任何时候,PHP代码都是在
php和?
>之间的。
PHP代码和HTML的代码是不一样的,在PHP中,
php代表开始PHP代码而?
>是结束PHP代码。
所以:
∙
php–开始PHP代码
∙bloginfo(’stylesheet_url’)–调用style.css文件所在的路径
∙;–停止调用函数。
分号是用来结束一个PHP语句。
∙?
>–结束PHP代码
–这是网页主体开始的地方。
你能在网页上看到和读到的东西就是主体部分。
你正在阅读的这个教程说明你在正在看当前这个网页的主体部分。
是网页主体结束的地方。
是网页结束的地方,没有东西在它的后面了。
第4步:
创建style.css。
把style.txt中所有的代码拷贝到你的style.css文件中。
保存和关闭它。
第5步:
安装你的主题。
打开浏览器。
在地址栏输入输入http:
//localhost/wordpress/wp-login.php。
登录到你的WordPress管理后台。
(这里能够看到WordPress登录页面是因为你在第1步的时候启动了Xampp。
否者的话,在这里你的浏览器会报找不到的错误。
)
在管理界面下到外观(Apperance)菜单并激活名为Tutorial的主题。
注意,你的主题文件没有屏幕缩略图,所以是空白的。
一旦激活了,WordPress就会告诉你激活信息。
现在打开一个新的浏览器或者标签页(如果你的浏览器支持标签页浏览)并在地址栏输入http:
//localhost/wordpress。
你应该得到一个空白页面,恩,完全空白的页面。
如果不是,那你就是在错误的页面上了。
你的主题已经创建好了,这就是这个课程,下一步我们将讨论主题头部模板。
不要忘记关闭Xampp。
双击它在任务栏中小图标,点击Apache和MySQL的停止按钮,然后点击推出。
#4a:
Header模板
∙第1步:
打开XAMPP和主题文件夹。
∙第2步:
打开index.php
∙第3步:
调用博客标题
∙第4步:
调用博客链接
Header模板是从零开始创建WordPress主题系列教程的第四篇。
前面我向你讲解了如何安装和启动XAMPP,安装WordPress主题以及介绍了PHP语言的最基本语言,这篇我们将继续PHP并学习如何调用博客的标题和链接。
尽量输入所有代码而不是直接拷贝我给你的代码,这样可以让你尽量记住你所学到的的。
第1步:
打开XAMPP和主题文件夹。
打开Xampp,然后打开上次创建的主题文件夹,xampp/htdocs/wordpress/wp-content/themes/tutorial。
我们应该看到上次创建的两个文件:
index.php和style.css。
index.php和style.css文件的内容应该和index.txt和style.txt一致。
第2步:
打开index.php
打开浏览器,转到http:
//localhost/wordpress。
因为上次安装了一个空白的主题,这时我们应该看到一个空白的页面。
返回主题文件夹并打开index.php文件。
到目前为止,我们已经打开了主题文件夹,浏览器和index.php文件。
第3步:
调用博客标题
编辑index.php文件。
在
和这两个标签之间输入
phpbloginfo(‘name’);?
>,然后保存它。
返回到浏览器并刷新。
这时候我们应该能够看到博客的标题。
博客的标题是DemoThemeDevelopment。
刚才发生什么了?
我们在网页的主体(body)之间加入了一行PHP代码到index.php。
bloginfo()是调用博客的信息的函数。
其中参数name代表了它调用的是博客的标题。
这个名字是在option页面中设置的WeblogTitle。
php–开始PHP代码
bloginfo(‘name’)–调用博客信息,具体是博客的标题。
;–结束调用博客信息
?
>–结束PHP代码
每次我们在index.php文件中增加或者更改任何东西之后,都可以保存,然后刷新页面去查看结果。
第4步:
调用博客链接
调用了博客的标题之后,接下来就要把博客的标题放入超链接中,这时候需要一个XHTML标签。
返回index.php文件。
在同一行增加和。
此时新行的代码应该是:
phpbloginfo(‘name’);?
>
返回到浏览器,刷新,然后就可以看到博客的标题变成了链接。
现在它是一个链接,但是它没有链接到哪里。
因为这个是博客的标题,我们应该让它链接到首页。
为此,在href=后的双引号中输入
phpbloginfo(‘url’);?
>
保存,现在的代码应该是:
phpbloginfo(‘url’);?
>”>
phpbloginfo(‘name’);?
>
返回到浏览器,刷新,当鼠标在链接上面的时候,浏览器的状态栏应该显示http:
//localhost/wordpress
现在点击这个链接,它就会让我们返回首页。
可能现在看到还是是相同的页面,但是用#或者http:
//localhost/wordpress作为链接地址是完全不一样的。
在接下来的课程我们会学到到他们之间的不同。
刚才发生什么了?
我们把网站名字变成了链接,并使它链接到博客的主页。
bloginfo(‘url’)–调用博客基本信息,具体是首页的的地址或者URL
–是一个用于添加链接的XHTML标签
–链接的结束标签。
否则网页将不知道哪里结束链接,这样会使得页面接下来的内容全部都变成链接。
还记得规则#1吗?
正确关闭打开的所有标签。
href=”"–超文本的简写。
在引号之间就是它的值。
最终代码为:
phpbloginfo(‘url’);?
>”>
phpbloginfo(‘name’);?
>
意思为:
开始一个链接,链接的地址是博客的URL,用PHP函数bloginfo(‘url’)去调用这个地址或者URL。
这个链接的文本是博客的标题并使用PHP函数bloginfo(‘name’)去调用博客的标题。
最后结束链接。
这篇主要介绍了WordPress主题的XHTML代码,下一篇我们将继续Header模板。
#4b:
Header模板2
∙第1步:
开启XAMPP和打开index.php
∙第2步:
给博客的标题添加H1的标签
∙第3步:
添加博客描述
∙第4步:
DIV标签
∙第5步:
添加HeaderDIV标签
Header模板2是从零开始创建WordPress主题教程系列教程的第四篇第二部分。
最后说一次,开始之前务必先读下前面的日志。
这篇会完成Herder模板,并且开始介绍DIVBox模型。
第1步:
开启XAMPP和打开index.php
-启动Xampp
-打开Tutorial的主题文件夹
-打开浏览器,在地址栏输入http:
//localhost/wordpress
-返回主题文件夹,用记事本打开index.php
第2步:
给博客的标题添加H1的标签
现在,index.php的代码是:
phpbloginfo(’url’);?
>”>
phpbloginfo(’name’);?
>
给它添加
和
标签。
H1标签意思是标题一。
HTML一共可以有7级标题:
H1,H2,H3,H4,H5,H6。
按照默认,H1是字体最大而H6是则最小。
添加之后的的index.php文件是:
phpbloginfo(’url’);?
>”>
phpbloginfo(’name’);?
>
保存,返回浏览器并刷新。
第3步:
添加博客描述
调用博客的描述,则在博客标题链接的下面输入以下代码:
phpbloginfo(’description’);?
>。
现在变成了:
phpbloginfo(’url’);?
>”>
phpbloginfo(’name’);?
>
phpbloginfo(’description’);?
>
保存并刷新浏览器,可以看到在博客标题链接的下面出现博客的描述,我们可以到WordPress管理后下修改博客的描述。
php–开始PHP代码
bloginfo(’description’)–调用博客信息,这里的是描述
;–停止调用
?
>结束PHP代码
第4步:
DIV标签
这步将介绍一个新的标签—DIV。
给以上代码添加
和
标签:
phpbloginfo(’url’);?
>”>
phpbloginfo(’name’);?
>
phpbloginfo(’description’);?
>
保存,刷新浏览器,应该看到没有任何变化
可以把DIV想像成一个无形的盒子(box)。
在这里它把博客标题链接和博客描述从其他东西中区分开。
如果没有对它进行样式化,它无非是单独的内容,以后我们可以会用style.css这个文件去样式化这个无形的盒子。
我们可以给DIV附上边框(borders),填充(paddings),页边空白(margins),背景颜色(backgroundcolor),背景图片(backgroundimages),以及其他一些东东。
第5步:
添加HeaderDIV标签
添加id=”header”到DIV标签,如下:
保存并刷新浏览器。
同样也没有改变,这里给DIV标签指定了ID,因为将会有更多的DIV标签或者无形的盒子,我们使用ID来区分!
#5:
主循环
∙第1步:
创建containerDiv
∙第2步:
输入主循环代码
∙第3步:
调用日志标题
∙第4步:
给日志标题加上链接
调用博客日志的主循环(TheLoop)是WordPress中最重要的PHP代码集,几乎所有的页面都会用到它。
这也是从零开始创建WordPress主题系列教程的第五篇。
在开始继续学习之前,我们先复习下到目前为止学到了什么?
到目前为止,我们已经学到:
:
∙规则,术语和WordPress主题的层式结构
∙每个页面有哪些部分组成
∙如何安装你的主题
∙如何调用博客的标题和把它做成一个链接
∙如何调用博客的描述和如何把header和其他部分分开
现在让我们开始第五篇:
主循环(TheLoop)
打开Xampp,“tutorial”主题文件夹,浏览器,并且在浏览器中转到http:
//localhost/wordpress,最后打开index.php文件。
下面应该是这时候index.php文件中的内容:
记住,为了学习这些代码,请尽量手工输入而不是拷贝和粘贴。
第1步:
创建containerDiv
在headerDIV标签下添加一个DIV标签,并给它的ID赋值为“container”,如下: