之前第二章中已經瞭解了 WordPress 的模板檔案和頁面結構,下面你就要開始寫 WordPress 程式碼了。這裡建議在本地電腦上安裝 WordPress,而不是安裝到伺服器上,因為本地更方便測試。
第 1 步:安裝 Zerver 整合 php 執行環境
Zerver 是一個 C#開發的 nginx+php+mysql+memcached 綠色整合執行環境。對於一些初步的 php 程式開發執行很方便。
我這邊用的是 Zerver2.3,最新版本的 2.4 好像已經出了,大家可以選擇性去網上下載。
單擊 Zerver.exe 啟動後的介面所示:
各個服務可以選擇性開啟和關閉。不用的時候也可以直接退出。網站可以直接放在根目錄 html 資料夾內。
第 2 步:建立你的主題資料夾
主題安裝完成後 (如何安裝 WordPress 程式就不說了,這個不知道的,下面也就不用看了) 進入你本地安裝的 WordPress 主題資料夾。
在..zerver2.3htmlDemowp-content hemes 路徑資料夾中建立一個新的資料夾,可以任何命名 (如果:YusiDemo) 。
第 3 步:建立 index.php 和 style.css 檔案
開啟 EditPlus 或者你選擇的文字編輯器,把 index.txt 這個檔案中的所有內容都複製到你的文字編輯器。儲存為 index.php 。
再另外新建一個檔案,直接儲存為 style.css 到相同的資料夾下。在 style.css 中加入 css 註釋 (可以自定義):
/* Theme Name: YusiDemo Theme URI: http://.weixiaoduo.com Description:WordPress Themes Version: 1.0 Author: Yusi Author URL: http://.weixiaoduo.com/ */
如果你想釋出在 WordPress 官方主題庫裡面,你還可以為主題新增一些標籤:
/* Tags: YusiDemo, WordPress theme, Yusi, Web */
現在有兩個檔案了: index.php 和 style.css.
index.php 解釋:
Doctype – 指明你用哪種型別的程式碼來編碼你的主題。這裡你暫時還不用管它的詳細意思。
<html> 是網頁開始的地方。
<head> 是你的網頁頭部開始的地方。每個網頁都有一個頭部和主體。</head> 是頭部結束的地方。
<?php bloginfo(』stylesheet_url』); ?> 是一個 PHP 函式,它能取得 style.css 檔案所在的路徑,這樣主題就能使用 style.css 樣式化頁面上所有元素。任何時候,PHP 程式碼都是在 <?php 和 ?> 之間的。 PHP 程式碼和 HTML 的程式碼是不一樣的,在 PHP 中,<?php 代表開始 PHP 程式碼而?> 是結束 PHP 程式碼。
所以讓我們重新看一下<?php bloginfo(『stylesheet_url』); ?>
<?php:PHP 語句開始。
bloginfo(『stylesheet_url』):輸出部落格資訊,什麼資訊呢?括號內的 stylesheet_url 就是 bloginfo 的一個引數,它告訴 bloginfo 是樣式表 (stylesheet) 的 url 地址資訊,既然是引數,那一般都不是是單一的, bloginfo 函式的引數除了 stylesheet_url 還有很多,例如:name 部落格名稱、 description 部落格描述、 url 部落格 URL 、 charset 部落格的編碼方式等等。
;:結束 bloginfo() 函式,分號同時也是關閉 PHP 函式的方式之一。
?>:PHP 語句結束
<body> – 這是網頁主體開始的地方。你能在網頁上看到和讀到的東西就是主體部分。你正在閱讀的這個教程說明你在正在看當前這個網頁的主體部分。
</body> 是網頁主體結束的地方。
</html> 是網頁結束的地方,沒有東西在它的後面了。
第 4 步:安裝你的 WordPress 主題
開啟瀏覽器。在位址列輸入輸入 http://localhost/Demo/wp-login.php 。登入到你的 WordPress 管理後臺。 (這裡能夠看到 WordPress 登入頁面是因為你在第 1 步的時候啟動了 zerver 。否者的話,在這裡你的瀏覽器會報找不到的錯誤。)
在管理介面下到 外觀 (Apperance) 選單並啟用名為 YusiDemo 的主題。
注意:你的主題檔案沒有螢幕縮圖,所以是空白的。沒錯,我們先啟用就可以了。
好了今天就到這裡吧。下次再說下面的內容!有任何問題直接在評論裡面回覆吧!