注册 | 登录

海豚的WordPress Theme教程 part2

WordPress 2007-01-22 ray1980 1,518 人浏览

一直在考虑part2乃至后面的内容应该怎么写才能真的如我所说的“和搭积木一样简单”，于是决定直接拿出实例来写，也就是说接下来的内容就是KD02这个模版的制作过程。
首先先决定模版的整体样式，KD02被决定为两栏模版、固定宽度、居中，所不同的是在内容和页脚中间我决定增加一个区块。由此先做一个简单的html文档，用色块把大致的样子表现出来，内容如下：

  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>
  9. <!-- header -->
  10. <div id="page">
  11. <div id="content">
  12. <h1>content</h1>
  13. </div>
  14. <!-- content -->
  15. <div id="menu">
  16. <h1>menu</h1>
  17. </div>
  18. <!-- menu -->
  19. <div id="sub-menu">
  20. <h1>sub-menu</h1>
  21. </div>
  22. <!-- sub-menu -->
  23. <div id="footer">
  24. <h1>footer</h1>
  25. </div>
  26. <!-- footer -->
  27. </div>
  28. <!-- page -->
  29. </body>
  30. </html>

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

接下来创建style.css来定义页面的具体表现：

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

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

header.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>
  9. <!-- header -->
  10. <div id="page">

index.php

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

sidebar.php

  1. <div id="menu">
  2. <h1>menu</h1>
  3. </div>
  4. <!-- menu -->
  5. <div id="sub-menu">
  6. <h1>sub-menu</h1>
  7. </div>
  8. <!-- sub-menu -->

footer.php

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

很简单吧，只是在index.php开头和结尾增加两句来调用其他文件，其他只是copy & paste而已。现在，我们已经得到了四块积木了，所以今天就写到这里吧。

,

17fav 收藏本文

相似日志:

RSS 2.0 Trackback 本文链接: http://www.koryi.net/wp/186.html

农民工不看新闻的20个理由!
海豚的WordPress Theme教程 part3

发表评论

快捷回复 [Ctrl+Enter]

收藏 & 分享

Powered by 17fav.com