xHTML/CSS模板转换为WordPress主题
2018-09-22

WordPress是最强大的博客平台之一,在之前的几篇文章中我们提供了非常酷的主题模板供大家下载,现在我们改变一下思路,为大家提供一篇如何开发主题的教程,我们相信这样做会帮助大家如何将一个自己满意的设计模板并转换为WordPress主题。我们并不是强大的主题开发者,但是仍相信我们有能力通过教程帮助你成功开发一套主题。接下来你将学习到如何将你的xHTML/CSS站点转换为简洁的WordPress主题。如果你看完下方的教程后觉得难度很大,你只需要提供xHTML/CSS模板,剩下的工作由我们代劳,当然,你需要支付一定的费用。如果有这方面的需要,可以通过联系表单与我们取得进一步联系。

初始准备

第一步是从你的主题设计开始,时刻保证站点中的所有菜单栏均是列表形式,并且确认你有足够长的侧边栏,以便盛放你所有的小工具。

按照以往程序将你的设计转换为xHTML & CSS标准站点,将所有的图片放置在images文件夹中。

WordPress是基于PHP运行的,为方便后续调试,接下来请自行在本地主机中搭建服务器环境,对于Window主机用户,可以使用XAMPP或AppServer等集成PHP环境。

从WordPress官方站点(http://wordpress.org)下载程序安装包并解压到本地。

创建数据库,并根据官方提供的5分钟安装文件快速安装WordPress

在本地主机\wordpress\wp-content\themes\中创建一个文件夹,并将第二步中所有的文件放到该文件夹中。后续这个文件夹中的所有文件就是你的WordPress主题文件。

模板转换

在主题文件夹中创建以下文件:

header.php—包含站点头部信息,如站点名称、菜单栏、调用CSS/JS文件等
index.php—站点首页,对于博客主题而言显示最新发布的文章
sidebar.php—侧边栏,显示用户自定义小工具
footer.php—页尾文件,包含站点版权、统计代码等信息
comments.php—评论文件,在页面或文章底部显示评论和发布评论
style.css – 主题主CSS文件,控制主题的外观和样式

将你的xHTML模板代码拆分到以上文件,然后打开主题文件并进行以下步骤的操作:

头部文件header.php

文件内容从定义DOCTYPE开始,结束为止是站点动态内容的开始位置,一般包含有HEAD标签和BODY标签中的菜单栏等静态内容。

Header.php文件也包含Javascript/CSS文件,不得使用绝对路径。

<?php bloginfo('stylesheet_directory'); ?>代码用于返回主题所在路径的URL地址,例如:http:\\localhost\wordpress\wp-content\themes\yourtheme.

标题标签代码

<title><?php bloginfo('name'); ?> <!-- 返回WordPress博客名称 -->
<?php if ( is_single() ) { ?> <!-- condition to check if single page (below line will show on the Title only if you enter an inner page) -->- Blog Archive<?php } ?> <!-- end of condition -->
<?php wp_title(); ?> <!-- Title of the article - will show only if in inner page --></title>

标准的头部信息包含以下内容(将以下代码添加到你的主题头部标签中):

<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

如果你需要将LOGO链接到首页,请使用以下代码 (前提是你的LOGO必须是锚标签)

<?php bloginfo('url'); ?> 代码将连接到你的博客首页

接下来处理菜单,在WordPress中你不需要动态链接,xHMTL模板标准的菜单是UL > LI > A. 以下代码将为你的主题生成主菜单。

<ul><li><a href="<?php echo get_settings('home'); ?>"><?php _e('Home'); ?></a></li> <!-- 仅返回首页链接和为当前页面添加current_page_item类 -->
<?php wp_list_pages('sort_column=id&depth=1&title_li='); ?> <!-- 返回除首页外的所有页面链接-->
</ul>

恭喜你,你已经完成了header.php文件的制作。

侧边栏文件sidebar.php

(你需要手工添加PHP代码,以便实现小工具效果)

我们在初始准备阶段已经提到了,你需要为侧边栏创建一个DIV,这个DIV可以位于页面左侧或右侧。

将整个DIV和xHTML模板中的内容拷贝到sidebar.php文件中,例如: <div id="sidebar"> ..... </div>

侧边栏是垂直结构的,因此侧边栏中的所有内容都是列表形式。在设计和转换为xHTML模板过程中,你应该已经对不同的小工具进行了分隔。接下来我们将讨论PHP代码来生成侧边栏内容(将以下PHP代码放置在每个小工具的DIV中,以便于分隔,例如<div> ..... 你的PHP代码….</div>)

分类目录

<ul><?php wp_list_cats('sort_column=name&optioncount=0&hierarchical=0'); ?></ul>
optioncount=1 将在分类目录后面显示该分类下的全部文章数量。
hierarchical=1 将显示分类目录中的子分类深度。

存档

<ul><?php wp_get_archives('type=monthly'); ?></ul>

近期文章

<?php$today = current_time('mysql', 1);if ( $recentposts = $wpdb->get_results("SELECT ID, post_title FROM $wpdb->posts WHERE post_status = 'publish' AND post_date_gmt < '$today' ORDER BY post_date DESC LIMIT 5")):?> <ul><?php foreach ($recentposts as $post) { if ($post->post_title == '') $post->post_title = sprintf(__('Post #%s'), $post->ID);echo "<li><a href='".get_permalink($post->ID)."'>"; the_title(); echo '</a></li>'; }?></ul><?php endif; ?>
<!--LIMIT 5 表示在列表中显示最新的五篇文章,你可以将该数字改为您需要的数字。-->

搜索

<form method="get" id="searchform" action="<?php bloginfo('home'); ?>/"><input alt="search" type="text" value="<?php echo wp_specialchars($s, 1); ?>" name="s" id="s" /></form>

更多

更多内容请参考WordPress官方文档http://codex.wordpress.org/Main_Page或论坛

恭喜你,你已经完成了sidebar.php文件的制作。

页尾文件footer.php

该文件仅包含站点页尾内容,适用于任何页面,一般包含有版权信息。

例如:<div id="footer"> ...版权信息 ... </div>

OK,我们现在也完成了footer.php文件的制作。

站点首页index.php

Index.php文件是你整个主题的父级文件,当选择该主题后,你第一眼看到的就是该文件。Index.php文件包含有主内容(例如标题、文章、评论等)和在上方创建的其他文件。
接下来,为避免你弄乱页面布局,你按照以下步骤进行操作。通常而言,你需要在index.php文件中包含每个文件。

包含头部

<?php get_header(); ?> <!—包含header.php文件 -->

主体内容- The LOOP (可以放置在DIV中,以便于其他内容有区分)

PHP LOOP 是WordPress最重要的展现文章的方式。站点内容将包含在该LOOP中,因此每页面/文章的内容是重复生成的。

<?php if (have_posts()) : while (have_posts()) : the_post(); ?> <!-- the LOOP --> <div id="post-<?php the_ID(); ?>"> <!-- 为每篇文章指派文章ID (动态) ,因此你可以控制每一篇文章--> <div><?php the_time('M', '', ''); ?> <?php the_time('d', '', ''); ?></div> <!-- 文章发布日期--><h1><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h1> <!-- 文章标题链接,因此你可以点击后查看文章内容--><?php comments_popup_link(__('( 0 ) Comments'), __('( 1 ) Comment'), __('( % ) Comments')); ?> <!-- 显示文章目前现有的评论数量--> <div><?php the_content(__('more...')); ?></div> <!-- the content of the article --></div><?php comments_template(); ?> <!-- 将包含comments.php file 文件(仅在文章内容页显示),详细将在下方介绍--><?php endwhile; else: ?> <!-- end of the LOOP --> <p><?php _e('Sorry, no posts matched your criteria.'); ?></p> <!-- 如果LOOP失败,即如果没有文章,将显示该文字--> <?php endif; ?> <!-- end if LOOP失败 -->

分页

<?php posts_nav_link(' ', __('« Previous Page'), __('Next Page »')); ?> <!-- 返回上一篇和下一篇文章锚链接-->

附加信息(可应用于上方LOOP的任意位置)

<?php edit_post_link(__('Edit This')); ?> <!-- 返回一个链接,访问该链接将进入到控制面板编辑页面-->
<a href="<?php trackback_url(true); ?>" rel="trackback">Trackback</a></span> <!-- 返回引用链接-->
<?php the_category(',') ?> <!-- 返回该文章所属的分类目录-->

包含底部

<?php get_footer(); ?> <!—包含footer.php文件 -->

评论文件comments.php

comments.php包含每文章/页面的评论列表和评论提交表单。讲解comments.php文件需要花费较长的时间,因此我们在此不过多解释,你只需要下载已经以下文件并放到主题目录即可。

附加

小提示:为更好的控制你的主题,你可以将PHP代码放在DIV标签中并使用CSS控制,该提示同样适用于comments.php。使用IDs/Classes可以实现任何样式,你只需要获取IDs/Classes名称,然后在DIV中调用即可。

完结

你已经成功将你的设计转换为WordPress主题。现在,不要犹豫了,赶快将新主题上传到你的网站,并开始发布内容吧!我们只需要花费30分钟即可完成主题转换,你需要花费多长时间呢?我们希望这个教程能给你带来一些帮助,如果你有任何问题,可以通过下方的评论给我们留言,如果我们教程中的内容有错误,也可以给我们留言。

相关知识