从头开始编写自己的 WordPress 模板非常简单。如果您从事 Web 开发行业,您可能已经听说过“WordPress”是什么。也许客户提到过,但你并不熟悉。也许您之前已经使用过它,但不知道如何从头开始制作主题。或者也许你是一个完全的新手。不管怎样,这篇文章适合你。
先决条件:在我们开始之前,您需要满足以下一组要求。
- 您需要在本地主机或实时托管上拥有完全成熟的 WordPress 设置。如果您想了解有关从 WordPress 开始的更多信息,请参阅本文。
- 在整个开发过程中遵循的概念设计,无论是作为 PSD 还是 HTML CSS。
- 对PHP编程的一点介绍。然而,这不是这篇特定帖子的必需品,但仍然推荐。
设计 WordPress 主题是一项漫长、乏味、永无止境的编程挑战。开发过程完全取决于您希望主题的外观。这篇文章只是一个教程,并没有涵盖标准 WordPress 主题所需的所有细节。阅读本文后,您必须严重依赖 WordPress Codex 和 WordPress StackExchange 进行进一步查询。
考虑到先决条件,让我们开始吧。您需要知道的第一件事是,您在 WordPress 中所做的几乎所有事情都在
wp-content
目录中。其他一切都是 WordPress CMS 本身,您不想弄乱它。
当您打开wp-content -> 主题目录时,您会发现默认的 WordPress 主题,例如二十五、二十四、二十三等。要从您自己的主题开始,请使用您喜欢的任何名称创建一个目录。对于这篇文章,我们将其称为 wpstart 。
A WordPress theme atleast needs two files to exist – style.css and index.php
所以进入wpstart文件夹并创建这两个文件。在style.css 中,插入以下注释。这会告诉 WordPress 仪表板有关主题详细信息和元信息的信息。
/*
Theme Name: WP Start
Author: FedUser
Description: A bare bone WordPress theme
Version: 0.0.1
*/
现在切换到您的 WordPress 仪表板,然后单击外观 > 主题。您会在主题集合中找到WP Start 。
继续并激活此主题,然后访问该站点。瞧!您已经在技术上创建了一个自定义主题,完全由您自己完成。当然,它除了有一个空白的白屏之外什么都不做。这就是index.php
作用的地方。
打开索引。在文本编辑器中打开PHP并写入以下代码。
This is a sample WordPress theme.
再次访问该站点并启动并运行您的第一个 WordPress 模板。
分而治之
要开发标准的 WordPress 主题,您需要将所有工作划分为多个部分。这不是必需的,因为您可以在index.php
做任何事情,但是良好的编程实践涉及模块化。对于这篇特定的文章,我们将整个工作分为四个部分,即。页眉、页脚、侧边栏和内容。对应这些部分,我们将创建四个不同的文件,分别是header.php
、 footer.php
、 sidebar.php
和content.php
。
- 标题。 PHP :对于这个特定的例子,这个文件将执行以下操作;
- 为 HTML 定义
内的所有元和链接标签。
- 显示站点品牌,如名称和描述。
- 提供不同页面的导航。
考虑到这些要点,让我们编写我们的主题标题。
WP Start 现在我想提请您注意一件事。您可以看到我们的网站标题是如何“硬编码”的。这意味着,无论您在哪个网站上应用此主题,标题都将保持相同的“WP Start”。如果作者必须更改它,他必须手动编辑代码才能这样做。为了避免这些手动调整模板,WordPress 提供了各种函数调用来动态处理这些情况。在这种特殊情况下,我希望标题是站点/博客的名称。为此,我将替换
WP Start 和
这称为将小的PHP摘录嵌入到 HTML 中。 (从技术上讲,我们在PHP文件中编写 HTML。因此我们将 HTML 嵌入到PHP代码中)。
所以
header.php
加上一些额外的代码,变成了;此代码中使用的其他PHP摘录是;
这是获取模板的目录,以便可以找到诸如CSS、JS、字体等附加资源。
这将回显站点的主页 url。
- 为 HTML 定义
- 页脚。 PHP :这是我们将在站点页脚中添加我们想要的任何内容的文件,如自定义页脚、脚本标签等。此外,在
header.php
中开始的 HTML 标签在此文件中关闭。此文件中使用的附加PHP摘录是;
这将获取并放置站点描述。
这里要提到的另一件事是,我在
footer.php
文件中使用了“硬编码”子部分,例如“联系人”和“链接”。相反,您可以使用 WordPress 小部件来自动化并直接通过定制器修改它们。然而,这超出了本文的范围,我们将在以后的文章中随时讨论。 - 侧边栏。 PHP :大多数网站都有侧边栏,我们的也有。侧边栏通常会显示存档链接、最近的帖子、社交媒体帐户、广告等。在我们的例子中,我们将使用存档链接和社交媒体链接。同样,WordPress 小部件比“硬编码”垃圾要好得多!但为了清楚起见,我们将坚持后者。
- 内容。 PHP : 现在页眉、页脚和侧边栏都设置好了,我们将转向网站的主要内容。目前,我们将坚持这个文件中的一些虚拟内容。
Sample Title
Sample text goes here.......
一体化
现在让我们回到index.php
,在那里我们将所有上述部分整合为一个。由于这个文件是我们主题的入口点,我们可以巧妙地选择放置这些部分。这是我如何做到的。
这里使用的PHP摘录是不言自明的。 get_header(), get_sidebar()
和get_footer()
是用于嵌入相应部分的预定义函数。对于像content.php
这样的自定义部分,嵌入是通过以下代码完成的;
style.css :现在我们已经更新了index.php
文件,让我们为CSS添加一些魅力。
/*
Theme Name: WP Start
Author: FedUser
Description: A bare bone WordPress theme
Version: 0.0.1
*/
nav.navbar .navbar-brand .site-branding {
margin: 0;
}
footer.site-footer {
background-color: #502550;
color: #fff;
padding: 40px 0 20px 0;
}
footer.site-footer a {
color: #fff;
}
瞧!您的自定义 WordPress 主题的第一眼已准备就绪。
这是整个 WordPress 主题开发中最令人兴奋的部分,您可以在其中控制所有帖子。 Loop 是一项功能,您可以使用它动态地将内容插入到您的主题中。我们在本教程中的目标是将所有博客文章呈现为一个用户友好的列表,以便读者可以选择其中的任何一篇。让我们看看我们是如何做到的。
循环本身是不言自明的。
如果有任何帖子,而没有留下任何帖子,请显示它们。此循环中的任何内容都将重复,直到页面用完所有帖子。我们可以使用这个概念来显示我们的列表。这是我如何做到的。
并更改了索引。 PHP到这个。
让我们看看刚刚发生了什么!
索引中的循环。 PHP正在调用内容。 PHP每次页面有帖子时。里面的内容。 PHP ,我已经检查了当前的帖子is_single() 。如果当前页面仅包含一个要循环的帖子,则此条件将成立。当它不是单身时,我想通过它的标题链接到该帖子。所以我使用get_permalink()来获取该特定帖子的网址。但是,如果页面是单一的,则不需要链接,因此,我只使用了the_title()函数。
转到帖子的元信息。我已经显示了文章发表的the_date()及其the_author() 。
最后,我使用了is_single()的相同概念来显示帖子的 the_excerpt()或the_content() 。
看,就是这么简单和有趣。现在有了一点CSS
魅力,我得到了以下结果。
结论:
- 我们将在这一点上结束这篇文章,但您需要知道关于 WordPress 仍有很多东西需要学习。这只是一个示例练习,但标准主题会非常复杂。不过,我们希望您已经学到了一些新东西。
- 如果有不明白的地方,请在评论中提及。如果有什么需要更正的地方,请告诉我们!如果您对进一步改进有任何反馈或建议,我们也将不胜感激。
- 我们很想看看你通过这篇文章学到了什么。所以一定要分享你的第一个 WordPress 主题的链接。你的第一步可以让新人振作起来。
编程快乐!