2011年10月13日星期四

精通WordPress系列教程- 1: 精通WordPress主题Hacks与技巧

本文翻译自Noupe的精通wordpress系列教程，该教程目前已经发布了第一部分，主要侧重于wordpress主题的制作和使用技巧。也就是你现在看到的这篇。

按Noupe的计划，这个教程共4个部分，将尽量在本月内完成，以下是教程列表:

  • 第一部分: 精通你的Wordpress主题Hacks和技巧
    在这部分里，将主要侧重于Wordpress主题技术和技巧，让你创建出自己梦想的Wordpress主题.
  • 第二部分: 出色的免费和付费WordPress 主题
    第二部分里面将涵盖最佳的 WordPress主题设计，收集的原则是拥有一个友好的用户界面设计，你或许愿意在你的下一个博客项止中使用它们。
  • 第三部分: 一份不可或缺的 wordpress插件列表
    这部分将只是集中介绍那些真的非常需要使用的WordPress插件: 比如更好的管理，安全，留言，备份，编码等等。
  • 第四部份:优美的Wordpress设计- 最佳实例展示
    最后这部份，将为你展示一些最优秀和最具创造性的Wordpress博客设计，并对这些设计进行一些细节分析，让你从中找到一些新的想法，更好的发展你自己的Wordpress博客。

帕兰映像将跟踪翻译这个系列教程，如果翻译出现差异，欢迎你指出。另外，此教程基本是属于编辑整理，引用了大量来自其它博客的英文教程，本站将搜索已经被其它中文博客翻译过的一些文章，如果还没有人进行翻译，则翻译成文。然后陆续在此教程里面添加相应的中文教程。希望能够对所有爱好Wordpress的朋友有用。另，如果下面引用的一些英文教程里面，有哪篇是你翻译的，可以在此留言，方便增加。谢谢。

这是“精通Wordpress系列教程”的第一部分，本部分里面 , 我们将侧重于介绍一些WordPress主题的hacks, 思路，技巧和有用的教程。如果你要开发一个Wordpress站点，必须掌握这些知识，保证需要使用的时候能随时拿得出来。那现在让我们开始吧，如果你想关注此教程的更新，别忘记了订阅本站。

  • Loop循环

    1)The Loop 或许是当你需要定制一个Wordpress主题时，最重要的事情之一。任何放置在Loop开始和结束标签之间的 html 或PHP代码都将显示在每一篇日志里面. 当Wordpress文档的状态上面说“This tag must be within The Loop”, 也就是标签必须使用在Loop循环里面才会有效。下面是一个loop循环示例:

    <?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>// the code inside the loop

<?php endwhile; ?>

<?php else : ?>

<?php endif; ?>

    • 进一步的精通Loop循环

      wp9 精通Wordpress系列教程 1: 精通Wordpress主题Hacks与技巧

      1)Modifying Individual Posts In The Loop/修改Loop循环里面的单独日志样式- 有的时候客户有一些特别的要求，比如要让Google广告插入显示为页面中的第二篇日志，或顶部日志使用不同的背景颜色, 而其它日志只显示标题. 如果只使用一个Loop你不能完成这些工作, 这篇文章将教会如何使用不同的loops显示不同的日志风格.2)Embed Google Ad in First WordPress Post/在第一篇日志中插入Google广告-其中一个比较实用的地方就是让Google广告显示在第一篇日志后面，而不是每篇日志后面都显示。你可以使用下面的代码实现此效果: 
      <?php if ($count == 1) : ?>// Insert your Google AdSense code here<?php endif; $count  ; ?>

      你同样可以改变count值来让广告比如放在不同的日志后面，比如改成count == 2, 则把Google广告显示在第二篇日志后面:

      “count == 1? to “count == 2?

  • 分类相关技巧

    第一步就是当浏览者访问一个 Category page/分类页面 的时候，根据分类值显示出你的主题文件中的日志，这就是所谓的 Template Hierarch/模板层次.

    这个一览图, 告诉我们当我们要组织一个Wordpress主题时，所需要知道的大部分内容。

    改变每个分类页面的日志显示数.

    你将需要打开index.php文件并且找到下面的这行,

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

    然后添加上下面的这行:

    <?php if (is_category()) { $posts = query_posts($query_string . '&showposts=4'); } ?>

    “is_category()”就是分类ID，比如可以写成”is_category(’5′)”, “showposts=4″ 里面的数值就是你要显示的分类日志数。

    不同的分类指定不同的模板

    如果你想要为某一个特定的分类(比如ID为7的分类)指定一个特定的样式，不同于其它分类页面。只需要创建一个category-7.php模板文件放在你的主题文件夹里面，然后再对模板文件进行样式化即可. (帕兰注: 注意在创建分类PHP文件的时候，里面所使用的HTML标签的ID或CLASS属性。个人建议对分类模板的样式化直接在php文件里面使用<style=”text/CSS”>…</style>来调用内部样式表，而不是全部写在style.css里面)

    Displaying single post pages differently in specific category

    比如，你有一个分类叫 “News”和另外一个分类叫 “Tutorials” ，你想要 “News” 分类下面的日志使用style1.css样式表, 而 “Tutorials”分类使用style2.css样式表. Lorelle 提供了一个简单的解决方案。参照下面的代码即可实现:

    打开single.php文件，删除所有的代码，然后添加下面的代码

    <?php$post = $wp_query->post;if ( in_category('9') ) {

include(TEMPLATEPATH . '/single2.php');

} else {

include(TEMPLATEPATH . '/single1.php');

}

?>

    上面的代码，简单的说，当加载单篇文章页面的时候，这串PHP代码发出质疑，检测这篇文章. 如果这篇文章的分类ID 是9, 显示single2.php. 如果不是，则显示single1.php.

  • 假设条件的Tags标签

    Conditional Tags可以用在模板文件中，实现视乎假定条件来显示不同的内容和内容的显示方式。

    Styling different categories/样式化不同分类: 如果你想为某个特定的分类指定一个不同风格的样式表, 你只需要把 <head> 标签放入你的 index.php文件.

    <?php if ( is_category('15') ) {<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/cat-15.css"type="text/css" media="screen" />;

<?php } else { ?>

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>"

type="text/css" media="screen" />

<?php } ?>

    Dynamic file content/动态的文件内容 如果你想要某个文件内容只在首页显示，可以使用下面的代码放到你的index.php文件里面:

    <?php if ( is_home() ) { include ('filename.php'); } ?>

    动态标题以实现更友好的seo

    <?phpif (is_home()) { echo bloginfo('name'); }elseif (is_404()) { bloginfo('name'); echo ' - Oops, this is a 404 page'; }

else if ( is_search() ) { bloginfo('name'); echo (' - Search Results');}

else { bloginfo('name'); echo (' - '); wp_title(''); }

?>

  • 创建导航菜单

    菜单是一个很有效的网站元素，通过分类菜单或页面菜单，可以突出显示出你的网站所关注的领域.

    Dynamic menu highlighting/动态高亮菜单 是为用户浏览时提供一个参考的有效方法，它简直就象是地图上面的一个斑点在说： “你在这里” 。

    Nick La 在Best web gallery里面创建的动态高亮菜单使用下面的代码:

    <ul id="nav">  <li<?php if ( is_home() || is_category() || is_archive() || is_search() || is_single() || is_date() ) { echo ' class="current"'; } ?>><a href="#">Gallery</a></li><li<?php if ( is_page('about') ) { echo ' class="current"'; } ?>><a href="#">About</a></li>

<li<?php if ( is_page('submit') ) { echo ' class="current"'; } ?>><a href="#">Submit</a></li>

</ul>

    • 进一步精通导航菜单

      wp5 精通Wordpress系列教程 1: 精通Wordpress主题Hacks与技巧

      1)Creating Two-Tiered Conditional Navigation in WordPress/建立两层的条件导航菜单- 这里是一个空白的导航方案, 父级菜单在上面，子级菜单在下面。2) Smarter Navigation Menu/更加智能的导航菜单 Mike Cherim 向我们说明如何获得一个更加智能的导航菜单，主要是如何使用条件标签来提供日志标题, 分类日期,和分类名称代替普通的术语. 
      <!--Begin an unordered list the ID is for the bookmark, the class is for the style    (so I can have other lists with the same styling as seen on RedScrubs.com)--><ul id="nav" class="btn"><!--IF the current page is the 404 page, note the added error class-->

<?php if(is_404()) { ?>

<li class="current_page_item error"><a href="#">404 Error</a></li>

<?php } ?>

<!--IF the current page is the search results page-->

<?php if(is_search()) { ?>

<li class="current_page_item"><a href="#">Search Results</a></li>

<?php } ?>

<!--IF the current page is a single post-->

<?php if(is_single()) { ?>

<li class="current_page_item"><a href="#">Selected Article</a></li>

<?php } ?>

  • 质疑文章

    Query_posts 所谓质疑文章就是可以用来控制某些文章出现在 Loop里面。而你所需要做的只是添加一个query_posts()请求在你的的Loop循环开始标签的前面。

    只显示某一分类下面的日志 如果你只想显示某一分类下面的文章并且指定文章数:

    <?php query_posts('cat=15&showposts=10'); ?>

    这里我们显示了分类ID为”15″下面的 “10″ 篇文章。

    从你的首页排除某分类

    <?php   if (is_home()) {query_posts("cat=-3");

}

?>

    检索某篇特定文章

    <?php// retrieve one post with an ID of 5query_posts('p=5');

?>

    • 进一步的Query Posts技巧

      1) Query_posts redux- 这是一个非常有用的列表，提些一些函数来实现高级的query_posts()功能。

      <?phpquery_posts('page_id=7'); //retrieves page 7 onlyquery_posts('pagename=about'); //retrieves the about page only

?>

  • 获取文章

    get_posts是一个简单的标简，用来创建不同的Loop循环，你可以以不同的方式显示文章链接列表。举例来说，如果你想显示最新的5篇日志，可以使用下面的代码:

    <?php $previous_posts = get_posts('numberposts=5');foreach($previous_posts as $post) :

setup_postdata($post);

?>

<a href="<?php the_permalink(); ?>" id="post-<?php the_ID(); ?>"><?php the_title(); ?></a>

<?php the_content(); ?>

<?php endforeach; ?>

    在上面的代码中，变量“numberposts=5″用来告诉Wordpress在Loop里面要检索多少篇文章. WordPress文章格式化功能setup_postdata()自动填充所需要的变数.

  • 文章摘要

    这里是两个Wordpress模板标签, the_content() 和 the_excerpt() 使用在Loop里面显示文章内容.

    文章摘要可以让你显示文章的一部分内容, 而不是全文. 但许多人不知道如何把文章摘要显示的更加美观, 以及显示文章摘要有很多好处，比如SEO和提高流量。

    The_excerpt() 只是把文章中的HTML标签和图像移除。

    这里是如何使用 <?php the_excerpt(); ?> 来显示摘要:

    • 1) 如果你使用了the_excerpt() 标签，并且发布文章时，在摘要文本框里面手动填入了摘要，那就将显示这份摘要。 
      Display the explicit excerpt
    • 2)如果只是使用the_excerpt() 标签，则显示该篇文章的前120个单词(注: 这个对中文用户不适用) 
      Display 120 words of the post

    这里是如何在使用 <?php the_content(); ?>来显示文章全文

    • 1)如果文章里面使用了<!- -more- ->标签，则在该处截断文章。 
      Display this excerpt
    • 2) 如果没有使用<!- -more- -> 标签，则显示完整的日志 
      Display the entire post

  • 自定义字段/Custom fields

    WordPress拥有一个强大的功能custom fields 可以让你灵活的增加很多额外的信息到你的文章里面. Custom fields由一个名称和一个值组成. KEY是自定义字段的名称和你想要给这个名称指定的值.你可以显示此自定义信息到你的日志，页面或是侧边栏或是网站中的任何地方. WordPress能够记住你使用过的自定义字段，当你下次再使用的时候，只需要从下拉菜单中进行选择即可。

  • 获取自定义字段值Custom Field Values 
     get_post_meta($post_id, $key, $single);<?php echo get_post_meta($post->ID, 'key name',true) ?>

    $post->ID 用来获取日志 ID, $key是一个String类，包含你想使用的meta值名称, 而$single则是用来判断真还是似，也就是True or False。 如果设置为True，该功能将返回一个单一的结果作为字符串。 如果设为False,或者不设置 , 则返回自定义字段的一个数组.

  • 添加自定义字段/Custom Field到日志为了说明这个功能，我们将做一个演示—让我们假设你想要显示文章作者的名称为该名称增加一个指向该作者网站的链接. 首先,你需要新建一个日志并添加两个自定义字段， 并且分别分他们设置字段值，见下面的图片。
    wp10 精通Wordpress系列教程 1: 精通Wordpress主题Hacks与技巧 现在，把下面的代码添加到你的模板文件里面即可: 
    <?php //get author_name (custom field) ?><?php $author = get_post_meta($post->ID, 'author_name', true); ?><?php //get author_url (custom field) ?><?php $url = get_post_meta($post->ID, 'author_url', true); ?>

<a href="<?php echo $url;?>"><?php echo $author; ?></a>

  • 在你的日志里面编写代码

    有的时候，你可能需要里面添加一些代码，比如 HTML, CSS, PHP, 或 javascripts，你当然希望这个代码”看起来真的像”代码。 但是WordPress.com会自动更改诸如<, >, &, “, 和 ‘ 这些字符. 举个例子，你输入:

    <? php query_posts('p=5'); ?>

    当你保存的时候，这些代码将被清除. 或者会改变成字符实体，再或者会被显示为最终程序而不是代码, 所以

    要让代码标签在日志里面里面, 你必须首先把代码转换为字符实体，比如:

  • <? php query_posts(‘p=5′); ?>
  • To Write Code in Your Posts 如何在日志中把代码编写的上去像是一个代码盒子， 从页实现从其它代码和模板文件中复制和粘贴, 你可以使用 <pre> HTML标签和 <code> 标签. (帕兰注: 关于编写代码，我倒不觉得存在问题，Noupe在这里指的应该是代码模式下的日志发布，如果是复制粘贴到富文本编辑辑里面，则不会出现这种问题，代码将在CODE模式自动转换为字符实体。如果想要创建代码盒子的效果，给代码前后添加上<pre>或<code>标签，再通过CSS美化一下就可以了。)

  • 结构和层次分明的Archives存档页面

    有许多方法可以用来显示你的Archvies页面. 一些PHP代码或是插件都够创建存档列表, 还有很多人教你把自己的存档页面显示的更加有趣. 你可以按年，月，分类，日显示存档页页面等等。

    下面这个示例 教你如何按分类和按月显示一个Archvies存档页面

    <?php while(have_posts()) : the_post(); ?><h2><?php the_title(); ?></h2><ul><?php wp_list_cats('sort_column=name&optioncount=1') ?></ul>

<ul><?php wp_get_archives('type=monthly&show_post_count=1') ?></ul>

<?php endwhile; ?>

    使用wp_list_cats 标签显示一个按分类排列的WordPress存档列表和 wp_get_archives 显示基于日期的存档列表。

    如果你想取出每个单篇页面(也许是一个自定义的存档页面或是一个全文日志列表), 你可以设置 -1.

    <?php query_posts('posts_per_page=-1'); //to return all the posts without pagination?>

  • 永久链接/Permalinks

    设置你想要的永久链接/Permalinks 是你安装好Wordpress后所应该做的第一件事情。因为搜索引擎对你博客的索引是基于URL的，一旦你的链接地址有任何改变，就很可能降低你的网页排名。你可以通过 Admin > Options > Permalinks设置你的永久链接地址.

    WordPress拥一个选项 pretty links, 可以让你设置出既漂亮又对搜索引擎友好的Permalink，代替默认的Permalink：

    http://example.com/?p=N

    使用漂亮的链接结构:

    http://example.com/category_name/post-nameorhttp://example.com/year/month/day/post-name

  • 识别作者和和访客并且进行不同的样式化

    通过对CSS的灵活运用, 你可以完全控制作者和访客的留言布局和颜色.

    1)How to highlight author comments in WordPress/如何在Wordpress中高亮作者的留言- 默认情况下，很多Wordpress主题的留言样式都是相同的. Matt Cutts为我们显示了一个简单的方法:通过对作者email地址的检测，或是用户ID的检测来实现高亮博客作者或是指定的某个用户进行高亮样式。

    wp2 精通Wordpress系列教程 1: 精通Wordpress主题Hacks与技巧

    2)How-to style WordPress author comments/如何样式化Wordpress作者留言- 这个教程将告诉你如何样式化作者的留方，而不需要任何插件。也是通过留言者的电子邮件地址来区别使用不同的样式。 3) Styling Your WordPress Comments/样式化Wordpress留言- 这里是三个示例，如何在当用户使用: Gravatars, Speech Bubble或是Alternating Arrows的时候，把这些附加信息显示到留言列表里面。wp4 精通Wordpress系列教程 1: 精通Wordpress主题Hacks与技巧

  • 从留言中分离Trackbacks引用

    默认情桨叶下，Trackbacks是作为一条留言显示在留言列表中的. 如果把它们从留言中分离出来，看上去会更加的直观和漂亮。

    wp3 精通Wordpress系列教程 1: 精通Wordpress主题Hacks与技巧

    1) Separating Trackbacks from Comments/从留言中分离Trackbacks- 这篇文章向你描述如何把Trackbacks从留言中分享出来，并作为一个有序列表显示在留言列表的下面。2) Managing Trackbacks and Pingbacks-这篇文章涵盖了如何把Trackbacks和Pingbacks从正常的留言列表中分享出来以及如何移除Trackbacks/Pingbacks。

  • 自定义404页面

    重新考虑你的 404 页面 的价值，就像考虑你的首页一样。你可以在下面的文章中发现一些好的创意：

    1)Customizing Your 404 Page- 你可以提供一些有趣的东西到你的404页面里，以提高访客的注意力，或是提供一些他们可能正在寻找的内容。这样，往往能保证你不会丢失那些本该存在的流量。除非你敢保证你的网站里面没有404页面。

    2)Customize Your 404 Page- 这里是几个改善你的404页面的小技巧。

  • 头像

    当你登录到 Gravatars服务, 每一次，你使用有效的电子邮件地址在一个博客留言，你的图片将出现在你的名称附近,如果你想要实现这种功能，只需要添加几行简单的代码

    How to Setup Gravatars for your Blog – Plug-in Free!- 这是一个指南，教你如何在你的博客里面设置Gravatars头像服务，而不需要安装任何插件。

  • 值得学习的一些Wordpress主题技巧

    1) When Your WordPress Theme Keeps Reverting To Default- 你有没有碰到过当你刷新页面的时候，你的博客主题恢复到了Wordpress的默认主题? (帕兰注: 通常我碰到这样的情况是，如果在FTP上传主题文件的时候刷新博客的页面，就一定会恢复成默认模板，不知道其它人是否也是这样?)

    wp7 精通Wordpress系列教程 1: 精通Wordpress主题Hacks与技巧 2) How to place a login form in the sidebar- 如何放置登录表单到侧边栏 wp12 精通Wordpress系列教程 1: 精通Wordpress主题Hacks与技巧 4) Adding Recent Comments To Your WordPress Theme- 在你的侧边栏显示最新留言列表，而不需要任何插件 5) Creating your home.php quite easily on WordPress- 两个简单的方法，为你的Wordpress首页创建静态页面 6) Even Simpler WordPress Contact Form- 一个简单的解决方法，用来整合你所有需要的联系表单。所有的留言将显示在 WordPress后台管理界面的一份表单中。 7)WP Date Image Hack- 使用动态的图像替换你博客日志的日期. 8 ) Category Page Hacks- 这是两个hacks技巧，用来增加 WordPress 分类页面的可用性，主要用来创建一个文章索引替换掉原先的页面概况，并且可以通过文章标题和发布日期来进行排序浏览. 9)Creating a “dynamic sticky”- 教你如何创建一个动态的置顶效果. 10)Show Category Images- 如何通过添加一些简单的PHP代码到你的 WordPress 模板，从而实现分现的图片链接显示，替换原本的文本分类。 11) Displaying WordPress Entries on static pages-一个简单的方法创建静态的Wordpress日志页面，包括日期，标题和摘要。wp1 精通Wordpress系列教程 1: 精通Wordpress主题Hacks与技巧 12) Ajax Commenting- 如何让你的留言系统达到当提交留言时不需要重新载入整页的Ajax效果。13) Opening Links in New Windows- 这个hack技巧是为那些想让自己的页面在新窗口中打开而不需要每次都使用target=”_blank”的朋友准备的。

  • 开发设计一个WordPress主题

    1)So you want to create WordPress themes huh?- 来自Small Potato的Wordpress主题制作教程，教你一步一步的学会制作Wordpress主题.

    2) Developing a WordPress Theme- Dezinerfolio写的一个如何开发一个WordPress 主题的教程, 你将学习到如何把你的xHTML和CSS网站紧密转换为一个 WordPress 主题。 3)How to create WordPress theme?- DevBox Wireframe WordPress主题, 你可以在他们的网站下载这个主题. 这基本上是一个标准的主题，你可以非常容易的使用XHTML/CSS 布局并转换WordPress主题.4)Widgetizing Themes- 当更新一个使用widgets的主题时所需要的一些技术性指令.
原文: Mastering Your WordPress Theme Hacks and Techniques
翻译: 帕兰

来源于 精通WordPress系列教程- 1: 精通WordPress主题Hacks与技巧 | 帕兰映像

发帖者 frogpear 时间： 14:35

没有评论:

发表评论

订阅： 博文评论 (Atom)