这篇文章最初发表于2010年。
介绍的技巧和技术可能过时。

如果你对你的CSS和HTML有信心,一点也不难接受创建自定义WordPress主题的挑战。这个概述展示了我最新的自定义WordPress主题是如何从设计概念到完成主题构建的。看看静态设计是如何分解成各种WordPress主题文件的,了解简单的PHP代码片段如何添加博客的动态功能。


设计理念

查看粘性WordPress主题

我正在研究的主题是“粘性”。设计的主要特点是它的粘性侧边栏(因此得名粘性!),当主要内容滚动经过它时,它保持在原位。还有一些奇特的效果,比如阴影和插入文本外观,我将在CSS3的帮助下构建它们。

预览粘性WordPress主题设计

预览粘性WordPress主题设计

以主题制作为重点,我不会太详细地讨论设计是如何建造的,但从photoshop预览中可以看出,它使用的网格beplay足球是16列,基线为24px;相当柔和的米色和灰色,用深红色作为链接的突出颜色;排版设置为衬线字体的整个触摸类!;整个设计使用非常微妙的纹理,以提供一个更现实和触觉的感觉。

WordPress主题剖析

在进入构建过程之前,了解WordPress主题是如何工作的很重要。如果你看过任何预先设计的主题,你会注意到它都包含在一个文件夹中,大约有12个核心文件。一些主题,包括默认的WordPress主题,包括更多允许额外定制的文件,但不是强制性的添加。以下是您将要使用的主要文件的概述:

  • 页眉–包含您希望显示在网站顶部的所有内容。
  • 索引文件–加载主题的核心文件,也可以作为主页(除非将博客设置为显示静态页面)。
  • 侧栏–包含您希望在侧边栏中显示的所有内容。
  • 页脚–包含您希望显示在站点底部的所有内容。
  • 文件管理系统–查看类别时使用的模板文件,日期,作者发帖,等。
  • 单一PHP–查看单个日志时使用的模板文件。
  • 评论–在single.php文件的底部调用以启用comments部分。
  • 页PHP–类似于single.php,但用于WordPress页面。
  • 搜索引擎–用于显示搜索结果的模板文件。
  • 404.PHP–出现404错误时显示的模板文件。
  • 样式表–主题的所有样式都在这里。
  • PHP–可用于配置WordPress核心的文件,不编辑核心文件。

然后,每个文件都包含一系列PHP模板标记。这些标签告诉WordPress在哪里插入动态内容。一个很好的例子是 标签,它会拉入文章标题并在主题中显示:

有成堆的模板标签,通常情况下,会有一个完全按照你的意愿行事——这只是在WordPress代码.我见过许多主题,其中包括一些复杂的PHP编码,以实现一个已经作为简单模板标记提供的函数,所以请记住浏览WordPress代码每当你被卡住的时候!

基本的HTML和CSS

作为一个WordPress主题,基本上是由HTML和CSS组成的,但是在这里和那里插入了一些额外的PHP标记,重要的是要建立你的网站概念,因为你会一个好的老静态网站。我倾向于用虚拟内容构建完整的页面,然后在开始主题工作之前进行浏览器测试。以下是我的HTML代码概述:

HTML代码概述

构建WordPress主题

现在实际的设计已经形成了代码形式,现在是时候将静态HTML和CSS转换为WordPress主题了。首先为主题创建一个文件夹,然后创建上面的php文件(header.php,等)。有时候下载WordPress应用程序更容易,然后复制默认主题,并删除所有额外的绒毛。不管怎样,你要把所有的PHP文件都放好,所有图片和javascript文件都复制到主题文件夹中。

配置样式表

WordPress主题的所有细节都包含在样式表中。在style.css的顶部添加以下代码,然后修改细节以适应。

/*主题名称:Sticky Theme URI:http://www.blog.spongraphics.co.uk描述:Sticky Wordpress主题版本:1作者:Chris Spooner作者URI:http://www.spongraphics.co.uk*/

还要记住,要确保CSS属性中指向任何背景图像的路径都是正确的。

填充标题

打开header.php文件,并从概念HTML文件粘贴到头部。然后,我们需要进入并用正确的wordpress模板标签替换某些元素,以确保它们都能正常工作。首先,我们可以去掉标题并插入一些WordPress模板标记。BSG~(2);将显示页面标题,后面是bloginfo('名字'),这将放置博客的名称(在管理面板中设置)。

header.php代码概述

bloginfo(“样式表URL”);是用来调用样式表的代码段。这将取代我们在概念中创建的手动路径。其他文件,例如,可以使用bloginfo(“模板URL”);标签。这将以HTML格式呈现主题文件夹的路径。

如果您希望主题使用线程注释,可以放置一个片段,从WordPress核心调用相关的javascript文件。然后到关门前标签,添加BSG-头();,这是WordPress插件等放置其他头元素的地方。

建立索引

下一步是充实网站的主体。打开index.php文件并粘贴到概念HTML的主要部分。

index.php代码概述

这就是所有肉食的起源!在顶部我们有GETX标题();GETHEXED BARD();标签,它们调用header.php和sidebar.php文件,并根据标记出现的位置呈现内容。然后使用wordpress循环检查内容,如果有可用的内容,它就会呈现在页面上。在循环中,我们有各种各样的标签来显示帖子信息,如第三题();,和_PermaLink();.根据它们的用途,它们被包装在通常的HTML元素中,所以permaLink被包装在一个锚标记中,标题被包装在头2标记中。

_post_thumbnail();是可选添加项,但这段代码只是简单地利用了WordPress2.9中新的后缩略图功能。下面是我们希望所有文章内容出现的地方,它只是插入了_content(“”);标签。

在元部分,有各种各样的标签可以显示关于帖子的特定信息,比如它发布的时间,它所发布的类别以及有多少评论。所有这些都可以使用模板标记调用,例如时间(f js,Y’;,每一个都有特定的参数来进一步调整标签以适应。例如,时间可以更改为以各种格式显示。这就是WordPress codex的用武之地,再次检查您拥有的任何参数选项。

跳下来一点,然后循环显示其他的标签,如果找不到帖子,就会显示,最后用一个菊苣.在底部我们可以使用GETH脚注();调用页面的其余部分,它位于footer.php文件中。

填写侧边栏

在我的设计中,侧边栏是存放页面和类别列表的地方。从索引调用sidebar.php文件时使用GETHEXED BARD();标签,所以这个侧边栏.php文件中的任何内容都将插入主题的正确位置。

sidebar.php代码概述

我的侧边栏只有三个元素;徽标,页面列表和类别列表。徽标用h1标签包装并使用标签echo get_选项(“home”);bloginfo(“名称”);在适当的位置呈现博客的URL和博客名称。页面列表只需使用bsg_list_pages('title_li=');,其中参数停止添加常规的“页面”标题。类别列表也非常相似,bsg_list_categories();与各种参数一起用于自定义标记,如显示计数=0为了阻止WordPress显示每个类别中出现的文章数,HidiyVoice=0要显示类别,即使它没有任何文章,和排除=1要排除ID为1的类别,这是未分类的类别。

四舍五入页脚

footer.php代码概述

对于这个主题,footer.php文件可能是最简单的文件。唯一能进去的就是BGSG-英尺();标签就在,以便将任何额外的信息插入正确的位置。在您的主题中,您可能会显示一个流行文章列表,最新评论或档案清单。所有这些都可以使用特定的WordPress模板标记来完成。

创建存档

archive.php代码概述

php文件用于显示按类别查看的文章列表,作者,通过标签等。基本上和索引文件一样,但是在最上面添加了一个标签,可以呈现一个有用的页面标题,所以用户知道它们在哪里。'浏览文章类别'例如。

构建页面和单一视图

page.php代码概述

WordPress由文章和页面组成。文章使用single.php模板文件,而页面使用page.php模板文件。它们几乎是一样的,除此之外,你还倾向于包括注释_template();邮政标签,而不是页面。

配置注释模板

我通常从默认主题复制注释模板,然后进行修改,因为它包含了一些重要的WordPress代码行。

comments.php代码概述

一旦创建了注释文件,相同的文件几乎可以用于将来所有的WordPress主题项目。最困难的部分是找到CSS挂钩来设计您的评论。这是当萤火虫火狐的插件很有用。否则,注释文件只是在这里和那里有一些您可能想要调整的参数选项。突然想到的是化身尺寸参数,它告诉Wordpress用户的gravatar图像有多大。

完成搜索和404

这几乎就是离开搜索功能,基本上是archive.php文件的副本。一个方便的补充可能是行搜索结果 ,将用户的搜索词显示为标题。关于404页,这就是你发挥创造力的地方。此模板可以配置为显示您喜欢的任何错误信息,记住要包括通常的GETX标题();GETH脚注();必要时贴标签

最后的主题

查看粘性WordPress主题

当所有主题文件都完成时,是时候安装一个测试,看看它是如何工作的。用几个虚拟的帖子填充临时安装可以真正帮助测试驱动主题表面的任何错误。如果你看一下源代码,您将看到如何将每个模板文件插入到正确的位置,以及模板标记动态生成内容的方式。

查看最终的WordPress主题演示

如果你喜欢粘性主题的外观,它将被专门释放给进入所有区域下周的会员。

分享
在Pinterest上共享
没有图像。
105评论 提交 加上你的!
订阅接收spoon图形通讯beplay全方位手机移动娱乐平台

订阅我的时事通讯,成为第一个听到新文章的人

105评论

  1. 很好,简单教程。非常清楚,谢谢您。

    我可以厚颜无耻地问你“代码截图”中使用的手写字体的名称吗?他们真的很好,它看起来像一个合适的编码笔记本。

  2. 从零开始尝试和构建第一个主题当然是个好主意。
    如今,我使用混合框架在我的WordPress项目中获得了一个开端。

  • 我很高兴你花时间做这件事,克里斯,我想你会帮助很多人的。我记得我第一次建立一个主题,浏览WordPress文档(这很好),直到我得到我想要的。你的方法可以节省很多时间,如果人们想做些额外的事情,我建议他们查看Wordpress代码。

  • 非常感谢克里斯!
    我只是进入整个博客的事情,并使用一个可湿性粉剂的主题。我很想自己设计,但又不敢去解决。这是我的参考书目。希望我能成功。再次感谢。

  • 嗨,太好了,我一直想知道如何使用文字印刷主题。但我认为在联系人页面和主页之间,左侧导航所使用的空间略有不同。文章和设计页面的行为也与联系人页面相同。我使用的是火狐3.6。

  • 嗨,只是想找点正确的东西,请帮我,任何人!
    我在我的主题目录中有以下所有的PHP文件,我有一个名为library的文件夹,其中有我所有的css、images和js文件。那么我会像eg一样链接.js文件吗?