Wordpress研究 at zEUS.’Blog 網生@誌 | Wordpress主题 | 动漫影音 | 变形金刚 | 魔兽争霸 | 实况足球

Apr 27

DIY Wordpress Themes —— Built

2008 年04月27日,星期日,下午 2:02 | 分类：Wordpress研究, 与我有关 | 给我留言(7 条留言) | 点击量233次

在制作其它页面模板之前我们先了解一下这些页面和首页 index.php 的不同之处。
首页的 content 内容栏循环输出指定数量的日志，而独立日志页 single.php 只输出一篇日志和与其对应的评论部分，页面页 page.php 和独立日志页基本相同，存档页面 archive.php 和首页 index.php 基本相同，搜索结果页 search.php 和首页 index.php 也基本相同。所以制作这些页面模板是非常容易的。

先从 single.php 开始，还是打开 index.php 文件，在

的后面添加评论部分的调用代码

<?php comments_template(); ?>

将该文件另存为 single.php ，并和 index.php 处于同一目录下。回到前台，点击一篇日志，进入单篇日志的页面，此时你就已经可以看到效果了。但是这个评论部分的样式和整个主题的样式并不搭调，所以我们需要给这部分重新写一个适合主题的样式。
关于如何制作 comments.php 后面会详细的介绍。

single.php 制作好之后 page.php 就是现成的了，直接将 single.php 文件另存为 page.php 即可

存档页面 archive.php 用于显示某分类、某 TAG 和某个指定日期下的日志，所以一般我会在 content 内容栏的最前面加一个例如“XX分类下的文章”这样一个大的标题。
还是打开 index.php 文件，找到

<?php if (have_posts()) : ?>

在它的前面加上一句

<?php is_tag(); ?>

然后在

<?php if (have_posts()) : ?>

<?php while (have_posts()) : the_post(); ?>

的中间加上下面的代码

<?php $post = $posts[0]; // Hack. Set $post so that the_date() works. ?>
   <?php /* If this is a category archive */ if (is_category()) { ?>
   <div class="pagetitle"><span class="front"><?php single_cat_title(); ?></span> 分类下的文章</div>
   <?php /* If this is a tag archive */ } elseif( is_tag() ) { ?>
   <div class="pagetitle"><span class="front"><?php single_tag_title(); ?></span> 标签下的文章</div>
   <?php /* If this is a daily archive */ } elseif (is_day()) { ?>
   <div class="pagetitle"><span class="front"><?php the_time('Y年Fj日'); ?></span> 的日志归档</div>
   <?php /* If this is a monthly archive */ } elseif (is_month()) { ?>
   <div class="pagetitle"><span class="front"><?php the_time('Y年F'); ?></span> 的日志归档</div>
   <?php /* If this is a yearly archive */ } elseif (is_year()) { ?>
   <div class="pagetitle"><span class="front"><?php the_time('Y年'); ?></span> 的日志归档</div>
   <?php /* If this is an author archive */ } elseif (is_author()) { ?>
   <div class="pagetitle">作者归档</div>
   <?php /* If this is a paged archive */ } elseif (isset($_GET['paged']) && !empty($_GET['paged'])) { ?>
   <div class="pagetitle">日志归档</div>
   <?php } ?>

以上的代码均带有注释，还是比较容易理解的。这些就是对应分类、TAG 和日期归档的大标题，接下来我们要给这些标题写入对应的样式。打开 style.css 文件，添加以下样式代码

/* archive title */
.pagetitle {
   background-color:#67B602;
   color:#FFFFFF;
   font-size:16px;
   height:32px;
   line-height:36px;
   margin:10px 0;
   text-align:center;
   width:100%;
}
.pagetitle .front {
   color:#E7F8D0;
   font-weight:bold;
}

保存 style.css 并将修改后的 index.php 另存为 archive.php 文件。回到前台，点击某个分类，进入分类归档页面就能看到效果了（截图）

最后是搜索结果页 search.php ，顾名思义，这个页面模板用来显示搜索某些关键词后显示对应文章，基本和 index.php 相同，并且和 archive.php 一样也可以加上“XXX搜索结果下的文章”这种大标题。
还是打开 index.php 文件，在

<?php if (have_posts()) : ?>

的前面加上

<?php is_search(); ?>

然后在

<?php if (have_posts()) : ?>

<?php while (have_posts()) : the_post(); ?>

的中间加上下面的代码

<?php $post = $posts[0]; // Hack. Set $post so that the_date() works. ?>
   <?php /* If this is a search archive */ if (is_search()) { ?>
   <div class="pagetitle"><span class="front"><?php wp_title(''); ?> <?php echo $s; ?></span> 搜索结果下的文章</div>
   <?php } ?>

大标题的样式无需再重复定义，将此修改后的 index.php 文件另存为 search.php 即可。

这样，几个基本的页面模板都制作完成了，下一篇日志里将介绍如何制作独立日志页和页面页的评论部分—— comments.php

zEUS.

展开阅读 >

Apr 25

DIY Wordpress Themes —— Separated

2008 年04月25日,星期五,下午 9:09 | 分类：Wordpress研究, 与我有关 | 给我留言(5 条留言) | 点击量247次

首页 index.php 已经完成了，在介绍如何建立其它的页面（页面页 page.php 、独立日志页 single.php 、存档页 archive.php 和搜索结果页 search.php ）之前还有一项工作。
一般来说这些页面都拥有一些相同的部分——页眉 header 、页脚 footer 和侧边栏 sidebar ，为了避免重复我们可以把这些部分从 index.php 里分离出来，以方便其它页面调用，而 Wordpress 也正好为它们提供了单独特定的文件名：header.php 、 footer.php 和 sidebar.php

首先分离页眉，还是用 dreamweaver 打开我们的 index.php 文件并在相同目录下新建一个 PHP 文件—— header.php，其实放在 header.php 里的代码并不是固定的，但一般来说都习惯于把内容栏 content 前面不会经常改动的代码都放进去：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> 
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title><?php wp_title(''); if (is_search()) { ?> Search for <?php echo $s; } if ( !(is_404()) and (is_search()) or (is_single()) or (is_page()) or (function_exists('is_tag') and is_tag()) or (is_archive()) ) { ?> at <?php } ?> <?php bloginfo('name'); ?></title>
   <link href="<?php bloginfo('stylesheet_directory'); ?>/style.css" rel="stylesheet" type="text/css" />
   <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'); ?>" />

   <?php wp_get_archives('type=monthly&format=link'); ?>
   <?php //comments_popup_script(); // off by default ?>
   <?php wp_head(); ?>
   <META name="keywords" content="" />
</head>
<body>
<div id="header">
   <h1>
   <a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a>
   </h1>
   <div id="description"><?php bloginfo('description'); ?></div>
   <div id="nav">
   <ul>
   <li class="page_item <?php if ( is_home() ) { ?>current_page_item<?php } ?>"><a href="<?php echo get_settings('home'); ?>/" title="HOME">博客首页</a></li>
   <?php wp_list_pages('sort_column=menu_order&depth=1&title_li=');?>
   </ul>
   </div>
</div>
<div id="wrapper">

将 index.php 中的上述代码剪切到 header.php 文件中保存，并在 index.php 文件的最前面加上 header 的调用语句：

<?php get_header(); ?>

相同的，我们继续分离 sidebar.php 和 footer.php ，依然是先新建这2个文件。

在 index.php 找到侧栏 sidebar 的代码

将它们剪切至 sidebar.php 文件中并保存。

在 index.php 找到页脚 footer 的代码：

<div id="footer">
Copyright © 2007 <a href="<?php bloginfo('url');?>" target="_blank"><?php bloginfo('name'); ?></a>. <a href="http://zeuscn.net/themes" target="_blank">The theme</a> Designed by <a href="http://zeuscn.net" target="_blank">zEUS.</a>
</div>
</div>
</body>
</html>

将它们剪切至 footer.php 文件中并保存。

最后在 index.php 文件的末尾加上2句调用语句：

<?php get_sidebar(); ?>

<?php get_footer(); ?>

That’s all. 分离结束，虽然 index.php 被我们 separated 了，但是在前台我们依然可以看到一个完整的首页！
那么在下一篇里我将介绍如何建立其它的页面：页面页 page.php 、独立日志页 single.php 、存档页 archive.php 和搜索结果页 search.php 。

zEUS.

展开阅读 >

Apr 23

DIY Wordpress Themes —— Style

2008 年04月23日,星期三,下午 2:02 | 分类：Wordpress研究, 与我有关 | 给我留言(7 条留言) | 点击量274次

样式是一个主题模板最核心的内容，虽然不难，但想成就一款大成的主题模板则并非易事。以下我只介绍如何建立一个最最基本的模板样式，如果你想打造一款炫目的主题模板，需要满足两点——炫目的设计和扎实的 CSS/DIV 技能，如果你不能同时满足以上两点，请跟着我一步步的从最简单的模板开始。

在写样式之前，我们脑子里肯定得有个谱，明确主题的色系、结构等，细节方面可以稍侯再考虑。如果你有能力的话可以先 PS 一套方案出来。
这里我打算建一个健康的，充满绿色的超级简单的无图片 2栏 Wordpress 主题模板。

本地 Wordpress 环境搭建好之后打开主题文件夹目录（以我安装的 XAMPP 为例）：
D:\xampp\htdocs\wp-content\themes
新建一个文件夹，命名为“Grass Root”或其它你喜欢的名称，将之前建好的 index.php 文件放进去，并在“Grass Root”目录下使用 Dreamweaver 新建一个 CSS 文件，并将其命名为 style ，将下面代码拷入刚建好的 style.css 文件中

/*
Theme Name: Grass Root
Theme URI: http://zeuscn.net/
Description: 这是一个2栏绿色健康的超级无敌简单的 Wordpress 主题模板
Version: beta
Author: zEUS.
Author URI: http://zeuscn.net/
*/

以上申明部分很容易理解，就不多说了，根据自己需要进行修改。

现在我们根据之前的定义的模板结构来编写样式：
首先是部分全局的定义：

body {
   background:#E7F8D0;
   font-family:Verdana,trebuchet ms,helvetica;
   font-size:14px;
   color:#222;
   line-height:1.7em;
   word-wrap:break-word;
   margin:0;
}
a {
   color:#346807;
   text-decoration:none;
}
a:hover {
   color:#FF3300;
   text-decoration:none;
}
p {
   margin: 0px 0px 15px;
}

body 就是整个网页默认设置，里面定义了背景色，字体颜色、大小、字体类型等；a 其实就是连接；a:hover 是鼠标移动到链接上的效果；p 是段落。其中各种定义的意思我就不多解释了，看不懂的朋友请参考这本天书，对照着学习。

下面是页眉 header 部分，在这部分里，一般会定义博客的名称、博客描述和导航栏：

#header {
   height:150px;
   width:980px;
   background: #67b602;
   margin:0 auto;
}

/* 博客名称 */
h1 {
   color:#FFF;
   text-align:center;
   font-weight:800;
   margin:0 auto;
   height:80px;
   line-height:80px;
}
h1 a, h1 a:visited {
   color: #FFF;
   text-decoration: none;
}
h1 a:hover {
   color:#FF3300;
   text-decoration: none;
}

/* 描述 */
#description {
   text-align:center;
   color:#FFF;
   height:40px;
   line-height:10px;
}

/* 导航栏 */
#nav {
   background:#E7F8D0;
   float:right;
   height:30px;
   margin:0;
}
#nav ul {
   float:left;
   list-style:none;
   margin:0;
   padding:0;
   display:block;
}
#nav ul li {
   float:left;
   font-size:14px;
   height:30px;
   line-height:30px;
   text-align:center;
   width:90px;
}
#nav ul li a {
}
#nav ul li a:hover {
   background:#67B602;
   display:block;
   color:#fff;
}

h1 对应博客名称；description 对应描述；nav 对应导航栏，以及这里面的各个导航选项。

我把 content 内容栏，sidebar 侧栏和 footer 页脚都放到 wrapper 这个容器中，以方便整体居中

#wrapper {
   width:980px;
   margin:0 auto; /* 容器居中的写法 */
}
/* 内容栏 */
#content {
   width:670px;
   float:left;
}
.post {
   padding:10px;
   clear:both;
}
.post .title {
   float:left;
   margin-left:10px;
   width:100%;
}
.postdata {
   font-size:90%;
   color:#999999;
   float:right;
}
.postdata a, .postdata a:visited {
   text-decoration:none;
}
.postdata a:hover {
   text-decoration:none;
}
.postdata .category {
   padding-left:18px;
   float:left;
}
.entry {
   padding:5px 0px 5px;
}

/* 侧边栏 */
#sidebar {
   float:right;
   width:300px;
   color:#006600;
   margin:0px;
}
#sidebar ul {
   margin:10px 0 20px;
   list-style:none;
}

/* 页脚 */
#footer {
   width:980px;
   background:#67b602;
   text-align:center;
   font-size:12px;
   font-weight:bold;
   height:30px;
   line-height:30px;
   float:left;
}
#footer a {
   color:#fff;
}
#footer a:hover {
   color:#FF3300;
}

将上述代码依次复制到 style.css 文件中并保存，这样，模板的首页就基本完成了，你可以在本地 Wordpress 的后台外观选项里选择这款主题，然后就能在前台看到首页的效果了（截图预览）

註：Grass Root —— 我一现实中的兄弟去西藏维稳，他说那里是绝对的 Grass Root！
另外，Grass Root 主题的色系和字体参考了 aw’s blog

zEUS.

展开阅读 >

Apr 22

DIY Wordpress Themes —— Fix

2008 年04月22日,星期二,下午 1:01 | 分类：Wordpress研究, 与我有关 | 给我留言(7 条留言) | 点击量265次

琢磨了半晌，还是决定在写样式之前先把 Wordpress 的 PHP 调用语句插入到 index.php 文件中，这样在编写样式的时候可以方便的在本地进行测试。
在上一篇日志里介绍了 index.php 的结构，这里我就介绍如何将 PHP 调用语句插入对应的层（DIV 标签）中。
对照下图进行讲解

首先是页眉 header 部分，试着用英语去理解下面的调用语句，其实并不难：

<div id="header">
   <h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
   <div id="description"><?php bloginfo('description'); ?></div>
   <div id="nav">
   <ul>
   <li class="page_item <?php if ( is_home() ) { ?>current_page_item<?php } ?>"><a href="<?php echo get_settings('home'); ?>/" title="HOME">博客首页</a></li>
   <?php wp_list_pages('sort_column=menu_order&depth=1&title_li=');?>
   </ul>
   </div>
</div>

下面是内容栏 content 部分，以下代码省略了 wrapper 层

<div id="content">
   <?php if (have_posts()) : ?>
   <?php while (have_posts()) : the_post(); ?>

   <div class="post" id="post-<?php the_ID(); ?>">
   <div class="title">
   <h2>
   <a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(''); ?></a>
   </h2>
   <div class="postdata"><SPAN class="category"><?php edit_post_link('Edit', '', ''); ?> | 分类：<?php the_category(', ') ?> | <?php comments_popup_link('给我留言', '给我留言(1 条留言)', '给我留言(% 条留言)'); ?></span></div>
   </div>
   <div class="entry">
   <?php the_content('Continue reading »'); ?>
   </div>
   </div>

   <?php endwhile; ?>
   <?php else : ?>

   <h2>Not Found</h2>
   <p>Sorry, but you are looking for something that isn't here.</p>

   <?php endif;?>
   </div>

接下来是侧边栏 sidebar ，侧栏的可制定性比较强，所以只举几个常用的例子

最后是页尾 footer 部分，这里涉及的 php 语句相对较少

<div id="footer">
Copyright © 2007 <a href="<?php bloginfo('url');?>" target="_blank"><?php bloginfo('name'); ?></a>. <a href="http://zeuscn.net/themes" target="_blank">The theme</a> Designed by <a href="http://zeuscn.net" target="_blank">zEUS.</a>
</div>

Wordpress 的 PHP 调用语句插入基本 over 了，下次在编写样式的时候就能在本地 Wordpress 环境下看到相关的内容输出了。
在进入下一篇日志之前，如果你还没有本地的 Wordpress 环境，请先安装一个，具体方法自行 google，另外推荐一个 firefox 用于 Web 开发的插件—— firebug ，还有一个 IE 调试插件—— iedevtbar

zEUS.

展开阅读 >

Apr 21

DIY Wordpress Themes —— Structure

2008 年04月21日,星期一,下午 2:02 | 分类：Wordpress研究, 与我有关 | 给我留言(12 条留言) | 点击量334次

先从 Wordpress 主题模板的构成谈起。

Wordpress 主题必须包含2个文件：index.php 和 style.css ，index.php 即我们的“首页”，style.css 是主题的样式文件。你可能会想，一个普通 Wordpress 主题包里可不止这2个文件，是的，关于这个问题稍后解释。这里我们先来了解下 index.php 的构造。

一个规范的网页文件必然包括2个部分—— head 和 body，注意这里的 head 不是页眉 header ！在 Wordpress 主题里 head 里包含一些必要的“申明”，body 才是网页构成的主体。
一般 Wordpress 主题的 head 都是这么写的（我通常都是这么写）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> 
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title><?php wp_title(''); if (is_search()) { ?> Search for <?php echo $s; } if ( !(is_404()) and (is_search()) or (is_single()) or (is_page()) or (function_exists('is_tag') and is_tag()) or (is_archive()) ) { ?> at <?php } ?> <?php bloginfo('name'); ?></title>
   <link href="<?php bloginfo('stylesheet_directory'); ?>/style.css" rel="stylesheet" type="text/css" />
   <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'); ?>" />

   <?php wp_get_archives('type=monthly&format=link'); ?>
   <?php //comments_popup_script(); // off by default ?>
   <?php wp_head(); ?>
   <META name="keywords" content="" />
</head>

新建一个 php 文件并命名为 index 后，可以直接将以上部分复制进去。（对于新手而言，极力推荐使用 Dreamwearver ）

接下来是 body 部分，一般一个普通2栏的 Wordpress 主题，除开 PHP 调用语句，我会这么写它的 body ：

<body>
<div id="header">
   <h1>博客标题</h1>
   <div id="description">博客的描述</div>
   <div id="nav">
   <ul>
   <li>导航1</li><li>导航2</li><li>导航3</li>
   </ul>
   </div>
</div>
<div id="wrapper">
   <div id="content">
   <div class="post">
   <div class="title">
   <h2>文章标题</h2>
   <div class="postdata">文章信息</div>
   </div>