Wordperss佈景製作教學系列(三):WordPress佈景index.php製作




我相信很多人心裡都已經在譙阿湯,因為從上一篇後就已經中斷相當長的一段的時間,只能說聲抱歉,這次要介紹的是相關index.php的製作,先前如果已經看過基本格局及header.php的介紹,我想接下來這篇你應該也能馬上就得心應手,其實佈景的教學真的很難寫,因此阿湯都是以最入門及基礎方式教學,相關更進階深入的技術,你可能就得靠自己多多摸索囉。

如果你是突然看這篇的朋友,建議可以往前先回顧這系列的前文。

Wordperss佈景製作教學系列:

設置index範圍:

如同先前在介紹header.php時一樣,我們先來設置內容的範圍,簡單的定義一下區塊,比如我將他的div id設置為content。

 1: <div id="content">

 2: </div>

01

在前一篇教學中,我們已經將header定義在980px的寬度,當然index的內容寬度最好也一樣,只不過這次我們在margin的部份可以將前面設為15px,表示上下間隔15px才不會太擠。

02

這時我們可以先隨意加一點內容到這個div區塊裡,檢視看看有沒有正常。

03

加上去之後,你會發現在文字亂跑了,我們不是把他定義在header下方嗎?這是因為沒有定義高度,導致區塊是浮動的,所以會有這樣重疊的現象,不過並不是header都適合定義高度,我們可以應用另一種做法,往下來看。

04

我們先在內容與header之間插入一個clear的class區塊。

 1: <div class="clear"></div>

05

然後在style.css裡增加一行clear的定義如下:

 1: .clear{clear:both;}

06

你會發現就正常了,那段css的作用是清除浮動,詳細用法及解說可以自行google,阿湯在這裡只是用了最簡單的方式來將區塊正常拼湊上去,往後各位在熟悉css後自行再修改相關內容。

07

設置文章區塊範圍:

剛剛我們的content設置的範圍是包含了文章內容及側邊欄的總寬度,所以我們必須再針對文章的部份再設定一次區塊,先加入文章的div區塊。

 1: <div id="post">

 2: </div>

08

然後再定義區塊的寬度,因為總寬度有980px,你可以自由分配文章區塊及側邊欄各要佔多少,比如阿湯要讓文章680px的寬度,然屆時側邊欄就是設定300px的寬度。

 1: #post{width:680px;float:left;}

09

設置文章循環:

在設置好文章區塊後,當然就是要讓文章可以顯示出來,而WordPress的作法就需要利用既有的語法產生迴圈讓文章顯示,所以我們要在post區塊裡再加入以下內容:

 1: <?php if (have_posts()) : while (have_posts()) : the_post(); ?>

 2:

 3:

 4: <?php endwhile;?><?php else: ?>

 5: <?php endif; ?>

主要作用是判斷目前的頁面有沒有文章,如果有的話就會顯示相關內容,而這些相關內容包含文章標題、日期、作者、內容、分類及標籤等等,我們必須再各別設置他,往下我們繼續來看。

10

讀取文章標題及內容:

因為章是循環的,一頁裡可以顯示3篇、5篇或是10篇,所以當我們在定義區塊時必須使用「class」,這在之前已經有提過,所以我們先在迴圈加上區塊後,加入文章標題語法及內容的語法:

 1: <div class="article">

 2: <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>

 3: <?php the_content( ) ;?>

 4: </div>

the_title是指讀取文章標題,the_content則是該文章內容,而在標題用a連結包覆的the_permalink是指該連結。

11

然後我們可以再簡單的定義一下文章部份的css,比如讓每篇文章間隔15px,再讓標題的文章大一點,設定為18px,並與內容間隔10px:

 1: .article {margin-bottom:15px;}

 2: .article h2{font-size:18px;margin-bottom:10px;}

12

完成後就像這樣。

13

加入作者與日期:

在經過前面的一些內容之後,相信你對於加入區塊已經愈來愈熟悉,沒錯,當我們需要一個新的內容時,基本上都會再去定義一個新的區塊,方便我們使用,這次我們是要加入作者與日期,比如我想加在標題底下,那我就在標題區塊下加入,比如我加入一個區塊是meta,然後再加入二個span分別是作者及時間的語法,div與span有何不同請參考:這裡

 1: <div class="meta">

 2: <span><?php the_author() ;?></span>

 3: <span><?php the_time('Y/m/d') ;?></span>

 4: </div>

14

然後我們一樣稍微定義一下meta及span的css語法,因為meta只是基本資訊,我們可以讓他字小一點點。

 1: .meta{margin-bottom:10px;}

 2: .meta span{font-size:13px;}

15

加入分類與標籤:

分類與標籤的區塊加入方式和前一個加入作者與日期是大同小異的,一樣先加入一個區塊後,在裡面應用分類及標籤的呼叫語法。

 1: <div class="meta2">

 2: <span>分類:<?php the_category(',') ?></span>

 3: <span>標籤:<?php the_tags('', ', ', '');?></span>

 4: </div>

16

然後一樣定義css,這就不再解說。

17

完成後就像這樣囉。

18

到這邊為止,index.php其實還沒有完成,因為還有側邊欄及底部,不過那是另外的教程,在下一次我們就會介紹到sidebar.php這一區塊,index.php就到這邊告一段落,大家趕緊動手吧。

13 Comments

  1. yeeee~ -  2017 年 08 月 24 日 - 13:44:01 (Your Comment is Under Moderation)

    阿湯哥,我用您的原始模板建立,請問為什麼index.php和single.php一直載不進去....

    回覆
  2. BTJIM -  2015 年 01 月 25 日 - 17:47:11 (Your Comment is Under Moderation)

    我喜歡^^ 讚!

    回覆
  3. 王煜傑 -  2012 年 10 月 14 日 - 18:48:30 (Your Comment is Under Moderation)

    阿湯站長的教學,真是一個踏入 WordPress 的好地方

    回覆
    • 阿湯 -  2012 年 10 月 17 日 - 10:02:39 (Your Comment is Under Moderation)

      不客氣,加油

      回覆
  4. 藍月 -  2012 年 07 月 24 日 - 00:48:30 (Your Comment is Under Moderation)

    讀取文章標題及內容
    程式碼 第二行 最後 h2> 應該是吧

    回覆
    • 阿湯 -  2012 年 08 月 02 日 - 11:54:46 (Your Comment is Under Moderation)

      已修改

      回覆
  5. Chun Yu -  2012 年 06 月 14 日 - 21:52:17 (Your Comment is Under Moderation)

    我加入這段程式碼後
    1:
    2: 分類:
    3: 標籤:
    4:

    裡面的分類和標籤兩個字變成亂碼了,有沒有什麼解決的辦法?

    回覆
    • 阿湯 -  2012 年 06 月 15 日 - 09:12:02 (Your Comment is Under Moderation)

      編碼改成 UTF-8
      檔案的編碼

      回覆
  6. Kevin -  2012 年 05 月 22 日 - 20:56:27 (Your Comment is Under Moderation)

    嗯嗯我懂了 謝謝你

    回覆
    • 阿湯 -  2012 年 05 月 23 日 - 16:31:09 (Your Comment is Under Moderation)

      不客氣

      回覆
  7. Kevin -  2012 年 05 月 20 日 - 22:00:05 (Your Comment is Under Moderation)

    可以請問阿湯哥一個問題嗎?

    這一段程式碼難道不能直接寫這樣嗎?

    我一直很好奇這個部分
    如果寫
    意思就是如果if的條件符合就執行while迴圈
    可是while在執行時會再一次檢查have_posts()傳回值是否為true
    如果為true再進行the_post()
    這樣不是重覆兩次了嗎??
    最近剛學php
    不知道是不是我理解錯誤
    如果是 還煩請阿湯哥指點迷津

    回覆
    • 阿湯 -  2012 年 05 月 22 日 - 16:27:14 (Your Comment is Under Moderation)

      其實是可以~我只是將能用的先都寫上去
      一般來說,還可以拆成
      if
      XXX
      while
      XXX
      else
      XXX
      end
      這樣不知道你有沒看懂意思

      回覆

Leave A Comment

Your email address will not be published. Required fields are marked (required):

留言前請輸入「YA」

Back to Top