动手打造你自己的Wordpress Template and Themes (主题, 模板) Part 2 – 标头篇

七月 1st, 2009

动手打造你自己的Wordpress Template and Themes (主题, 模板) Part 2 – 标头篇

动手打造你自己的Wordpress Template and Themes(主题, 模板) Part2 – 标头篇 (Header)

Part 1 – 布局 (The Layout)
Part 2 – 标头 (Heaer)
Part 3 – 索引 (Index)
Part 4 – 评论 (Comment)
Part 5 – 侧边栏 (Sidebar)
Part 6 – 底部 (Footer)
Part 7 – 结束语 (Finish!)

本系列的Part2，将会提到更多关于你的标头(Header)的细节以及功能部分，现在请打开你的header.php文件。

1.
2.      <html>
3.      <head>
4.      <title>My Wordpress Theme</title>
5.      </head>
6.      <body>
7.      <div id=”wrapper”>
8.      <div id=”header”>
9.      header
10.      </div> <!– close header –>
11.      <div id=”content”>
12.

现在，我们将要把Wordpress特有的功能(functions)放到你的头文件中，我们第一个将要加入的是这行文字。

因为Wordpress是动态的，所以我们可以让网站使用动态标题，只要把 <?php wp_title(); ?> 放到 <title> 和 </title> 之间，这个标签就会自动的显示你的标题。(Sulow注：可以随意更改网站名称而不用修改代码)

1.
2. <title><?php wp_title(); ?></title>
3.

但为了要让我们的标题更有趣一点，我们将使用以下的PHP代码。
请复制以下代码并粘贴到<title>与</title>之间。

1.
2. <?php wp_title(”); if (function_exists(‘is_tag’) and is_tag()) { ?>Tag Archive for <?php echo $tag; } if (is_archive()) { ?> archive<?php } elseif (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’); ?> – <?php bloginfo(‘description’); ?>
3.

这段代码应该看起来像这样：

1.
2.      <title>
3.      <?php wp_title(”); if (function_exists(‘is_tag’) and is_tag()) { ?>Tag Archive for <?php echo $tag; } if (is_archive()) { ?> archive<?php } elseif (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’); ?> – <?php bloginfo(‘description’); ?>
4.      </title>
5.

下一步我们要做的是导入我们的stylesheet文件，以便让我们的Theme使用。

1.
2. <?php bloginfo(’stylesheet_url’); ?>
3.

这段代码会确认我们的stylesheet url，然后，把下面的代码放在</title>后面，并确认你的CSS文件名称为style.css。

1.
2.      <style type=”text/css” media=”screen”>
3.      <!– @import url( <?php bloginfo(’stylesheet_url’); ?> ); –>
4.      </style>
5.

我们这里还需要加入一些其他的代码，请复制以下代码并粘贴到</head>后面。

1.
2.      <link rel=”stylesheet” href=”<?php bloginfo(’stylesheet_url’); ?>” type=”text/css” media=”screen” />
3.      <link rel=”alternate” type=”application/rss+xml” title=”<?php bloginfo(’name’); ?> RSS Feed” href=”<?php bloginfo(’rss2_url’); ?>” />
4.      <link rel=”pingback” href=”<?php bloginfo(’pingback_url’); ?>” />
5.      <meta name=”generator” content=”WordPress <?php bloginfo(’version’); ?>” />
6.

然后，我们需要在header.php里面加入<?php wp_head(); ?>

最终，你的header.php文件，应该像这样：

1.
2.      <html>
3.      <head>
4.      <title>
5.      <?php wp_title(”); if (function_exists(‘is_tag’) and is_tag()) { ?>Tag Archive for <?php echo $tag; } if (is_archive()) { ?> archive<?php } elseif (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’); ?> – <?php bloginfo(‘description’); ?>
6.      </title>
7.
8.      <style type=”text/css” media=”screen”>
9.      <!– @import url( <?php bloginfo(’stylesheet_url’); ?> ); –>
10.      </style>
11.
12.      <link rel=”stylesheet” href=”<?php bloginfo(’stylesheet_url’); ?>” type=”text/css” media=”screen” />
13.      <link rel=”alternate” type=”application/rss+xml” title=”<?php bloginfo(’name’); ?> RSS Feed” href=”<?php bloginfo(’rss2_url’); ?>” />
14.      <link rel=”pingback” href=”<?php bloginfo(’pingback_url’); ?>” />
15.      <meta name=”generator” content=”WordPress <?php bloginfo(’version’); ?>” />
16.
17.      <?php wp_head(); ?>
18.
19.      </head>
20.      <body>
21.      <div id=”wrapper”>
22.      <div id=”header”>
23.      header
24.      </div> <!– close header (关闭header标签) –>
25.      <div id=”content”>
26.