WordPress主题制作详细教程.docx

《WordPress主题制作详细教程.docx》由会员分享，可在线阅读，更多相关《WordPress主题制作详细教程.docx（77页珍藏版）》请在冰豆网上搜索。

WordPress主题制作详细教程

WordPress主题教程#1：

介绍

从零开始制作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：

模板文件和模板

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。

WordPress主题教程#3：

开始Index.php

第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的停止按钮，然后点击推出。

WordPress主题教程#4a：

Header模板

第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模板。

WordPress主题教程#4b：

Header模板2

第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。

给以上代码添加

保存，刷新浏览器，应该看到没有任何变化

可以把DIV想像成一个无形的盒子（box）。

在这里它把博客标题链接和博客描述从其他东西中区分开。

如果没有对它进行样式化，它无非是单独的内容，以后我们可以会用style.css这个文件去样式化这个无形的盒子。

我们可以给DIV附上边框（borders），填充（paddings）,页边空白（margins），背景颜色（backgroundcolor），背景图片（backgroundimages），以及其他一些东东。

第5步：

添加HeaderDIV标签

添加id=”header”到DIV标签，如下：

保存并刷新浏览器。

同样也没有改变，这里给DIV标签指定了ID，因为将会有更多的DIV标签或者无形的盒子，我们使用ID来区分！

WordPress主题教程#5：

主循环

第1步：

创建containerDiv

在headerDIV标签下添加一个DIV标签，并给它的ID赋值为“container”，如下：