[轉]一整套WordPress模板制作的教程


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; ?>

這兩行,是 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$sclass=”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>
<html>
<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。
最后,要做的工作就是自定義這些子模板文件。

From:https://my.oschina.net/feanlau/blog/880126


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM