網站首頁健康小知識母嬰教育起名運動知識職場理財情感生活綠色生活遊戲數碼美容特色美食愛好

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

欄目: 互聯網 / 發佈於: / 人氣:8.03K

想只用自己的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的內部函數.

Tags：wp 主題