娱乐之传奇巨星免费:海豚的WordPress Theme教程 part3

来源:百度文库 编辑:偶看新闻 时间:2024/04/29 16:15:14

海豚的WordPress Theme教程 part3

kDolphin @ 10:04 pm April 3rd, 2006

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

PLAIN TEXTPHP:
  1.    
  2.    
  3.     <?php bloginfo(‘name‘); ?> <?php if ( is_single() ) { ?> » Blog Archive <?php } ?> <?php wp_title(); ?>
  4.  
  5.    
  6.    
  7.    
  8.  
  9.    
  10.  
  11.    
  12.  
  13.    
  14.    
  15.  
  16.    
  17.    
  18.    
  19.  
  20.    
  21.        
  22.        
  23.        
  •        
  •        
  •         Sub-Menu
  •        
  •    
  •    
  •  

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

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

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

    part4我会很快跟上,这篇一开始因为调试显示代码浪费了很多时间。