WordPress主題製作進階#10自定義主頁

這節我們將建立一個自定義主頁，然後將小工具新增到指定的位置。
新建一個檔案並將其儲存為front-page.php。 如果我們重新載入主頁，它會完全空白，因為它正在檢視front-page.php檔案。 所以我將複製page.php中的內容並將其貼上到front-page.php中。
重新整理前端頁面：

看起來不太好看，因為這個格式是用來顯示帖子內容的。現在我們到網站後臺外觀 -> 選單，將選單裡的首頁移除，然後到頁面新建一個Home頁面（為了和之前的頁面做區分，當然仍然可以叫首頁）和一個Blog頁面。

然後我們轉到Settings內的閱讀項：

在您的主頁顯示中，設定一個靜態頁面， 主頁選擇Home；對於文章頁選擇Blog，然後我們將儲存它。 現在我們將進入外觀 - > 選單，將Home 和 Blog 勾選，新增到右側選單結果內，儲存選單。

回到前端頁面，導航選單多了Home和Blog，點選Blog會跳轉到部落格文章頁；但是點選Home，就只會看到“homepage”，所以我們來處理這個問題。

現在我們想讓首頁看起來有點不同，我希望有一個Showcase小部件。 此外，我不需要側邊欄，並在下方有三個框和三個不同的小工具。 我們轉到front-page.php並刪除main類，在下面的程式碼塊中突出顯示，因為main類限制了div的寬度：

<div class="container content">
    <div class="main block">
    <?php while(have_posts()) : the_post(); ?> 

然後刪掉整個側邊欄部分程式碼：

<div class="side">
    <?php if(is_active_sidebar('sidebar')) : ?>
    <?php dynamic_sidebar('sidebar'); ?>
    <?php endif; ?>
</div>

儲存程式碼，重新整理前端頁面，會看到側邊欄不見了

我們先來做我們的Showcase小工具，看看它會去哪裡; 在<div class =“container content”>下面。 我將從index.php中複製以下程式碼塊，將其貼上，然後將側邊欄中的ID更改為showcase

<?php if(is_active_sidebar('showcase')) : ?>
    <?php dynamic_sidebar('showcase'); ?>
<?php endif; ?> 

現在我們來製作三個盒子，我們將放在最後一個div元素的正上方。 所以把上面這段程式碼貼上三次。 這個將是box1，box2和box3。儲存程式碼

<?php if(is_active_sidebar('box1')) : ?>
    <?php dynamic_sidebar('box1'); ?>
<?php endif; ?> 
 
<?php if(is_active_sidebar('box2')) : ?>
    <?php dynamic_sidebar('box2'); ?>
<?php endif; ?> 
 
<?php if(is_active_sidebar('box2')) : ?>
    <?php dynamic_sidebar('box2'); ?>
<?php endif; ?>
</div> 

現在我們到網站後臺，進入外觀 -> 工具頁：

我們將抓取Text並將其放在Showcase中，然後我們將在Content文字框中貼上一些程式碼; 好吧，不是一些程式碼，而只是一些HTML。 點選儲存。
在Box1中也放一個文字工具，然後在這裡放一個標題，叫“Box1標題”。 然後我會在那裡貼上一些示例文字。為Box 2做同樣的事情。對於Box 3 我們把近期文章小工具放入其中，並將該標題設定為“最新訊息”。

轉到前端，重新整理頁面。 現在我們有了小工具。

他看起來並不好看，我們來給它加一些樣式：

.showcase {
    background: #e0eefc;
    padding: 40px;
    margin-bottom: 30px;
    text-align: center;
}
.showcase h1 {
    text-align: center;
}
.box {
    width: 32%;
    float: left;
    padding: 0 6px;
}
.box h3 {
    text-align: center;
    background: #009acd;
    padding: 5px;
    color: #fff;
}

儲存程式碼，重新整理前端頁面：

你可以看到我們有最新訊息；我們可以點選那裡並轉到不同的帖子。 有相簿和部落格帖子，為了讓這個看起來好一點，我會去我們放置side-widget li的地方並新增.box li：

.side-widget li,
.box li {
    list-style: none;
    line-height: 2.1em;
    border-bottom: 1px dotted #ccc;
}

這不是最好看的樣式，但整個專案的重點不是設計或風格，而是為了讓您熟悉建立WordPress主題的功能。 我們還剩最後一個部分課程，評論。

下一節課我們學習為帖子新增評論功能。