WordpressCMS主題開發01-首頁製作

這是wordpress cms主題製作的第一課。

首先，我們來看做一個cms主題必須準備好的一個頁面，我們準備好了3個靜態頁面：

xuhss_cms

可以先開啟index.html，這就是我們要開發的wordpress主題的cms樣式。

也就是說，我們會把它轉換為wordpress主題。

我們再來看看它的內頁和列表頁面-article.htm和list.htm

為了方便對照和問題的查詢，備份一下模板頁面是最安全的，備份的檔案命名為： wp_xuhss_cms

那接下來，我們把這個備份的模板放置到我本地搭建好的wordpress主題資料夾中：

如何把靜態頁面製作成主題

我們進入wordpress主題後，最基本的2個檔案，一個是style.css，另一個是index.php。

首先我們來製作：index.php

複製index.html，重新命名它為index.php，開啟它，我們發現這裡呼叫了3個css：

    <link href="front.css" type="text/css" rel="stylesheet" />
    <link href="whole.css" type="text/css" rel="stylesheet" />
    <link href="layout.css" type="text/css" rel="stylesheet" /><script type="text/javascript">

有多個CSS檔案的時候，用哪個檔案作為style.css？

判斷的方法非常簡單，在首頁裡往下找，找到第一個div所對應的class：

<div class="top cbody">

所以，我們在三個css檔案中，分別查詢 .top

最終，你會發現，它位於 layout.css 中。

通過.top可以快速的找到整個網站佈局的css，一般我們把整個網站用來佈局的div，它所對應的css檔案作為style.css。

其他的css可以作為次要的css。確定好之後，我們就直接在主題資料夾下，把layout.css改為style.css。

接著我們需要給style.css新增版權資訊，把以下程式碼放置style.css的最頂部就可以。

/*
Theme Name: 虛幻私塾CMS主題
Theme URI: http://www.xuhss.com
Description: CMS主題
Author: MrBang
Author URI: http://www.xuhss.com
Version: 1.0
Tags: cms, xuhss
*/

接下來，我們需要在index.php中，增加對style.css的呼叫。

    <link href="front.css" type="text/css" rel="stylesheet" />
    <link href="whole.css" type="text/css" rel="stylesheet" />
    <link href="<?php bloginfo( 'stylesheet_url' ); ?>" type="text/css" rel="stylesheet" /><script type="text/javascript">

現在，我們登陸wordpress後臺，找到主題資料夾重新整理：

用utf-8 無bom模式儲存

我們可以找到剛新增的wordpress主題。

但是我們發現了一個問題，這裡亂碼了。這是因為css檔案的編碼格式並不是utf-8。

所以需要對它進行轉換：

You must be logged in to view the hidden contents.

回到wordpress後臺，再重新整理一下，就正常了。

點選“啟用”，來啟用主題。

啟用好之後，來到網站的前臺：

你會發現，同樣出現了亂碼，所以還需要把 index.php 的編碼改為utf-8

修改完成後，就像這樣：

和我們靜態頁面的差距還是比較大，這是為什麼呢？

因為index.php 呼叫了3個css，但是我們只提供了一個style.css的呼叫。

另外2個css並沒有找到，所以我們需要把路徑補充完整。

呼叫wp主題的路徑也有一個模板標籤：<?php bloginfo(‘template_directory’); ?>

最後修改為這樣：

    <link href="<?php bloginfo('template_directory'); ?>/front.css" type="text/css" rel="stylesheet" />
    <link href="<?php bloginfo('template_directory'); ?>/whole.css" type="text/css" rel="stylesheet" />
    <link href="<?php bloginfo( 'stylesheet_url' ); ?>" type="text/css" rel="stylesheet" /><script type="text/javascript">

來到網站的前臺，你會發現樣式就好看多了。但是有些圖片還是沒有載入出來。

右鍵檢查最頂部的圖片，你會發現它的路徑是不對的：

<img height="50" alt="網上如何賺錢" width="200" src="img/logo2.gif">

和之前一樣，也要插入主題的路徑：

<div class="toplogo"><a href="#"><img height="50" alt="網上如何賺錢" width="200" src="<?php bloginfo('template_directory'); ?>/img/logo2.gif" /></a>&nbsp;&nbsp;</div>

還有一個要替換的地方，下面這個圖片的路徑也是不對的，需要把：

src="front_res/com_tag/head-mark3.gif"

替換為

src="<?php bloginfo('template_directory'); ?>/img/head-mark3.gif"

這樣首頁的製作就基本差不多。