一整套WordPress模板製作的教程

神馬和浮雲發表於2014-04-08

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函式

<?php bloginfo(’name’); ?> : 部落格名稱(Title)
<?php bloginfo(’stylesheet_url’); ?> : CSS檔案路徑
<?php bloginfo(’pingback_url’); ?> : PingBack Url
<?php bloginfo(’template_url’); ?> : 模板檔案路徑
<?php bloginfo(’version’); ?> : WordPress版本
<?php bloginfo(’atom_url’); ?> : Atom Url
<?php bloginfo(’rss2_url’); ?> : RSS 2.o Url
<?php bloginfo(’url’); ?> : 部落格 Url
<?php bloginfo(’html_type’); ?> : 部落格網頁Html型別
<?php bloginfo(’charset’); ?> : 部落格網頁編碼
<?php bloginfo(’description’); ?> : 部落格描述
<?php wp_title(); ?> : 特定內容頁(Post/Page)的標題

 

 

模板常用的PHP函式及命令

<?php get_header(); ?> : 呼叫Header模板
<?php get_sidebar(); ?> : 呼叫Sidebar模板
<?php get_footer(); ?> : 呼叫Footer模板
<?php the_content(); ?> : 顯示內容(Post/Page)
<?php if(have_posts()) : ?> : 檢查是否存在Post/Page
<?php while(have_posts()) : the_post(); ?> : 如果存在Post/Page則予以顯示
<?php endwhile; ?> : While 結束
<?php endif; ?> : If 結束
<?php the_time(’字串’) ?> : 顯示時間,時間格式由“字串”引數決定,具體參考PHP手冊
<?php comments_popup_link(); ?> : 正文中的留言連結。如果使用 comments_popup_script() ,則留言會在新視窗中開啟,反之,則在當前視窗開啟
<?php the_title(); ?> : 內容頁(Post/Page)標題
<?php the_permalink() ?> : 內容頁(Post/Page) Url
<?php the_category(’, ‘) ?> : 特定內容頁(Post/Page)所屬Category
<?php the_author(); ?> : 作者
<?php the_ID(); ?> : 特定內容頁(Post/Page) ID
<?php edit_post_link(); ?> : 如果使用者已登入並具有許可權,顯示編輯連結
<?php get_links_list(); ?> : 顯示Blogroll中的連結
<?php comments_template(); ?> : 呼叫留言/回覆模板
<?php wp_list_pages(); ?> : 顯示Page列表
<?php wp_list_categories(); ?> : 顯示Categories列表
<?php next_post_link(’ %link ‘); ?> : 下一篇文章連結
<?php previous_post_link(’%link’); ?> : 上一篇文章連結
<?php get_calendar(); ?> : 日曆
<?php wp_get_archives() ?> : 顯示內容存檔
<?php posts_nav_link(); ?> : 導航,顯示上一篇/下一篇文章連結
<?php include(TEMPLATEPATH . ‘/檔名’); ?> : 嵌入其他檔案,可為定製的模板或其他型別檔案

 

 

與模板相關的其他函式

<?php _e(’Message’); ?> : 輸出相應資訊
<?php wp_register(); ?> : 顯示註冊連結
<?php wp_loginout(); ?> : 顯示登入/登出連結
<!–next page–> : 將當前內容分頁
<!–more–> : 將當前內容截斷,以不在主頁/目錄頁顯示全部內容
<?php timer_stop(1); ?> : 網頁載入時間(秒)
<?php echo get_num_queries(); ?> : 網頁載入查詢量

 

 

介紹如何定義index.php以及如何派生出其它檔案,在index.php檔案中,在body元素內,新建如下結構化標記元素,各元素都帶有不同的id屬性:

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

這些不同的屬性,分別代表著不同的區域,讓人一看就知道是什麼意思,下面我們重點探討header,content,sidebar,footer部分的構建。

(一).構建header

<div id=”header”></div> 元素的兩個標籤之間輸入下列程式碼:
<h1><a href=”<?php bloginfo(’url’); ?>” title=”<?php bloginfo(’name’); ?>”><?php bloginfo(’name’); ?></a></h1>
<p><?php bloginfo(’description’); ?></p>

這裡用到了 WP 內建的 bloginfo 函式來生成內容,其中:

bloginfo(’url’)返回網站主頁連結;
bloginfo(’name’)返回網站標題;
bloginfo(’description’)返回網站描述。
儲存 index.php 檔案,然後在瀏覽器中按 F5 重新整理一下頁面,看能看到什麼?再通過“檢視原始檔”,核對一下由 WP 的 bloginfo() 函式生成的相關資訊。

(二).構建content

在 <div id=”content”></div> 中,我們要通過迴圈顯示博文,包括每個博文的標題、作者、發表日期以及其他相關資訊。並且,可以分頁顯示博文(取決於 WP 後臺的設定)。
首先,在 <div id=”content”> 與 </div> 之間輸入下列程式碼:

<?php while (have_posts()) : the_post(); ?> <div class=”post” id=”post-<?php the_ID() ?>”>
<!– 博文標題及連結 –>
<h2><a href=”<?php the_permalink() ?>” rel=”bookmark” title=”<?php the_title(); ?>”>
<?php the_title(); ?></a></h2>
<!– 發表日期 –>
<div class=”post-date”>
<span class=”post-month”><?php the_time(’M’) ?></span>
<span class=”post-day”><?php the_time(’d’) ?></span>
</div>
<!– 作者 –>
<span class=”post-author”><?php _e(’Author’); ?>:<?php the_author(’, ‘) ?></span>
<!– 類別 –>
<span class=”post-cat”><?php _e(’Categories’); ?>:<?php the_category(’, ‘) ?></span>
<!– 註釋 –>
<span class=”post-comments”>
<?php comments_popup_link(’No Comments ?’, ‘1 Comment ?’, ‘% Comments ?’); ?></span>
<!– 內容 –>
<div class=”entry”>
<?php the_content(’更多內容 ?’); ?>
</div>
<!– 其他元(Meta)資料 –>
<div class=”post-meta”>
<?php edit_post_link(’編輯’,’ | ‘,”); ?>
</div> </div>
<?php endwhile; ?><div class=”navigation”>
<span class=”previous-entries”><?php next_posts_link(’前一篇’) ?></span> <span class=”next-entries”><?php previous_posts_link(’後一篇’) ?></span>
</div>
<?php else : ?>
<div class=”post”>
<h2><?php _e(’Not Found’); ?></h2>
</div><?php endif; ?>

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

<?php while (have_posts()) : the_post(); ?>
<?php endwhile; ?>

這兩行,是 WP 中的 while 迴圈。其中,while 語句通過測試 have_posts() 決定是否呼叫 the_post() 函式。如果測試 have_posts() 返回 true,則呼叫 the_post() 函式,初始化與博文相關的內建變數。
在 while 迴圈內部,首先要注意通過 div、h2、span 這三個元素定義的巢狀語義結構,以及相應元素的 class 和 id 屬性(其中只為 class 為 post 的 div 元素定義了一個 id 屬性--post-<?php the_ID() ?>)。這是將來使用 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() 兩個函式,分別顯示註釋和編輯連結,這裡不多說了。
另外,在 <?php endwhile; ?> 後面顯示了分頁導航連結,呼叫的函式分別是:next_posts_link() 和 previous_posts_link()。此時,如果你的博文總數小於 WP 後臺設定的最多顯示數目,比如:你在後臺設定最多顯示 5 篇,而你有 10 篇博文,就會分頁顯示;否則,如果你的博文少於或等於 5 篇則看不到分頁導航連結。
最後,不要丟下 <?php else : ?> 語句後面的內容:

<div class=”post”>
<h2><?php _e(’Not Found’); ?></h2>
</div>

顯然,這是一個錯誤提示資訊。

(三).構建sidebar

sidebar 的內容當然要在 <div id=”sidebar”></div> 元素中構建了。sidebar,中文叫側邊欄,其中可以包含很多內容。比如:分類、頁面、連結、日曆等等導航及相關資訊。
在 WP 中,sidebar 中的內容都以無序(ul)或有序(ol)列表的形式輸出。因此,需要在 <div id=”sidebar”></div> 中輸入以下標記:

<ul>
<?php if ( !function_exists(’dynamic_sidebar’) || !dynamic_sidebar() ) : ?>
<li id=”search”>
<?php include(TEMPLATEPATH .’/searchform.php’); ?>
</li> <li id=”calendar”>
<h2><?php _e(’Calendar’); ?></h2>
<?php get_calendar(); ?>
</li> <?php wp_list_pages(’title_li=<h2>頁面</h2>’); ?> <li class=”catnav”>
<h2><?php _e(’Categories’); ?></h2>
<ul>
<?php wp_list_cats(’sort_column=name&optioncount=1&hierarchical=0′); ?>
</ul>
</li>
<li class=”archivesnav”>
<h2><?php _e(’Archives’); ?></h2>
<ul>
<?php wp_get_archives(’type=monthly’); ?>
</ul>
</li>
<li class=”blogrollnav”>
<h2><?php _e(’Links’); ?></h2>
<ul>
<?php get_links(’-1′, ‘<li>’, ‘</li>’, ‘<br />’, FALSE, ‘id’, FALSE, FALSE, -1, FALSE); ?>
</ul>
</li>
<li class=”meta”>
<h2><?php _e(’Meta’); ?></h2>
<ul><?php wp_register(); ?><li><?php wp_loginout(); ?></li>
<?php wp_meta(); ?></ul>
</li>
<?php endif ?>
</ul> 以上程式碼從第三行開始,分別通過包含 searchform.php 顯示搜尋表單;

呼叫 get_calendar() 函式顯示日曆;
呼叫 wp_list_pages() 函式顯示頁面導航;
呼叫 wp_list_cats() 函式顯示分類導航;
呼叫 wp_get_archives() 函式顯示存檔導航;
呼叫 get_links() 函式顯示連結導航。
在構建側邊欄時,要為生成搜尋框新建一個 searchform.php 檔案,其內容如下:

<form method=”get” id=”searchform” action=”<?php bloginfo(’home’); ?>/”>
<div>
<input type=”text” value=”<?php echo wp_specialchars($s, 1); ?>” name=”s” id=”s” size=”15″ /><br />
<input type=”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,其內容如下:

<?php
if ( function_exists(’register_sidebar’) )
register_sidebar(array(
‘before_widget’ => ‘<li id=”%1$s” class=”widget %2$s”>’,
‘after_widget’ => ‘</li>’,
‘before_title’ => ‘<h2 class=”sidebartitle”>’,
‘after_title’ => ‘</h2>’,
));
?>

(四).構件footer

footer 中一般都一些版權資訊和不太重要的連結。所以可以在 <div id=”footer”></div> 元素中簡單地放入下列程式碼:

<p>Copyright ? 2007 <?php bloginfo(’name’); ?></p>

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

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

在 myTheme 資料夾中新建 header.php、sidebar.php 和 footer.php 三個檔案。把 index.php 中的 <div id=”header”></div>、<div id=”sidebar”></div> 和 <div id=”footer”></div> 三個結構化元素及其內容分別轉移(剪下)到這三個新檔案中。然後,在 <div id=”header”></div> 原來的位置處輸入程式碼:

<?php get_header();?>
在 <div id=”sidebar”></div> 原來的位置處輸入程式碼:
<?php get_sidebar();?>
在 <div id=”footer”></div> 原來的位置處輸入程式碼:
<?php get_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“>
<html xmlns=”http://www.w3.org/1999/xhtml“><head profile=”http://gmpg.org/xfn/11“>
<meta http-equiv=”Content-Type” content=”<?php bloginfo(’html_type’); ?>; charset=<?php bloginfo(’charset’); ?>” /><title><?php bloginfo(’name’); ?> <?php if ( is_single() ) { ?> ? Blog Archive <?php } ?> <?php wp_title(); ?></title><meta name=”generator” content=”WordPress <?php bloginfo(’version’); ?>” /> <!– leave this for stats –><link rel=”stylesheet” href=”<?php bloginfo(’stylesheet_url’); ?>” type=”text/css” media=”all” />
<link rel=”stylesheet” href=”<?php bloginfo(’stylesheet_directory’); ?>/print.css” type=”text/css” media=”print” />
<link rel=”alternate” type=”application/rss+xml” title=”<?php bloginfo(’name’); ?> RSS Feed” href=”<?php bloginfo(’rss2_url’); ?>” />
<link rel=”pingback” href=”<?php bloginfo(’pingback_url’); ?>” /><?php wp_head(); ?>
</head>
<body>
<div id=”page”><?php get_header(); ?> <!– content –>
<div id=”content”>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?> <div class=”post” id=”post-<?php the_ID() ?>”>
<!– 博文標題及連結 –>
<h2><a href=”<?php the_permalink() ?>” rel=”bookmark” title=”<?php the_title(); ?>”>
<?php the_title(); ?></a></h2>
<!– 發表日期 –>
<div class=”post-date”>
<span class=”post-month”><?php the_time(’M’) ?></span>
<span class=”post-day”><?php the_time(’d’) ?></span>
</div>
<!– 作者 –>
<span class=”post-author”><?php _e(’Author’); ?>:<?php the_author(’, ‘) ?></span>
<!– 類別 –>
<span class=”post-cat”><?php _e(’Categories’); ?>:<?php the_category(’, ‘) ?></span>
<!– 註釋 –>
<span class=”post-comments”>
<?php comments_popup_link(’No Comments ?’, ‘1 Comment ?’, ‘% Comments ?’); ?></span>
<!– 內容 –>
<div class=”entry”>
<?php the_content(’更多內容 ?’); ?>
</div>
<!– 其他元(Meta)資料 –>
<div class=”post-meta”>
<?php edit_post_link(’編輯’,’ | ‘,”); ?>
</div> </div>
<?php endwhile; ?> <div class=”navigation”>
<span class=”previous-entries”><?php next_posts_link(’前一篇’) ?></span> <span class=”next-entries”><?php previous_posts_link(’後一篇’) ?></span>
</div>
<?php else : ?>
<div class=”post”>
<h2><?php _e(’Not Found’); ?></h2>
</div><?php endif; ?>
</div><!– end content –><?php get_sidebar(); ?> <?php get_footer(); ?></div>
</body>
</html>

然後,是派生子模板檔案。把這個“模組化”的 index.php 檔案另存為 single.php、page.php、archive.php、 search.php 和 category.php。當然,都儲存在 myTheme 資料夾中。這樣,WP 在顯示頁面時就會呼叫相應的頁面檔案了。比如,顯示博文詳細內容時,會呼叫 single.php;而顯示頁面內容時,則呼叫 page.php。
最後,要做的工作就是自定義這些子模板檔案。

相關文章