CSS Mac Dock

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

    2008-12-11

    Tag：Wordpress Theme 教程 模板 制作

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

    NO.1

    这篇内容很简单，只是介绍一下需要的工具和WordPress模版的基本结构文件。
    工具：

    • 一个有代码高亮功能的编辑器，Windows推荐Editplus和Crimson Editor，这两个比较小巧，而且后者是免费的。
    • FireFox + WebDeveloper。
    • Internet Explorer，这个谁都有吧，做完了模版还是需要放到这里来看看的。

    文件：

    • 404.php
      404出错信息，当访问者输入了一个不存在的地址就会看到这个页面，可以在这里写一些有用的提示，或者直接给个404 error。
    • archive.php
      控制存档、分类、日期的输出页面。其实这些内容是可以单独控制的，不过大部分模版都不把它们分开对待。
    • comments-popup.php
      弹出留言窗口的输出格式。
    • comments.php
      留言部分的输出格式。
    • footer.php
      一般是用来输出页脚信息的，比如放些模版作者，版权信息之类。
    • header.php
      用来输出标题和菜单项，同时html文件的头信息也放在这里。
    • index.php
      整个首页的主体结构，正文内容输出部分就是放在这里的。
    • page.php
      “页”的模版文件，控制Page的输出内容。
    • screenshot.png
      从WP2.0开始，模版选择会提供缩略图，这个文件就是缩略图文件。
    • search.php
      搜索的结果输出页面。
    • searchform.php
      搜索框的格式定义。
    • sidebar.php
      用于输出侧栏内容。
    • single.php
      当点击一篇文章后，所展示的页面内容由这个文件来控制。
    • style.css
      所有所有页面的具体表现样式都由这个文件来控制。

    　　一旦做起来就会明白，WordPress把一个页面的内容分成了Header + Content + Sidebar + Search Form + Footer这样的结构，对于模版制作者和用户来说这都是一个方便的处理方式。所以，我们后面所作的和搭积木一样简单。

    NO.2

    首先先决定模版的整体样式，假设实例被决定为两栏模版、固定宽度、居中，所不同的是在内容和页脚中间我决定增加一个区块。由此先做一个简单的html文档，用色块把大致的样子表现出来，内容如下：

    PLAIN TEXT
    HTML:
    2.     <head>
    3.     <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
    4.     </head>
    6.     <div id="header">
    7.         <h1>header</h1>
    8.     </div><!-- header -->
    9. <div id="page">
    10.     <div id="content">
    11.         <h1>content</h1>
    12.     </div><!-- content -->
    13.        
    14.     <div id="menu">
    15.         <h1>menu</h1>
    16.     </div><!-- menu -->
    17.     <div id="sub-menu">
    18.         <h1>sub-menu</h1>
    19.     </div><!-- sub-menu -->
    20.     <div id="footer">
    21.         <h1>footer</h1>
    22.     </div><!-- footer -->
    23.    
    24. </div><!-- page -->
    25. </body>
    26. </html>

    　　content, menu, sub-menu, footer这四个div都从属于page这个div，这样只需要对page作定义就能控制整个blog内容、侧栏、页脚的位置了。header部分一开始是决定放一个100%宽度的图片，所以独立在page之外。
    　　接下来创建style.css来定义页面的具体表现：

    PLAIN TEXT
    CSS:
    1. html, body {
    2. margin: 0;
    3. padding: 0;
    4. }
    5. #header {
    6. float:left;
    7. overflow:hidden;
    8. display:inline-block;
    9. background:#fcc;
    10. height:140px;
    11. width:100%;
    12. }
    13. #page {
    14. width:784px;
    15. margin:0 auto 0 auto;
    16. padding:0 0 0 0;
    17. }
    18. #content {
    19. float:left;
    20. overflow:hidden;
    21. display:inline-block;
    22. background:#9cf;
    23. width:520px;
    24. height:340px;
    25. padding: 0 0 0 0;
    26. }
    27. #menu {
    28. float:right;
    29. overflow:hidden;
    30. display:inline-block;
    31. background:#ffc;
    32. width:213px;
    33. height:340px;
    34. }
    35. #sub-menu {
    36. float:left;
    37. overflow:hidden;
    38. display:inline-block;
    39. background:#cfc;
    40. width:100%;
    41. height:140px;
    42. }
    43. #footer {
    44. float:left;
    45. overflow:hidden;
    46. display:inline-block;
    47. background:#ccf;
    48. width:100%;
    49. }

    　　这个html文件的实际效果如下
    ss1

    　　接下来就是把这个index.html文件拆成WordPress模版文件中的header.php, index.php, sidebar.php, footer.php，如下：
    header.php

    PLAIN TEXT
    PHP:
    1. <html>
    2.     <head>
    3.     <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
    4.     </head>
    5. <body>
    6.     <div id="header">
    7.         <h1>header</h1>
    8.     </div><!-- header -->
    9. <div id="page">

    index.php

    PLAIN TEXT
    PHP:
    1. <?php get_header(); ?>
    2.     <div id="content">
    3.         <h1>content</h1>
    4.     </div><!-- content -->
    5. <?php get_sidebar(); ?>
    6. <?php get_footer(); ?>

    sidebar.php

    PLAIN TEXT
    PHP:
    1. <div id="menu">
    2.         <h1>menu</h1>
    3.     </div><!-- menu -->
    4.     <div id="sub-menu">
    5.         <h1>sub-menu</h1>
    6.     </div><!-- sub-menu -->

    footer.php

    PLAIN TEXT
    PHP:
    1. <div id="footer">
    2.         <h1>footer</h1>
    3.     </div><!-- footer -->
    4.    
    5. </div><!-- page -->
    6. </body>
    7. </html>

    　　很简单吧，只是在index.php开头和结尾增加两句来调用其他文件，其他只是copy & paste而已。现在，我们已经得到了四块积木了。顺便说一句:在每一个</div>后面写注释，就是因为拆开后经常会忘记某个</div>它的另一半是哪里的。

    Via:kdolphin


    历史上的今天：


    随机文章：


    收藏到：Del.icio.us




    引用地址：
    发表于14:45:34 | 编辑 | 继续话题 | 转发 | 分享　0
    • <<  抓色小猫-绿色屏幕抓取软件 | 首 页 | Wordpress Theme 教程（Wordpress模板制作）2  >>


    评论

  • 为什么一定要拆分 index 文件呢？
    anyLiv | 发表于2009-08-14 17:43:14 [回复]
  • UNnet回复说：直接复制“源文件”可用。
    kevin | 发表于2009-03-28 20:05:59 [回复]
  • 我想把它放在我的BLOG具体要怎么设置呢？是不是要用HELLOFALSH的插件，然后接下来应该改那些代码呢？能教教我吗？先谢啦
    vincent | 发表于2009-03-27 20:39:17 [回复]
  • 想问一下你网站那三条小鱼是怎么做的，好可爱
    回复vincent 说：
    flash金鱼，可直接复制“源文件”用。
    2009-03-26 14:08:19
    vincent | 发表于2009-03-23 18:39:26 [回复]