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

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

也许事实并非如此。也许您只是想知道如何将客户的HTML设计转换为成熟的WordPress主题。或者，您可能想从更熟悉的HTML方面学习基本的WordPress（+ PHP）编程。

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

命名您的WordPress主题

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

此时的一般假设：

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

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

/*
Theme Name: Your theme's name
Theme URI: Your theme's URL
Description: A brief description of your theme
Version: 1.0 or any other version you want
Author: Your name or WordPress.org's username
Author URI: Your web address
Tags: Tags to locate your theme in the WordPress theme repository
*/

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

将HTML模板分解为PHP文件

本教程进一步假设您具有从左到右排列的HTML模板：标题，内容，侧边栏和页脚。如果您使用其他设计，则可能需要使用一些代码。这很有趣，而且超级简单。

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

INDEX.HTML

<!DOCTYPE html>
	<head>
		<meta charset="UTF-8">
		<title>How To Convert HTML Template to WordPress Theme - WPExplorer</title>
		<link rel="stylesheet" type="text/css" media="all" href="style.css"/>
	</head>
	<body>
		<div id="wrap">
			<header class="header">
				<p>This is header section. Put your logo and other details here.</p>
			</header><!-- .header -->
			<div class="content">
				<p>This is the main content area.</p>
			</div><!-- .content -->
			<div class="sidebar">
				<p>This is the side bar</p>
			</div><!-- .sidebar -->
			<footer class="footer">
				<p>And this is the footer.</p>
			</footer><!-- .footer -->
		</div><!-- #wrap -->
	</body>
</html>

CSS样式表

#wrap{margin: 0 auto; width:95%; margin-top:-10px; height:100%;}
.header{width:99.8%; border:1px solid #999;height:135px;}
.content{width:70%; border:1px solid #999;margin-top:5px;}
.sidebar{float:right; margin-top:-54px;width:29%; border:1px solid #999;}
.footer{width:99.8%;border:1px solid #999;margin-top:10px;}

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

<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>">
	<meta name="viewport" content="width=device-width">
	<title><?php wp_title( '|', true, 'right' ); ?></title>
	<link rel="profile" href="http://gmpg.org/xfn/11">
	<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
	<!--[if lt IE 9]>
	<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js"></script>
	<![endif]-->
	<?php wp_head(); ?>
</head>

然后打开您的index.html文件，并将标头代码（即<div class =“ header”>部分中的代码）复制到您的header.php中，位于<head>标记正下方，如下所示：

<html>
	<head>
		<meta charset="<?php bloginfo( 'charset' ); ?>">
		<meta name="viewport" content="width=device-width">
		<title><?php wp_title( '|', true, 'right' ); ?></title>
		<link rel="profile" href="http://gmpg.org/xfn/11">
		<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
		<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" />
		<!--[if lt IE 9]>
		<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js"></script>
		<![endif]-->
		<?php wp_head(); ?>
	</head>
	<body>
		<header class="header">
		<p>This is header section. Put your logo and other details here.</p>
	</header>

然后加…

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" />

…在header.php文件中<head>标记之间的任意位置，以链接您的样式表。还记得还要将<html>和<body>开头标记放在header.php中，如上所示。保存所有更改。

将第二部分（即<div class =“ content”>…</ div>从index.html复制到新创建的index.php，然后添加…）

<?php get_header(); ?>

……在最高处……

<?php get_sidebar(); ?>
<?php get_footer(); ?>

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

<?php get_header(); ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

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

添加帖子

您的HTML模板即将变为WordPress主题。我们只需要添加您的帖子。如果您的博客中有帖子，您将如何以定制的“ HTML到WordPress”主题显示它们？您使用一种称为Loop的特殊类型的PHP函数。循环只是一段特殊的代码，无论您放置在何处，都可以显示您的帖子和评论。

现在，要在index.php模板的content部分中显示您的帖子，请在<div class =“ content”>和</ div>标记之间复制并粘贴以下代码，如下所示：

<div class="content">
	<?php if ( have_posts() ) : ?>
		<?php while ( have_posts() ) : the_post(); ?>
			<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
				<div class="post-header">
					<div class="date"><?php the_time( 'M j y' ); ?></div>
					<h2><a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
					<div class="author"><?php the_author(); ?></div>
				</div><!--.post-header-->
				<div class="entry clear">
					<?php if ( function_exists( 'add_theme_support' ) ) the_post_thumbnail(); ?>
					<?php the_content(); ?>
					<?php edit_post_link(); ?>
					<?php wp_link_pages(); ?>
				</div><!--. entry-->
				<footer class="post-footer">
					<div class="comments"><?php comments_popup_link( 'Leave a Comment', '1 Comment', '% Comments' ); ?></div>
				</footer><!--.post-footer-->
			</div><!-- .post-->
		<?php endwhile; /* rewind or continue if all posts have been fetched */ ?>
			<nav class="navigation index">
				<div class="alignleft"><?php next_posts_link( 'Older Entries' ); ?></div>
				<div class="alignright"><?php previous_posts_link( 'Newer Entries' ); ?></div>
			</nav><!--.navigation-->
		<?php else : ?>
	<?php endif; ?>
</div><!--.content-->

那会照顾您的帖子。像ABC一样容易。此时（并使用本教程提供的示例文件），header.php应该如下所示：

<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>">
	<meta name="viewport" content="width=device-width">
	<title><?php wp_title( '|', true, 'right' ); ?></title>
	<link rel="profile" href="http://gmpg.org/xfn/11">
	<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
	<!--[if lt IE 9]>
	<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js"></script>
	<![endif]-->
	<?php wp_head(); ?>
</head>

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

<?php dynamic_sidebar( 'sidebar' ); ?>

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

<footer class="footer">
    <p>And this is the footer</p>
</footer>
<?php wp_footer(); // Crucial core hook! ?>
</body>
</html>

您是否注意到页脚中的</ body>和</ html>标记关闭了？不要忘记也包括这些内容。

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

/*
Theme Name: Creating WordPress Theme from HTML
Theme URI: http://wpexplorer.com
Description: This theme shows you how to create WordPress themes from HTML
Version: 1.0
Author: Freddy for @WPExplorer
Author URI: http://WPExplorer.com/create-wordpress-theme-html-1/
Tags: wpexplorer, custom theme, HTML to WordPress, create WordPress theme
*/
body {
    font-family: arial, helvetica, verdana;
    font-size: 0.8em;
    width: 100%;
    height: 100%;
}

.header {
    background-color: #1be;
    margin-left: 14%;
    top: 0;
    border-width: 0.1em;
    border-color: #999;
    border-style: solid;
    width: 72%;
    height: 250px;
}

.content {
    background-color: #999;
    margin-left: 14%;
    margin-top: 5px;
    float: left;
    width: 46%;
    border-width: 0.1em;
    border-color: #999;
    border-style: solid;
}

.sidebar {
    background-color: #1d5;
    margin-right: 14%;
    margin-top: 5px;
    float: right;
    border-width: 0.1em;
    border-color: #999;
    border-style: solid;
    top: 180px;
    width: 23%;
}

.footer {
    background-color: red;
    margin-left: 14%;
    float: left;
    margin-top: 5px;
    width: 72%;
    height: 50px;
    border-width: 0.1em;
    border-color: #999;
    border-style: solid;
}

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

<?php get_header(); ?>
<div class="content">
	<?php if ( have_posts() ) : ?>
		<?php while ( have_posts() ) : the_post(); ?>
			<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
				<div class="post-header">
					<div class="date"><?php the_time( 'M j y' ); ?></div>
					<h2><a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
					<div class="author"><?php the_author(); ?></div>
				</div><!--.post-header-->
				<div class="entry clear">
					<?php if ( function_exists( 'add_theme_support' ) ) the_post_thumbnail(); ?>
					<?php the_content(); ?>
					<?php edit_post_link(); ?>
					<?php wp_link_pages(); ?>
				</div><!--. entry-->
				<footer class="post-footer">
					<div class="comments"><?php comments_popup_link( 'Leave a Comment', '1 Comment', '% Comments' ); ?></div>
				</footer><!--.post-footer-->
			</div><!-- .post-->
		<?php endwhile; /* rewind or continue if all posts have been fetched */ ?>
			<nav class="navigation index">
				<div class="alignleft"><?php next_posts_link( 'Older Entries' ); ?></div>
				<div class="alignright"><?php previous_posts_link( 'Newer Entries' ); ?></div>
			</nav><!--.navigation-->
		<?php else : ?>
	<?php endif; ?>
</div><!--.content-->
<?php get_sidebar(); ?>
<?php wp_footer(); // Crucial footer hook! ?>
<?php get_footer(); ?>

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

那很容易，对吧？您可以根据需要设置主题样式，但是WordPress中我们喜欢的大多数功能仍处于无效状态，因为……本教程介绍了将HTML模板转换为WordPress的基础知识，对初学者来说应该具有很大的价值。在下一个教程中，我们将使事情更上一层楼，并探讨WordPress编程的其他方面（例如模板文件和模板标签），使您可以随心所欲地打开HTML模板。敬请关注！

微信二维码

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

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

随机推荐

回到顶部