17713433920 info@mac163.com
如何从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开源程序服务经验,我们一直在坚持客户体验,没有最好,只有更好!
购物车
回到顶部