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

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

如果您是从HTML(+ CSS)网站开始的,那么在使用WordPress时不必将其全部丢弃。您可以将HTML转换为WordPress,并在动态WordPress平台上运行您的网站(现在功能更强大).


也许不是这样。也许您只是想知道如何将客户的HTML设计转换为成熟的WordPress主题。或者,您可能想从更熟悉的HTML方面学习基本的WordPress(+ PHP)编程.

无论您今天出于什么原因,此WordPress教程都将向您介绍从HTML创建WordPress主题的基础。您可以按照本指南从头开始创建主题,也可以转到Github并下载WPExplorer入门主题,该主题提供了一个“空画布”,可以使用所有必要的模板文件和代码来创建主题。因此,如果您是那些宁愿通过阅读代码来学习然后下载入门主题的人之一,请跳过指南并了解其工作原理…否则,请获取代码编辑器(我使用并推荐 记事本++, 要么 SublimeText)并准备好浏览器,然后按照此简单指南进行操作.

命名您的WordPress主题

首先,我们必须给您的主题起一个唯一的名称,如果您仅为网站构建主题,则不必这样做。无论如何,我们需要命名您的主题,以使其在安装时易于识别.

此时的一般假设:

  • 您已经准备好index.html和CSS样式表.
  • 您的WordPress安装程序具有至少一个主题,例如二十四
  • 您已经创建了一个主题文件夹,您将在其中保存新的WordPress主题��

让我们回到命名您的WordPress主题。打开代码编辑器,然后将样式表的内容复制粘贴到新文件中,并将其另存为 style.css 在您的主题文件夹中。在最上方添加以下信息 新创建的style.css

/ *
主题名称:您的主题名称
主题URI:您主题的URL
描述:您主题的简短描述
版本:1.0或您想要的任何其他版本
作者:您的姓名或WordPress.org的用户名
作者URI:您的网址
标签:用于在WordPress主题存储库中找到您的主题的标签
* /

不要遗漏(/ *…* /)注释标签. 保存更改。此信息告诉WordPress您的主题名称,作者以及类似的免费内容。重要的是主题的名称,可让您通过WP仪表板选择和激活主题.

将HTML模板分解为PHP文件

本教程进一步假设您具有从左到右排列的HTML模板:标题,内容,侧边栏和页脚。如果您使用其他设计,则可能需要使用一些代码。有趣又超级容易.

下一步涉及创建四个PHP文件。使用代码编辑器创建index.php,header.php,sidebar.php和footer.php,并将其保存在主题文件夹中。此时所有文件都是空的,因此不要指望它们做任何事情。出于说明目的,我使用以下index.html和CSS样式表文件:

INDEX.HTML




如何将HTML模板转换为WordPress主题-WPExplorer



这是标题部分。在此处放置徽标和其他详细信息.

这是主要的内容领域.

这是页脚.

CSS样式表

#wrap {保证金:0自动;宽度:95%; margin-top:-10px;高度:100%;}
.标头{width:99.8%; border:1px solid#999; height:135px;}
.内容{width:70%; border:1px solid#999; margin-top:5px;}
.侧边栏{float:right; margin-top:-54px; width:29%; border:1px solid#999;}
.页脚{width:99.8%; border:1px solid#999; margin-top:10px;}

如果没有什么需要处理的,则可以同时获取这两个代码。只需将它们复制粘贴到您的代码编辑器中,保存它们,创建我们刚才提到的四个PHP文件,并为下一部分做好准备。打开您新创建的(并且为空) header.php. 登录到您现有的WordPress安装,导航至 外观– >>编辑器 并打开 header.php. 在之间复制所有代码 标签并将其粘贴到您的header.php文件中。以下是我从二十十四主题中的header.php文件中获得的代码:



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

/js/html5.js">


然后打开 index.html 文件并复制标头代码(即

部分)到header.php的正下方 标签如下所示:



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

/js/html5.js">




这是标题部分。在此处放置徽标和其他详细信息.

然后加…

……在最高处……


…到绝对的底部。这三行将提取header.php,sidebar.php和footer.php(按此顺序)并将它们显示在index.php中,这会将您的代码重新组合在一起。保存所有更改。此时,您的index.php文件应如下所示:



然后将index.html中侧栏和页脚部分的内容分别复制到sidebar.php和footer.php.

添加帖子

您的HTML模板即将变为WordPress主题。我们只需要添加您的帖子。如果您的博客中有帖子,您将如何以自定义的“ HTML到WordPress”主题显示它们?您使用一种特殊的PHP函数,称为 . Loop只是一段专门的代码,无论您放置在哪里,都可以显示您的帖子和评论.

现在,要在 内容部分 在index.php模板中,将以下代码复制并粘贴到

标签如下所示:


那会照顾你的帖子. 像ABC一样容易. 此时(并使用本教程提供的示例文件),header.php应该如下所示:



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

/js/html5.js">


您的sidebar.php应该如下所示:

您的footer.php应该如下所示:

这是页脚

你注意到关闭了吗 和 页脚中的标签?别忘了也包括那些.

您的style.css应该看起来像这样:

/ *
主题名称:从HTML创建WordPress主题
主题URI:http://wpexplorer.com
Description(说明):该主题向您展示如何从HTML创建WordPress主题。
版本:1.0
作者:Freddy for @WPExplorer
作者URI:http://WPExplorer.com/create-wordpress-theme-html-1/
标签:wpexplorer,自定义主题,HTML至WordPress,创建WordPress主题
* /
身体 {
字体家族:arial,helvetica,verdana;
字号:0.8em;
宽度:100%;
高度:100%;
}

.标头{
背景颜色:#1be;
左边距:14%;
最高:0;
边界宽度:0.1em;
边框颜色:#999;
边框样式:实心;
宽度:72%;
高度:250像素;
}

.内容{
背景颜色:#999;
左边距:14%;
页边距:5px;
向左飘浮;
宽度:46%;
边界宽度:0.1em;
边框颜色:#999;
边框样式:实心;
}

.侧边栏{
背景颜色:#1d5;
边际权利:14%;
页边距:5px;
浮动:正确;
边界宽度:0.1em;
边框颜色:#999;
边框样式:实心;
顶部:180px;
宽度:23%;
}

.页脚{
背景颜色:红色;
左边距:14%;
向左飘浮;
页边距:5px;
宽度:72%;
高度:50px;
边界宽度:0.1em;
边框颜色:#999;
边框样式:实心;
}

并且您的index.php应该类似于:





同样,这是基于从左到右的网站,带有标题,内容,侧边栏和页脚布局。你在追踪吗?所有这五个文件应保存在主题文件夹中。命名文件夹为任意名称,然后使用WinRar或等效程序将其压缩为ZIP存档。将新主题上载到WordPress安装中,将其激活并查看转换后的主题!

那很容易,对吗?您可以根据需要设置主题样式,但是WordPress中我们喜欢的大多数功能仍处于无效状态,因为……本教程介绍了将HTML模板转换为WordPress的基础知识,对于初学者来说应该具有很大的价值。在下一个教程中,我们将使事情更上一层楼,并探讨WordPress编程的其他方面(例如 模板文件模板代码),您可以通过任意方式打开HTML模板. 敬请关注!

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