erdaoo 的 WP Theme 教程學習筆記

【轉載自我愛水煮魚

本文由 erdaoo 學習本站的 WP Theme 教程之后的學習筆記整理,經本站整理,erdaoo 本人同意之后在本站發表,以便給更多學習 WP Theme 教程的人幫助。

學習本教程,需要:

  1. 對PHP,WP,CSS,PS有一定的基礎,懂得初步的應用。
  2. 你是一個想要表現自己的家伙,并且不想再使用別人制作的主題。
  3. 你要有耐心,細心,細心,耐心。

WP 主題簡介

在詳細分解代碼之前,我們還是要先了解一下WP主題的大致情況。一個 WP 的主題是由几個 templates 文件組成的,每一個主題必有的二個文件是:index.php 和 style.css(樣式表),除此之外還有一些其它的文件(不是必須),它們和 index.php 文件間存在優先級關系,如果它們存在,WP 模板系統就會調用它們顯示相應的頁面,否則模板系統會調用 index.php 來顯示。

它們有可能是以下文件:

  • single.php -- 單一日志文件,用于顯示單一日志
  • page.php -- 頁面模板文件,用于顯示靜態頁面
  • archive.php -- 存檔文件,用于顯示存檔頁面
  • category.php -- 類別文件,用于顯示類別頁面
  • search.php -- 搜索文件,用于顯示搜索結果
  • 404.php -- 錯誤文件,用于顯示404頁面
  • comments.php -- 評論文件,用于顯示評論和評論框

index.php

首先制作index.php,我們知道在一個網頁中,代碼主要分為二部分,一個是頁頭信息,一個是頁面內容。

<html>    <head>  .........頁頭信息  </head>  <body>  .........頁面內容  </body>  </html>

每個主題的頁頭信息都是几乎一樣,具體可以查看默認模板的 header.php 文件(為保證所有頁面的頁頭信息的一致性,所有頁頭信息都放在 header.php 文件。)

接下來我們談下一話題,關于母豬的產后護理……(我學的太雜了,都弄混了)

我們來談一下body中的內容。

它包含四個部分,每一部分都可以叫做一個集成模塊,其實一個主題就是由不同的模塊搆成,模塊又是由不同的模塊搆成。

  • header WP 的頂部,顯示博客的名字與描述,放置導航欄,搜索欄等等。
  • content WP 的正文部分,顯示貼子的內容,作者,時間,分類,評論,編輯等等。
  • sidebar WP 的側邊欄部分。
  • footer WP 的尾部,這部分只有很少的內容,通常是版權信息。

對于每一個集成模塊中的內容,理論上是可以隨意放置的,比如我們可以把header模塊中的搜索欄放在sidebar模塊中去。

那如何區分這四個集成模塊呢?看以下代碼。

<div id="header">      這是我的博客  </div>  <div id="content">        這是我的日志</div>  <div id="sidebar">      搜索欄,分類,存檔,友情鏈接  </div>  <div id="footer">        版權信息,我是二道  </div>

通過 div 標簽,我們可以把這些模塊分隔開來。

header

現在開始我們第一部分的代碼塊,不過在寫代碼之前我還得要啰嗦一句,寫代碼要有層次感,要記得縮進,不要用空格縮進而用TAB鍵。

<div id="header">        <h1><a href="<?php bloginfo('url');?>"><?php bloginfo('name');?></a></h1>        <?php bloginfo('description');?>  </div>

id 是 div 的一個屬性,給 id 賦于不同的值,這樣就可以區分每一個div代碼段。

bloginfo() 是 WP 中定義好的函數,參數 url 返回網址,參數 name 返回網站的名字,參數 description 返回網站描述。

在上面的代碼中,就是為博客的標題并加上一個超鏈接,并且顯示描述。

如果我們把上面的三行代碼加上頁頭部分另存為一個新的文件 -- header.php。這樣我們就可以通過以下 WP 函數導入它們。

<?php get_header(); ?>

這樣的好處是,你只要修改一下header.php文件,所有調用這個文件的頁面都會跟隨改變,而不用一個一個地去修改了。

content

現在開始我們第二部分的代碼塊:

<div id="content">      <?php if(have_posts()) : ?>            <?php while(have_posts()) : the_post(); ?> 

<?php endwhile; ?> <?php endif; ?> </div>

這里使用 if(have_posts() 來檢測是否有日志存在,如果有的話,就用 while 循環顯示。the_post() 就是調用日志的函數。

而每一篇日志又是有標題,有發布時間,有分屬類別,有讀者的評論,這些又全部需要用 div 標簽來分隔開。看下面的代碼:

<div id="content">      <?php if(have_posts()) : ?><!--開始檢測-->        <?php while(have_posts()) : the_post(); ?><!--以下面的格式顯示每篇日志-->          <div class="post">              <h2><a href="<?php the_permalink();?>"><?php the_title();?></a></h2><!--含有鏈接地址的日志標題-->                <div class="entry">                  <?php the_content();?><!--日志內容-->                  <p class="postmetadata"><!--日志元數據-->                    <?php _e('Filed under:');?>                  <?php the_category(',');?><!--調用日志的分類-->                  <?php _e('by');?><!--使用_e()創建可翻譯的主題-->                    <?php the_autnor('');?><!--調用日志作者-->                  <br />                  <?php comments_poopup_link('No Comments»','1 Comments»','% Comment»');?><!--調用一個彈出的留言窗口,如果這個功能沒有激活,則是顯示留言列表-->                    <?php edit_post_link('Edit','|','');?><!--只有在登陸后才可見到,對日志進行編輯的鏈接-->                  </p>              </div><!--日志內容結束-->            </div><!--一篇日志徹底結束-->      <?php endwhile; ?>      <?php endif; ?>    </div>

class

現在我們得要說說 class 了,它是與 id 都是標簽的屬性,但是不同之處在于,id 的參數值是唯一的,它在一個頁面只能使用一次,而 class 的參數值是可以多次使用,
比如 id="header" 只能出現一次,因為我們只有一個地方可以出現博客的名字。而class="entry" 會經常出現,那是因為我們的博客里不只是有一篇日志。

為什么我們要用到 id 與 class,難道只用一個不行嗎,反正功能都是相同的。不要忘了我們前面說過的一個重要文件,style.css 樣式表文件。我們為某一段代碼添加了屬性,如同起個名字而已,這樣在樣式表中我們就可以為這些名字來定制它們的樣式了。

這樣說你還不明白?那就打個最簡單的比方吧,你可以有很多的兄弟,但是你們只能有一個爹,你不能用你爹的名字叫你的兄弟,但是你爹可以用你兄弟的名 字叫你。樣式表文件就和你奶奶一樣,你爹再牛逼也得聽你奶奶的話,叫他怎么樣他就得要怎么樣。(老大你這個比喻寒啊,瀑布寒!!)

Not Found

前面的代碼中有說到,如果檢測到有日志的話,就用循環調出來,可是如果沒有日志的話那要怎么樣呢?

<?php else:?>  <div class="post" id="post-<?php the_ID(); ?>">    <?php _e('Not Found');?>  </div>

把這一段代碼加在 <?php endwhile; ?> 之后就可以了。

頁面導航

當你的博客內容越來越多的時候,在 WP 的后台又設定了首頁只顯示10個日志,那么從第11個開始都無法在首頁顯示出來。

這樣在博客的最后一篇日志下面就會出現后一頁或前一頁的鏈接。如果你還不到10個日志,這個鏈接就不會出現。

把下面的代碼加入到 <?php endif; ?> 前面

<div class="navigation">        <?php posts_nav_link(); ?>  </div>

分析一下 posts_nav_link() 這個 WP 函數,它可以有三個參數:<? posts_nav_link('in between','before','after'),第1個參數是顯示在后一頁和前一頁鏈接的中間。第2個參數顯示在后一頁和前一頁鏈接的前面。第3個參數顯示在后一頁和前一頁鏈接的后面。用什么來顯示,你自己決定,常用的就是一些符號或是箭頭而已嘛。

現在再看一下我們已經有了哪些個代碼:

<?php get_header(); ?>  <div id="content">      <?php if(have_posts()) : ?>        <?php while(have_posts()) : the_post(); ?>          <div class="post">              <h2><a href="<?php the_permalink();?>"><?php the_title();?></a></h2>                <div class="entry">                  <?php the_content();?>                  <p class="postmetadata">                    <?php _e('Filed under:');?>                  <?php the_category(',');?>                  <?php _e('by');?>                    <?php the_autnor('');?>                  <br />                  <?php comments_poopup_link('No Comments»','1 Comments»','% Comment»');?>                    <?php edit_post_link('Edit','|','');?>                  </p>              </div>            </div>      <?php endwhile; ?>      <div class="navigation">            <?php posts_nav_link(); ?>      </div>      <?php else:?>          <div class="post" id="post-<?php the_ID(); ?>" >                <?php _e('Not Found');?>          </div>      <?php endif; ?>    </div>  </body>  </html>

*********************************************************************************************
寫教程不是一個簡單的事,它不光讓我心煩,還讓我難以找到適當的詞來表達,所以要體會一下當老師的難處。
*********************************************************************************************

側邊欄

第三部分,關于側邊欄。側邊欄有一個特點,就是又臭又長,當然了這不是什么纏腳布。先不要亂扯。因為地形有限,所以側邊欄里的內容,多以列表的形式 排開。下面歡迎一對父子出場,他們的感情是相當的好,從來都是父子不分家,有父必有子,有子必有父,父中有子,子中有父。他們就是<UL><LI>!!!!!!!

<div class="sidebar"><!--注意這里使用的不是id-->      <ul>          <li>                <h2><?php _e('日志分類''); ?></h2>          </li>      </ul>    </div>

UL 表示無序列表,OL 表示列表元素。在側邊欄里,你要有几個不同的欄目,欄目的存在,就是為側邊欄進行了分類整理。每一個欄目又要有不同的分類列表,繼續為上面的代碼添加內容。

<div class="sidebar">      <ul>          <li><h2><?php _e('日志分類'); ?></h2>                    <ul>                      <?php wp_list_cats ('sort_column=name&optioncount=1&hierarchical=0'); ?>                  </ul>          </li>        </ul>  </div>

wp_list_cats() 函數為調用日志分類列表,它的參數也有三個。每個參數之間用&來分隔。
sort_column=name -- 把分類按字符順序排列
optioncount=1 -- 顯示在每個分類下面的日志數
hierarchial=0 -- 不把子分類放到子列表條目中

說到分類,特別說一下靜態頁面這個欄目。我們在WP后台撰寫的時候,有二個選擇,一個是撰寫日志,一個是撰寫頁面。對于日志,還可以選擇保存在哪一 個具體的分類下面。對于頁面就沒得選擇,只收錄于頁面欄目之下。 再回到前台,你可以看到每個分類都有顯示日志的數目,而不顯示標題。在頁面欄目里,只排列了每一個頁面的標題,而不顯示數目。

<?php wp_list_pages('depth=3&title_li="<h2>頁面</h2>"'); ?>

參數depht=3為可選參數,表示可以設定顯示三級列表。

注意一點,本教程的代碼是制作模版的代碼(PHP 代碼),在WP中使用一個主題也就是等于在套用一個模版。在網站中查看源代碼是看不到模版的代碼的(已經被解釋成 HTML 代碼)。

<li><h2><?php _e('日志分類'); ?</h2>

<ul>
<?php wp_list_cats ('sort_column=name&optioncount=1&hierarchical=0'); ?> </ul> </li>

上面這一段模版代碼,在網頁中查看源代碼,實際上顯示的是這樣的:

<li><h2>文章存檔</h2>      <ul>          <li><a href="#">與愛情有關的分類貼子</a></li>            <li><a href="#">與生活有關的分類貼子</a></li>          ...............................    </ul>    </li>

增加一個存檔欄目:

<li><h2><?php _e('文章存檔'); ?></h2>      <ul>            <?php wp_get_archives('type=monthly'); ?>      </ul>  </li>

wp_get_archives() 函數是用來獲取文章存檔的,參數'type=monthly'定義為以每個月的時間來進行分類存檔

增加一個友情鏈接欄目:

<?php get_links_list(); ?>

不用擔心沒有實際內容,它會自動調用在 WP 后台中添加的友情鏈接。

增加一個搜索欄目:

<li id="search">      <?php include(TEMPLATEPATH. '/searchform.php'); ?>    </li>

這里使用 include() 函數調用一個文件,參數 TEMPLATEPATH 為主題文件夾路徑,為了調用成功,你還需要有一個文件:searchform.php

增加一個日曆欄目:

<li id="calendar">      <h2><?php _e('日曆'); ?></h2>        <?php get_calendar(); ?>  </li>

這里就不用多廢話了。

增加一個管理欄目:

<li>      <h2><?php _e('管理'); ?></h2>        <ul>          <?php wp_register(); ?>          <li>              <?php wp_loginout(); ?>          </li>            <?php wp_meta(); ?>      </ul>  </li>

wp_loginout() 來確定你是否登陸,如果登陸就顯示登出鏈接,如果沒有登陸,就顯示登陸的鏈接。
wp_register() 來確定你的身份,如果沒有登陸,就顯示注冊的鏈接,如果有的話,就顯示管理的鏈接。
而wp_meta() 卻是什么也沒有做。也不用去理它,還沒有人來說明它是起什么作用的。實際上它是 WordPress 的hook。

窗體化側邊欄

<?php     /* Widgetized sidebar, if you have the plugin installed. */      if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>

在側邊欄開始的地方第一個<ul>的后面,加上以上代碼。也要在側邊欄結束的地方</ul>前面加上一句

<?php endif; ?>

從 WP2.0 開始,已經在后台集成了一個側邊欄的插件--Widget,它的功能就是可以很方便的在WP后台調整側邊欄中的內容,直接使用鼠標就可以移動每一個欄目的位置,而不需要去修改相應的代碼。讓每一個欄目都以窗體化存在。

function_exists('dynamic_sidebar') || !dynamic_sidebar()) 這兩個參數來自于一個新的文件 -- functions.php 我們需要創建這個文件才可以完成側邊欄的窗體化.。

通過觀察不同的WP主題,會發現在側邊欄中的內容遠不止以上所列舉的,
要在學習中舉一反三,才會制作出更加出眾的主題。

至此,側邊欄中的內容結束,我們也可以把第三部分的代碼另存為一個新的文件 -- sidebar.php,在index.php中填加一句代碼就可以使用側邊欄

<?php get_sidebar(); ?>

順便再增加一行代碼:

<?php get_footer();?>

這是調用尾部文件 footer.php 的代碼。我想你應該知道如何處理一個簡單的 PHP 文件了,要么你就再重頭學一次本教程。

再一次查看一下index.php有了哪些代碼

<?php get_header(); ?>  <div id="content">      <?php if(have_posts()) : ?>        <?php while(have_posts()) : the_post(); ?>          <div class="post">              <h2><a href="<?php the_permalink();?>"><?php the_title();?></a></h2>                <div class="entry">                  <?php the_content();?>                  <p class="postmetadata">                    <?php _e('Filed under:');?>                  <?php the_category(',');?>                  <?php _e('by');?>                    <?php the_autnor('');?>                  <br />                  <?php comments_poopup_link('No Comments»','1 Comments»','% Comment»');?>                    <?php edit_post_link('Edit','|','');?>                  </p>              </div>            </div>      <?php endwhile; ?>      <div class="navigation">            <?php posts_nav_link(); ?>      </div>      <?php else:?>          <div class="post" id="post-<?php the_ID(); ?>" >            <?php _e('Not Found');?>          </div>      <?php endif; ?>    </div>  <?php get_sidebar(); ?>  <?php get_footer();?>

index.php 文件的代碼已經全在這里了,但是只有第二部分內容需要詳細的代碼,而其它的部分我們都可以調用外部文件,至此一個 WP 的主題搆造已經搭建好,再一次提醒各位,檢查代碼,確認書寫正確。只有不厭其煩地寫代碼才會對代碼有更深刻的印像。

其他文件

下面開始創建其它文件

將index.php的全部代碼另存為archive.php,并且把 the_content 改成 the_excerpt,
創建存檔文件,它會顯示在分類欄目下的每篇日志的摘要。

將archive.php另存為 search.php,創建搜索文件,這樣就可以在搜索中得到每篇文章的摘要。

將 index.php 的全部代碼另存為 page.php,創建頁面模板文件,在 <?php the_content(); ?> 下面輸入以下代碼:

<?php link_pages('<p><strong>Pages:</strong> ', '</p>', 'number'); ?>

說明:如果一個頁面,篇幅超長的話,我們可以把它截斷分成几頁來顯示,

<?php edit_post_link('Edit', '<p>', '</p>'); ?>

說明:顯示一個可以編輯的鏈接

刪除掉 <p class="postmetadata"> </p> 這一塊的代碼
刪除掉以下代碼:

<div class="navigation">      <?php posts_nav_link(); ?>  </div>

說明:對于靜態頁面,它沒有屬于哪個分類,我們也不希望被某人評論,當然它也不能顯示與另一個頁面間的連接,所在要去掉一部分代碼。

將index.php的全部代碼另存為single.php,創建單篇文章文件,點擊文章的標題,可以查看全文內容。在 <?php the_content(); ?> 下輸入:

<?php link_pages('<p><strong>Pages:</strong> ', '</p>', 'number'); ?>

這段代碼和上一例相同,都是可以用來截斷文章。

刪除以下代碼:

<br />  <?php comments_poopup_link('No Comments»','1 Comments»','% Comment»');?>

<?php posts_nav_link(); ?> 替換成 <?php previous_post_link('« %link') ?> <?php next_post_link(' %link »') ?>

說明:在單篇文章的下面顯示的應是上一篇與下一篇的鏈接,而不是上一頁與下一頁的鏈接。

如何處理留言評論?

想一想,每一個留言評論都是對于一個文章而產生的,所以只要在單篇文章頁面里添加一個調用評論的函數就可以。

在 single.php 文件中 <div class="entry"> 代碼塊結束的 </div> 下面,輸入以下代碼:

<div class="comments-template">  <?php comments_template(); ?>  </div>

comments_template() 這個 WP 函數是用來從 comments.php 文件調用評論模板。所以我們還要創建一個 comments.php 文件。


想在手機閱讀更多Wordpress資訊?下載【香港矽谷】Android應用
分享到Facebook
技術平台: Nasthon Systems