之前第二章中已經瞭解了 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 的主題。

注意:你的主題檔案沒有螢幕縮圖,所以是空白的。沒錯,我們先啟用就可以了。

好了今天就到這裡吧。下次再說下面的內容!有任何問題直接在評論裡面回覆吧!