17713433920 info@mac163.com
如何从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开源程序服务经验,我们一直在坚持客户体验,没有最好,只有更好!
Mac163网站建设,需要帮助点击我!
  • 17713433920
  • 在线客户
  • 联系邮箱
  • 扫一扫,加好友

关闭搜索
购物车
回到顶部