是的,可用的WordPress主题有成千上万,但是如果您不能为自己的网站或客户找到想要的主题怎么办?DIY始终是一种选择,构建自定义的WordPress主题拥有一些现成的模板不总是提供的一些优势。
构建您自己的WordPress主题意味着可以准确地包含网站所需要的功能——并且包含这些功能。这意味着在更新时,您不必通过预先构建的模板的数十项特性来查找需要处理的部分。
这也意味着您可以创建一个加载速度更快的网站,因为它不会被您不使用的功能所拖累。对于那些不希望让客户失去耐心而离开的企业来说,这是一个重要的考虑因素。它还有助于提高网站的SEO,因为谷歌优先考虑页面加载速度更快的网站。
构建WordPress主题需要哪些技能和知识?
这要视情况而定,因为博客网站主题与电子商务主题截然不同。然而,无论您想制作哪种WordPress主题,了解一些PHP都会有所帮助,因为没有它,您几乎无法构建任何主题。
在开始之前,熟悉WordPress也是一个好主意,这样您就可以知道哪些功能是WordPress网站的标准功能。推荐阅读:《WordPress建站怎么挑选合适的网站主题?》
工作时,您还需要耐心在WordPress Codex的主题开发部分查找内容,以回答在构建过程中出现的所有小问题。幸运的是,找到您需要的东西就像在谷歌上搜索“show[component]WordPress codex”一样简单——例如,“show featured image WordPress codex”或“show date WordPress codex”。
在掌握了一些PHP技术和WordPress知识之后,即使您不知道如何编码,也可以创建简单的自定义主题。因为您可以使用一些资源来查找为主题添加功能和特性所需的代码片段。
您需要帮助的是了解构建主题的整个过程,这是本文的目标。例如,如果您是WordPress开发的新手,您可能不知道脚本队列是什么。
专业提示:队列是一种高效添加样式表和JavaScript的方法。那是因为这些WordPress功能将对照核心和插件样式表以及JavaScript进行交叉检查,以确保您不会遇到任何冲突。队列还有助于保持主题代码的条理化,因此或其他开发人员更容易更新主题代码。这些功能允许使用包含WordPress的库来更快地构建主题。
构建一个WordPress主题需要多长时间呢?
您需要的具体时间有所不同,这取决于主题的复杂性和您的技能水平。四十到六十小时是一个比较合理的时长。
对于初学者来说,大部分时间会花在查找您需要了解的内容上。更有经验的开发人员可能会用这些时间来创建更复杂的主题,并正确执行所有命令。
准备好构建WordPress主题了吗?
按照正确的顺序做事您会节省很多时间,尤其新手。这是我使用的过程。
1.计划并画出主题的线框图。
对于任何Web项目,在开始编码之前,您都应该弄清楚主题是什么样子的,以及它将要做什么。主要页面布局的线框图是主页,文章页面和一般的存档页面(标签或类别浏览和搜索结果页面)。这应该包括您的基本的博客或信息网站。
您需要一些工具来规划和修改线框图:
画板。在开始数字化设计之前,在纸上画出想要的东西。例如,我在网格笔记本上写下来我想要在我的主页上放哪些内容,以及这些内容将放在哪里。写完了之后,有了一定的概念之后,那么是时候制作一个电子线框图了。
数字线框图应用程序。如果您有设计背景,Adobe Illustrator是一个不错的选择,因为它可以让您轻松地设计布局,但也有其他线框图工具。您甚至可以在平板电脑或手机上使用绘图应用程序,或在Word中插入>形状。如果您可以用一个应用程序来追踪这些框,则可以用它来制作一个简单的线框图。推荐阅读:《使用两个免费的WordPress主题设计在线精品店(教程一)》
2.创建您的主题文件。
您不必从头开始。我最喜欢的工具之一是Underscores(也称为s),它是由Automattic(创建WordPress的公司)创建的。它本质上是一个极简主义样板模板,涵盖了WordPress网站的基本知识,没有任何样式或额外内容。
首先,在Underscores主页上输入您的主题名称,然后单击“生成”。该网站使用Underscores GitHub存储库的最新版本为您创建一个ZIP文件。
3.设置您要使用的标准WordPress特性和功能。
下载并解压Underscores主题文件后,您可以在Microsoft Visual Studio中打开functions.php,以便您编辑该主题的代码。
首先,查看哪些功能已经开启。例如,搜索表单、评论和图库已经在Underscores中激活,因此您不需要添加任何内容即可获得这些功能。一个菜单和一个侧边栏也已经通过主题中的功能文件注册,您可以进行复制、粘贴和编辑,以满足您的需要。
4.拉取您的主题所需的所有依赖项。
如果您想添加侧边栏,脚本,样式表或其他功能,这就是做的地方。比如,您可以找到需要的任何库(比如Bootstrap、jQuery、Font Awesome)所需的队列函数,以及任何基于JavaScript或CSS的依赖文件。
如果您的线框需要多个侧边栏,例如主页上的社交侧边栏和博客页面上的“最近帖子”侧边栏,将在功能文件中注册这些不同的侧边栏。但是现在您还没有收集完所有的代码资源。谷歌的jQuery库提供了指向托管JavaScript库的链接,您可以在站点上加载这些库。他们已经在CDN(内容交付网络)上,这有助于站点更快地加载。
专业小贴士:有时您必须直接下载它们,并将它们添加到_s的文件夹中。例如,如果您正在使用一个需要PCI合规性的站点(如果您的站点涉及银行卡支付,则必须具有安全性),则必须直接从您的Web服务器加载所有第三方依赖项。您可以将这些文件添加到/inc文件夹中。推荐阅读:《如何在WordPress中使用自定义CSS》
5.构建您的前端功能。
您希望在您的网站上显示什么?这一步就是您构建这些内容的地方。
每个页面上显示的内容都是很有帮助的。例如,我首先设置页眉和页脚。我还通常会添加一个home.php,从index.php复制,因此我可以构建一个自定义主页,我通常从这里开始创建页眉和页脚代码。
它们之间的所有内容,如菜单和侧边栏,可能会根据页面模板而有所不同。此时,您可以构建主索引模板(index.php),然后是单个文章模板(single.php)、然后是归档文件和您需要的任何其他页面模板。您可以使用WordPress主题模板层次结构作为指南。
在这个阶段,您可以发送一些引用codex的时间,以回答诸如“如何调用页面标题?”和“如何调用这个类别列表并使其显示?”等问题。WordPress 有非常好的文档,但是在工作时,您可能会经常来回切换页面。
6.设置您的主题模板的样式。
一旦您的代码和前端都在一起,就到了变换风格的时间!从使用WordPress主题的移动版本开始创建样式表是最有效的,因为这是最基本、元素最少的样式。
您的下一个样式表步骤是一个小型的平板电脑主题,然后是大型平板电脑和桌面主题,然后逐步添加更多的样式。
这些是您将放置在移动样式表末尾的媒体查询,以定位这些屏幕逐渐增大的设备(“…”是样式代码的位置):
// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { … }
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { … }
// Large devices (desktops, 992px and up)
@media (min-width: 992px) { … }
// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { … }
按此顺序工作有助于保持您的代码整洁,并确保您的主题在所有类型的设备上都能呈现最好的效果。
专业小贴士:如果使用Bootstrap,您可以在规划布局和功能时设置一些定位(第五步)。这是因为Bootstrap内置了类,您可以将这些类添加到标记中,以便更快地格式化。Bootstrap还可以用来屏蔽页面元素,因此必须减少样式设置,并花费更少的时间手动定位模板中的所有元素
7.测试您的主题模板。
您可以通过在您网站的主机上设置子域来创建测试环境,或者通过单独的私有沙箱获得VPS主机。还有一个名为VVV的应用程序,您可以从GitHub下载并使用它在您的计算机上本地构建您的测试站点。
在尽可能多的不同设备和浏览器上检查您的测试站点,以确保您的WordPress主题在任何地方都能正常工作。在您对它的外观和工作方式感到满意时,就是迈出最后一步的时候。
8.发布您的WordPress主题!
通过VVV完成测试后,将压缩主题文件夹,就像在计算机上的其他文件夹一样(右击“压缩”或“存档”),创建可以通过仪表板上传的主题版本。如果您有FTP访问服务器的权限,您还可以使用FTP上载程序。然后转到WordPress仪表板的主题部分,运行实时预览,准备好后,保存并激活新主题。
准备好开始制作和测试自己的WordPress主题了吗?使用我们的VPS托管计划获取需要的沙箱。推荐相关阅读:《WordPress发布和处理文章功能(1)》