1. 程式人生 > >WP主題模板制作修改教程

WP主題模板制作修改教程

rar 重要 所在 action themes option .html sea mark

WP主題模板制作修改教程
實際上,當我們打開某個主題的文件夾時,看到的並不止這兩個文件,而是更多。但一般來說,在一個完整的 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“>
<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() ) { ?> &raquo; 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>
</body>
</html>
顯然,這是一些構成網頁文件的 HTML 代碼,當然其中包含 PHP 代碼。如前所述,HTML 代碼定義結構,而 PHP 代碼用於生成內容。
在 WP 後臺的“主題”模塊中,選擇 myTheme 主題。然後,在瀏覽器中觀察你的 WP 外觀。此時,應該顯示頁面一片空白。但通過“查看源文件”,你會發現 index.php 中的 PHP 代碼已經生成了一些頭部內容。
接著,我們開始動手定義 index.php 中 body 部分的結構和內容。
(一)構建 header在 body 元素內,新建如下結構化標記元素,註意各元素都帶有不同的 id 屬性:
<div id=”page”>
<div id=”header”></div>
<div id=”content”></div>
<div id=”sidebar”></div>
<div id=”footer”></div>
</div>
然後,在該 <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 &raquo;’, ‘1 Comment &raquo;’, ‘% Comments &raquo;’); ?></span>
<!– 內容 –>
<div class=”entry”>
<?php the_content(’更多內容 &raquo;’); ?>
</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”><?phpprevious_posts_link(’後一篇’) ?></span>
</div>
<?php else : ?>
<div class=”post”>
<h2><?php _e(’Not Found’); ?></h2>
</div><?php endif; ?>
看似復雜,其實不然。首先:
<?php if (have_posts()) : ?>
<?php else : ?>
<?php endif; ?>
這三行,在 WP 中表示 if 控制結果。註意,if 語句通過測試 have_posts() 函數來測試是否存在博文。而
<?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>
顯然,這是一個錯誤提示信息。
(三)構建 sidebarsidebar 的內容當然要在 <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>’,
));
?>
(四)構建 footerfooter 中一般都一些版權信息和不太重要的鏈接。所以可以在 <div id=”footer”></div> 元素中簡單地放入下列代碼:
<p>Copyright &copy; 2007 <?php bloginfo(’name’); ?></p>
至此,核心 index.php 文件就算是大功告成了!
接下來,是拆分 index.php 和基於 index.php 派生子模板文件。
在 myTheme 文件夾中新建 header.php、sidebar.php 和 footer.php 三個文件。把index.php 中的 <div id=”header”></div>、<divid=”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=”<?phpbloginfo(’html_type’); ?>; charset=<?php bloginfo(’charset’);?>” /><title><?php bloginfo(’name’); ?> <?php if (is_single() ) { ?> &raquo; Blog Archive <?php } ?> <?phpwp_title(); ?></title><meta name=”generator”content=”WordPress <?php bloginfo(’version’); ?>” /> <!–leave this for stats –><link rel=”stylesheet” href=”<?phpbloginfo(’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=”<?phpbloginfo(’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 &raquo;’, ‘1 Comment &raquo;’, ‘% Comments &raquo;’); ?></span>
<!– 內容 –>
<div class=”entry”>
<?php the_content(’更多內容 &raquo;’); ?>
</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”><?phpprevious_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。
Read more: http://www.coffly.com/thread-6870-1-1.html#ixzz0YtnvN490

WP主題模板制作修改教程