WordpressCMS主題開發01-首頁製作
這是wordpress cms主題製作的第一課。
首先,我們來看做一個cms主題必須準備好的一個頁面,我們準備好了3個靜態頁面:
可以先開啟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> </div>
還有一個要替換的地方,下面這個圖片的路徑也是不對的,需要把:
src="front_res/com_tag/head-mark3.gif"
替換為
src="<?php bloginfo('template_directory'); ?>/img/head-mark3.gif"
這樣首頁的製作就基本差不多。