DIY Wordpress Themes —— Fix
Tag: wordpress主题教程 , wordpress模板制作 | Author: zEUS. | 点击量2807次 |
琢磨了半晌，还是决定在写样式之前先把 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 -->
<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 »'); ?>
</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 -->
<?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 »'); ?>
</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 -->
<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 -->
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.
- 原文链接:
- 转载原创文章请注明:
Name : zEUS.
图文并茂，介绍的很详细，感谢为新人做的一切！
之前看过水煮鱼翻译的教程，里面没有关于导航栏的讲解，能在这儿看到真是太好了。这个缺口算是补上了～ ^_^