Wordpress是一个非常成功的博客发布平台，不过很少有一些网站会发布一些优秀的Wordpress主题来供我们免费下载．虽然有不少的Wordpress博客主题还在不断出现，不过我们还是决定写一个关于＂新手需要知道Wordpress主题制作的基本步骤和大致过程＂的
免费Wordpress教程，相信可以帮助更多人按照自己的愿望来设计自己的博客主题．
我们并不是很高级的Wordpress开发者人员，但是我们相信下面的教程一定可以帮助你成功地开发出一个Wordpress主题的．下面你将可以学会将你的xHTML CSS 网站转化成为一个的Wordpress主题．（最后输出其实和正常的Wordpress主题是一样的，只不过代码会更短并更容易去读）．
开始步骤
- 第一步就是要想好你的博客主题的大概设计样式……请记住这个导航栏几乎会在你的网站任何一个地方，所以你需要用一个表格将它们放在一起，从而保证你的有足够的侧边栏空间来设计你的widgets。
- 一般来讲，将你的设计转化成为一个标准的xHTML & CSS 网站，你需要首先创建一个images文件夹。（我也不能解释为什么……）
- Wordpress是运行在PhP基础上的，所以接下来的工作你需要开始在一个服务器（Apache…）上工作，你的系统就变成了localhost。
- 下载Wordpress程序（官方网站：http://cn.wordpress.org/），将文件解压到你的本地电脑上。
- 创建一个数据库，不知道的朋友可以参考官方的说明文档。http://codex.wordpress.org/Main_Page 。这个是英文的，不过网上已经有很多类似的教程，大家可以通过Google或者百度搜索到。
- 在localhost-dir\wordpress\wp-content\themes\路径创建一个新的文件夹，将该文件夹的名称命名为你的Wordpress主题的名称（不能有空格）。
- 将你的所有的xHTML, CSS和其他与主题有关的文件拖到该文件夹中。
主题制作
- 你需要在你的Wordpress主题文件夹中创建的文件有：
- header.php
- index.php
- sidebar.php
- footer.php
- comments.php
- style.css – 你的CSS文件
- 你将会将你的xHTML代码拆分到以上提到的文件中。
- 打开你的xHTML主题文件，按照下面的方法开始制作Wordpress主题吧。
header.php
- 这个头部文件内容是从DOCTYPE定义开始的，并且一直到你的博客真正的内容（像文章……）为止。头部文件将会有Head的开始和结束、body开始部分或者者你的主题导航栏部分。
- 在header (Javascript/CSS) 包括的文件不能有绝对的URL。
- <?php bloginfo(’stylesheet_directory’); ?> 被用来返回你的主题的Url，比如：likehttp:\\localhost\wordpress\wp-content\themes \yourtheme或者http:\\localhost\wordpress\wp-content\themes \yourtheme\javascript\slider.js 。
- 标题 Tag
- <title><?php bloginfo(‘name’); ?> <!– 返回wordpress blog 的标题–><?php if ( is_single() ) { ?> <!– 判断是否是single page (如果你的打开的是一个内容页面的话下面的内容就会被显示–>- Blog Archive<?php } ?> <!– 结束判断 –><?php wp_title(); ?> <!– 文章标题- 将会被显示在内部页面中 –></title>
- 标准的Wordpress博客的Head文件应该要包括的
- <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’); ?> 就可以链接到你的博客主页。
- 现在轮到你的Navigation部分了，你不需要动态的链接方式，也不需要静态的 xHTML链接，xHTML标准的导航是UL > LI > A。下面的代码就可以形成导航。
- <ul><li class=” <?php if ( is_home() or is_archive() or is_single() or is_paged() or is_search() or (function_exists(‘is_tag’) and is_tag()) ) { ?>current_page_item<?php } else { ?>page_item<?php } ?>”><a href=”<?php echo get_settings(‘home’); ?>”><?php _e(‘Home’); ?></a></li> <!– 只会返回主页链接和assigns class=”current_page_item” to the highlighted page –><?php wp_list_pages(’sort_column=id&depth=1&title_li=’); ?> <!– 返回所有的菜单链接，除了主页–></ul>< /ul>
- 很好，现在你已经完成了header.php的工作了。
sidebar.php（并不是widge方式，你需要手动将添加Php代码去形成sidebar一些功能）
- 正如我在开始步骤中提到的一样，你应该已经创建了一个Div，Div会在Sidebar中要么向左浮动，要么向右浮动。
- 选择整个sidebar DIV，然后将xHTML文件放到这里面，例如<div id=”sidebar”> ….. </div>
- 几乎所有的Sidebar的东西都会以垂直的方式显示出来．当你在设计你的博客主题或者开发xHTML，你将会有一些Division层在不同的 Sidebar插件或者片段中．下面我们就来讲讲用一些PHP代码片段来产生你的侧边栏内容（将这些代码片段放到每一个Div之间，例如<div class=”sidebar_snippet”> … 你的 PHP 代码片段 …</div>）
- 分类（Categories）
- <ul><?php wp_list_cats(’sort_column=name&optioncount=0&hierarchical=0′); ?></ul>
- optioncount=1是用来控制每个分类下面将会显示的文章
- hierarchical=1是用来控制显示子分类．
- 存档（Archives ）
- <ul><?php wp_get_archives(‘type=monthly’); ?></ul>
- 最新文章（Recent Posts ）
- <?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表示会显示最新的五篇文章，你可以改成其他的数字．
- 搜索（Search ）
- <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>
- 更多
- 非常不错，到现在为止你已经成功创建了sidebar.php
footer.php
- 这个文件将只会包括底部文件，例如每个页面出会出现的版权声明信息……
- 例如：<div id=”footer”> … 版权所有 … </div>
- 很好，你已经知道如何创建footer文件了。
index.php
- 这是你的博客主题的主要文件，当你的主题被激活时这个文件就会被装载。index.php 包括了Body主要内容（articles… comments…. pager….titles….）还有一些其他的你创建的文件等。
- 跟着下面的步骤一步一步地来做，否则的话你有可能把不同的层的顺序搞糟。
- 包含Header
- <?php get_header(); ?> <!– includes the header.php file –>
- 你的主题主体部分-LOOP循环（也许会放在一个Div里面用来将文章和其他内容相分离）
- 这个PHP LOOP 循环对于Wordpress的文章内容来说是非常重要的。你的主体内容将会被放在这个Loop中，以便这些内容能够在不同的文章页面或者内容页面中重复出现。
- <?php if (have_posts()) : while (have_posts()) : the_post(); ?> <!– the LOOP开始 –> <div class=”post” id=”post-<?php the_ID(); ?>”> <!– 获得每篇文章的post ID （动态），以便你能够控制每一篇日志 –> <div class=”date”><?php the_time(‘M’, ”, ”); ?> <?php the_time(‘d’, ”, ”); ?></div> <!– 时间 –><h1 class=”posttitle”><a href=”<?php the_permalink() ?>” rel=”bookmark”><?php the_title(); ?></a></h1> <!– 文章链接-以便你单击进入该日志页面 –><?php comments_popup_link(__(‘( 0 ) Comments’), __(‘( 1 ) Comment’), __(‘( % ) Comments’)); ?><!– 每一个文章的评论数量 –> <div class=”storycontent”><?php the_content(__(‘more…’)); ?></div> <!– 文章内容 –></div><?php comments_template(); ?> <!– 包括comments.php 文件（只会在文章内容页面中显示）–><?php endwhile; else: ?> <!– 结束LOOP循环 –> <p><?php _e(‘Sorry, no posts matched your criteria.’); ?></p> <!–如果Loop失败了，这个文字将会被显示。 –> <?php endif; ?> <!– 结束LOOP 失败循环 –>
- 页面导航Pagenation
- <?php posts_nav_link(‘ ‘, __(‘ Previous Page’), __(‘Next Page ‘)); ?> <!– 前一页或者后一页 –>
- 其他
- <?php edit_post_link(__(‘Edit This’)); ?> <!– 直接打开某个文章的后台编辑页面 –>
- <a href=”<?php trackback_url(true); ?>” rel=”trackback”>Trackback</a></span> <!– 获得一篇文章的 trackback URL –>
- <?php the_category(‘,’) ?> <!– 当前文章的分类—>
< /ul>
comments.php
- 这个comments.php文件包括了评论列表和每篇文章的评论内容。由于comments.php解释起来比较长，所以我们给出了一个标准的 comments.php文件，这个comments.php文件是我们在制作Wordpress主题时候经常要用到的。请将这个评论文件下载并放到你的主题文件夹中。
- 官方下载。备用下载占：讯６下载＼Ziddu下载。
其他
- 技巧：为了可以更好地控制你的Wordpress主题，你应该将ＰＨＰ代码放在Div当中，并且用你CSS来控制样式，这个方法同样也适用于the comments.php 。IDs/Classes 已经存在于任何地方，你只需要获取这些IDs/Classes 然后在CSS当中来控制它。
成功
你已经成功地将你的设计转化为一个Wordpress主题。现在将你的主题文件上传到你的网站的wp-admin当中并激活它。一般地整个开发过程需要用时30-40分钟。你怎么样呢？我们希望这个有点儿长的免费教程会对你有所帮助。
微博帐号登录