海豚的WordPress Theme教程 part2

kDolphin @ 12:07 pm March 20th, 2006

　　一直在考慮part2乃至后面的內容應該怎么寫(xiě)才能真的如我所說(shuō)的“和搭積木一樣簡(jiǎn)單”，于是決定直接拿出實(shí)例來(lái)寫(xiě)，也就是說(shuō)接下來(lái)的內容就是KD02這個(gè)模版的制作過(guò)程。
首先先決定模版的整體樣式，KD02被決定為兩欄模版、固定寬度、居中，所不同的是在內容和頁(yè)腳中間我決定增加一個(gè)區塊。由此先做一個(gè)簡(jiǎn)單的html文檔，用色塊把大致的樣子表現出來(lái)，內容如下：

PLAIN TEXT

HTML:

<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>
<div id="header">
<h1>header</h1>
</div>
<div id="page">
<div id="content">
<h1>content</h1>
</div>
<div id="menu">
<h1>menu</h1>
</div>
<div id="sub-menu">
<h1>sub-menu</h1>
</div>
<div id="footer">
<h1>footer</h1>
</div>
</div>
</body>
</html>

content, menu, sub-menu, footer這四個(gè)div都從屬于page這個(gè)div，這樣只需要對page作定義就能控制整個(gè)blog內容、側欄、頁(yè)腳的位置了。header部分一開(kāi)始是決定放一個(gè)100%寬度的圖片，所以獨立在page之外。
接下來(lái)創(chuàng )建style.css來(lái)定義頁(yè)面的具體表現：

PLAIN TEXT

CSS:

html, body {
margin: 0;
padding: 0;
}
#header {
float:left;
overflow:hidden;
display:inline-block;
background:#fcc;
height:140px;
width:100%;
}
#page {
width:784px;
margin:0 auto 0 auto;
padding:0 0 0 0;
}
#content {
float:left;
overflow:hidden;
display:inline-block;
background:#9cf;
width:520px;
height:340px;
padding: 0 0 0 0;
}
#menu {
float:right;
overflow:hidden;
display:inline-block;
background:#ffc;
width:213px;
height:340px;
}
#sub-menu {
float:left;
overflow:hidden;
display:inline-block;
background:#cfc;
width:100%;
height:140px;
}
#footer {
float:left;
overflow:hidden;
display:inline-block;
background:#ccf;
width:100%;
}

這個(gè)html文件的實(shí)際效果如下

　　接下來(lái)就是把這個(gè)index.html文件拆成WordPress模版文件中的header.php, index.php, sidebar.php, footer.php，如下：
header.php

PLAIN TEXT

PHP:

<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>
<div id="header">
<h1>header</h1>
</div>
<div id="page">

index.php

PLAIN TEXT

PHP:

<?php get_header(); ?>
<div id="content">
<h1>content</h1>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

sidebar.php

PLAIN TEXT

PHP:

<div id="menu">
<h1>menu</h1>
</div>
<div id="sub-menu">
<h1>sub-menu</h1>
</div>

footer.php

PLAIN TEXT

PHP:

<div id="footer">
<h1>footer</h1>
</div>
</div>
</body>
</html>

很簡(jiǎn)單吧，只是在index.php開(kāi)頭和結尾增加兩句來(lái)調用其他文件，其他只是copy &paste而已?，F在，我們已經(jīng)得到了四塊積木了，所以今天就寫(xiě)到這里吧。順便說(shuō)一句，我喜歡在每一個(gè)</div>后面寫(xiě)注釋?zhuān)褪且驗椴痖_(kāi)后經(jīng)常會(huì )忘記某個(gè)</div>它的另一半是哪里的。

本站僅提供存儲服務(wù)，所有內容均由用戶(hù)發(fā)布，如發(fā)現有害或侵權內容，請點(diǎn)擊舉報。

欧美性猛交XXXX免费看蜜桃,成人网18免费韩国,亚洲国产成人精品区综合,欧美日韩一区二区三区高清不卡,亚洲综合一区二区精品久久

海豚的WordPress Theme教程 part2