WordPress教程:如何从HTML创建WordPress主题(第2部分)

  1. 1个. WordPress教程:如何从HTML创建WordPress主题(第1部分)
  2. 2. 当前阅读: WordPress教程:如何从HTML创建WordPress主题(第2部分)
  3. 3. WordPress主题剖析简介

在本教程的第一部分中,我们介绍了将HTML模板转换为WordPress主题的基础知识。如果您最好奇,我们了解了一些有关将HTML模板拆分为PHP文件,将它们放回一起,设置样式和命名WordPress主题的知识。确实,我们学到了很多东西,并且您将需要熟悉我们在第一篇教程中介绍的概念,以享受第二篇。在今天的帖子中,我们将把事情推高一点。我们将涵盖更多领域,以便您可以创建功能齐全的WordPress主题。所以,事不宜迟,我们开始.


配置图像和JavaScript文件

如果原始HTML模板中包含图片(index.html),您可能注意到它们在将模板切成PHP文件后停止显示。完全不用担心,这就是PHP的方式。例如,如果您在标题部分有这样的徽标,那么……

your_logo_alt_text

…您将需要使用一些代码。我将在稍后介绍的代码将帮助浏览器在您的网站上找到您的徽标(或其他图片) 图片 文件夹,它是(或应该是)主题主目录的子文件夹。因此,要在标题部分显示徽标,请打开header.php文件,并将以下代码替换为以下代码:

your_logo_alt_text

上面的代码使用 example.js 作为说明。别忘了用JavaScript文件的名称替换该部分.

当然,如果您要为其他人创建主题,那么您确实应该使用wp_enqueue_scripts加载js文件。查阅AJ关于将JavaScript添加到WordPress主题中的帖子,以获取更多信息和提示.

模板文件

在本教程的第一部分中,我们提到了四个基本模板文件,即 index.php,header.php,sidebar.php footer.php. 模板文件控制着您的网站在网络上的显示方式。模板从WordPress的MySQL数据库获取信息,并将信息转换为显示在网络浏览器中的HTML代码。换句话说,模板文件是WordPress主题的基础。为了更好地了解模板,让我们深入研究一个称为 模板层次结构.

我们将使用一个比喻。如果访问者单击类别链接(即指向类别的链接),例如http://www.yoursite.com/blog/category/your-category/,则WordPress将利用模板层次结构生成正确的文件(和内容),例如解释如下:

  • 首先,WordPress将寻找与类别ID匹配的模板文件
  • 例如,如果类别的ID为2,则WordPress将查找名为category-2.php的模板文件
  • 如果category-2.php不可用,WordPress将使用通用类别模板文件,例如category.php。
  • 如果该模板文件也不可用,WordPress将查找通用存档模板,例如archive.php。
  • 如果通用存档模板不存在,WordPress将退回到主模板文件index.php上

这就是WordPress模板的工作方式,您可以使用这些文件来自定义WordPress主题以满足您的需求。其他模板文件包括:

home.php或index.php用于呈现博客文章索引
front-page.php用于呈现首页显示中设置的静态页面或最新帖子
single.php用于呈现单个帖子页面
single- {post-type} .php用于呈现自定义帖子类型,例如如果post-type是产品,则WordPress将使用single-product.php
page.php用于呈现静态页面
category.php或archive.php用于呈现类别存档索引
author.php用于渲染作者
date.php用于呈现日期
search.php用于呈现搜索结果
404.php用于呈现服务器404错误页面

这只是一个简短的列表,还有许多其他 WordPress模板. 模板是一个很大的话题,学习如何使用模板文件的最佳方法是阅读大量内容。 主题开发 WordPress的库。或者,您可以阅读较短的 WordPress Codex的模板部分.

模板标签

看到我们刚刚介绍了模板文件,仅提及模板标签及其在WordPress主题中扮演的角色一两件事就可以了。根据WordPress.org的说法,“…模板标签用于博客模板中,以动态显示信息或自定义博客,从而提供使工具与众不同且有趣的工具。”

在上一教程中,您遇到了一些模板标记,例如 get_header,get_sidebar,get_footer博客信息. 在以下部分中,我们将向我们新创建的WordPress主题添加一些模板标签。我假设您已经在header.php文件中添加了DOCTYPE声明。如果您还没有,请输入以下代码:

DOCTYPE声明使您的HTML代码有意义。顺便说一句,让我们修改开始的HTML标记。我们将使用 language_attributes标签 像这样:

上面的代码将生成以下内容:

有了DOCTYPE声明和language_attribute标签,您的主题结构就合法了,浏览器将理解您的代码。如果要为博客创建主题,将指向pingback URL和RSS feed的链接放在头脑中很重要。在您的header.php中,添加以下代码:

“ rel =” pingback“ />

您是否注意到我们如何雇用 bloginfo标签 是否包含RSS feed(“ rss2_url”)和pingback(“ pingback_url”)?在保存header.php文件之前,还添加以下代码:

上面的wp_head标签将插入插件所需的样式表和JavaScript文件。如果您忽略了这一小段代码,则您的插件可能无法按预期运行。有了这种方式,让我们再次使用bloginfo标记将页面标题添加到WordPress主题中。在您的header.php文件中,添加以下代码:

<?php wp_title( '|', true, 'right' ); ?><?php bloginfo('name'); ?>

第一个标签 wp_title 将添加页面或帖子的标题 还有第二个标记bloginfo(“名称”)将添加您的博客名称。既然您的WordPress主题具有页面标题,我们如何为主题创建屏幕截图,重新打包主题并休息一下?

为您的主题创建屏幕截图

第一次上传测试主题时,您一定已经注意到它缺少WordPress主题面板中的屏幕截图。看起来很单调,特别是如果您还有其他主题带有彩色屏幕截图时。但是不用担心,为您的主题创建屏幕截图非常容易。只需使用您最喜欢的图像编辑器(例如Adobe Photoshop)创建图像,或截取主题的屏幕即可。确保您的图片宽600像素,高450像素。将图像另存为 screenshot.png 在您的主题文件夹中。保存所有更改,将主题文件夹压缩到ZIP存档中。上载主题并激活它以查看您的新更改��

结论

我想相信第二篇教程为您提供了从静态HTML创建WordPress主题的更深入的见解。在不久的将来,我将向您介绍WordPress主题的其他方面,但是与此同时,我已经为您准备了以下资源:

创造愉快!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map