WordPress 主題教程 #4a:Header 模板

【轉載自我愛水煮魚

盡量輸入所有代碼而不是直接拷貝我給你的代碼,這樣可以讓你盡量記住你所學到的。

第1步:打開 XAMPP 和主題文件夾。

打開 Xampp,然后打開上次創建的主題文件夾,xampp/htdocs/wordpress/wp-content/themes/tutorial。我們應該看到上次創建的兩個文件:index.phpstyle.css

index.phpstyle.css 文件的內容應該和index.txtstyle.txt 一致。

第2步:打開 index.php

打開瀏覽器,轉到 http://localhost/wordpress。因為上次安裝了一個空白的主題,這時我們應該看到一個空白的頁面。

返回主題文件夾并打開 index.php 文件。

到目前為止,我們已經打開了主題文件夾瀏覽器 index.php 文件

第3步:調用博客標題

編輯 index.php 文件。在 <body></body> 這兩個標簽之間輸入 <?php bloginfo('name'); ?>,然后保存它。

返回到瀏覽器并刷新。這時候我們應該能夠看到博客的標題。博客的標題是 Demo Theme Development。

剛才發生什么了?

我們在網頁的主體 (body) 之間加入了一行 PHP 代碼到 index.phpbloginfo() 是調用博客的信息的函數。其中參數 name 代表了它調用的是博客的標題。這個名字是在 option 頁面中設置的 Weblog Title

<?php - 開始 PHP 代碼
bloginfo('name') - 調用博客信息,具體是博客的標題。
; - 結束調用博客信息
?> - 結束 PHP 代碼

每次我們在 index.php 文件中增加或者更改任何東西之后,都可以保存,然后刷新頁面去查看結果。

第4步:調用博客鏈接

調用了博客的標題之后,接下來就要把博客的標題放入超鏈接中,這時候需要一個 XHTML 標簽。

返回 index.php 文件。

在同一行增加 <a href=”#”></a>。此時新行的代碼應該是:
<a href=”#”><?php bloginfo('name'); ?></a>

返回到瀏覽器,刷新,然后就可以看到博客的標題變成了鏈接。

現在它是一個鏈接,但是它沒有鏈接到哪里。因為這個是博客的標題,我們應該讓它鏈接到首頁。為此,在 href=后的雙引號中輸入 <?php bloginfo('url'); ?>

保存,現在的代碼應該是:
<a href=”<?php bloginfo('url'); ?>”><?php bloginfo('name'); ?></a>

返回到瀏覽器,刷新,當鼠標在鏈接上面的時候,瀏覽器的狀態欄應該顯示 http://localhost/wordpress

現在點擊這個鏈接,它就會讓我們返回首頁。可能現在看到還是是相同的頁面,但是用 # 或者 http://localhost/wordpress 作為鏈接地址是完全不一樣的。在接下來的課程我們會學到到他們之間的不同。

剛才發生什么了?

我們把網站名字變成了鏈接,并使它鏈接到博客的主頁。

bloginfo('url') - 調用博客基本信息,具體是首頁的的地址或者 URL
<a> - 是一個用于添加鏈接的 XHTML 標簽
</a> - 鏈接的結束標簽。否則網頁將不知道哪里結束鏈接,這樣會使得頁面接下來的內容全部都變成鏈接。還記得規則 #1嗎?正確關閉打開的所有標簽。
href="" - 超文本的簡寫。在引號之間就是它的值。

最終代碼為:
<a href=”<?php bloginfo('url'); ?>”><?php bloginfo('name'); ?></a>

意思為:開始一個鏈接,鏈接的地址是博客的URL,用 PHP 函數 bloginfo('url') 去調用這個地址或者URL。這個鏈接的文本是博客的標題并使用 PHP 函數 bloginfo('name') 去調用博客的標題。最后結束鏈接。

這篇主要介紹了 WordPress 主題的 XHTML 代碼,下一篇我們將繼續 Header 模板。


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