怎麼製作一個簡單的WP主題

來源：酷知科普網 8.35K

想只用自己的WordPress的主題，雖然自己會一些php和css，但還不知道怎麼去製作一個WordPress主題，想找個中文版的教程看下，本文將簡單的介紹怎麼來製作一個簡單的WordPress主題. 當然你在沒有學會製作模板之前可以自己去在網上免費的主題.

操作方法

（01）首先你得在wp-content/themes資料夾下面建立一個子資料夾. 在本教程中我們就新建一個”tutorial_theme”的資料夾，路徑就是wp-content/themes/tutorial_theme. 這個資料夾的名字要根據你想要製作主題名字來命名.你可以使用FTP工具來建立資料夾當然在製作主題前，你需要大概的設想下你製作的這個主題將會是什麼樣的結構，本教程的主題將會有以下部分組成頭部(header), 側邊欄(sidebar), 主題內容區(content )和尾部(footer ),下圖給與基本結構展示圖:

（02）我們還得在tutorial_theme檔案下面建立一下檔案: – 頭部檔案，主要是主題的頭部程式碼; – 此檔案是主題的主要檔案,包含有主體部分和一些將要被包含進來的檔案; – 這個檔案主要是用來做側邊欄的程式碼的; – 尾部檔案; -處理主題的樣式檔案和主題資訊的檔案;你可以在本地用編輯器(比如notepad編輯器)建立和設定好這檔案後通過FTP傳到你的部落格主題資料夾下面去,當然你也可以使用主機的空間面板中檔案管理器來建立檔案.下面我就來詳細的說明下每個檔案以及裡面可能需要的示例程式碼:

（03）頭部檔案在這個這個檔案裡面有以下示例程式碼:<html><head><title>Tutorial theme</title><link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>"></head><body><div id="wrapper"><div id="header"><h1>HEADER</h1></div>這個檔案都是一些基本的HTML程式碼和PHP混編起來的，當然php程式碼裡面也可能會使用到WP的一些方法.你也可以填寫主題的標題,關鍵字,和描述等等.也就在</title>後面我就包含了主題所需要的css檔案，也就是下面的link標籤(上面已經有了，這裡只是解釋下)<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">其中<?php bloginfo('stylesheet_url'); ?>這個程式碼是WP的內部系統一個函式，它主要是得到本主題中檔案所在的路徑.下面名字為wrapper的div主要是用來裝載整個主題主體本分的標籤，當然我們會在檔案裡面來控制這個div的顯示樣式的後面還有一個內容是HEADER的標籤，主要是我們在結構圖中展示的頭部部分，當然實際開發中，這個頭部可以寫很多程式碼的.

（04）主體檔案在這個這個檔案裡面有以下示例程式碼:<?php get_header(); ?><div id="main"><div id="content"><h1>Main Area</h1><?php if (have_posts()) : while (have_posts()) : the_post(); ?><h1><?php the_title(); ?></h1><h4>Posted on <?php the_time('F jS, Y') ?></h4><p><?php the_content(__('(more...)')); ?></p><hr> <?php endwhile; else: ?><p><?php _e('Sorry, no posts matched your criteria.'); ?></p><?php endif; ?></div><?php get_sidebar(); ?></div><div id="delimiter"></div><?php get_footer(); ?>這段程式碼已<?php get_header(); ?>開始，將會包含頭部檔案裡面的程式碼.這個也是WP的一個內部函式. 在後期的教程中我們可能會降到這個函式的. 然後就放了些將會在主體部分顯示的程式碼.接下來是一連串php程式碼和wp函式.這些程式碼會自動檢測你是部落格是否已經有檔案釋出了.然後, 我們就包含檔案<?php get_sidebar(); ?>側邊欄裡面我們可以包含近期文章,分類欄目等.接下來的div主要是用於把主體部分,尾部和側邊欄部分割槽分開.最後我們包含我i惡補檔案<?php get_footer(); ?>

（05）側邊欄檔案在這個這個檔案裡面有以下示例程式碼:<div id="sidebar"><h2 ><?php _e('Categories'); ?></h2><ul ><?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?></ul><h2 ><?php _e('Archives'); ?></h2><ul ><?php wp_get_archives('type=monthly'); ?></ul></div>在這個檔案裡面我們使用WP的函式來顯示分類目錄和近期文章等. 這個函式將會以ul li的形式把文章讀出來.

（06）尾部檔案在這個這個檔案裡面有以下示例程式碼:<div id="footer"><h1>FOOTER</h1></div></div></body></html>在這裡我們就簡單的顯示FOOTER .當然你可以使用一些顯示友情連結的程式碼,額外的Text程式碼,備案資訊等(以後會慢慢介紹這些的).

（07）樣式和主題資訊檔案在這個這個檔案裡面有以下示例css樣式程式碼:body { text-align: center; }#wrapper { display: block; border: 1px #a2a2a2 solid; width:90%; margin:0px auto; }#header { border: 2px #a2a2a2 solid; }#content { width: 75%; border: 2px #a2a2a2 solid; float: left; }#sidebar { width: 23%; border: 2px #a2a2a2 solid; float: right; }#delimiter { clear: both; }#footer { border: 2px #a2a2a2 solid; }e { font-size: 11pt; font-family: verdana; font-weight: bold; }

（08）此檔案主要是來控制主題的樣式的 ,會這隻背景和邊框等最後啟用你剛製作的主題，開啟首頁將會看到這樣的一個介面:

（09）上面我就說到了我們在這些檔案中就使用了WP的內部函式.

wp 主題