WordPress 主题 Header 模板

作者：Young | 发表于：2009年07月1日

原文：The WordPress Theme Header Template

原文作者：Ian Stewart

译文：WordPress 主题 Header 模板

译文作者：Young

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

Head 部分

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

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

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

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

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

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

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

先在 functions.php 添加：

<?php

然后添加以下代码：

// Make theme available for translation
// Translations can be filed in the /languages/ directory
load_theme_textdomain( ‘your-theme’, TEMPLATEPATH . ‘/languages’ );
?
$locale = get_locale();
$locale_file = TEMPLATEPATH . "/languages/$locale.php";
if ( is_readable($locale_file) )
require_once($locale_file);
?
// Get the page number
function get_page_number() {
if ( get_query_var(‘paged’) ) {
print ‘ | ‘ . __( ‘Page ‘ , ‘your-theme’) . get_query_var(‘paged’);
}
} // end get_page_number

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

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

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

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

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

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

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

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

<head profile="http://gmpg.org/xfn/11">
<title><?php
if ( is_single() ) { single_post_title(); }
elseif ( is_home() || is_front_page() ) { bloginfo(‘name’); print ‘ | ‘; bloginfo(‘description’); get_page_number(); }
elseif ( is_page() ) { single_post_title(”); }
elseif ( is_search() ) { bloginfo(‘name’); print ‘ | Search results for ‘ . wp_specialchars($s); get_page_number(); }
elseif ( is_404() ) { bloginfo(‘name’); print ‘ | Not Found’; }
else { bloginfo(‘name’); wp_title(‘|’); get_page_number(); }
?></title>
<link rel="stylesheet" type="text/css" href="<?php bloginfo(‘stylesheet_url’); ?>" />
<?php if ( is_singular() ) wp_enqueue_script( ‘comment-reply’ ); ?>
<?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 ) ); ?>" />
<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 ) ); ?>" />
<link rel="pingback" href="<?php bloginfo(‘pingback_url’); ?>" />
</head>

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

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

<title><?php
if ( is_single() ) { single_post_title(); }
elseif ( is_home() || is_front_page() ) { bloginfo(‘name’); print ‘ | ‘; bloginfo(‘description’); get_page_number(); }
elseif ( is_page() ) { single_post_title(”); }
elseif ( is_search() ) { bloginfo(‘name’); print ‘ | Search results for ‘ . wp_specialchars($s); get_page_number(); }
elseif ( is_404() ) { bloginfo(‘name’); print ‘ | Not Found’; }
else { bloginfo(‘name’); wp_title(‘|’); get_page_number(); }
?></title>

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

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

样式表链接：

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

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

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

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

<?php wp_head(); ?>

RSS Feed 和 Pingback 链接：

<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 ) ); ?>" />
<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 ) ); ?>" />
<link rel="pingback" href="<?php bloginfo(‘pingback_url’); ?>" />

Header 部分

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

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

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

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

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

<div id="branding">
<div id="blog-title"><span><a href="<?php bloginfo( ‘url’ ) ?>/" title="<?php bloginfo( ‘name’ ) ?>" rel="home"><?php bloginfo( ‘name’ ) ?></a></span></div>
<?php if ( is_home() || is_front_page() ) { ?>
<h1 id="blog-description"><?php bloginfo( ‘description’ ) ?></h1>
<?php } else { ?>
<div id="blog-description"><?php bloginfo( ‘description’ ) ?></div>
<?php } ?>
</div><!– #branding –>

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

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

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

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

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

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

很简单，对吧？所以您的 #access DIV 标签应该像这样子：

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

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