HTML到WordPress主题教程:步骤1 – 将HTML转换为PHP

技术教程 2022年4月1日
2562 0

VPS1352主机测评网(www.vps1352.com)
本文链接：https://www.vps1352.com/11795.html

对于我们中的许多人来说，我们的第一次编码WordPress的经验是我们写下我们的第一个主题.

毕竟，每个WordPress网站都需要一个主题，如果你想要一些东西，那么它自己代码是有意义的.

当我在2010年开始用WordPress时，我之前从未使用过的内容管理系统(CMS).但是，我会在大量的HTML和CSS中编码大量的HTML和CSS，它是使用HTML的内容作为CMS的一部分，或者对于我从头开始构建的小客户端站点.

我花了几周称量不同CMSES的利弊我可以用于客户网站(记住，这是在Wordpress成为今天的主要力量之前)并在Wordpress上决定有两个原因.第一个是我们所有人的用户和开发人员的令人敬畏的社区.第二个是，通过一些HTML经验，创建WordPress主题并不难.

继续读取，或使用以下链接跳转:

  • 你需要的是什么
  • 启动代码
  • 设置你的主题
  • 添加模板标记

    • 呼叫样式表
    • 创建自动生成的类和ID


  • 添加循环
  • 添加钩子

在这一系列的三个帖子中，我将通过从静态HTML创建自己的WordPress主题的过程.我们将从单个HTML文件和CSS样式表开始，并将那些转换为WordPress主题，其中包含所需的所有铃声和吹口哨.

帖子将按顺序完成过程:

  1. 创建 index.php 文件，添加模板标记和循环.
  2. 创建其他模板文件和模板零件，如标题，侧栏和页脚文件.
  3. 添加功能，包括窗口小部件和导航菜单，并获取函数文件设置.

在此帖子中，我将创建一个文件- index.php .这将基于来自我静态站点的 index.html 文件，但我将删除内容并用模板标记和循环替换它.

所以让我们开始！

您需要的

与本系列一起，您需要几个工具:

  • WordPress的开发安装，最好在您的本地机器上.
  • 一个代码编辑器.
  • 一个静态站点-如果您没有您正在工作的，则可以下载我正在使用的文件.

确保您在开发网站上执行此操作，而不是一个直播网站-您不希望世界看到您的主题，直到它已准备就绪.

起始代码

启动站点只有两个文件-我们的 index.html 和 style.css .我故意保持简单的事情，并使用我网站的折叠版本.这是它看起来的看法:

Our starting home page

您可以在github上找到 index.html 和 style.css 文件的内容-我不会在这里展示代码，因为有很多！

注意:这是一组基本代码，旨在帮助您创建自己的主题.如果您想将其用于实时网站，您可能需要向其添加额外的样式等.它不会通过主题目录要求.请用它来学习，不要为现场站点供电.

设置主题

要创建主题，您将需要一个文件夹在WordPress安装中.使用代码编辑器或文件管理器，转到 wp-content/themes 并创建一个新文件夹.给它你想要的任何名字.我要打电话给我的 wpmudev-theme-part1 .

将 index.html 和 style.css 文件复制到该文件夹​​.他们还不会做任何事情，但他们很快就会.

现在您有一个包含两个文件的文件夹.你开始了！

现在，WordPress不知道您有主题.任何主题只需要两个文件: index.php 和 style.css .正如随着这个系列的同时看到的那样，您通常需要更多，但主题将仅用两个.

让我们开始向您的样式表添加注释的文本.打开style.css文件并添加以下内容:

加载GIST 2B693721668DBA8BCC578B8DE9824642

这提供了WordPress，识别它是主题样式表所需的信息.随意编辑详细信息，添加您自己的名称和URL，如果您愿意，请更改主题的名称.

下一个要做的是将 index.html 文件的文件名更改为 index.php .您现在有两个文件会让您的主题工作.

但是您还没有添加任何PHP.为此，我们需要添加一些模板标记和循环.让我们这样做.

添加模板标记

模板标记是您在主题模板文件中使用的特殊WordPress函数.它可以做出各种各样的事情-看看提供的模板标签范围，请查看食盒.

我们将为两件事添加模板标签:

  • 呼叫样式表
  • 自动生成CSS的类和ID，

调用样式表

现在，如果您将网站打开，激活您的新主题，您会注意到您的样式都没有加载.这是我的外表:

My site with no CSS

不要恐慌！您只需要将样式表调用添加到索引文件的head部分.

注意:在本系列的第三部分中，我将向您展示如何将其移动到主题功能文件，这是最好的实践.现在我们只是使用两个文件:样式表和索引.PHP文件，所以我们将坚持使用这些文件.)

打开您的 index.php 文件.查找此行:

加载GIST 2B693721668DBA8BCC578B8DE9824642

编辑它，而不是调用静态文件，它使用php加载主题样式表:

加载GIST 2B693721668DBA8BCC578B8DE9824642

这将使用bloginfo()模板标记，从数据库中获取有关您网站的各种信息的有用标记.在这种情况下，它已经获取主题的URL，然后获取该文件夹中的文件，该文件夹称为 style.css .

现在刷新主页.你会发现样式负载.这是我的页面现在:

My site with styles working

你会注意到它看起来完全像你的旧静态网站.这并不意味着我们已经完成了-无论近在咫尺！内容从中从中静态内容拔出，在 index.php 文件中，我们将通过添加循环来纠正.但首先让我们添加一些更多的模板标签.

创建自动生成的类和IDS

能够让WordPress自动为帖子和<body>元素自动生成CSS类和ID，这真是太用了.这意味着您可以稍后使用这些类进行样式，定位特定的帖子类型，类别等.

打开 index.php 文件.找到打开<body>标记.结束</head>标签后，它会坐在自己的线上.

编辑它，所以它读取这样:

加载GIST 2B693721668DBA8BCC578B8DE9824642

这将使用body_class()模板标记，这将检测您的网站访问者在任何给定时间的页面上的页面以及基于该时生成CSS类的页面.

如果您刷新页面并检查代码，您会发现WordPress自动为您添加一些CSS类:

加载GIST 2B693721668DBA8BCC578B8DE9824642

这些将根据您的网站上的页面和它显示的内容的页面而有所不同.您可以使用此目的来针对您的CSS，如某些内容类型，如单个帖子，某些类别或任何您想要的任何内容.

现在让我们为你的个人帖子做这件事.在 index.php 文件中找到此行:

加载GIST 2B693721668DBA8BCC578B8DE9824642

编辑该行，以便如下所示:

加载GIST 2B693721668DBA8BCC578B8DE9824642

这使用了两个模板标签:

  • the_ID()标记获取帖子ID并使用它以使POST成为唯一ID.
  • post_class()标记以与body_class()标记类似的方式工作，将类列表添加到对应于帖子类型的文章元素.请注意，现在这将无法正常工作，因为您没有从数据库中获取帖子-但是当我们添加循环时，它将.

添加循环

现在是有趣的一点.现在，您的页面内容是硬编码的.您希望它将其从呼叫填充到数据库，以便正确显示正确的内容.

在 index.php 文件中，在<article>标记内找到代码(您已添加ID的标签内部，并关闭模板标签).

编辑该代码，因此它如下所示:

加载GIST 2B693721668DBA8BCC578B8DE9824642

那里有很多代码-如果你想了解发生了什么，请查看我们的帖子解释循环.

现在，如果您刷新主页，您将看到一些非常不同的内容-您的帖子.如果这是一个全新的WordPress安装，您将看到安装WordPress时添加的默认帖子:

My site now has a loop

添加钩子

我们系列第一部分的最后一步是为我们的代码添加几个重要的钩子.这些放在head部分和页脚中，它们对于许多用于工作的插件是必不可少的.

在head部分中，在关闭之前添加此</head>标签:

加载GIST 2B693721668DBA8BCC578B8DE9824642

现在移动到index.php文件的末尾.在关闭</body>标签之前，添加wp_footer()钩子:

加载GIST 2B693721668DBA8BCC578B8DE9824642

将特殊的挂钩添加到您网站的每个页面的顶部和底部-这些对您的主题和您的网站必须正常工作至关重要，因此不要跳过它们.

现在保存文件.

下一个

现在有一个WordPress主题的开始.然而，还有工作要做.在本系列的下一部分，我将通过将主题拆分为多个模板文件的过程.您将为标头，侧栏和页脚创建单独的文件，循环的包含文件，以及每个页面和存档的单独文件.

cms(1)html(6)WordPress(893)
♥赞2

相关文章

发表回复