WordPress 主题 Header 模板

原文:The WordPress Theme Header Template

原文作者:Ian Stewart

译文:WordPress 主题 Header 模板

译文作者:Young

现在我们进一步学习如何创建 header.php 以及如何验证 HTML 主题。这个教程将会有很多 PHP 代码,但是不用失望。同时,我们将学习两个必需的搜索引擎优化技巧,并开始通过 functions.php 文件来装饰您的主题。

Head 部分

此刻您的空白 WordPress 主题还没有通过技术验证,因为它缺乏一个文档来告诉浏览器如何解释 HTML 语言。我们将使用 XHTML 过渡文档 —— 当然还有其他的文档,但是 XHTML 是最好的。

打开 header.php 文件,并把以下代码粘贴到最顶部:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

同时,我们将为 HTML 标签添加一些属性,以便页面更加适合浏览器。用以下代码替代 “<html>” 标签:

  1. <html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>

现在我们正在创建 WordPress 主题的 <head> 部分。<head> 部分包括网页的元信息。例如出现于浏览器最顶部(和搜索引擎搜索结果)的文件名、样式表和 RSS Feed 的链接。

先打开 functions.php 文件,我们准备添加一些有用的功能,这些功能用于为文件标题提供页面号码。

先在 functions.php 添加:

  1. <?php

然后添加以下代码:

  1. // Make theme available for translation
  2. // Translations can be filed in the /languages/ directory
  3. load_theme_textdomain( ‘your-theme’, TEMPLATEPATH . ‘/languages’ );
  4.  
  5. ?
  6. $locale = get_locale();
  7. $locale_file = TEMPLATEPATH . "/languages/$locale.php";
  8.  
  9. if ( is_readable($locale_file) )
  10.         require_once($locale_file);
  11. ?
  12. // Get the page number
  13. function get_page_number() {
  14.  
  15.     if ( get_query_var(‘paged’) ) {
  16.         print ‘ | ‘ . __( ‘Page ‘ , ‘your-theme’) . get_query_var(‘paged’);
  17.  
  18.     }
  19. } // end get_page_number
  20.  

第一个功能告诉 WordPress 我们希望我们的主题可以被翻译成不同的语言,翻译文件可以在主题目录的 “languages”文件夹里面找到。如果您准备创建一个 WordPress 主题,就应该尽量使得主题所有的内容都可以翻译。您永远不会知道自己或者别人什么时候需要用另外一种语言显示硬编码内容。

对于下一个功能 get_the_page_number(), 您将会看到一些翻译文本,例如:

  1. __( ‘Page ‘ , ‘your-theme’)

可以翻译的文本是主题名(your-theme) 前面的 “Page”。直截了当,但是还有其他方式可以写翻译文本,以后用到的时候我们再作说明。

您可以猜测 get_page_number() 是做什么用到吗?如果您看功能里面的代码,您会发现我们在检查一个 IF 语句是否一个编好号的页面。当您点击 “较旧的文章”的时候,这个功能就会在地址栏显示当前页面号码。

如果您对 PHP 很陌生,我希望您记住双斜杠后面的所有内容都是被忽略的,只作为一个注释。后面您会看到很多双斜杠。

现在我们回到 header.php 文件。

用以下代码替代 <head></head>

  1. <head profile="http://gmpg.org/xfn/11">
  2.     <title><?php
  3.         if ( is_single() ) { single_post_title(); }      
  4.         elseif ( is_home() || is_front_page() ) { bloginfo(‘name’); print ‘ | ‘; bloginfo(‘description’); get_page_number(); }
  5.  
  6.         elseif ( is_page() ) { single_post_title(”); }
  7.         elseif ( is_search() ) { bloginfo(‘name’); print ‘ | Search results for ‘ . wp_specialchars($s); get_page_number(); }
  8.  
  9.         elseif ( is_404() ) { bloginfo(‘name’); print ‘ | Not Found’; }
  10.  
  11.         else { bloginfo(‘name’); wp_title(‘|’); get_page_number(); }
  12.     ?></title>
  13.  
  14.  
  15.  
  16.         <link rel="stylesheet" type="text/css" href="<?php bloginfo(‘stylesheet_url’); ?>" />
  17.  
  18.         <?php if ( is_singular() ) wp_enqueue_script( ‘comment-reply’ ); ?>
  19.  
  20.  
  21.         <?php wp_head(); ?><link rel="alternate" type="application/rss+xml" href="<?php bloginfo(‘rss2_url’); ?>" title="<?php printf( __( ‘%s latest posts’, ‘your-theme’ ), wp_specialchars( get_bloginfo(‘name’), 1 ) ); ?>" />
  22.  
  23.         <link rel="alternate" type="application/rss+xml" href="<?php bloginfo(‘comments_rss2_url’) ?>" title="<?php printf( __( ‘%s latest comments’, ‘your-theme’ ), wp_specialchars( get_bloginfo(‘name’), 1 ) ); ?>" />
  24.  
  25.         <link rel="pingback" href="<?php bloginfo(‘pingback_url’); ?>" />       
  26. </head>
  27.  
  28.  

如果您觉得这些代码像教条,没关系,我会重点解释。

一个搜索引擎优化的标题只包含单独日志和静态页面的标题。当然,还要通过 get_page_number() 显示 “较旧文章”页面的页号。

  1.  <title><?php
  2.         if ( is_single() ) { single_post_title(); }      
  3.         elseif ( is_home() || is_front_page() ) { bloginfo(‘name’); print ‘ | ‘; bloginfo(‘description’); get_page_number(); }
  4.  
  5.         elseif ( is_page() ) { single_post_title(”); }
  6.         elseif ( is_search() ) { bloginfo(‘name’); print ‘ | Search results for ‘ . wp_specialchars($s); get_page_number(); }
  7.  
  8.         elseif ( is_404() ) { bloginfo(‘name’); print ‘ | Not Found’; }
  9.  
  10.         else { bloginfo(‘name’); wp_title(‘|’); get_page_number(); }
  11.     ?></title>

下面是一些关于页面内容的元信息:

  1. <meta http-equiv="content-type" content="<?php bloginfo(‘html_type’); ?>; charset=<?php bloginfo(‘charset’); ?>" />

样式表链接:

  1. <link rel="stylesheet" type="text/css" href="<?php bloginfo(‘stylesheet_url’); ?>" />

以下这个脚本的调用让我们可以使用评论功能:

  1. <?php if ( is_singular() ) wp_enqueue_script( ‘comment-reply’ ); ?>

调用插件和其他功能的代码:

  1.         <?php wp_head(); ?>

RSS Feed 和 Pingback 链接:

  1. <link rel="alternate" type="application/rss+xml" href="<?php bloginfo(‘rss2_url’); ?>" title="<?php printf( __( ‘%s latest posts’, ‘your-theme’ ), wp_specialchars( get_bloginfo(‘name’), 1 ) ); ?>" />
  2.  
  3.         <link rel="alternate" type="application/rss+xml" href="<?php bloginfo(‘comments_rss2_url’) ?>" title="<?php printf( __( ‘%s latest comments’, ‘your-theme’ ), wp_specialchars( get_bloginfo(‘name’), 1 ) ); ?>" />
  4.  
  5.         <link rel="pingback" href="<?php bloginfo(‘pingback_url’); ?>" />

Header 部分

现在我们想在博客上添加标题,链接到主页并且显示博客描述和菜单。

我们将在 hearder.php 的 #branding DIV 标签里面添加博客标题和描述。但是我们将做得和其他大多数的主题有点不一样。

您会发现很多 WordPress 主题都会告诉搜索引擎每个页面最重要的东西是博客标题。这些主题通过 h1 标签来打包标题,h1 标签意味著“这个页面就是讲这个的”。我和其他一小部分主题开发者认为这是一个坏主意。例如,定义您现在看到这个页面最重要的文本不是 “ThemeShaper” 而是 “WordPress 主题 Header 模板”。而在主页,最重要的东西是博客的描述。博客的描述实际上总体描述了博客的所有内容。

幸运的是,这个很容易做到。

我们用 WordPress 的条件标签以及简单的 HTML 代码来设置博客标题以及描述:

  1.                 <div id="branding">
  2.                                 <div id="blog-title"><span><a href="<?php bloginfo( ‘url’ ) ?>/" title="<?php bloginfo( ‘name’ ) ?>" rel="home"><?php bloginfo( ‘name’ ) ?></a></span></div>
  3.  
  4. <?php if ( is_home() || is_front_page() ) { ?>
  5.                                 <h1 id="blog-description"><?php bloginfo( ‘description’ ) ?></h1>
  6.  
  7. <?php } else { ?>       
  8.                                 <div id="blog-description"><?php bloginfo( ‘description’ ) ?></div>
  9.  
  10. <?php } ?>
  11.                         </div><!– #branding –>
  12.  
  13.  

所以,博客标题通过一个简单的 DIV 标签搞定,博客描述则通过 PHP 语句和一些 WordPress 条件标签实现,要不使用主页或者首页的非常重要的 h1 打包描述,要不就使用其他页面的 DIV 标签里面的相关标题。

对初学者来讲,现在最好回过头看看我们的代码。在上面的代码里面,我们使用了 WordPress 的模板标签 bloginfo() 用来获取 WordPress 博客的 URL、名称和描述。它可以用来获取 WordPress 博客 20 多种不同的信息。理解这个就理解了 WordPress 主题。我们通过 HTML 结构、包含 PHP 代码的 WordPress 模板标签来实现这种功能。真的很简单。只要见惯那些模板标签以及一些 IF 语句和一些 PHP 循环。

在 #access DIV 标签里面,我们会添加一个跳转链接,以便别人通过屏幕阅读器浏览您的博客的时候可以跳过菜单直接看文章内容。

  1. <div class="skip-link"><a href="#content" title="<?php _e( ‘Skip to content’, ‘your-theme’ ) ?>"><?php _e( ‘Skip to content’, ‘your-theme’ ) ?></a></div>

添加页面菜单很简单,只有一个模板标签,一个函数:

  1.                 <?php wp_page_menu( ‘sort_column=menu_order’ ); ?>

很简单,对吧?所以您的 #access DIV 标签应该像这样子:

  1.                 <div id="access">
  2.                                 <div class="skip-link"><a href="#content" title="<?php _e( ‘Skip to content’, ‘your-theme’ ) ?>"><?php _e( ‘Skip to content’, ‘your-theme’ ) ?></a></div>
  3.  
  4.                                 <?php wp_page_menu( ‘sort_column=menu_order’ ); ?>                     
  5.                         </div><!– #access –>
  6.  
  7.  

至此,您的 WordPress 主题的 Header 模板已经是经过搜索引擎优化的了。

如何创建 WordPress 主题

这篇文章是如何创建 WordPress 主题教程系列的其中一部分,该系列将会教您如何从零开始创建强大的 WordPress 主题。建议您从头开始阅读这个系列并自己动手编写一些漂亮的代码。

发布在博客技术 已有标签 , , . 将该链接存入书签。 评论和互链已关闭。
  • :: 《100 个免费翻墙工具》免费电子书

    100 个免费翻墙工具

19 条评论

  1. 11
    发表于2009年07月1日 11:33 上午 | 永久链接

    期待后续!

  2. Vicia
    发表于2009年07月15日 4:14 下午 | 永久链接

    function那里,php不需要关闭么?@_@ 没太看明白。
    另外,view code视野太窄,总是出现滚动条,很影响阅读情绪。><

  3. Vicia
    发表于2009年07月15日 4:46 下午 | 永久链接

    那段代码里面漏了哦。^^

  4. Vicia
    发表于2009年07月15日 4:47 下午 | 永久链接

    汗,我的代码被吞掉了。我是说“head”那段代码里少了“meta”信息。

  5. Vicia
    发表于2009年07月15日 4:59 下午 | 永久链接

    branding下的php没有用分号。我好像都没致谢,还一个劲儿挑错。><

  6. Vicia
    发表于2009年07月15日 5:21 下午 | 永久链接

    看了下原作者的文章,里面确实也没有分号,而且没有分号的语句里面(和‘之间还有一个空格。为什么这些语句要这样写呢?有什么特别的原因么?

  7. Young
    发表于2009年07月15日 8:29 下午 | 永久链接

    @Vicia 哈哈,可见你是一个好学的同学。我对 PHP 是一知半解,看能回答多少就回答多少吧。

    1、 function那里,php不需要关闭么?—— 你是对的,应该关闭,但是好像不关闭也没事。
    2、view code视野太窄 —— 哈哈,这个我没有办法,要请插件作者出马才行。WP-codebox 是我目前能找到的最好的插件,如果你有更好的,欢迎推荐。
    3、“head”那段代码里少了“meta”信息 ——文章里面是有的啊。
    4、branding下的 php 没有用分号 —— 对此我只能哑口无言,因为没有分号它也照样没事。

  8. Vicia
    发表于2009年07月15日 8:43 下午 | 永久链接

    1. 这篇结束后,我的主题无法预览,在浏览器显示title那里出现了很长的错误代码,大致是说function那里有问题。但是我和这里给的代码对过了。都一样的说。@_@
    2. 原文中,“用以下代码替代 ‘head’‘/head’:”(为避免代码被吞掉,用引号代替了)这句话下面的code里,没有meta信息呀,在后面的解释里才有。所以第一次看文章的时候在这里迷惑了好久。
    3. 关于code的显示,我很喜欢这篇文章的风格:http://uicss.cn/adding-reply-functions-in-comments/。不过作者用的什么插件我不清楚,如果你觉得可以的话,我可以去问问看。:)
    4. 对于“…也没事”的说法,我不是很认同,我还是更赞成用最严谨的代码去处理主题。就像也说得通,但还是用更规范的一样。严谨没有错,不是么?^_^

  9. Vicia
    发表于2009年07月15日 8:45 下午 | 永久链接

    汗,写着写着又忘记了。我是说:就像(‘br’)也说得通,但还是用(‘br /’)更规范的一样。

  10. Young
    发表于2009年07月16日 12:56 上午 | 永久链接

    @Vicia 你用的是什么编辑器啊?我用 DreamWeaver 粘贴作者的代码的时候,保存之后再打开就会出现一些多余的问号,如果你碰到的也是这种情况,把那些多余的问号去掉应该就可以了。
    CK’s blog 用的应该是 “coolcode”,我有在精博上尝试过,不过效果不好(最右边不能显示边框),所以就没有用了。关于严谨嘛,它的确没有错。

  11. Vicia
    发表于2009年07月16日 2:14 下午 | 永久链接

    我用的是Vim。我不是粘贴,我是自己照着这儿说的敲的。因为我觉得粘贴没有用,自己还是什么都记不住,不如写一遍好。

  12. Young
    发表于2009年07月16日 4:35 下午 | 永久链接

    @Vicia 哈哈,难怪我不会做主题,复制粘贴多了。你的主题现在可以用了吗?

  13. Mr. Chen
    发表于2009年07月25日 6:36 下午 | 永久链接

    看着别人的开始做,实践就是最好的学习,Young做博客很用心哈,祝早日能博客赚钱做Soho…

  14. Young
    发表于2009年07月25日 8:04 下午 | 永久链接

    @Mr.Chen 在 PHP 上,我还真的有很多要学。现在作为一个自由职业者,赚钱的问题将会一直困绕着我,这是不得不考虑的,毕竟那么大个人再向父母借钱就不好意思了,所以,我会做些不同的尝试,如果突然走错了,还望你多加提醒。你也换了一个黑白主题了,恭喜!

  15. Vicia
    发表于2009年08月7日 1:51 下午 | 永久链接

    呃,后来问题没有解决,就没有再继续下去。感觉这一篇偏难。还是水煮鱼的那套更适合我。><

  16. Young
    发表于2009年08月7日 8:02 下午 | 永久链接

    @Vicia 你可以和原作者直接联系啊,他还有一个论坛是专门讨论他那个 WordPress 主题的。

  17. no
    发表于2010年03月17日 10:49 下午 | 永久链接

    从哪儿复制的啊,这么多错误.引号全是全角的

  18. Centiyo
    发表于2010年03月29日 11:41 上午 | 永久链接

    很杯具,引号全都错了,全部都是全角

  19. Young
    发表于2010年03月29日 1:09 下午 | 永久链接

    @Centiyo 谢谢指正。