链接诱饵和 WordPress 主题赞助商链接

我们知道获取链接的最好方法是链接诱饵，通过赞助 WordPress 主题就是链接诱饵的一种常用的方法。是的，赞助 WordPress 主题是一个非常有效地提升网站的搜索引擎排名的方法，因为赞助成功的主题会让你获得大量的反向链接，而这些反向链接往往都带有一定的 PR 值和权重，所以可以迅速提高你的网站的权重和排名。虽然我们不是很清楚 Google 是如何计算 PR 值的，但是我们几乎可以肯定，大量的带的 PR 值的反向链接会提升任何网站的排名的。

赞助 WordPress 主题可以廉价获取大量高质量的反链

WordPress 已经是一个非常通用的博客系统，独立博客是用 WordPress 架设博客所占的比率非常非常高了，据统计世界上有 8% 的网站是使用 WordPress 构建的，所以一个成功的 WordPress 主题，使用者是非常惊人的，比如 mg12 通过发布的主题，就给自己的博客带来了成千上万个长期反向链接，并且网站的 PR 值一度达到7。如果花钱买这些连接的话，需要多少钱呢？即使假设一个链接只要 10 元一个月的话，那也是一个天文数字了，而且只能是一个月。而制作这样一个成功的主题，需要花费的费用一般在5000元以下，所以通过赞助 WordPress 主题是可以通过小成本获取大量反向链接的好方法。

赞助相关的 WordPress 主题。

通过赞助 WordPress 主题获取链接应该注意的最大的问题是相关性，WordPress 主题应该和你企业的主题或者卖的东西很吻合，比如你是卖台球的，如果你发现有个台球的 WordPress 主题等待赞助或者直接找人帮你设计一个有个台球的 WordPress 主题，这样才是最佳的。因为使用这个 WordPress 主题的站点也会和台球有关系，这样链接的相关性提高很多，相应你获取的链接也会有更大的帮助。

WordPress 主题赞助商链接的流程

每个产业都是细分的，WordPress 主题赞助商链接这个产业也是的，有人专门设计和制作 WordPress 主题，然后有人到论坛上推广和卖卖链接，最后还有人把主题发布到20-60个主题和论坛站点，这样就保证了主题能够被更多的人看到，如果主题真的不错，那么就能得到广泛使用。

如果你对 WordPress 主题赞助商链接有什么看法？请给我留言！

>>>继续阅读全文 ...

© 我爱水煮鱼 / 收藏本文 / 17条评论 / RSS 订阅 / 长期承接 WordPress 项目 / 主机域名优惠码 / 新浪微博

本文翻译自 12 Real Estate WordPress Themes，原文有 12 个房地产相关的 WordPress 主题，这里节选其中最好的 6 个。

1. Real Estate Theme (from templatic)

Real Estate Theme 是有史以来最好的房地产相关的 WordPress 主题，它拥有让你创建房地产网站的所有功能，并且该主题设计非常典雅，结构和布局非常专业。

Real Estate Theme 详细介绍

2. Main Street Real Estate (from Gorilla Themes)

Main Street 是一个房地产相关的主题，这个主题让你非常容易添加，修改，删除房产信息，并且它还提供 8 种颜色以及非常专业的布局。

Main Street 详细介绍

3. deCondo (from ThemeShift)

deCondo 是一个简洁典雅的 WordPress 房地产主题，搜索界面，多代理支持等许多功能让你非常容易建立你自己的房地产网站。

deCondo 详细介绍

4. Elegant Real Estate

Elegant Real Estate 这个 WordPress 主题是专门为房地产网站而建的，它有房地产过滤功能，图片幻灯片，以及让你定制主题的后台管理选项。

Elegant Real Estate 详细介绍

5. Estate (by Woothemes)

Estate 是一个非常强大的，但是管理非常方便的适合房地产中介 WordPress 主题，这个主题使用了 WordPress 3.0 开始的自定义日志类型和自定义分类模式这些高级功能，使得在 WordPress 后台能够有个真正的“房地产”的功能，并且灵活的页面模板高级搜索功能，以及集成了 Google 地图，灵活的房地产图片管理，你会发现这款主题是非常值得取用的。

Estate 详细介绍

当然这些主题都是英文版，中文情况下可能会有一些不适应的情况，如果你想制作一款针对中文市场的房地产 WordPress 主题，那么你也可以联系我们。

本文翻译自 12 Real Estate WordPress Themes，原文有 15 个房地产相关的 WordPress 主题，这里节选其中最好的 5 个。

>>>继续阅读全文 ...

© 我爱水煮鱼 / 收藏本文 / 13条评论 / RSS 订阅 / 长期承接 WordPress 项目 / 主机域名优惠码 / 新浪微博

相关日志

• 国外前 100 名博客半数使用 WordPress
• WordPress 性能优化：为什么我的博客比你的快
• WordPress 常用 Action 接口
• WordPress SEO 宝典
• 在 Mac OS X 系统上安装 WordPress 本地测试
• 基于 WordPress 虚拟商品销售的商城系统

本文翻译自 Top 6 Celebrity Gossip WordPress Themes，原文有 6 个适合明星时尚和八卦休闲的 WordPress 主题，这里节选其中最好的 5 个。

1. CelebrityPress WordPress Theme (by Gorilla Themes)

CelebrityPress 这个杂志型的主题非常适合那些想创建和姓名，八卦，音乐，电影等相关的网站，这个主题功能完整，有视频播放器，高效的主题后台设置和管理以及广告管理等。

Detail | Demo

2. Gossip City

Gossip City 是一个免费的主题，三栏，非常适合创建一个简单的明星八卦博客。

Download | Demo

3. Vanity Magazine 2.0 WordPress Theme (by Gorilla Themes)

Vanity 是一个设计明快并且设置灵活的杂志型主题，它适合于明星，时尚，休闲八卦等网站，他有两种配色，青色调和粉色调，并且功能强大，有首页推荐幻灯片，banner 广告管理，Flickr，Video, FeedBurner 集成，以及社交化网站插件集成。

Detail | Demo

4. Phiyaz Entertaintment & Community Theme

Phiyaz 是一个用于创建明星娱乐社区的主题，它有黑白两种色调，它有所有你用于穿件娱乐网站的所有功能。

Detail | Demo

5. Showbiz(by Aloha Themes)

Showbiz 是一个全新的明星时尚，休闲八卦的主题，它有一堆功能设置能够让你把整个网站设置的更加专业，这个主题有两种布局方式：标准的博客布局和多栏布局， 设置和使用非常灵活，适应你各种不同的需求。

Detail | Demo

当然这些主题都是英文版，中文情况下可能会有一些不适应的情况，并且可能有些功能不需要，而需要的工鞥则没有，如果你想制作一款中文的明星时尚和八卦休闲的 WordPress 主题，那么你也可以联系我们定制。

本文翻译自 Top 6 Celebrity Gossip WordPress Themes，原文有 6 个适合明星时尚和八卦休闲的 WordPress 主题，这里节选其中最好的 5 个。

>>>继续阅读全文 ...

© 我爱水煮鱼 / 收藏本文 / 15条评论 / RSS 订阅 / 长期承接 WordPress 项目 / 主机域名优惠码 / 新浪微博

相关日志

• 国外前 100 名博客半数使用 WordPress
• WordPress 性能优化：为什么我的博客比你的快
• WordPress 常用 Action 接口
• WordPress SEO 宝典
• 在 Mac OS X 系统上安装 WordPress 本地测试
• 基于 WordPress 虚拟商品销售的商城系统

1. Gourmet (by templatic)

Gourmet 是一个含有美食网站所有功能的专业主题，如多重菜单，推荐项目，博客等等，使用该主题可以很快建立一个专业的美食网站。

Gourmet 的详细介绍

2. Restaurant Theme (by templatic)

专业的设计，高效的代码 Restaurant Theme 让你能够快速建议一个自己的饭店网站。

Restaurant Theme 详细介绍

3. Organic Restaurant Theme (by Organic Themes)

Organic Restaurant Theme 是美食相关产业的完美网上解决方案，它包含三个色调，奶黄，红色和白色，分别适合不同类型的餐厅，这个主题完全适应 WordPress 3.0，包含了 WordPress 3.0 的高级功能，所以该主题可以很容易根据你的餐厅的需求进行定制。

Organic Restaurant Theme 详细介绍

4. Delicious (by WPZOOM.)

Delicious 是一个非常优雅的 WordPress 主题，适合餐厅，饭店，咖啡厅，酒吧，餐馆，小吃店等。

Delicious 详细介绍

5. The Restaurant

The Restaurant 是一个用于饭店的高定制的主题，可以使用 colorpicker 修改颜色，可以很容易切换布局和添加幻灯，这些功能都会深深吸引你的客户。

The Restaurant 详细介绍

6. Time for Food

Time for Food 是一个为美食博客设计的非常漂亮的 WordPress 主题，它可以用来分享菜谱，它兼容各种浏览器，并且使用了 TimThumb 脚本很容易生成缩略图。

Time for Food 详细介绍

翻译自：Top 6 WordPress Themes for Restaurants, Cafes and Food。

如果你想制作一个餐厅方面的网站，而上面的主题而又不适合你，那你也可以联系 WordPress JAM 定制。

>>>继续阅读全文 ...

© 我爱水煮鱼 / 收藏本文 / 8条评论 / RSS 订阅 / 长期承接 WordPress 项目 / 主机域名优惠码 / 新浪微博

相关日志

• 国外前 100 名博客半数使用 WordPress
• WordPress 性能优化：为什么我的博客比你的快
• WordPress 常用 Action 接口
• WordPress SEO 宝典
• 在 Mac OS X 系统上安装 WordPress 本地测试
• 基于 WordPress 虚拟商品销售的商城系统

WordPress 杂志型 CMS 主题：Blaze Gallery

Blaze Gallery 主题特性和功能

• 特色文章展示区，有助于提高指定文章的关注度。
• 已开启文章特色图像和自定义导航菜单功能。
• 后台主题选项页面可设定社交网络账号，以及特色文章区域显示的文章数量，还可以插入谷歌流量统计代码。
• 开启多语言功能，默认已支持中英双语。
• 内置支持 PageNavi 导航功能。
• 4 个独立的 Widget 区域（首页底部三个 Widget 以及其他页面的 sidebare 的 Widget），可根据需要灵活调整。
• 支持留言分页和嵌套回复功能。
• 内置 Lightbox 图片浏览特效。
• 各大主流浏览器中表现一致 (IE6, IE7, IE8, Chrome, Firefox, Opera, Safari 均已测试)。

详细可参考 Blaze Gallery 演示。

Blaze Gallery 主题使用

1. 发表或编辑文章时，可为文章增加特色图片。上传的特色图片建议尺寸为 930 x 310 像素，或在上传时将图片缩放裁剪至该尺寸。

   只需上传一个图片即可，程序会根据上传图片自动生成不同尺寸的特色图片，在主题中分别调用。

2. 发表或编辑文章时，可以选择是否在首页特色文章展示区域显示此篇文章。

该主题是 WPJAM 应用商城的第二款主题，定价为 29.97 RMB，欢迎前来购买。

>>>继续阅读全文 ...

© 我爱水煮鱼 / 收藏本文 / 3条评论 / RSS 订阅 / 长期承接 WordPress 项目 / 主机域名优惠码 / 新浪微博

相关日志

• 国外前 100 名博客半数使用 WordPress
• WordPress 性能优化：为什么我的博客比你的快
• WordPress 常用 Action 接口
• WordPress SEO 宝典
• 在 Mac OS X 系统上安装 WordPress 本地测试
• 基于 WordPress 虚拟商品销售的商城系统

JamOne 单栏 WordPress 主题

• JamOne 单栏，支持 Widget，支持最新版本的 WordPress 3.01。
• 支持留言嵌套回复，支持留言分页。
• 面包屑导航。
• 支持 WordPress Related Post 插件和 PostViews 插件，需要另外安装。
• 主题默认已支持 PageNavi 功能。

详细请看演示。

该主题只需 19.98 RMB，购买链接：JamOne 单栏 WordPress 主题

>>>继续阅读全文 ...

© 我爱水煮鱼 / 收藏本文 / 11条评论 / RSS 订阅 / 长期承接 WordPress 项目 / 主机域名优惠码 / 新浪微博

相关日志

• 国外前 100 名博客半数使用 WordPress
• WordPress 性能优化：为什么我的博客比你的快
• WordPress 常用 Action 接口
• WordPress SEO 宝典
• 在 Mac OS X 系统上安装 WordPress 本地测试
• 基于 WordPress 虚拟商品销售的商城系统

Template Monster 提供网站，Flash，商标（logo），博客（blog），CSS，企业识别（CI）等模板，更重要的是他还提供了很多开源程序的模板，如 osCommerce，CRE Loaded，PHP-Nuke 等模板，当然也包括我们喜欢的 WordPress 模板！

Template Monster 的模板都设计非常漂亮，而且都是欧美风格，设计很大气，不过价格也是有点贵，比如其中一款 WordPress 主题，单买要 324 元，买断这需要 6,110元，单买的价格还可以承受，但是买断的价格视乎过高了。不过每个主题他都提供 PSD 源文件，所以购买之后，很方便做一些修改。另外我看了下 Template Monster 的 WordPress 主题目前已经改成了 DIV+CSS 布局，改变了以前 table 的布局，并且代码比较清晰明了，所以基于 Template Monster 的模板进行二次开发也是不错的选择。

Template Monster 中国目前已经支持支付宝方式付款，所以比较方便购买，如果你想使用一个和比较特色的 WordPress 模板，不烦可以尝试下 Template Monster 中国 的模板。当然如果你觉得买断价格太贵或者没有你心仪的主题了，也可以联系我定制化 WordPress 主题。

>>>继续阅读全文 ...

© 我爱水煮鱼 / 收藏本文 / 19条评论 / RSS 订阅 / 长期承接 WordPress 项目 / 主机域名优惠码 / 新浪微博

相关日志

• Google 浏览器 Chrome 主题
• Template Monster 介绍
• Screenqueri.es：响应式设计测试工具
• Moobile：基于 MooTools 框架实现的移动 WebApp 开发框架
• HTML5 和 CSS3 书籍推荐
• 使用 Google Analytics 对 iPhone/iPad 应用进行统计和分析

下载：Free WordPress 3.0 Theme for StarCraft II

>>>继续阅读全文 ...

© 我爱水煮鱼 / 收藏本文 / 1条评论 / RSS 订阅 / 长期承接 WordPress 项目 / 主机域名优惠码 / 新浪微博

相关日志

• 国外前 100 名博客半数使用 WordPress
• WordPress 性能优化：为什么我的博客比你的快
• WordPress 常用 Action 接口
• WordPress SEO 宝典
• 在 Mac OS X 系统上安装 WordPress 本地测试
• 基于 WordPress 虚拟商品销售的商城系统

很早之前我就发布这个教程的 PDF 电子书之后，截至目前为止已经被下载超过 12354 次，并且这个统计只是 box.net提供的数据，其他下载站的数据无法统计，估计至少还有1万次的下载，从2009年12月份来，我已经对这个教程进行大的修正，今天（2010-1-20）发布修正后的第一版。

当然还会存在一些错误，所以为了能够使得这一教程能够持续的修正，我们接受赞助商，赞助商可以在这个电子书中获得展示广告位和产品或者服务的一段是描述。如果你对我们的教程的话，你可以联系 Denis（http://wpjam.com/contact/）。

曾经很早之前就想过和朋友一起出一本 WordPress 的书，但是一直因为各种原因未能制作 。但是如果把目标缩小一下，通过先写某个专题的 WordPress 电子书，然后分享，也不是一个不错的想法，所以我接下来会继续制作一些其他 PDF 电子书，比如 WordPress 插件制作教程，从零开始使用 WordPress 等等，也许哪一天真的可以把这个整理成一本书。

下载：WordPres 主题教程电子书。

Pseric 也发布了这个教程的繁体中文版，如果你是台湾或者香港的读者，你可以到 Pseric 的 免費資源網路社群 下这本电子书的繁体中文版：免費WordPress佈景主題教學電子書。

>>>继续阅读全文 ...

© 我爱水煮鱼 / 收藏本文 / 52条评论 / RSS 订阅 / 长期承接 WordPress 项目 / 主机域名优惠码 / 新浪微博

留言模板是从零开始创建 WordPress 主题系列教程的最后一篇。这篇将涉及到博客一个比较重要的东西；评论模板。

你应该知道：

• 没有快速的方式在 comments.php 建立评论模板
• 大部分的 WordPress 设计者使用来自 WordPress 默认主题（Kubrick）的默认评论模板根据。
• 一些设计者会修改默认的评论模板去适合他们自己的需求。
• 你将使用我的对默认评论模板的修改版本。

第1步：创建 comments.php

• 创建一个新文件：comments.php。
• 把我的 comments.txt 文件中的内容复制到 comments.php。
• 保存 comments.php 文件。

第2步：样式化留言

• 把我的 comments-template-css 文件中的内容拷贝到你的 style.css 文件中。
• 复制到 style.css 的底部或者刚好 #footer 的上面。

第3步：在 single.php 添加留言模板

在 single.php 文件中，entry DIV 的下面，输入以下代码：

<div class=”comments-template”>
<?php comments_template(); ?>
</div>

comments_template() 这个函数是用来从 comments.php 文件调用评论模板。 comments.php 文件然后就会根据它的模板（或者代码）去显示评论列表。列表中的每个条目是一条评论。

如果想让人们可以在静态页面也可以留言，同样可以把 comments_template() 函数用到 page.php 文件。

第4步：验证代码

第四步是验证你的代码，然而可以不进行第四步的，因为你在使用的是我已经整理过的默认主题评论模板的修改版。我已经替你验证过代码了。

验证：

• 查看 > 页面源代码
• 拷贝所有源代码
• 然后到 validator。
• 把你的代码粘贴到 Direct Input 框中。
• 点击 Check。

以后的参考（当你创建你自己的主题和评论模板），下面是需要验证的页面：

• 主页 — Home page
• 存档页面 — Archive pages
• 类别页面 — Category pages （如果你自定义了类别页面）
• 搜索结果页面 — Search result pages
• 静态页面 — Pages （如：About）
• 单一日志页面 — Single post view page
• 单一日志没有留言 — Single post with no comments
• 单一日志有留言 — Single post with comments
• 单一日志含有必须登录信息 — Single post with must login message
• 单一日志没有必须登录信息 — Single post with no login required message
• 密码保护的单一日志并有留言 — Password protected single post with comments

评论模板的进一步解释

• 评论模板从根本上说是一个有序列表（OL），不是无序的，尽管它们基本上同样方式工作。 无序列表是以圆点列表组织的。有序列表则是以数字列表组织的（每个条目都有一个数字，从1开始）。
• 在 single.php 文件中，你用 comments-template DIV 围住comments_template()。现在你的评论模板在一个 DIV 标签中的一个有序列表中。

当你你的日志是密码保护的，你的评论同样是密码保护的：

这个修改版的留言模板有一个 H2 子标题显示 Password Protected。默认的留言模板是没有的。

下面展示了哪些东西组成了你的留言列表：

简单整理下就是：

comment_text() 函数就是用来调用每条留言的。

我不会解释留言模板的 CSS 代码的意思。不像 comments.php 文件中的代码，你可以随便测试你的 CSS 代码而不会弄坏留言模板。自己去测试回比我的解释对你更有好处。

今天没有课程回顾，你已经完成了 WordPress 主题制作教程。

>>>继续阅读全文 ...

© 我爱水煮鱼 / 收藏本文 / 47条评论 / RSS 订阅 / 长期承接 WordPress 项目 / 主机域名优惠码 / 新浪微博

现在 index.php 文件已被拆分，这一切都变得更简单。

第1步：archive.php

在做这步之前，查看你的侧边栏，点击其中的一个存档链接，结果的页面是不是和首页没有什么不同？

• 创建一个新文件：archive.php
• 把 index.php 中所有东西复制到 archive.php
• 保存 archive.php
• 在 archive.php 文件，把 the_content 改成 the_excerpt。
• 再次保存 archive.php 文件

通过创建一个 archive.php 文件并把它改成和 index.php 不一样，这就是定制化存档页面的外观。

现在如果你刷新你的存档页面，它将只显示摘要而不是全文的日志。

为什么你想这么做呢？ — 防止 Google 以为重复内容惩罚你的博客，如果一个存档页面和首页显示相同的内容，那就是重复的内容。

如果是私人的博客呢？那么就没有必要去区分首页和存档页面。但这并不是说摘要对私人博客没有用。

同样 — 默认你的类别页面将使用 archive.php 显示内容，如果你没有 archive.php 文件，类别页面将使用 index.php 显示内容。

如果你想类别页面和首页和存档页面看起来不一样，那么创佳一个 category.php 文件并定制化它。

第2步：search.php

• 创建一个新文件：search.php
• 把 archive.php 中所有东西复制到 search.php
• 保存就完成了。

现在所有的，所有的搜索结果将会返回摘要。如果没有 search.php 这个模板文件，搜索选项将会使用index.php 去显示搜索结果。

（可选）你可以返回到课程1去回顾者层次结构。

第3步：page.php 和 single.php

• 创建两个新文件：page.php 和 single.php
• 把 index.php 中所有内容拷贝到 page.php 和 single.php。（从现在开始，页面和单篇日志应该是一样的。）
• 保存页面和单篇日志文件，关闭它们。

第4步：定制 page.php

还记得静态页面和页面之间的不同吗？page.php 模板文件是用来定制化这些特殊静态静态页面。

第一，在 page.php 中的 <?php the_content(); ?> 下输入以下代码：

<?php link_pages(’<p><code>Pages:</strong> ‘, ‘</p>’, ‘number’); ?>

和

<?php edit_post_link(’Edit’, ‘<p>’, ‘</p>’); ?>

第二，从 page.php 中移除 postmetadata 代码。结果如下：

第三，在 page.php 中移除 posts_nav_link() 或者导航模块。

刚才发生了什么？

第一行代码是用于显示页面的分页链接。

举个例子，编辑 About 页面。根据我的屏幕截图增加代码：

当你想把一个非常长的页面分成几个页面的时候，这是非常有用的。

第二行代码是用于显示可以用来编辑静态页面的编辑链接。

通常页面是没有分类，并且通常不想给他们显示创建时间，所以需要去移除 postmetadata。同样要移除 posts_nav_link() 代码因为静态页面不会显示后一页和前一页的链接。

保存 page.php 文件并关闭它。

第5步：定制 single.php

点击一个日志的标题去阅读日志其余部分就会带你到单篇日志查看模式。single.php 模板就是用于处理查看单篇日志时的外观。

在 single.php 中的 <?php the_content() ?> 下输入：

<?php link_pages(’<p><strong>Pages:</strong> ‘, ‘</p>’, ‘number’); ?>

是的，这是相同的用于编码页面的分页链接的代码。同样我们也可以把日志分成多篇子日志。

第二，在 postmetadata 区域，移除 <?php comments_popup_link(); ?> 函数和前面的 <br /> 标签。不要移除整个 postmetadata。

移除了留言链接函数是因为在单篇日志查看模式下留言链接函数是不起作用，所以要在 singel.php 文件中移除它。只有管理员可见的编辑链接，在 BR 标签的左边。你不想跳过一行才能看到这个本来你可以在右边看到链接？这就是移除 BR 标签的原因。

第三，用以下代码取代 <?php posts_nav_link(); ?>：

<?php previous_post_link(’? %link’) ?> <?php next_post_link(’ %link ?’) ?>

在前面，存档，分类和搜索页面，我们使用 posts_nav_link() 函数去调用后一页和前一页的链接。对于查看单一日志的页面，它是没有后一页和前一页链接的，我们可以使用 previous_post_link() 和 next_post_link() 函数去调用前一篇日志和后一篇日志的链接。

保存 single.php 文件，到某篇日志下查看在导航区域的不同。

课程回顾

• 创建了四个新的文件或者或者子模板：archive.php，search.php，page.php 和 single.php。
• archive.php 和 search.php 模板文件是相同的。
• Pages （和日志不同）是没有分类的，他们同样没有后一页和前一页的链接。
• Single.php 不会显示留言链接（被 comments_popup_link() 函数调用）并且他不用 posts_nav_link() 去调用导航链接。

>>>继续阅读全文 ...

© 我爱水煮鱼 / 收藏本文 / 16条评论 / RSS 订阅 / 长期承接 WordPress 项目 / 主机域名优惠码 / 新浪微博

打开 XAMPP，主题文件夹，Firefox，IE，index.php 和 style.css。

第1步：样式化 footer

给 footer DIV 增加 10px 顶部填充。你还记得如何增加填充？这次我不提供代码。

第2步：设置 footer P 的行距

给 footer 里的所有的 P 标签 18px 行距。那是 #footer p{}.。（今天关于 CSS 的就这么多。）

第3步：header.php

• 创建一个新文件，把它命名为 header.php。
• 在 index.php 文件中，把 header DIV 及以上所有东西都拷贝到 header.php 文件中。

这是我的 header.php 文件。不要从我的这里拷贝，从你自己的 index.php 文件拷贝。

第4步：在 index.php 中导入 header.php

为了使所有从 index.php 中拷出的内容依然在 index.php 文件中，输入以下代码：

<?php get_header(); ?>

这是个 WordPress 主题系统特别用来导入 header.php 文件的函数，而不用使用 PHP 的函数：<?php include (TEMPLATEPATH . ‘/header.php’); ?>.

保存并刷新浏览器，你应该看到没有变化。如果你的改变破坏了主题，那么肯定有错误。

第4步：sidebar.php

• 和第4步一样，更多相同的事情。这次，创建 sidebar.php 文件。
• 把 index.php 文件中的 Sidebar DIV 从开始到结尾都复制到 sidebar.php 文件中。
• 那么，在 index.php 文件，将其取代为：<?php get_sidebar(); ?>.
• 保存并刷新浏览器，再一次，你应该看到没有变化。
• 这是我的 sidebar.php 文件。

第5步：footer.php

• 为 footer.php 重复上面的步骤。
• 这是我的 footer.php 文件。

教程回顾

• 创建了三个新文件：header.php，sidebar.php 和 footer.php。
• 使用了三个新的函数：get_header()，get_sidebar() 和 get_footer()。
• 下面是这节课结束之后的文件：index，style，header，sidebar，footer。

>>>继续阅读全文 ...

© 我爱水煮鱼 / 收藏本文 / 25条评论 / RSS 订阅 / 长期承接 WordPress 项目 / 主机域名优惠码 / 新浪微博

打开 XAMPP，主题文件夹，Firefox，IE 和 style.css 文件。

第1步：样式化侧边栏的无序列表

在 .sidebar{} 下输入：

.sidebar ul{
list-style-type: none;
margin: 0;
padding: 0 10px 0 10px;
}

现在已经为侧边栏样式化父级无序列表（UL）标签。所有的子 UL 或者内嵌的 UL 将会击继承同样的样式。在这里，它是无列表样式，零空白和10像素的填充。

如下所示：

第二级的（或内嵌的） UL 继承了第一级 UL 的样式。如果你给了第一级 UL 应用了边框，第二级的 UL 同样也会有个边框。

保存并刷新就可以看到列表条目现在已经没有前面的圆点了。

注意下你是如何增加顶部和底部填充的。

第2步：给 LI 添加填充

在 .sidebar ul{} 下输入：

.sidebar ul li{
padding: 10px 0 10px 0;
}

这是现在的填充：

在进行这步之前，搜索框和日历之间以及日历和页面之间是没有空间，如何给这些模块之间添加空间呢，我们需要给 .sidebar ul li{} 添加的10像素顶部和底部填充。为什么不在第一个地方的 UL 标签增加10像素的填充呢？这样的话将会有20像素的顶部填充和20像素的底部填充。如果你还是不明白，那么就去给 .sidebar ul{} 增加顶部和底部填充，就会看到问题的所在了。

第3步：样式化侧边栏下的子标题

在 .sidebar ul li{} 下输入：

.sidebar ul li h2{
font-family: Georgia, Sans-serif;
font-size: 14px;
}

还记得我们已经样式化了在 .post{} 下的子标题，但是这个是不会对侧边栏的子标题起作用的，因为前面我们仅仅样式化在 .post{} 下的子标题？现在我们是在样式化侧边栏下的子标题，结果如下：

这就是我的页面链接的样子。可能默认安装下的 WordPrss 只有一个链接：About。我的离线 WordPress 增加了多重页面链接是为了测试最低级别的链接看起的样子，注意到我已圈出在底部有不必要额外的填充，这是一个非常好的关于样式继承的例子。这里不是10像素而是20。

因为你给 .sidebar ul li{} 增加了填充，为了解决这个问题，直行第4步。

第4步：清除子 UL 下的 LI 填充

在 .sidebar ul li h2{} 下输入：

.sidebar ul ul li{
padding: 0;
}

在 .sidebar ul ul li{} 中连续的 UL 指明了我们是在定义第二级别的 LIs。再说一次，当所有的值都为 0 的时候，你不需要 px 这个后缀。

结果如下：

行距太近了，所以我们把行高改成 24px。

增加 line-height: 24px; 到 .sidebar ul ul li{}.

另外，如果你在 IE 下，搜索框下有多出了额外的空白，在下面增加 form：

body, h1, h2, h3, h4, h5, h6, address, blockquote, dd, dl, hr, p{
margin: 0;
padding: 0;
}

改成：

body, h1, h2, h3, h4, h5, h6, address, blockquote, dd, dl, hr, p, form{
margin: 0;
padding: 0;
}

第5步（可选的）：扩展日历宽度到整个侧边栏

执行这一步，如果你想让你的日历的数据能够扩展并覆盖整个侧边栏的宽度。当前你的日历应该是这样的：

为了样式化日历，找出在里面的标签和这个便签的名字或者 id。 查看 > 页面源代码或者源代码，侧边栏是在底部，所以到源代码的底部查找 Calendar。

现在我们知道日历是在一个 TABLE 标签中并以 wp-calendar 作为 id。那么如何在 style.css 文件中锁定 wp-calendar table 呢？

答案是 table#wp-calendar{}。为什么？早前，你学了使用 # 号当样式化使用 id 而不是 class 命名的 DIV。在这里，是 table 而不是 DIV，跟着是 id 的值，wp-calendar。

如果仅仅 #wp-calendar{} 也是可以的因为它是唯一的而且 WordPress 不会使用 #wp-calendar 给别的标签。但是你应该试着特定化当能够的时候。如果要更加特定化 使用 .sidebar ul li table#wp-calendar{}，想更加特定化？好的，使用 .sidebar ul li#calendar table#wp-calendar{}. 因为列表条目（LI）包含日历子标题和一个 id 被命名为 calendar 的日历表格。

现在你知道可以使用什么，如何怎么扩展 table，给表格加上 width: 100%; 。

在 .sidebar ul ul li{} 下输入：

table#wp-calendar{
width: 100%;
}

保存和刷新，结果如下：

width: 100%; 因为你想日历表格适应到侧边栏的宽度，无论你把侧边栏改成多少像素。

可能这样看起来并不好，但是我相信你已经知道如何改进。日历需要更多的样式去看起来更好。技巧：再次查看源代码，找出在 TABLE 下的哪个标签你可以样式化。

>>>继续阅读全文 ...

© 我爱水煮鱼 / 收藏本文 / 13条评论 / RSS 订阅 / 长期承接 WordPress 项目 / 主机域名优惠码 / 新浪微博

打开Xampp Control，theme 文件夹，Firefox，Internet Explorer 和 style.css 文件。

第1步：Reset CSS

在 style.css 文件中的 body{} 上面输入以下代码来处理大部分页边空白和填充：

body, h1, h2, h3, h4, h5, h6, blockquote, p{
margin: 0;
padding: 0;
}

• 这里我们使用的是 margin: 0; 而不是 margin: 0 0 0 0;。因为所有的值都是一样的话，只用一个数字就够了，对于填充的设置也是一样的。
• 保存，刷新 Firefox 和 IE。接下来我们可以增加空白和填充到需要的地方。

第2步：样式化 H1 标题

在 body{} 之后输入以下代码：

h1{
font-family: Georgia, Sans-serif;
font-size: 24px;
padding: 0 0 10px 0;
}

• font-family: Georgia, Sans-seriff; 把 H1 标题的字体从 Arial 改成 Georgia。如果没有 Georgia，网页就会寻找 Sans-serif；
• font-size: 24px; 我们在 body{} 中把字体设置为 12px，H1 和 H2 标签是不会遵守的。这就是因为标题标签遵循他们自己的规则。为了控制他们，我们需要特别的去样式化它们。
• padding: 0 0 10px 0; 意思是 10 像素的底部填充。这是为了在博客的标题和描述之间增加空间。

保存，刷新，结果如下：

第3步：样式化日志

在 #container{}下面输入以下代码：（可以在输入每块代码之后，保存并刷新去查看其中的变化。）

.post{
padding: 10px 0 10px 0;
}

（给每个 class 名字为 post 的 DIV 增加 10 像素的顶部和底部空白。）

.post h2{
font-family: Georgia, Sans-serif;
font-size: 18px;
}

（.post h2 不是一般的 CSS 规则。他是特别样式化在 class 名为 post 的 DIV 中的 H2 子标题。在侧边栏中的 H2 子标题就不受影响。）

.entry{
line-height: 18px;
}

（设置 entry DIV 中行距。）

第4步：设置日志段落填充

在 a:hover{} 下输入以下代码：

p{
padding: 10px 0 0 0;
}

（给每个段落标签增加 10 像素的顶部填充。)

第5步：样式化日志杂项

在 .entry{} 下面输入：

p.postmetadata{
border-top: 1px solid #ccc;
margin: 10px 0 0 0;
}

对于 postmetadata 这个段落便签，给它增加一个灰色的边框和10像素顶部空白。

border-top 意思是仅仅顶部边框 border-left 意思是仅仅左边边框，等等。 如果只是单独的 border，没有 -top，-right，-bottom 或者 -left 则意味着所有的边框。如 border: 1px solid #ccc; 意思为所有的四边都有1像素的灰色的边框。

第6步：样式化导航栏

在 p.postmetadata{} 下输入：

.navigation{
padding: 10px 0 0 0;
font-size: 14px;
font-weight: bold;
line-height: 18px;
}

对于 Next page 和 Previous page 链接外面的的 navigation DIV 标签，我们

• 增加了一个10像素的顶部填充。
• 把字体大小改成14像素。
• 把字体改成粗体。
• 把行高增加到18像素。

>>>继续阅读全文 ...

© 我爱水煮鱼 / 收藏本文 / 8条评论 / RSS 订阅 / 长期承接 WordPress 项目 / 主机域名优惠码 / 新浪微博

在我们开始之前，打开 Xampp Control，主题文件夹，Firefox 浏览器，IE 浏览器，index.php和style.css这两个文件。

第1步：设置页面总体宽度

现在我们首先要确定的是主题的总体宽度。我们使用 750px；主题的大小取决于博客绝大多数访问者的屏幕分辨率。需要避免的是使用过大宽度的 的主题，如果博客的读者都大多数使用 800px × 600px 的屏幕，这样的话，如果是使用 900px 宽的主题将会有 100多像素超出他们的屏幕，显然这是对用户很不友好的。

不管怎样，我们怎么样把主题的总体宽度设置为 750px 呢？

我们需要把现在主题中的所有的东西（header，container，sidebar 和 footer）放入一个 750px 的 DIV 标签中。

在 <body> 之后增加：<div id=”wrapper”>

在 </body> 之前增加：</div>

在 style.css 文件中输入以下代码：
#wrapper{
margin: 0 auto 0 auto;
width: 750px;
text-align: left;
}

在 CSS，# 号是通过 id 来定位页面中的元素，而点号是通过 class 来定位页面中的元素，如果你的代码是 <div class=”wrapper”>，那么就应该用 .wrapper 来替代 #wrapper 去定位 wrapper 这个 DIV 标签。

同时保存 index.php 和 style.css 文件。刷新 Firefox 和 IE 浏览器（按 F5）查看所做的改动。

详细解释：

• margin: 0 auto 0 auto; 意思是（注意顺序）：0上页边空白，自动右页面空白，0下页边空白和自动左页面空白。从现在开始，记得设置左右页边空白为自动将使得居中对齐。
• width: 750px; 显而易见是 750 像素。
• text-align: left; 是让 wrapper DIV 中的文本向左对齐因为我们等下要要将 body{ text-align: left;} 改成 text-align: center;

第2步：自动页面居中

把 body{} 中的 text-align: left; 改成 text-align: center;。

为什么？（我假设你使用的是 Firefox 和 Internet Explorer 6）。你的布局可能你看起来是正确的，但对于使用早前版本的 IE 用户可能不正确。还记得设置左边和右边的页边空白为自动是居中吗？但是这并不是对所有的 IE 都适用，所以 body{ text-align: center; } 是让 wrapper DIV 居中在旧版本 IE 的一种解决方案。

（随便说一下，在 Firefox 和 IE 中文本大小是不同的，我们稍后解决。）

第3步：设置 header 宽度和布局

让 Header 浮到左边并且设置它的宽度为 750px：

#header{
float: left;
width: 750px;
}

第4步：设置 Container 宽度和布局

让 Container 浮到左边并且宽度为 500px：

#container{
float: left;
width: 500px;
}

第5步：设置 Sidebar 宽度和布局

让 Sidebar 浮到左边，宽度为240px，并且给它灰色的背景：

.sidebar{
float: left;
width: 240px;
background: #eeeeee;
}

#ffffff 是白色而background: #eeeeee; 是非常浅的灰色。我们给侧边栏增加一个背景颜色只是去查看当增加剩下的 10 像素之后的不同之处。

第6步：设置 Footer 的宽度和布局

让 Footer 浮到左边，左右两边都没有东西，并且宽度为：750px：

#footer{
clear: both;
float: left;
width: 750px;
}

Header 和 Footer 的样式有什么区别呢？答案是 footer{} 中有 clear: both;。它在那儿使得 Footer 不能和它上面的东西（如 Sidebar 或者 Container）连接起来。

保存并刷新浏览器。

第7步：给侧边栏增加其余的 10 像素

给侧边栏增加其余的 10 像素的页边空白。现在侧边栏的 CSS 应该是：

.sidebar{
float: left;
width: 240px;
background: #eeeeee;
margin: 0 0 0 10px;
}

保存并刷新浏览器去查看 10 像素的空白增加到侧边栏的左边了。

margin: 0 0 0 10px; 具体的意思是：上边空白为0，右边空白为0，底部空白为0，左边空白为10像素。当大小为0的时候，px 单位不是必需的。

第8步（额外的步骤）：修正 IE 的双倍页边距 bug

Internet Explorer 有个双倍页边距的 bug，这样在 IE 下，我们的页面距就是 20像素，20像素的页边距可能会破坏布局并把侧边栏挤到页面的底部，因为一个20像素的页边距使得 Container 和 Sidebar 的宽度之和为 760px 而不是 750px。为了解决这个问题，增加 display: inline; 到侧边栏。现在你的侧边栏应该是：

.sidebar{
float: left;
width: 240px;
background: #eeeeee;
margin: 0 0 0 10px;
display: inline;
}

这里是现在的 index 和 style 文件的内容。

>>>继续阅读全文 ...

© 我爱水煮鱼 / 收藏本文 / 35条评论 / RSS 订阅 / 长期承接 WordPress 项目 / 主机域名优惠码 / 新浪微博

颜色属性，跟着的是一个十六进制代码，是用于给文本上色。如 body { color: #000000;} 意思是你页面 body 内所有文本将是黑色的。

背景颜色属性，跟着的是一个十六进制代码，是给除背景上色。如 body{ background: #ffffff; } 意思是为 body 上白色背景。

十六进制代码

• 每个十六进制代码前都有 # 号，然后跟着六位数字。这些数字的范围是从 #ffffff（白色）到 #000000（黑色）。
• #ffffff， #eeeeee， #dddddd， #cccccc， #bbbbbb， #aaaaaa， #999999， #888888， #777777， #666666， #555555， #444444， #333333， #222222， #111111
• 前两位表示红色，第三和第四代表绿色，而最后两位代表蓝色。#ff0000 是红色（red）。#550000 是暗红色（dark red）。 #220000 是更黑色的红色（darker red）。 #00ff00 是绿色（green）。 #0000ff 是蓝色（blue）。那么哪个十六进制代码是黄色呢？ #ffff00 就是黄色（yellow）。 #ff00ff 是紫色（violet）。

第1步：添加链接颜色

在 body{ } 选择器下输入以下代码：

a:link, a:visited{
text-decoration: underline;
color: #336699;
}

• 这些代码是干吗用的？，给所有的链接都加上下划线的（text-decoration: underline;）和上了蓝色（color: #336699;）。这是不是纯正的蓝色，但它确实是蓝色是因为最后两个数字（代表蓝色）是最高值的数字。
• a:link 用于样式化链接。当你想把一个词转变为链接的时候，用什么实现呢？使用 <a> 和 </a> 这对标签，因此样式化链接就是样式化 a:link。
• a:visited 用于样式化已经访问过的链接。
• 另外一种输入方式：
  a:link{
  text-decoration: underline;
  color: #336699;
  }

  和

  a:visited{
  text-decoration: underline;
  color: #336699;
  }

• 当给a:link 和 a:visited这两个选择器应用相同的 text-decoration: underline; 和 color: #336699; 这两个属性的时候。可以把它么你放在一起，使用逗号来区分。

第2步：添加链接悬停颜色

在 a:link, a:visited{ } 下输入以下代码：

a:hover{
text-decoration: none;
}

这些代码是干吗用的呀？ 当把指针移到链接上面时候下划线消失。

如果不想在默认情况下有下划线而是在当把指针移到链接上面的时候才出现下划线，那么就在 a:link 和 a:hover 之间交换下 text-decoration: 的值。

如果你想更改你链接悬停时的颜色，那么就增加 color: 和任何你想要的十六进制代码，如：

a:hover{
text-decoration: none;
color: #ff0000;
}

>>>继续阅读全文 ...

© 我爱水煮鱼 / 收藏本文 / 3条评论 / RSS 订阅 / 长期承接 WordPress 项目 / 主机域名优惠码 / 新浪微博

我们现在已经在 style.css 文件有些内容，让我们先来看看这部分内容是干什么的？

• 第一行显而易见就是主题的名字。
• 第二行是这个主题的地址，如果你的主题只是私用的而不准备发布的话，那就不用管它了。
• 第三行是主题的描述。
• 第四行是版本号，这是非常重要的，特别是当你公开发布你主题新版本的时候。
• 第五和第六行分别是主题作者的名字和主页。

在主题信息两边的 /* 和 */ 符号是为了让主题的信息不影响该文件的其他内容，这是 CSS 的注释。当输入 CSS 代码去样式化你的网页的时候，你可能想在这里增加些注释使得能够在以后更清楚知道这部分是干什么的。显然我们并不想你的注释影响实际的代码，所以可以使用 /* 和 */ 这一对符号使得注释不被解释。

下面是处理后的主题信息

第1步：打开 style.css 文件

• 打开 Xampp，主题文件夹，FireFox，IE 浏览器和 style.css 文件。
• 在两个浏览器的地址栏都输入：http://localhost/wordpress

从这里开始，我们需要同时在 FireFox 和 IE 上测试主题，不同的浏览器对 CSS 的代码解释是不同的。如果能够在尽可能多的浏览器器上和尽可能多的操作系统上测试你的主题是最好的（Safari，Opera，Linux，Netscape 等等）。如果你和我一样懒，那就只在 FireFox 和 IE 上测试你的主题吧。

第2步：添加 CSS 代码

在 style.css 文件中输入以下代码：

body{
margin: 0;
font-family: Arial, Helvetica, Georgia, Sans-serif;
font-size: 12px;
text-align: left;
vertical-align: top;
background: #ffffff;
color: #000000;
}

像 XHTML 和 PHP 一样，通过制表符增加缩进来组织代码：

保存 style.css 文件并刷新 两个浏览器 Firefox 和 Internet Explorer 查看变化。

把 body{ } 看作一个标签，然后它里面所有的东西看作属性和值，和处理 XHTML 时一样。{ 是开始符，} 是结束符。在 { 和 } 之间，冒号意思是开始而分号意思是结束。（我在涉及到 XHTML，PHP，CSS的时候都使用标签，属性和值这些术语是为了保持简单，实际上 PHP 和 CSS 有不同术语。如参数（parameters），选择器（selector）和属性（property）。）

在我们继续之前，我需要解释下为什么使用 body{ } （CSS 选择器），是因为你是在样式化网页的绝大基本部分（或者说是总体部分），<body> 标签。你不会样式 <head> 因为这个标签没有东西需要样式化。你网页上展示的绝大部分的东西是在 <body> 和 </body> 标签之间。

然后，在后面你会样式化 ID 为 header 的 DIV 标签。

进一步的解释：

margin: 0; 处理 body 标签的默认的页边空白，如果你要页边空白或者更大的页面空白，把 0 改成 10px，20px 或者其他。PX 意思是像素。每个像素使你电脑屏幕的一个点。当你的页边空白是 0 的话，就不需要后面跟上 px。

在下面的图片中，红色高亮的区域就是应用于 body 标签的默认的页边空白。

当给其样式化为 margin: 0;，下面是没有页边空白的相同页面：

font-family: Arial, Helvetica, Georgia, Sans-serif; 为你的网页或者网站选择使用哪种字体。这些字体中的第一个，Arial 是可替换的，如果你的用户没有在他们的电脑上安装 Arial 这种字体，style.css 文件就会寻找 Helvetica，然后是 Georgia，再接着是 Sans-serif。你可以在字体文件夹（我的电脑 > 系统盘 > Windows下面）找到你的字体列表。

font-size: 12px; 显而易见是字体大小。可以把它改大或改小以查看变化。

text-align: left; 让你的文本向左对齐。把它改成 text-align: right; 去查看不同之处。

vertical-align: top; 使得所有的东西从上面开始。如果是中部或底部排行你的 body 标签，所有东西将会向下推。

background: #ffffff; 意思是白色背景。#ffffff 是白色十六进制代码。#000000 是黑色十六进制代码。

color: #000000; 意思是文本颜色是黑色。

如果你想向前更进一步或者自己学习 CSS，最好的地方是 w3schools.com

>>>继续阅读全文 ...

© 我爱水煮鱼 / 收藏本文 / 6条评论 / RSS 订阅 / 长期承接 WordPress 项目 / 主机域名优惠码 / 新浪微博

首先打开 Xampp Control 和浏览器，并进入 http://localhost/wordpress。

然后查看 > 页面源代码。

全选并所有的源代码。

然后到 XHTML Validator。

把刚才复制的源代码粘贴到 Validate by Direct Input 框中。

点击 Check 之后，验证器会就会检查代码，然后把检测结果反馈给我们。如果反馈回来的结果是绿色的，那么代码没有错误。

如果有错误，则根据其提示进行修改。

>>>继续阅读全文 ...

© 我爱水煮鱼 / 收藏本文 / 13条评论 / RSS 订阅 / 长期承接 WordPress 项目 / 主机域名优惠码 / 新浪微博

第1步：增加个 DIV 标签

在侧边栏的 DIV 标签下输入以下代码：

<div id=”footer”>
</div>

第2步：添加版权信息

把尾部的文本放入段落标签中，你可以输入任何你想要的东西，这里是我的：

<p>
Copyright © 2007 <?php bloginfo(’name’); ?>
</p>

保存并刷新浏览器，结果如下：

© 用于显示版权符号，还记得在 header 的时候使用的 bloginfo() 函数吗？这里再次使用，“name”是用于调用博客标题，而“url”调用博客的地址。

如果你想你的博客标题成为一个链接，查下头部就知道怎么做了。

>>>继续阅读全文 ...

© 我爱水煮鱼 / 收藏本文 / 14条评论 / RSS 订阅 / 长期承接 WordPress 项目 / 主机域名优惠码 / 新浪微博

首先，什么是窗体化（widgetizing）呢？简单的说，窗体化就是能够通过拖拉就能够整理侧边栏的模块。比如我们需要更改分类和存档的位置，只需要简单把分类和存档列表拖到它们的位置即可，根本不用去修改侧边栏的代码。

第1步：创建 functions.php 文件

打开记事本，然后把空白文件保存为 functions.php。把 functions.txt 文件中所有的内容拷贝到 functions.php 中。

回顾一下，现在在“tutorial”主题文件夹下应该有4个文件。

第2步：窗体化侧边栏

直接在侧边栏的第一个 <ul> 标签输入以下代码：

<?php if ( function_exists(’dynamic_sidebar’) && dynamic_sidebar() ) : else : ?>

直接在 </ul> 标签之前输入以下代码：

<?php endif; ?>

保存 index.php 文件，然后我们到 WordPress 后台 => 外观 => Widget 就可以把 Widget 拖到侧边栏了。

>>>继续阅读全文 ...

© 我爱水煮鱼 / 收藏本文 / 31条评论 / RSS 订阅 / 长期承接 WordPress 项目 / 主机域名优惠码 / 新浪微博