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

Apr 30

PR 更新

2008 年04月30日,星期三,下午 1:01 | 分类：与我有关 | 给我留言(24 条留言) | 点击量435次

今早发现網生@誌的部分页面 PR 值有浮动，比如 “主题模板” 的 PR 达到了3（以前是2），而 ~~“关于本站”~~ 、 “给我留言” 和 “友情链接” 这3个页面的 PR 值均从2降到0。
“主题模板” 页面的 PR 值升高应该是情理之中的，我发布的所有主题里均含有这个页面的链接。但是其它3个页面的 PR 值下降倒有点搞不懂…. 由于对 PR 值极度偏见，所以我也没太在意这些下降，也没关注首页首页的 PR 值是否有变动。

展开阅读 >

Apr 28

寂寞的季节死了都要爱

2008 年04月28日,星期一,下午 11:11 | 分类：与我有关 | 给我留言(8 条留言) | 点击量171次

小K 说每天都是程序太枯燥，其实我也这么认为，所以今天就换个话题…

虽然陶喆的歌听得不多，但《寂寞的季节》是我每次去 KTV 都必唱的一首歌——因为这首歌的高音部分很短，基本都是中音，所以很适合我这种高不成低不就的人
废话就不多说了，来一起欣赏一下陶喆的这首歌吧～

整条街都是恋爱的人我独自走在暖风的夜多想要向过去告別当季节不停更迭却还是少一点坚决在这寂寞的季节艳阳高照在那海边爱情盛开的世界远远看着热闹一切…
———-

展开阅读 >

Apr 28

怎么选择

2008 年04月28日,星期一,下午 9:09 | 分类：与我有关, 干掉电脑 | 给我留言(13 条留言) | 点击量296次

连续关注了2周的笔记本市场…
最看好的华硕 F8H54Sv-SL 停产，市面上严重缺货，再加上 F8H725Sv-SL 居高不下的价格，对于 F8 系列我已经动摇了，最近配备 Geforce 9300M 独显的新品 F8 更让人觉得鸡肋。
从非 F8 不买到看都不想看现在的 F8 一眼，我完成了一个质的转变…

我对 DELL 的印象并不差，虽说它是美国的“神舟”，但再怎么也比国产的“神舟”要强吧，而且在非国产品牌笔记本里，inspiron1520 是 T7250 + Geforce 8600GT 这种组合里最具性价比的机器。所以 1520 一直是我考虑的一个型号。

展开阅读 >

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 条留言) | 点击量246次

首页 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.

展开阅读 >

PR 更新

寂寞的季节死了都要爱

怎么选择

DIY Wordpress Themes —— Built

DIY Wordpress Themes —— Separated

DIY Wordpress Themes —— Style

最新日志

最近关注

其它

zEUS.’Blog 網生@誌
Fighting For Future…

友情链接

最沙发党

广而告之

04月 2008
日	一	二	三	四	五	六
« Mar				May »
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30

PR 更新

寂寞的季节死了都要爱

怎么选择

DIY Wordpress Themes —— Built

DIY Wordpress Themes —— Separated

DIY Wordpress Themes —— Style

最新日志

最近关注

其它

zEUS.’Blog 網生@誌Fighting For Future…

友情链接

最沙发党

广而告之

zEUS.’Blog 網生@誌
Fighting For Future…