1.首先找到wordpress菜單中的class類名
成都創(chuàng)新互聯(lián)公司專業(yè)為企業(yè)提供如東網(wǎng)站建設(shè)、如東做網(wǎng)站、如東網(wǎng)站設(shè)計、如東網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計與制作、如東企業(yè)網(wǎng)站模板建站服務(wù)，十年如東做網(wǎng)站經(jīng)驗，不只是建網(wǎng)站，更提供有價值的思路和整體網(wǎng)絡(luò)服務(wù)。
2.在wordpress模版目錄下一般在wp-content\themes\主題名，找到style.css
3.在style.css中為類名添加樣式，如下：
.menu-item:{color:red;}
這樣就可以設(shè)計菜單css樣式了
我們知道，網(wǎng)頁是由html和css進(jìn)行最基本的架構(gòu)布局，那么，wordpress主題也是一樣，今天小編就來教一教你如何修改自己的主題樣式，達(dá)到自己修改主題的目的，并且我們將放上非常實用的css代碼，讓你可以直接使用。
話不多說，我們現(xiàn)在就來看看如何簡單修改一款主題吧~
首先，你要知道主題的位置，如果你可以在本地測試，那么是最好不過的，主題的位置在根目錄/wp-content/themes/ 這個文件夾下的文件夾中，找到自己的主題文件
然后，我們推薦下載火狐瀏覽器，安裝firebug插件：
下載完成火狐之后，打開火狐瀏覽器，點擊工具下拉菜單，選擇附加組件，在搜索一欄中輸入firebug，安裝即可，安裝完成之后，重啟瀏覽器，按F12即可出現(xiàn)firebug的界面。
firebug的左邊有一個箭頭的按鈕，可以使用這個按鈕找到你想要修改的元素，在右邊，會出現(xiàn)影響這個元素的css，如下圖：
現(xiàn)在，我們需要給我們選中的元素加一個投影，點擊右邊的css，雙擊里面的效果css，添加新的代碼：
效果實現(xiàn)無誤之后，到我們第一步找到的主題文件夾中，尋找到相應(yīng)的css，css的路徑在上圖右邊的藍(lán)色標(biāo)題中，上圖要修改的這個元素在pages.css中，鼠標(biāo)放在上面，會出現(xiàn)詳細(xì)的路徑，找到文件，再根據(jù)第幾行顯示的位置，添加進(jìn)css，保存即可。
現(xiàn)在你會簡單的修改你的主題樣式了嗎？ 修改完成之后，記得記住你修改了那些文件，在主題更新中，可以詢問下是否修改過css，如果沒有的話，更新主題可以保留自己的css文件，就不會更新掉自己修改的樣式了~
現(xiàn)在你可以嘗試在本地修改一些樣式，如顏色、投影等等，讓你的主題與眾不同哦~ 下面我們給你準(zhǔn)備了一些好看的css樣式
一、準(zhǔn)備
基礎(chǔ)技能你不必深入研究PHP語言是怎么回事,但是最起碼的代碼得看懂一點,當(dāng)然這也不是重點,重點是基本了解CSS代碼書寫規(guī)則,非專業(yè)人士準(zhǔn)備一份CSS教程,或者下載一份CSS手冊。
主題模板選擇一套整體格局不錯的Wordpress主題模板,建議選擇WordPress HTML5主題,現(xiàn)在主流趨勢是HTML5主題。如果有耐心和信心的話,也可以自己把WP主題轉(zhuǎn)化為HTML5主題。
輔助工具最好是搭載本地PHP環(huán)境,網(wǎng)絡(luò)上有教程詳細(xì)說明怎么搭建本地Wordpress,個人推薦使用EasyPHP。如果修改范圍不大的話,可以直接在服務(wù)器上的主題修改,沒必要大費周折搞本地PHP。新手推薦使用軟件Dreamweaver,便于打開CSS文件好找到修改處,老鳥直接用記事本查找。在工具里,最重要一點是安裝Mozilla Firefox瀏覽器,強(qiáng)大的元素查看功能讓你迅速定位修改。
二、確定修改重點
這里講述的是怎么修改CSS文件,其實仔細(xì)觀察Wordpress主題模板代碼,不管是index.php首頁還是page.php頁面,或者single.php文章內(nèi)頁,你會發(fā)現(xiàn),其實大部分主題都只是通過CSS來控制頁面布局,頁面本身的代碼基本相同,特別是一些國外簡潔明了的優(yōu)秀主題更是如此。
當(dāng)我們要修改某部分樣式及結(jié)構(gòu)時,都會直接打開Wordpress主題模板文件或在后臺編輯主題,密密麻麻的代碼,就是主題作者自己看了也會頭暈眼花,所以會經(jīng)常在關(guān)鍵部位加上一些注釋,
php中注釋一般為:!– XXX –
css中為:/** XXX **/
一般調(diào)整比較常見的是頁面寬度、文本主體寬度、字體大小、行間距、背景顏色等。通過修改style.css文件都能夠達(dá)到預(yù)期效果(部分主題會指定CSS文件,只需對應(yīng)找到控制的CSS文件),部分國外主題在functions.php中加入加入大量模板函數(shù),這不是本文講述的重點。
三、修改Wordpress主題CSS文件
下面以Wordpress默認(rèn)主題Twentyeleven修改為例
用Mozilla Firefox瀏覽器打開網(wǎng)站,首先在要修改樣式的地方右鍵單擊→查看元素。
此時瀏覽器自動打開DOM樣式探查器
左側(cè)是頁面html源代碼,右側(cè)這部分就是控制標(biāo)題文字的CSS屬性,當(dāng)然可以自己琢磨著對照左側(cè)代碼進(jìn)行選擇
我們簡單地對CSS參數(shù)進(jìn)行調(diào)整,可以實時預(yù)覽效果,不管是字體大小,還是背景顏色都如此。
例如把color: rgb(34, 34, 34);調(diào)整為color: rgb(345, 34, 34);你會發(fā)現(xiàn)標(biāo)題顏色發(fā)生改變,再加入字體參數(shù)font-size: 20px;
font-family: 微軟雅黑; 此時發(fā)現(xiàn)頁面中,文章標(biāo)題全部都變?yōu)槲④浹藕谧煮w,字號為20px,紅色,調(diào)整到滿意的效果后,就應(yīng)該把文件修改進(jìn)CSS文件里。注意:字體如果是要使用微軟雅黑等中文字體時,需要參照CSS中文字體對照表使用Unicode編碼
保存方法有二種
一種是對照代碼右側(cè)位置style.css:745 用Dreamweaver軟件或是記事本打開style.css文件找到第745行代碼進(jìn)行修改。另一種是點擊style.css:745自動跳轉(zhuǎn)到樣式編輯器,然后選擇保存CSS文件。
如果使用 page.php 來處理所有頁面的外觀的話，答案肯定是不行的，但是如果使用不同的 WordPress 頁面模板，就可以自定義每個頁面的外觀了。
比如你博客的所有的頁面除了“關(guān)于”這個頁面之外都有側(cè)邊欄，在“關(guān)于”頁面，你想內(nèi)容的寬度能夠擴(kuò)展到這個頁面的寬度。下面就是詳細(xì)的實現(xiàn)步驟：
在當(dāng)前使用的主題文件夾中創(chuàng)建一個新模板，將它命名為 about.php。
完成之后，到 about.php 的最上面插入以下代碼：
以下內(nèi)容以本博使用的Wordpress Version 2.9.1為例
1、不同分類使用不同模版 ：
以建立promotion和tournament兩個分類為例：
假設(shè)它們的分類ID–category id分別為2、3，
wordpress存放路徑為 htdocs\wordpress\
那么在文件夾wordpress\wp-content\themes\your-theme下
復(fù)制兩個category.php模板文件，重命名為category-2.php和category-3.php
這樣分別修改兩個模版文件，即可定制出你需要的、獨特的分類頁面
2、 不同頁面使用不同模版
再來定制不同pages的模板，以about頁面為例：
復(fù)制文件夾wordpress\wp-content\themes\yourtheme下page.php模版文件
重命名為about.php， 注意在此文件最頂端加上如下代碼，否則在后臺管理面板讀不到：
!--p /*Template Name: about */--
然后在管理后臺-Pages-Edit 編輯about頁面，
在Template模板下拉菜單中選擇about，
保存即可
3 、不同日志使用不同模版
例如為日志應(yīng)用特別的模板：
復(fù)制文件夾wordpress\wp-content\themes\yourtheme下single.php模版文件
重命名為single-4.php，按需求進(jìn)行單獨修改
打開single.php模版文件
將其中的所有代碼以如下代碼包裹，形如
!--p $current_cat= get_the_category();$current_single_file= TEMPLATEPATH .'/single-'.$current_cat[0--cat_ID.'.php';if(is_file($current_single_file)){include($current_single_file);}else{ ? 此處為原來single.php中的所有代碼 !--p }--
重慶分公司
重慶分公司
