本文讓我們來(lái)繼續(xù)學(xué)習(xí)wordpress主題開(kāi)發(fā)頭部Header模板開(kāi)發(fā)。
第1步:打開(kāi) XAMPP 和主題文件夾。
打開(kāi) Xampp,然后打開(kāi)上次創(chuàng)建的主題文件夾,
xampp/htdocs/wordpress/wp-content/themes/tutorial。我們應(yīng)該看到上次創(chuàng)建的兩個(gè)文件:index.php 和style.css。
index.php 和 style.css 文件的內(nèi)容應(yīng)該和index.txt 和 style.txt 一致。
第2步:打開(kāi) index.php
打開(kāi)瀏覽器,轉(zhuǎn)到
http://localhost/wordpress。因?yàn)樯洗伟惭b了一個(gè)空白的主題,這時(shí)我們應(yīng)該看到一個(gè)空白的頁(yè)面。
返回主題文件夾并打開(kāi) index.php 文件。
到目前為止,我們已經(jīng)打開(kāi)了主題文件夾,瀏覽器和 index.php 文件。
第3步:調(diào)用博客標(biāo)題
編輯 index.php 文件。在 <body> 和 </body> 這兩個(gè)標(biāo)簽之間輸入 <?php bloginfo(‘name’); ?>,然后保存它。
返回到瀏覽器并刷新。這時(shí)候我們應(yīng)該能夠看到博客的標(biāo)題。博客的標(biāo)題是 Demo Theme Development。
剛才發(fā)生什么了?
我們?cè)诰W(wǎng)頁(yè)的主體 (body) 之間加入了一行 PHP 代碼到 index.php。bloginfo() 是調(diào)用博客的信息的函數(shù)。其中參數(shù) name 代表了它調(diào)用的是博客的標(biāo)題。這個(gè)名字是在 option 頁(yè)面中設(shè)置的 Weblog Title。
<?php – 開(kāi)始 PHP 代碼
bloginfo(‘name’) – 調(diào)用博客信息,具體是博客的標(biāo)題。
; – 結(jié)束調(diào)用博客信息
?> – 結(jié)束 PHP 代碼
每次我們?cè)?index.php 文件中增加或者更改任何東西之后,都可以保存,然后刷新頁(yè)面去查看結(jié)果。
第4步:調(diào)用博客鏈接
調(diào)用了博客的標(biāo)題之后,接下來(lái)就要把博客的標(biāo)題放入超鏈接中,這時(shí)候需要一個(gè) XHTML 標(biāo)簽。
返回 index.php 文件。
在同一行增加 <a href=”#”> 和 </a>。此時(shí)新行的代碼應(yīng)該是:
<a href=”#”><?php bloginfo(‘name’); ?></a>
返回到瀏覽器,刷新,然后就可以看到博客的標(biāo)題變成了鏈接。
現(xiàn)在它是一個(gè)鏈接,但是它沒(méi)有鏈接到哪里。因?yàn)檫@個(gè)是博客的標(biāo)題,我們應(yīng)該讓它鏈接到首頁(yè)。為此,在 href=后的雙引號(hào)中輸入 <?php bloginfo(‘url’); ?>
保存,現(xiàn)在的代碼應(yīng)該是:
<a href=”<?php bloginfo(‘url’); ?>”><?php bloginfo(‘name’); ?></a>
返回到瀏覽器,刷新,當(dāng)鼠標(biāo)在鏈接上面的時(shí)候,瀏覽器的狀態(tài)欄應(yīng)該顯示
http://localhost/wordpress
現(xiàn)在點(diǎn)擊這個(gè)鏈接,它就會(huì)讓我們返回首頁(yè)??赡墁F(xiàn)在看到的還是相同的頁(yè)面,但是用 # 或者
http://localhost/wordpress 作為鏈接地址是完全不一樣的。在接下來(lái)的課程我們會(huì)學(xué)到他們之間的不同。
剛才發(fā)生什么了?
我們把網(wǎng)站名字變成了鏈接,并使它鏈接到博客的主頁(yè)。
bloginfo(‘url’) – 調(diào)用博客基本信息,具體是首頁(yè)的的地址或者 URL
<a> – 是一個(gè)用于添加鏈接的 XHTML 標(biāo)簽
</a> – 鏈接的結(jié)束標(biāo)簽。否則網(wǎng)頁(yè)將不知道哪里結(jié)束鏈接,這樣會(huì)使得頁(yè)面接下來(lái)的內(nèi)容全部都變成鏈接。還記得規(guī)則 #1嗎?正確關(guān)閉打開(kāi)的所有標(biāo)簽。
href=”” – 超文本的簡(jiǎn)寫(xiě)。在引號(hào)之間就是它的值。
最終代碼為:
<a href=”<?php bloginfo(‘url’); ?>”><?php bloginfo(‘name’); ?></a>
意思為:開(kāi)始一個(gè)鏈接,鏈接的地址是博客的URL,用 PHP 函數(shù) bloginfo(‘url’) 去調(diào)用這個(gè)地址或者URL。這個(gè)鏈接的文本是博客的標(biāo)題并使用 PHP 函數(shù)bloginfo(‘name’) 去調(diào)用博客的標(biāo)題。最后結(jié)束鏈接。
這篇主要介紹了 WordPress 主題的 XHTML 代碼,下一篇我們將繼續(xù) Header 模板。
未經(jīng)允許不得轉(zhuǎn)載:445IT之家 » WordPress主題開(kāi)發(fā)教程四:編寫(xiě)Header模板(一)