CSS Mac Dock

  • Wordpress Theme 教程（Wordpress模板制作）2 - [代码]

    2008-12-11

    Tag：Wordpress Theme 教程 模板 制作

    版权声明：转载时请以超链接形式标明文章原始出处和作者信息及本声明
    http://unnet.blogbus.com/logs/32388831.html

    NO.3

    已经获得了header.php, index.php, sidebar.php, footer.php这四个文件，接下来我们要做的就是搭积木了。
    header.php

    PLAIN TEXT
    PHP:
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml">
    3.     <head profile="http://gmpg.org/xfn/11">
    4.     <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
    5.     <title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> &raquo; Blog Archive <?php } ?> <?php wp_title(); ?></title>
    6. <!-- Meta Tags -->
    7.     <meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />
    8.     <meta name="robots" content="index, follow" />
    9.     <meta name="keywords" content="" />
    10. <!-- Favicon -->
    11.     <link rel="shortcut icon" href="favicon.ico" />
    12. <!-- CSS -->
    13.     <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
    14. <!-- RSS -->
    15.     <link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
    16.     <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
    17. <!-- WordPress Tags -->
    18.     <?php wp_get_archives('type=monthly&format=link'); ?>
    19.     <?php wp_head(); ?>
    20.     </head>
    21. <body>
    22.     <div id="header">
    23.         <div class="bloginfo">
    24.         <a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a>
    25.         </div>
    26.         <div class="admin">
    27.         <?php wp_loginout(); ?>
    28.         <a href="#sub-menu">Sub-Menu</a>
    29.         </div>
    30.     </div><!-- header -->
    31.     <div id="page">

     

    • line1-5：用来描述页面的基本信息，诸如使用那一种标准，字符编码，还有页面标题。
    • line7-13：一些meta标签信息和站点ico设定。
    • line15-20：对css文件和rss订阅地址的设定，方便自动发掘程序。
    • line22-24：我也不知道干吗的，反正个个模版都有-_-;。
    • line29-35：标题部分。

    　　真正在页面上看到的效果其实只有line29-35这一段，一开始只有Blog标题（左）和login链接（右），后来为了方便跳转到页底的Sub-Menu部分又增加了一个链接。标题图片是直接在body里设定的。相应的CSS部分如下：

    PLAIN TEXT
    CSS:
    1. html, body {
    2. margin: 0;
    3. padding: 0;
    4. }
    5. body {
    6. background: #fff url(images/bg.jpg) no-repeat center top;
    7. font-size: 1em;
    8. font-family:"Trebuchet MS", "Lucida Grande", Arial, Helvetica, sans-serif;
    9. word-spacing: 0.15em;
    10. letter-spacing: 0em;
    11. line-height:1.3em; 
    12. margin: 0 0 0 0;
    13. padding: 0 0 0 0;
    14. }
    15. #header {
    16. float:left;
    17. overflow:hidden;
    18. display:inline-block;
    19. font-size:0.8em;
    20. background:#797979;
    21. color:#fff;
    22. height:20px;
    23. width:100%;
    24. }
    25. .bloginfo a {
    26. float:left;
    27. color:#fff;
    28. text-align:left;
    29. padding:0 0 0 5px;
    30. }
    31. .admin a {
    32. float:right;
    33. color:#fff;
    34. text-align:right;
    35. padding:0 5px 0 0;
    36. }

    　　part4这篇一开始因为调试显示代码浪费了很多时间。

    NO.4

    这回讲index.php，从这篇开始不帖相关的css内容了，因为详细解释css内容就变成css教程了。

    index.php
    PLAIN TEXT
    PHP:
    1. <?php get_header(); ?>
    3.     <div id="content">
    5.     <?php if (have_posts()) : ?>
    6.        
    7.         <?php while (have_posts()) : the_post(); ?>
    8.                
    9.             <div class="post">
    10.                 <h1 id="post-<?php the_ID(); ?>"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h1>
    11.                 <p class="date"><?php the_author() ?> @ <?php the_time() ?> <?php the_time('F jS, Y') ?></p>
    12.                
    13.                 <div class="entry">
    14.                     <?php the_content('<br /><br />[more...]'); ?>
    15.                 </div>
    16.             </div>
    17.        
    18.             <div class="meta">
    19.           <?php the_category(', ') ?> <strong>|</strong> <?php edit_post_link('Edit','','<strong>|</strong>'); ?>  <?php comments_popup_link('Comments (0)', 'Comments (1)', 'Comments (%)'); ?>
    20.               </div>
    22.             <!--
    23.             <?php trackback_rdf(); ?>
    24.             -->
    25.    
    26.         <?php endwhile; ?>
    28.         <div class="navigation">
    29.             <div class="alignleft"><?php posts_nav_link('','','&laquo; Previous Entries') ?></div>
    30.             <div class="alignright"><?php posts_nav_link('','Next Entries &raquo;','') ?></div>
    31.         </div>
    32.        
    33.     <?php else : ?>
    35.         <h2 class="center">Not found.</h2>
    36.         <p class="center"><?php _e("Sorry, but you are looking for something that isn't here."); ?></p>
    37.         <?php include (TEMPLATEPATH . "/searchform.php"); ?>
    39.     <?php endif; ?>
    41.     </div><!-- content -->
    42.        
    43. <?php get_sidebar(); ?>
    45. <?php get_footer(); ?>

     

    • line1, line43, line45: 负责把header.php, sidebar.php, footer.php的内容引入，这样这几部分就作为一个整体展现在访问者面前了。
    • line5-line26: 其中内容就是每篇post在首页的显示内容。一般来说分成三个部分：标题，包括文章題目，作者名字，写作时间；正文内容；留言提示，比如有多少留言，文章所属分类。至于具体位置随个人爱好，如果你不懂php也没什么关系，随便找一个模版然后依样画葫芦copy & paste就可以了。
    • line28-line31: 导航栏。就是下一页/上一页这个东西。
    • line35-line37: 这个是当一篇文章都没有的时候显示的报措信息。

    　　基本上index.php主要内容就是一个循环语句，不断显示每篇文章直到你后台设定的那个显示文章数为止。
    　　这篇内容比较少，明天会把有关sidebar.php和footer.php的part5跟上。到part5其实整个模版就接近完成了，其他的几个文件基本上都是从这几个文件中演变出去，不会太费事。

    NO.5

    这次讲sidebar.php和footer.php，这两个其实能讲的不多，一般来说各位拿到一个模版最可能改的就是这两个文件了。

    sidebar.php

    PLAIN TEXT
    PHP:
    1. <div id="menu">
    2.         <div id="nav">
    3.             <ul>
    4.             <li><a href="<?php bloginfo('url'); ?>">首页</a></li>
    5.             <li><a href="1" title="1">留言</a></li>
    6.             <li><a href="2" title="2">链接</a></li>
    7.             <li><a href="3" title="3">存档</a></li>
    8.             </ul>
    9.         </div><!-- nav -->
    10.         <div id="about">
    11.         <h2>About Me</h2>
    12.         <p>　　关于我　　关于我　　关于我　　关于我　　关于我　　关于我　　关于我　　关于我　　关于我　　关于我　　关于我　　关于我</p>
    13.         </div>
    14.         <div id="search">
    15.         <?php _e('Search'); ?>
    16.         <?php include (TEMPLATEPATH . '/searchform.php'); ?>
    17.         </div>
    18.         <div id="rss">
    19.             <ul>
    20.             <li><a href="<?php bloginfo('rss2_url'); ?>">RSS Feed</a></li>
    21.             <li><a href="<?php bloginfo('comments_rss2_url'); ?>">RSS Comments</a></li>
    22.             </ul>
    23.         </div>
    24.     </div><!-- menu -->
    26.     <div id="sub-menu">
    28.         <div class="subleft">
    29.         <h2>存档</h2>
    30.         <ul>
    31.         <?php wp_get_archives('type=monthly'); ?>
    32.         </ul>
    33.         </div>
    35.         <div class="subcenter">
    36.         <ul>
    37.         <?php get_links_list(); ?>
    38.         </ul>
    39.         </div>
    41.         <div class="subright">
    42.         <h2>文章分类</h2>
    43.         <ul>
    44.         <?php wp_list_cats('optioncount=1'); ?>
    45.         </ul>
    46.         </div>
    48.     </div>

    　　KD02模版的sidebar被分成了两个部分：位于右边的部分提供导航菜单、“关于我”、搜索和Feed订阅地址，位于footer上方的分成了三栏来显示一些信息。

    • line1-line24: 是右侧的sidebar。
    • line2-line9: 这是导航菜单的部分，用css控制一下<li>的表现就很容易实现，如果菜单比较多或者少可以调整一下宽度。
    • line11-line13: “关于我”的部分，没什么说的。
    • line14-line17: 搜索部分。
    • line18-line23: Feed订阅地址。
    • line26-line48: 这是footer上方的三栏内容，用三个<div>来分隔，内容不是很重要，各位都会有自己的习惯。

    　　这里提一下sidebar的阴影制作：先决定需要的栏宽；然后做一个1px高度、栏宽宽度+40px的jpg文件；左右作20px适当的灰色；相应css如下。很简单吧，不用作大图片，会根据<div>的高度自适应。

    PLAIN TEXT
    CSS:
    1. #menu {
    2. float:right;
    3. overflow:hidden;
    4. display:inline-block;
    5. font-size:0.8em;
    6. width:213px;
    7. margin: 220px 0 0 0;
    8. background: url(images/fade.jpg) repeat-y;
    9. padding: 0 20px 10px 20px ;
    10. }

    footer.php

    PLAIN TEXT
    PHP:
    1. <div id="footer">
    2.             <?php bloginfo('name'); ?> is proudly powered by
    3.             <a href="http://wordpress.org">WordPress</a>
    4.     </div>
    5. </div><!-- page -->
    7.     <?php do_action('wp_footer'); ?>
    9. </body>
    10. </html>

    　　footer没什么内容，主要就是一些站点的相关信息。计数器之类的非本地站点代码我也建议放在footer里，因为放在header里很可能因为网络原因拖慢整个页面的读入速度。

    Via:kdolphin


    历史上的今天：


    随机文章：


    收藏到：Del.icio.us




    引用地址：
    发表于15:14:03 | 编辑 | 继续话题 | 转发 | 分享　0
    • <<  Wordpress Theme 教程（Wordpress模板制作）1 | 首 页 | 《建国大业》高清DVD  >>