WordPress 主題教程 #4b:Header 模板 2

【轉載自我愛水煮魚

最后說一次,開始之前務必先讀下前面的日志。這篇會完成 Herder 模板,并且開始介紹 DIV Box 模型。

第1步:開啟 XAMPP 和打開 index.php

- 啟動 Xampp
- 打開 Tutorial 的主題文件夾
- 打開瀏覽器,在地址欄輸入 http://localhost/wordpress
- 返回主題文件夾,用記事本打開 index.php

第2步:給博客的標題添加 H1 的標簽

現在,index.php 的代碼是:

<a href=”<?php bloginfo(’url’); ?>”><?php bloginfo(’name’); ?></a>

給它添加 <h1></h1> 標簽。H1 標簽意思是標題一。HTML 一共可以有7級標題:H1,H2,H3,H4,H5,H6。按照默認,H1是字體最大而H6是則最小。

添加之后的的 index.php 文件是:
<h1><a href=”<?php bloginfo(’url’); ?>”><?php bloginfo(’name’); ?></a></h1>

保存,返回瀏覽器并刷新。

第3步:添加博客描述

調用博客的描述,則在博客標題鏈接的下面輸入以下代碼: <?php bloginfo(’description’); ?>

現在變成了:

<h1><a href=”<?php bloginfo(’url’); ?>”><?php bloginfo(’name’); ?></a></h1>
<?php bloginfo(’description’); ?>

保存并刷新瀏覽器,可以看到在博客標題鏈接的下面出現博客的描述,我們可以到 WordPress 管理后下修改博客的描述。

<?php - 開始 PHP 代碼
bloginfo(’description’) - 調用博客信息,這里的是描述
; - 停止調用
?> 結束 PHP 代碼

第4步:DIV 標簽

這步將介紹一個新的標簽 -- DIV。

給以上代碼添加 <div></div>標簽:

<div>

<h1><a href=”?php bloginfo(’url’); ?>”><?php bloginfo(’name’); ?></a></h1>
<?php bloginfo(’description’); ?>

</div>

保存,刷新瀏覽器,應該看到沒有任何變化

可以把 DIV 想像成一個無形的盒子 (box)。在這里它把博客標題鏈接博客描述從其他東西中區分開。如果沒有對它進行樣式化,它無非是單獨的內容,以后我們可以會用 style.css 這個文件去樣式化這個無形的盒子。我們可以給 DIV 附上 邊框(borders)填充(paddings), 頁邊空白(margins)背景顏色(background color)背景圖片(background images),以及其他一些東東。

第5步:添加 Header DIV 標簽

添加 id=”header” 到 DIV 標簽,如下:
<div id=”header”>

保存并刷新瀏覽器。

同樣也沒有改變,這里給 DIV 標簽指定了 ID ,因為將會有更多的 DIV 標簽或者無形的盒子,我們使用 ID 來區分!


想在手機閱讀更多Wordpress資訊?下載【香港矽谷】Android應用
分享到Facebook
技術平台: Nasthon Systems