Apr 25

DIY Wordpress Themes —— Separated

分类：Wordpress研究, 与我有关 | 给我留言 | 点击量246次

首页 index.php 已经完成了，在介绍如何建立其它的页面（页面页 page.php 、独立日志页 single.php 、存档页 archive.php 和搜索结果页 search.php ）之前还有一项工作。
一般来说这些页面都拥有一些相同的部分——页眉 header 、页脚 footer 和 侧边栏 sidebar ，为了避免重复我们可以把这些部分从 index.php 里分离出来，以方便其它页面调用，而 Wordpress 也正好为它们提供了单独特定的文件名：header.php 、 footer.php 和 sidebar.php

首先分离页眉，还是用 dreamweaver 打开我们的 index.php 文件并在相同目录下新建一个 PHP 文件—— header.php，其实放在 header.php 里的代码并不是固定的，但一般来说都习惯于把内容栏 content 前面不会经常改动的代码都放进去：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats please -->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title><?php wp_title(''); if (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'); ?></title>   
    <link href="<?php bloginfo('stylesheet_directory'); ?>/style.css" rel="stylesheet" type="text/css" />
    <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
    <link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
    <link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />
    <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
 
    <?php wp_get_archives('type=monthly&format=link'); ?>
    <?php //comments_popup_script(); // off by default ?>
     <?php wp_head(); ?>   
    <META name="keywords" content="" />
</head>
<body>
  <div id="header">
    <h1>
        <a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a>
    </h1>
        <div id="description"><?php bloginfo('description'); ?></div>
    <div id="nav"><!-- 网站导航栏 -->
        <ul>
          <li class="page_item <?php if ( is_home() ) { ?>current_page_item<?php } ?>"><a href="<?php echo get_settings('home'); ?>/" title="HOME">博客首页</a></li>
          <?php wp_list_pages('sort_column=menu_order&depth=1&title_li=');?>
        </ul>
    </div>
  </div><!-- /header -->
  <div id="wrapper">

将 index.php 中的上述代码剪切到 header.php 文件中保存，并在 index.php 文件的最前面加上 header 的调用语句：

<?php get_header(); ?>

相同的，我们继续分离 sidebar.php 和 footer.php ，依然是先新建这2个文件。

在 index.php 找到侧栏 sidebar 的代码

<div id="sidebar">   
        <ul><h3><?php _e('最新日志'); ?></h3>
            <?php get_archives('postbypost', 10); ?>     
        </ul>     
        <ul><h3><?php _e('友情链接'); ?></h3>
            <?php get_links(-1, '<li>', '</li>', ' - '); ?>
        </ul>                     
        <ul><h3><?php _e('文章分类');?></h3>
            <?php wp_list_cats('sort_column=name&optioncount=0&hierachical=0');?>
        </ul>
        <ul><h3><?php _e('日志存档'); ?></h3>
            <?php wp_get_archives('type=monthly'); ?>
        </ul>   
        <ul><h3><?php _e('其它'); ?></h3>
            <?php wp_register(); ?>
            <li><?php wp_loginout(); ?></li>
            <?php wp_meta(); ?>
        </ul>   
    </div><!--/sidebar -->

将它们剪切至 sidebar.php 文件中并保存。

在 index.php 找到页脚 footer 的代码：

<div id="footer">
        Copyright © 2007 <a href="<?php bloginfo('url');?>" target="_blank"><?php bloginfo('name'); ?></a>. <a href="http://zeuscn.net/themes" target="_blank">The theme</a> Designed by <a href="http://zeuscn.net" target="_blank">zEUS.</a>
    </div><!--/footer -->
  </div><!--/wrapper -->
</body>
</html>

将它们剪切至 footer.php 文件中并保存。

最后在 index.php 文件的末尾加上2句调用语句：

<?php get_sidebar(); ?>
 
<?php get_footer(); ?>

That’s all. 分离结束，虽然 index.php 被我们 separated 了，但是在前台我们依然可以看到一个完整的首页！
那么在下一篇里我将介绍如何建立其它的页面：页面页 page.php 、独立日志页 single.php 、存档页 archive.php 和搜索结果页 search.php 。

zEUS.

DIY Wordpress Themes —— Style DIY Wordpress Themes —— Built
  • 收藏到 : Google书签 新浪ViVi 365Key网摘 天极网摘 我摘 POCO网摘 博采网摘 YouNote网摘 和讯网摘 博拉网 igooi网摘 I2Key网摘 天下图摘 百特门网摘 Del.icio.us Yahoo书签 奇贴 QQ娱乐摘 添加到Digg! 添加到Facebook!
  • 标签 :  ,
  • 原文链接 : http://zeuscn.net/archives/2008/04/25/diy-wordpress-themes-separated/
  • 转载原创文章请注明 : zEUS.’Blog 網生@誌
  • 本周最灌水的人 :  motoe2 (5)  ,  willerce (5)  ,  Charles (4)  ,  东哥 (4)  ,  大话 (3)  ,   头两名将免费获得下周的“阿里妈妈广告位”
  • 相关日志 : 
    • 

     “DIY Wordpress Themes —— Separated”才5条评论

    1. gravatar
      公元2008年04月26日的12:21 am，传说中的 kok 抢到了第1楼！ 

      又是沙发。哈哈哈

    2. gravatar
      公元2008年04月26日的12:24 pm，传说中的 Charles 抢到了第2楼！ 

      脑筋急转弯：10 + 7=? （必填）
      很赞的教程。
      不过，要是我做模板的话应该会找个现成的来改吧，比如default本身的结构就已经划分好了。当然，那样会稍微不方便一点。

    3. gravatar
      公元2008年04月26日的1:19 pm，传说中的 GanGeGe 抢到了第3楼！ 

      越来越专业了，顶一个！

    4. gravatar
      公元2008年04月27日的12:01 pm，传说中的 了了僧 抢到了第4楼！ 

      期待下一集教程……

    5. gravatar
      公元2008年04月27日的2:53 pm，传说中的 zEUS. 抢到了第5楼！ 

      @kok： :grin:
      @Charles：其实 default 还不够简单…
      @GanGeGe：呵呵，我实在是没事找折腾 :???:
      @了了僧：呵呵，多谢支持！

    发表留言