WordPress简单主题创建教程2:创建主题HTML结构

现在我们用我们的代码编辑器打开我们的index.php,添加HTML核心标签,如图所示。我们这里只了解PHP函数。 language_attributes() 函数用于决定WordPress网站所要显示的语言,bloginfo() 函数用于添加网站的信息,具有多个参数用于显示站点的名称、描述、URL以及列表,这里我们使用name参数用于在浏览器标签栏上显示网站名称。

我们保存index.php文件,重新加载站点前端页面,你就可以可以看到我们的站点标题 wordpress dev,如图所示。

我们需要在我们的标签中设置字符集( character set),所以我们添加meta charset,同样使用bloginfo() 函数,参数设置为 charset。

我们保存我们的源代码,加载站点网页,查看网页源代码。我们会看到两个网页语言属性,我们的网页使用中文,字符集是utf-8。如图所示。这些属性都可以从WordPress内部设置。

我们打开style.css文件,添加站点网页的背景颜色样式,颜色为黑色。

我们重新加载网页,我们网页背景不会变成黑色,因为CSS样式表没有被网页读取。

为了能够让网页读取CSS样式表,我们在我们的style.css中输入图中选中的代码。这里我们同样使用 bloginfo() 函数,参数为 stylesheet_url 。这段代码将使我们的网页从正确的位置获取样式表。

保存代码并重新加载网页,我们现在可以看到我们的网页背景变成黑色的了。因为现在我们的网页已经正确加载CSS样式文件了。

现在,我们在标签中添加一个函数 wp_head(),如图所示。这个函数的作用是将我们需要的所有信息都添加到标签中,例如,当您安装一个插件时,比方说插件需要一个样式表,或者需要在heade标签中执行一些操作,我们就需要添加 wp_head() 函数。所以当你创建插件时,就会在中添加一些内容。

保存我们的代码,重新加载网页,查看网页源代码,我们就会发现网页的标签内部新增了许多内容,这些内容就是来自于 wp_head() 函数。

如果我们删除 wp_head() 函数,重新加载网页,查看网页的源代码,我们就会发现我们的页面源码只有index.php文件中的代码。

现在我们将学习如何在 body 中添加基本的 HTML 标签。我们创建一个

标签,在里面添加一个标签并且在这个标签中添加站点标题。由于我们在前面已经将网页的背景颜色设置成黑色,所以重新加载我们的网页是不能显示我们站点标题的。我们回到我们的style.css文件中将网页背景颜色样式设置成白色。

我们站点标题可以使用动态的标签,当然我们这里使用

标签。我们保存,重新加载我们的网页,我们的网页上出现了我们站点标题 WordPressDev 了。

现在我们如果想改变站点的前端输出内容,我们进入我们WordPress站点管理后台,选择“Settings”,选择“常规”选项。将我们的站点标题改为:My Website,站点副标题改为:The Best Website,点击“保存更改”。我们重新加载网页,看看有什么变化。

现在我们的站点标题更改为My Website 了,但是页面没有显示我们站点的副标题。

标签换成标签。

我们保存我们的代码,重新加载网页,我们页面上就出现了我们站点标题和站点副标题了。

现在我们添加更多的 HTML 标签。在我们的

标签下面,我们添加一个 class 为 main 的 div 标签,整个div标签哟用于获取我们的博客文章。在

标签中,我们首先使用 if 语句检查是否有文章存在,如果有,网页显示 post found,否则就显示 Sorry, No posts were found。后者既可以使用PHP函数显示,也可以直接用文字显示。

我们重新加载我们的站点,我们的页面显示了 post found,说明我们的站点已经存在文章了。后面我们在学习如何显示我们的站点中的文章。如果你觉得本教程对你有帮助,可关注我的企鹅号以便学习后续内容。

扫描二维码或搜索dwysxh123关注我的微信公众号,发送 Simple 获取源代码。

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20181116A0NC6900?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

同媒体快讯

扫码关注云+社区

领取腾讯云代金券