WordPress主題製作相關教程：零基礎製作wordpress主題

　　wordpress主題製作步驟是什麼樣的？很多朋友因為喜歡主題，所以想自己製作WordPress主題，但是都不會怎麼辦？下面幫客之家小編為大家分享零基礎製作WordPress主題教程。

WordPress主題製作教程：

　　1、確定您的網格寬度

　　在開始之前，您需要確定您的網格，將需要有多寬。對於我的WordPress網站，我可以看到，通過使用Google瀏覽器的“檢查元素”功能，當你右鍵點擊對象，我的首頁的寬度是450px。這是幫客之家小編髮現最快的方式，可以快速確定網頁上的對象的寬度和高度

　　2、網格設計

　　而不是hand-building網格，您可以做的，如果你想要的，我建議要與許多可用網格產生器工具。在本文中，我將使用網格MindPlay產生器。這是一個非常簡單的和輕型網格產生器。

　　這裡想要一個三列的顯示和我需要確保我的像素是450。所以做相應的調整和跳到“Export”選項卡。

　　在匯出選項卡，使用top-most的“Style Sheet”的架構並向下滾動，直到你看到“Grid”的評論。你要拷貝一切從評論底下的架構。它應該只會在大約30行

　　。

　　3、更新你的WordPress的樣式

　　登入到你的WordPress網站和外觀>編輯器

　　在編輯器的右下角面板，你將看到一個風格。css檔案(或類似的東西，這取決於你的主題)。點擊這個開啟。

　　滾動到底部的表並粘貼您從MindPlay.dk pre：

　　4、實施網格

　　使用網格，您只需建立一個“網格”類。每個網格面積在CSS定義。開闢了新的一頁或後。去的HTML標籤，開始建立您的網格

　　下面是一些樣本前，您可以粘貼到位，讓你開始：

　　Left Column

　　Middle Column

　　Right Column

　　下面是它看起來像在WordPress：

　　儲存/更新的頁面，看看結果。在我的情況，這是該網站的首頁：

　　正如您可以看到的從上面的螢幕中，我們有三列，一切都是正確的，我們希望它能。你可以添加任意數量的行作為你想通過簡單地從以下：

　　Left Column

　　Middle Column

　　Right Column

　　Left Row #2

　　Middle Row #2

　　Right Row #2

　　這是到目前為止，它看起來如何：

　　技巧的調整

　　你可能無法在一些瀏覽器中當你有多行。如果您使用的是250像素250像素的映像，然後在grid-m4行的高度是250像素。

　　.grid-m4 {

　　float:left;

　　width:20px;

　　height:250px;

　　}

　　這將確保你的。grid-m1左邊的下一行不飄到它上面的行。

　　如果你想風格整個網格的背景，您可能需要調整網格的高度。我們假定您有四行網格，每個250 px。你要加的高度。網格類在1000 px所以任何樣式元素添加將覆蓋整個網格的設計。

　　.grid {

　　width:450px;

　　height:1000px;

　　margin:auto;

　　}

　　根據MindPlay的版本.dk網格generator 使用，該網站可能不會產生”.grid-m4”，相反，您將需要使用.grid-m1之後。確保你的網格grid-c3延伸到合適位置：

　　Left Column

　　Middle Column

　　Right Column《/p>

　　最終結果

　　下面是最後的結果看起來像有兩行和一些簡單的圖形：

　　有樂趣的設計，並記住，你可以在你想要的任何方式的風格你的網格。

　　怎麼樣！WordPress主題製作步驟就是這樣的了！沒有基礎的朋友也能容易看懂的哦~試試吧！

幫客之家小編猜你還喜歡：

wordpress主題製作教程：製作wordpress主題主要流程