Apr 22

DIY Wordpress Themes —— Fix

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

琢磨了半晌，还是决定在写样式之前先把 Wordpress 的 PHP 调用语句插入到 index.php 文件中，这样在编写样式的时候可以方便的在本地进行测试。
在上一篇日志里介绍了 index.php 的结构，这里我就介绍如何将 PHP 调用语句插入对应的层（DIV 标签）中。
对照下图进行讲解

模板结构

首先是页眉 header 部分，试着用英语去理解下面的调用语句，其实并不难：

<div id="header"><!-- 页眉部分 -->
    <h1><a href="<?php echo get_option('home'); ?>/"><?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 -->

下面是内容栏 content 部分，以下代码省略了 wrapper 层

<div id="content"><!-- 内容栏部分 -->
        <?php if (have_posts()) : ?>
            <?php while (have_posts()) : the_post(); ?>
    
        <div class="post" id="post-<?php the_ID(); ?>"><!-- 日志部分 -->
            <div class="title">
            <h2><!-- 日志标题 -->
                <a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(''); ?></a>
            </h2>
                <div class="postdata"><SPAN class="category"><?php edit_post_link('Edit', '', ''); ?> | 分类：<?php the_category(', ') ?> | <?php comments_popup_link('给我留言', '给我留言(1 条留言)', '给我留言(% 条留言)'); ?></span></div>
            </div>
        <div class="entry"><!-- 文章主体 -->
            <?php the_content('Continue reading &raquo;'); ?>
        </div><!--/entry -->
        </div><!--/post -->
        
    <?php endwhile; ?>
    <?php else : ?>
 
    <h2>Not Found</h2>
        <p>Sorry, but you are looking for something that isn't here.</p>
      
    <?php endif;?>
    </div><!--/content -->

接下来是侧边栏 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 -->

最后是页尾 footer 部分，这里涉及的 php 语句相对较少

<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 -->

Wordpress 的 PHP 调用语句插入基本 over 了，下次在编写样式的时候就能在本地 Wordpress 环境下看到相关的内容输出了。
在进入下一篇日志之前，如果你还没有本地的 Wordpress 环境，请先安装一个，具体方法自行 google，另外推荐一个 firefox 用于 Web 开发的插件—— firebug ，还有一个 IE 调试插件—— iedevtbar

zEUS.

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

     “DIY Wordpress Themes —— Fix”才7条评论

    1. gravatar
      公元2008年04月22日的2:40 pm，传说中的 keke 抢到了第1楼！ 

      一步步跟着你走，呵呵！

    2. gravatar
      公元2008年04月22日的3:04 pm，传说中的 西岸 抢到了第2楼！ 

      很不错的介绍，对于我等新手非常实用。 :smile:

      虽然我自己不一定要去弄一个模板出来，但至少可以加深代码方面的知识。

    3. gravatar
      公元2008年04月22日的8:16 pm，传说中的 MY-Hou 抢到了第3楼！ 

      zEUS.真猛 :shock:

      到时记得弄成电子书哦

    4. gravatar
      公元2008年04月23日的12:01 am，传说中的 花生 抢到了第4楼！ 

      我的blog上的评论突然间都不显示了，折腾了半天没搞定，老大能不能抽空帮忙看看？郁闷死了……

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

      @keke：嘿嘿 :mrgreen:
      @西岸：其实主要是 CSS DIV 方面的知识…
      @MY-Hou：那我的流量怎么办呢 :cry:
      @花生：留言这块是否有其用其他插件？

    6. gravatar
      公元2008年04月24日的1:19 pm，传说中的 MY-Hou 抢到了第6楼！ 

      放到其他地方啊 :cool:

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

      很不错的，但是觉得还有点初级啊~~

    发表留言