17713433920 info@mac163.com
wordpress动态
如何从html创建wordpress主题
如何从html创建wordpress主题

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

配置图像和JavaScript文件

如果原始HTML模板（index.html）中有图像，则可能会注意到将模板切成PHP文件后它们停止显示。完全不用担心，这就是PHP的方式。例如，如果您的标题部分有徽标，例如…

<img alt="your_logo_alt_text" src="images/logo.jpg" />

…您将需要使用一些代码。我将在稍后介绍的代码将帮助浏览器在图像 文件夹中找到徽标（或其他图像），该文件夹是（或应该是）主题主目录的子文件夹。因此，要在标题部分显示徽标，请打开header.php文件，并用以下代码替换上面的代码：

<img alt="your_logo_alt_text" src="<?php echo get_template_directory_uri(); ?>/images/logo.jpg" />

get_template_directory_uri（）函数返回主题目录的URL。因此，如果将徽标添加到图像文件夹中，则代码将获取该徽标。

注意到有什么区别吗？显然，这段代码只会修复您的徽标。要修复其他图像，您将需要以类似的方式重写其代码。简单易吃的东西。

让我们继续学习JavaScript。如果您的HTML网站使用JavaScript，请创建一个名为js的文件夹，然后将脚本放在此处。您可以使用以下代码在header.php文件中调用它们：

<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/example.js"></script>

上面的代码以example.js为例。不要忘记用JavaScript文件的名称替换该部分。

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

模板文件

在本教程的第一部分中，我们提到了四个基本模板文件，即index.php，header.php，sidebar.php和footer.php。模板文件控制您的网站在网络上的显示方式。模板从WordPress的MySQL数据库获取信息，并将其转换为在Web浏览器中显示的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和bloginfo。在以下部分中，我们将向我们新创建的WordPress主题添加一些模板标签。我假设您已经在header.php文件中包含了DOCTYPE声明。如果还没有，则代码如下：

<!DOCTYPE HTML>

DOCTYPE声明使您的HTML代码有意义。顺便说一句，让我们修改开始的HTML标记。我们将使用language_attributes标记添加 lang属性，如下所示：

<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>

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

<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">

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

<link title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" rel="alternate" type="application/rss+xml" /><link href="<?php bloginfo('pingback_url'); ?>" rel="pingback" />

您是否注意到我们如何利用bloginfo标记来包含RSS feed（“ rss2_url”）和pingback（“ pingback_url”）？在保存header.php文件之前，还添加以下代码：

<?php wp_head(); ?>

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

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

第一个标签wp_title将添加页面或帖子的标题，第二个标签bloginfo（’name’）将添加您的博客名称。既然您的WordPress主题具有页面标题，我们如何为主题创建屏幕截图，重新打包主题并休息一下？

为主题创建屏幕截图

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

微信二维码

微信扫描二维码联系我们！
我们在微信上24小时期待你的声音
提供外贸路由器设备产品,轻松翻墙,解答：WP主题推荐,WP网站建设,Google SEO,百度SEO,专业服务器环境搭建等！

需要提供WordPress主题/插件的汉化服务可以随时联系我们！另外成品WordPress网站以及半成品WordPress网站建设，海外Google SEO优化托管服务，百度SEO优化托管服务，Centos/Debian服务器WP专用环境搭建，WP缓存服务器搭建，我们都是你的首选，拥有多年WP开源程序服务经验，我们一直在坚持客户体验，没有最好，只有更好！

随机推荐

回到顶部