WordPress 模板製作教程+常用函數

現在還在改模板。其實模板也找了好久但一直沒有找一款合適的。所以決定先拿模板來改。再開始做模板用。嘿嘿。

所以在網上找了一些做 WordPress 主題的資料。

下面的內容分爲Wordpress模板教程和WordPress模板函數兩部分:

WordPress模板教程 –(轉自蔚藍光輝)

每一套 WP 主題都由結構層、表現層和數據層構成,可以說是典型的、符合 Web 體系標準的“三層結構”。WP主題的這種模式塊化的特點決定了其設計其實是非常簡單,但又極其靈活的。可以說,學會了製作 WP 主題,就相當於基本理解了 Web開發的客戶端模型,對進一步學習掌握 Web 技術具有重要意義。這也正是 WP 的魅力所在!
在一套 WP 主題中,最基本的兩個文件是 index.php 和style.css。其中,前者定義結構和內容,後者定義樣式。所謂結構,就是由指由 XHTML 標籤構成的網頁基本架構。在 WP主題中,結構層主要使用的是添加了適當的 id 或(和)class 屬性的 div 和 ul元素,以便更好地通過表現層來控制頁面的佈局和外觀。所謂表現層,其實就是網頁的佈局和樣式--也就是外觀。表現層由CSS(級聯樣式表)規則定義構成。而數據層,顧名思義,也就是網站中實際顯示的內容,是通過調用 WP內置的函數(有時需要傳遞適當的參數)從數據庫中取得的。
說明:爲簡明起見,本教程不涉及如何定義樣式表(CSS)文件的內容。
事實上,當我們打開某個主題的文件夾時,看到的並不止這兩個文件,而是更多。但一般來說,在一個完整的 WP 主題文件夾中都應該包含下列文件(也稱爲模板文件):
頁面 模板文件 用途

首頁 index.php 顯示網站首頁
單頁 single.php 顯示博文的頁面(相當於細節頁)
靜態頁 page.php 顯示靜態頁的頁面(包含各級靜態頁面)
分類頁 category.php 顯示分類頁的頁面(相當於欄目頁)
存檔頁 archive.php 顯示存檔頁的頁面(相當於按時間歸類的欄目頁)
搜索頁 search.php 顯示搜索結果的頁面
評論頁 comments.php 顯示評論的頁面
彈出式評論頁 comments-popup.php 顯示彈出式評論的頁面
404錯誤頁 404.php 顯示 404 錯誤信息的頁面
級聯樣式表 style.css 控制頁面佈局外觀

除此之外,一套主題模板中還可以包含 author.php、home.php、date.php、searchform.php 以及 functions.php 等頁面(其中部分頁面稍後介紹)。
雖然上面列出了與 WP 內置功能對應的 9 個 php 文件,但製作一套主題遠沒有想像得那麼複雜。因爲事實上,你只需要製作一個 index.php 文件,就可以派生出另外 8 個文件來!
從 WP 應用主題的機制來說,這 9 個模板文件是存在優先級差別的,也可以認爲是重要性不同。它們的優先級順序是:

index.php -> single.php -> page.php -> archive.php -> search.php -> 404.php。

這樣,當不存在後邊的頁面時,WP 會自動調用前面的頁面,直至調用 index.php。比如,當程序調用頁面頁 page.php 時,如果page.php 模板文件不存在,那麼程序會嘗試調用前面的文件--single.php。而如果 single.php也不存在,那麼就會調用最終的 index.php 來顯示頁面頁。可見 index.php屬於“墊底兒”的缺省頁面,它的重要性是最高的。但當存在具體頁面時,還是要優先使用具體的頁面,可見具體的頁面優先級最高。

在明確了 index.php 是一套 WP 主題的核心之後,我們就可以將製作 WP 主題的過程簡單地分成兩步,即--定義主模板文件 index.php 和派生其他模板文件。
定義主模板文件 index.php從頁面佈局的角度上,有必要將主模板文件 index.php 拆分成 header.php、sidebar.php 和footer.php 三個子頁面。WP 專門爲在 index.php 中包含這三個子頁面提供了對應的get_header()、get_sidebar() 和 get_footer() 函數。

下面,就來詳細介紹一下製作 index.php 頁面的過程:

首先,在 myThemes 文件夾中建立一個文本文件並將其重命名爲 index.php,然後再建立一個 style.css 文件(內容暫時留空)。
然後,用你喜歡的文本編輯器打開 index.php 並輸入下列代碼(最好複製,因爲這一部分不重要):

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“><htmlxmlns=”http://www.w3.org/1999/xhtml“><headprofile=”http://gmpg.org/xfn/11“><metahttp-equiv=”Content-Type”content=<?phpbloginfo(’html_type’);?>;
charset=<?phpbloginfo(’charset); ?>” />
<title><?phpbloginfo(’name); ?><?phpif ( is_single() ) { ?> » Blog Archive <?php } ?><?phpwp_title(); ?></title><metaname=”generator”content=”WordPress<?phpbloginfo(’version’);?>” />
<!– leave this for stats –>
<linkrel=”stylesheet”href=<?phpbloginfo(’stylesheet_url’);?>”
type=”text/css” media=”all” />
<linkrel=”stylesheet”href=<?phpbloginfo(’stylesheet_directory’);?>
/print.css” type=”text/css” media=”print” />
<linkrel=”alternate”type=”application/rss+xml”title=<?phpbloginfo(’name’);?>
RSS Feed” href=”<?phpbloginfo(’rss2_url); ?>”/>
<linkrel=”pingback”href=<?phpbloginfo(’pingback_url’);?>” />
<?phpwp_head(); ?></head><body></body></html>

顯然,這是一些構成網頁文件的 HTML 代碼,當然其中包含 PHP 代碼。如前所述,HTML 代碼定義結構,而 PHP 代碼用於生成內容。
在 WP 後臺的“主題”模塊中,選擇 myTheme 主題。然後,在瀏覽器中觀察你的 WP 外觀。此時,應該顯示頁面一片空白。但通過“查看源文件”,你會發現 index.php 中的 PHP 代碼已經生成了一些頭部內容。
接着,我們開始動手定義 index.php 中 body 部分的結構和內容。
(一)構建 header在 body 元素內,新建如下結構化標記元素,注意各元素都帶有不同的 id 屬性:

<divid=”page”><divid=”header”></div><divid=”content”></div><divid=”sidebar”></div><divid=”footer”></div></div>

然後,在該元素的兩個標籤之間輸入下列代碼:

<h1><ahref=<?phpbloginfo(’url’);?>”title=”<?phpbloginfo(’name); ?>”><?phpbloginfo(’name);?></a></h1><p><?phpbloginfo(’description); ?></p>

這裏用到了 WP 內置的 bloginfo 函數來生成內容,其中:

bloginfo(’url’)返回網站主頁鏈接;
bloginfo(’name’)返回網站標題;
bloginfo(’description’)返回網站描述。

保存 index.php 文件,然後在瀏覽器中按 F5 刷新一下頁面,看能看到什麼?再通過“查看源文件”,覈對一下由 WP 的 bloginfo() 函數生成的相關信息。
(二)構建 content在中,我們要通過循環顯示博文,包括每個博文的標題、作者、發表日期以及其他相關信息。並且,可以分頁顯示博文(取決於 WP 後臺的設置)。

首先,在

之間輸入下列代碼:

<?phpwhile (have_posts()) : the_post(); ?><divclass=”post”id=”post-<?phpthe_ID()?>”>
<!– 博文標題及鏈接 –>
<h2><ahref=<?phpthe_permalink()?>” rel=”bookmark” title=”<?phpthe_title(); ?>”>
<?phpthe_title(); ?></a></h2>
<!– 發表日期 –>
<divclass=”post-date”><spanclass=”post-month”><?phpthe_time(’M) ?></span><spanclass=”post-day”><?phpthe_time(’d) ?></span></div>
<!– 作者 –>
<spanclass=”post-author”><?php_e(’Author); ?><?phpthe_author(, ) ?></span>
<!– 類別 –>
<spanclass=”post-cat”><?php_e(’Categories); ?><?phpthe_category(, ) ?></span>
<!– 註釋 –>
<spanclass=”post-comments”><?phpcomments_popup_link(’NoComments», ‘1Comment», %Comments»); ?></span>
<!– 內容 –>
<divclass=”entry”><?phpthe_content(»); ?></div>
<!– 其他元(Meta)數據 –>
<divclass=”post-meta”><?phpedit_post_link(,|,); ?></div></div><?phpendwhile; ?><divclass=”navigation”><spanclass=”previous-entries”><?phpnext_posts_link()?></span><spanclass=”next-entries”><?phpprevious_posts_link() ?></span></div><?phpelse : ?><divclass=”post”><h2><?php_e(’NotFound); ?></h2></div><?phpendif; ?>

看似複雜,其實不然。首先:

<?phpif (have_posts()) : ?><?phpelse : ?><?phpendif; ?>

這三行,在 WP 中表示 if 控制結果。注意,if 語句通過測試 have_posts() 函數來測試是否存在博文。而

<?phpwhile (have_posts()) : the_post(); ?><?phpendwhile; ?>

這兩行,是 WP 中的 while 循環。其中,while 語句通過測試 have_posts() 決定是否調用 the_post()函數。如果測試 have_posts() 返回 true,則調用 the_post() 函數,初始化與博文相關的內置變量。
在 while 循環內部,首先要注意通過 div、h2、span 這三個元素定義的嵌套語義結構,以及相應元素的 class 和 id屬性(其中只爲 class 爲 post 的 div 元素定義了一個 id 屬性--post-)。這是將來使用 CSS 控制外觀的關鍵所在。在這個 div 元素中,爲顯示博文的相關信息,分別調用了以下 WP 函數:

the_ID():返回博文 ID;
the_permalink():返回博文固定鏈接 URL;
the_title():返回博文標題;
the_time(’M’):返回發表日期中的月份;
the_time(’d’):返回發表日期中的天;
the_author():返回博文作者;
the_category():返回博文的類別;
the_content():返回博文的內容,其中的參數表示用於“更多內容”的鏈接文本;

以上函數都是以 the_ 開頭的,加上後面的函數名不僅頗有自解釋的味道,而且令人聯想到 this 關鍵字。此外
_e() 函數是一個包裝函數,這個函數主要用於語言的轉換,如果調用該函數並傳遞標準的 WP 術語,如:Author 或 Categories,則返回你相應語言包中的譯文,在中文包中分別是“作者”和“類別”。當然,不用也可。但會失去一些適應性。

還有,omments_popup_link() 和 edit_post_link() 兩個函數,分別顯示註釋和編輯鏈接,這裏不多說了。

另外,在 後面顯示了分頁導航鏈接,調用的函數分別是:next_posts_link() 和previous_posts_link()。此時,如果你的博文總數小於 WP 後臺設置的最多顯示數目,比如:你在後臺設置最多顯示 5篇,而你有 10 篇博文,就會分頁顯示;否則,如果你的博文少於或等於 5 篇則看不到分頁導航鏈接。
最後,不要丟下 語句後面的內容:

<divclass=”post”><h2><?php_e(’NotFound); ?></h2></div>

顯然,這是一個錯誤提示信息。
(三)構建 sidebarsidebar 的內容當然要在元素中構建了。sidebar,中文叫側邊欄,其中可以包含很多內容。比如:分類、頁面、鏈接、日曆等等導航及相關信息。在 WP 中,sidebar 中的內容都以無序(ul)或有序(ol)列表的形式輸出。因此,需要在中輸入以下標記:

<ul><?phpif ( !function_exists(’dynamic_sidebar) ||!dynamic_sidebar() ) : ?><liid=”search”><?phpinclude(TEMPLATEPATH ./searchform.php); ?></li><liid=”calendar”><h2><?php_e(’Calendar); ?></h2><?phpget_calendar(); ?></li><?phpwp_list_pages(’title_li=<h2></h2>); ?><liclass=”catnav”><h2><?php_e(’Categories); ?></h2><ul><?phpwp_list_cats(’sort_column=name&optioncount=1&hierarchical=0); ?></ul></li><liclass=”archivesnav”><h2><?php_e(’Archives); ?></h2><ul><?phpwp_get_archives(’type=monthly); ?></ul></li><liclass=”blogrollnav”><h2><?php_e(’Links); ?></h2><ul><?phpget_links(-1, <li>, </li>, <br/>, FALSE, ‘id, FALSE, FALSE, -1, FALSE); ?></ul></li><liclass=”meta”><h2><?php_e(’Meta); ?></h2><ul><?phpwp_register(); ?><li><?phpwp_loginout(); ?></li><?phpwp_meta(); ?></ul></li><?phpendif?></ul>

以上代碼從第三行開始,分別通過包含 searchform.php 顯示搜索表單;

調用 get_calendar() 函數顯示日曆;
調用 wp_list_pages() 函數顯示頁面導航;
調用 wp_list_cats() 函數顯示分類導航;
調用 wp_get_archives() 函數顯示存檔導航;
調用 get_links() 函數顯示鏈接導航。

在構建側邊欄時,要爲生成搜索框新建一個 searchform.php 文件,其內容如下:

<formmethod=”get”id=”searchform”action=<?phpbloginfo(’home’);?>/”>
<div><inputtype=”text”value=<?phpechowp_specialchars($s,1);?>” name=”s” id=”s” size=”15″ /><br/><inputtype=”submit”id=”searchsubmit”value=”Search”/></div></form>

將其保存在 myTheme 文件夾中,通過 include 語句包含進來就可以了。注意,常量 TEMPLATEPATH 中保存的是模板路徑。
最後,說明一下以上代碼第二行和倒數第二行。顯然這是一個 if 語句塊。那這個 if 語句塊包含 sidebar是何用意呢?這是部件化側邊欄的需要,就是讓 sidebar 適合 Widget 插件(WP 2.0 後內置了Widget,所以不用再安裝了)。如果要使用 Widget 插件,必須對 sidebar 進行部件化。這樣,在 WP 後臺通過 Widget插件你就可以使用拖動來方便地定義側邊欄的組件了。部件化側邊欄,除了在 ul 元素內側放入這個 if 語句之外,還必須在 myTheme文件夾中建立一個文件 functions.php,其內容如下:

<?phpif ( function_exists(’register_sidebar) )
register_sidebar(array(
‘before_widget=><liid=%1$sclass=”widget%2$s>,
‘after_widget=></li>,
‘before_title=><h2class=”sidebartitle>,
‘after_title=></h2>,
));
?>

(四)構建 footerfooter 中一般都一些版權信息和不太重要的鏈接。所以可以在元素中簡單地放入下列代碼:

<p>Copyright © 2007 <?phpbloginfo(’name); ?></p>

至此,核心 index.php 文件就算是大功告成了!

接下來,是拆分 index.php 和基於 index.php 派生子模板文件。

在 myTheme 文件夾中新建 header.php、sidebar.php 和 footer.php 三個文件。把index.php 中的

<divid=”header”></div>
<divid=”sidebar”></div>

<divid=”footer”></div>

三個結構化元素及其內容分別轉移(剪切)到這三個新文件中。然後,在

<divid=”header”></div>

原來的位置處輸入代碼:

<?phpget_header();?>

在原來的位置處輸入代碼:

<?phpget_sidebar();?>

在原來的位置處輸入代碼:

<?phpget_footer();?>

前面說過,這三個 get 函數是 WP 專門爲包含結構化的文件定義的。現在你的 index.php 文件應該如下所示:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“><htmlxmlns=”http://www.w3.org/1999/xhtml“><headprofile=”http://gmpg.org/xfn/11“><metahttp-equiv=”Content-Type”content=<?phpbloginfo(’html_type’);?>; charset=<?phpbloginfo(’charset);?>” /><title><?phpbloginfo(’name); ?><?phpif (is_single() ) { ?> » Blog Archive <?php } ?><?phpwp_title(); ?></title><metaname=”generator”content=”WordPress<?phpbloginfo(’version’);?>” /> <!–leave this for stats –><linkrel=”stylesheet”href=<?phpbloginfo(’stylesheet_url’);?>” type=”text/css” media=”all” />
<linkrel=”stylesheet”href=<?phpbloginfo(’stylesheet_directory’);?>/print.css” type=”text/css” media=”print” />
<linkrel=”alternate”type=”application/rss+xml”title=<?phpbloginfo(’name’);?> RSS Feed” href=”<?phpbloginfo(’rss2_url);?>” />
<linkrel=”pingback”href=<?phpbloginfo(’pingback_url’);?>” /><?phpwp_head(); ?></head><body><divid=”page”><?phpget_header(); ?> <!– content –>
<divid=”content”><?phpif (have_posts()) : ?><?phpwhile (have_posts()) : the_post(); ?><divclass=”post”id=”post-<?phpthe_ID()?>”>
<!– 博文標題及鏈接 –>
<h2><ahref=<?phpthe_permalink()?>” rel=”bookmark” title=”<?phpthe_title(); ?>”>
<?phpthe_title(); ?></a></h2>
<!– 發表日期 –>
<divclass=”post-date”><spanclass=”post-month”><?phpthe_time(’M) ?></span><spanclass=”post-day”><?phpthe_time(’d) ?></span></div>
<!– 作者 –>
<spanclass=”post-author”><?php_e(’Author); ?><?phpthe_author(, ) ?></span>
<!– 類別 –>
<spanclass=”post-cat”><?php_e(’Categories); ?><?phpthe_category(, ) ?></span>
<!– 註釋 –>
<spanclass=”post-comments”><?phpcomments_popup_link(’NoComments», ‘1Comment», %Comments»); ?></span>
<!– 內容 –>
<divclass=”entry”><?phpthe_content(»); ?></div>
<!– 其他元(Meta)數據 –>
<divclass=”post-meta”><?phpedit_post_link(,|,); ?></div></div><?phpendwhile; ?><divclass=”navigation”><spanclass=”previous-entries”><?phpnext_posts_link()?></span><spanclass=”next-entries”><?phpprevious_posts_link() ?></span></div><?phpelse : ?><divclass=”post”><h2><?php_e(’NotFound); ?></h2></div><?phpendif; ?></div><!– end content –><?phpget_sidebar(); ?><?phpget_footer(); ?></div></body></html>

然後,是派生子模板文件。把這個“模塊化”的 index.php 文件另存爲single.php、page.php、archive.php、 search.php 和 category.php。當然,都保存在myTheme 文件夾中。這樣,WP 在顯示頁面時就會調用相應的頁面文件了。比如,顯示博文詳細內容時,會調用single.php;而顯示頁面內容時,則調用 page.php。

WordPress模板常用函數(轉自知更鳥)

一套完整的WordPress模板應至少具有如下文件:

style.CSS : CSS(樣式表)文件
index.php : 主頁模板
archive.php : Archive/Category模板
404.php : Not Found 錯誤頁模板
comments.php : 留言/回覆模板
footer.php : Footer模板
header.php : Header模板
sidebar.php : 側欄模板
page.php : 內容頁(Page)模板
single.php : 內容頁(Post)模板
searchform.php : 搜索表單模板
search.php : 搜索結果模板

當然,具體到特定的某款模板,可能不止這些文件,但一般而言,這些文件是每套模板所必備的。
基本條件判斷Tag

is_home() : 是否爲主頁
is_single() : 是否爲內容頁(Post)
is_page() : 是否爲內容頁(Page)
is_category() : 是否爲Category/Archive頁
is_tag() : 是否爲Tag存檔頁
is_date() : 是否爲指定日期存檔頁
is_year() : 是否爲指定年份存檔頁
is_month() : 是否爲指定月份存檔頁
is_day() : 是否爲指定日存檔頁
is_time() : 是否爲指定時間存檔頁
is_archive() : 是否爲存檔頁
is_search() : 是否爲搜索結果頁
is_404() : 是否爲 “HTTP 404: Not Found” 錯誤頁
is_paged() : 主頁/Category/Archive頁是否以多頁顯示

Header部分常用到的PHP函數

<?phpbloginfo(’name); ?> : 博客名稱(Title)
<?phpbloginfo(’stylesheet_url); ?> : CSS文件路徑
<?phpbloginfo(’pingback_url); ?> : PingBack Url
<?phpbloginfo(’template_url); ?> : 模板文件路徑
<?phpbloginfo(’version); ?> : WordPress版本
<?phpbloginfo(’atom_url); ?> : Atom Url
<?phpbloginfo(’rss2_url); ?> : RSS 2.o Url
<?phpbloginfo(’url); ?> : 博客 Url
<?phpbloginfo(’html_type); ?> : 博客網頁Html類型
<?phpbloginfo(’charset); ?> : 博客網頁編碼
<?phpbloginfo(’description); ?> : 博客描述
<?phpwp_title(); ?> : 特定內容頁(Post/Page)的標題

模板常用的PHP函數及命令

<?phpget_header(); ?> : 調用Header模板
<?phpget_sidebar(); ?> : 調用Sidebar模板
<?phpget_footer(); ?> : 調用Footer模板
<?phpthe_content(); ?> : 顯示內容(Post/Page)
<?phpif(have_posts()) : ?> : 檢查是否存在Post/Page
<?phpwhile(have_posts()) : the_post(); ?> : 如果存在Post/Page則予以顯示
<?phpendwhile; ?> : While 結束
<?phpendif; ?> : If 結束
<?phpthe_time() ?> : 顯示時間,時間格式由“字符串”參數決定,具體參考PHP手冊
<?phpcomments_popup_link(); ?> : 正文中的留言鏈接。如果使用 comments_popup_script() ,則留言會在新窗口中打開,反之,則在當前窗口打開
<?phpthe_title(); ?> : 內容頁(Post/Page)標題
<?phpthe_permalink() ?> : 內容頁(Post/Page) Url
<?phpthe_category(, ) ?> : 特定內容頁(Post/Page)所屬Category
<?phpthe_author(); ?> : 作者
<?phpthe_ID(); ?> : 特定內容頁(Post/Page) ID
<?phpedit_post_link(); ?> : 如果用戶已登錄並具有權限,顯示編輯鏈接
<?phpget_links_list(); ?> : 顯示Blogroll中的鏈接
<?phpcomments_template(); ?> : 調用留言/回覆模板
<?phpwp_list_pages(); ?> : 顯示Page列表
<?phpwp_list_categories(); ?> : 顯示Categories列表
<?phpnext_post_link(%link); ?> : 下一篇文章鏈接
<?phpprevious_post_link(%link); ?> : 上一篇文章鏈接
<?phpget_calendar(); ?> : 日曆
<?phpwp_get_archives() ?> : 顯示內容存檔
<?phpposts_nav_link(); ?> : 導航,顯示上一篇/下一篇文章鏈接
<?phpinclude(TEMPLATEPATH . /); ?> : 嵌入其他文件,可爲定製的模板或其他類型文件

與模板相關的其他函數

<?php_e(’Message); ?> : 輸出相應信息
<?phpwp_register(); ?> : 顯示註冊鏈接
<?phpwp_loginout(); ?> : 顯示登錄/註銷鏈接
<!–next page–> : 將當前內容分頁
<!–more–> : 將當前內容截斷,以不在主頁/目錄頁顯示全部內容
<?phptimer_stop(1); ?> : 網頁加載時間(秒)
<?phpechoget_num_queries(); ?> : 網頁加載查詢量

通過以上兩大資源,相信Wordpress模板製作應該很快可以上手,學習中。。。

文章來自:WordPress 模板製作教程+常用函數


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章