Home / WordPress / Wordpress佈景主題教學 / WordPress佈景主題教學2-開始index.php

WordPress佈景主題教學2-開始index.php

暨上一篇 WordPress佈景主題教學1-佈景基本架構認識這邊我要開始介紹如何新增佈景內容,就以一個免費模版來做講解

請先下載http://www.oswd.org/design/information/id/3289/

步驟一:把圖片的資料夾Imgs、 screenshot.jpg放到相對應位置(請參考教學:)

佈景資料夾名稱:RaiseDigital

wp-content/themes/RaisDigital

 

步驟二:編輯index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title><?php bloginfo('name'); ?></title>
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/style.css" />
</head>
<body>
<div id="container">
<div id="content">
<h2>Good Morning Budapest</h2>
<div id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<h3>Title 1</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean in dolor. Donec molestie, quam sit amet rhoncus condimentum, augue nisl condimentum mauris, a condimentum arcu diam eu tortor. Praesent urna eros, tincidunt in, interdum eu, iaculis eu, turpis. Fusce ac diam. Pellentesque bibendum. Aenean hendrerit purus.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean in dolor. Donec molestie, quam sit amet rhoncus condimentum.</p>

<h3>Title 2</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean in dolor. Donec molestie, quam sit amet rhoncus condimentum, augue nisl condimentum mauris, a condimentum arcu diam eu tortor. Praesent urna eros, tincidunt in, interdum eu, iaculis eu, turpis. Fusce ac diam. Pellentesque bibendum. Aenean hendrerit purus.</p>
</div>
<div id="footer">Picture from: <strong>www.sxc.hu</strong>
|&nbsp;Copyright &copy; 2006 <strong>www.your-web-site.com</strong>
</div>
</div>
</body>
</html> 

Bloginfo是什麼?請參考WordPress佈景主題教學4-bloginfo() 語法應用

 

步驟三:再來編輯style.css

/*

Theme Name: RaiseDigital
Theme URI: http://www.raisedigi.com
Description: A Basic Theme
Author: harry
Author URI: http://www.raisedigi.com
Version: 1.0

License:
License URI:
*/
/* CSS Document */
body {
background:url(Imgs/imgDecor.gif) center repeat-x;
font-family:"Times New Roman", Times, serif;
font-size:14px;
padding:5px;
}

#container {
margin:0px auto 0px auto;
background:url(Imgs/imgBackground.jpg) top left no-repeat;
border:#993939 1px solid;
width:800px;
height:660px;
}

#container a {
text-decoration:none;
color:#FFFFFF;

}

#container a:hover {
color:#999999;
}

#menu {
text-align:center;
}

#menu li {
display:inline;
}

#menu li a {
margin-right:10px;
text-decoration:none;
color:#FFFFFF;
}

#menu li a:hover {
color:#993939;
}

#content {
color:#FFFFFF;
margin-top:15px;
margin-left:20px;
padding:5px;
width:407px;
height:620px;
border:#838659 1px solid;
}

#content h2 {
color:#AAAAAA;
text-align:right;
font-family:English;
font-size:26px;
margin-top:5px;

}

#content h3 {
font-style:italic;
font-size:18px;
font-weight:bold;
margin:5px;
padding-left:20px;

}

#content p {
color:#EFEFEF;
margin:5px 5px 15px 5px;
}

#footer {
color:#FFFFFF;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
text-align:right;
margin-right:5px;
}

 

完成囉!!

下一篇
主要要教大家如何運用 wordpress主迴圈 讓後台文章可以顯示在您得佈景上喔

About RaiseDigital

RaiseDigital上升數位 官方網站 | 粉絲團