WordPress主題模板修改教程..

1、WordPress 主題（模板）修改教程（一）:準(zhǔn)備工作作者：CreDSY 發(fā)布：2013-11-08 11:31分類：網(wǎng)站建設(shè)閱讀：1,146 次評論：暫無wordpress 主題（模板）修改之前呢，我們需要做下準(zhǔn)備工作，那就是需要安裝一些軟件，用來編輯和測試。首先需要配備一些瀏覽器，比如：火狐，谷歌，蘋果（這個在國內(nèi)用的比較少，國外居多，所以根據(jù)自己來選擇安裝），不過前兩個是必須安裝的，還有一個是IE 瀏覽器，IE 的話因為每個電腦只有一版本，我建議大家安裝一個叫IETester （下載地址）的軟件，用來測試不同IE 版本下的頁面是否兼容（頁面是否錯亂）的情況，這里需要多說一點，就是在對頁

2、面進(jìn)行修改后它在每個瀏覽器上面顯示多多少少會有所不同，最糟糕的就是在一個瀏覽器上面看起來很正常，而使用其他瀏覽器看時卻亂成一片。所以需要在多個瀏覽器上進(jìn)行測試。還有安裝火狐瀏覽器后還需要安裝它的一個擴展插件叫firebug 這個很重要，它可以直接在頁面上查看代碼以及修改測試，非常方便，在后面的文章中教大家怎么使用。其次需要用到的編輯軟件，Dreamweaver（下載地址）、EditPlus、NotePad+ （下載地址）等等，根據(jù)自己的編輯習(xí)慣來選擇，不過我希望大家都裝上，每個軟件各有各的優(yōu)點，在使用的時候新手的話建議先用Dreamweaver ，它的功能多而且在寫代碼時會有提示，對你有很大的

3、幫助。將上面安裝好后，我們需要安裝 wordpress 的運行環(huán)境（也就是說怎樣讓它運行起來），因為wordpress 是用 php 語言編寫的，所以他需要搭建 php 環(huán)境才可以運行 wordpress ，本站在 php 環(huán)境搭建步驟流程這篇文章已經(jīng)寫岀怎樣安裝 php 以及 Mysql 數(shù)據(jù)庫等。大家可以去了解下也可以看著安裝下（注：那篇文章說到是獨立安裝php 環(huán)境的方法）。環(huán)境搭建好后，就需要下載wordpress文件了。我們只要去官網(wǎng)下載就可以了。下面就是一些需要用到的下載地址：火狐瀏覽器下載地址：http:/.c n/火狐擴展插件 Firebug 安裝地址：https:/addon

4、/zh-CN/firefox/addo n/firebug/?src=search 當(dāng)你安裝好火狐瀏覽器后打開火狐瀏覽器將上面的地址打開，然后你就會看到有個按鈕點擊添加就可以了。WordPress主題（模板）修改教程（二）:本地搭建 wordpress作者：比克發(fā)布：2013-11-09 19:55分類：網(wǎng)站建設(shè)閱讀：1,322 次評論：暫無在昨天的時候，磊子寫了 WordPress 主題（模板）修改教程的準(zhǔn)備工作和php 環(huán)境搭建的 wamp5 的安裝和使用教程如果是剛剛接觸 wordpress沒有看的希望去看下，了解下。那么環(huán)境搭建好之后現(xiàn)在就開始在本地安裝wor

5、dpress 了。這個教程還是比較簡單的，大家一看就明白。首先安裝好 wamp 之后，會有一個 www 的文件目錄，假如你是在 C 盤安裝的，那么在 C 盤的根目錄中會有一個wamp 的文件夾，進(jìn)去之后你就會看到有個www 目錄了，然后把下載好的wordpress文件放到這個目錄下面，你可以隨便給這個wordpress文件命個名字，像磊子的話由于項目文件比較多，所以是以日期來命名的。比如今年的話，我先創(chuàng)建了名叫 2011的文件夾，然后是每個月份的文件夾，之后在該 11 下放置 wordpress 的。說明一點就是文件夾命名要都是字母或者數(shù)字不要岀現(xiàn)中文文字。避免讀岀文件時岀現(xiàn)中文文字亂碼而不發(fā)

6、讀取，這樣做的目的主要是為了以后便于管理和歸納。很清楚的知道自己這個月做了什么，如果大家的項目文件也比較多的話也可以采用這種方式。然后放置好后，還需要創(chuàng)建數(shù)據(jù)庫，運行方式呢，昨天已經(jīng)有講，直接在電腦左下角wamp 綠色的圖標(biāo)上左鍵選擇phpmyAdmi n或者直接在地址欄中輸入http:/localhost/phpmyadmin也可以運行。打開之后首先看到如下頁面（點擊放大）：然后點擊數(shù)據(jù)庫（橫向菜單的第一個）菜單，如下圖:O新建數(shù)據(jù)庫數(shù)據(jù)庫information_schema 檢査權(quán)眼檢查權(quán)限vp_favor總計：3t_全選/全不選選申頊,php AyAdmin蠱ii *轉(zhuǎn)e:iylI wp

7、_farvaiE iord.bio3!.裁餐庫SM.生胺蕊 不講畀 *般限 導(dǎo)毗=異扎補曼鞏呈錦莊TJ51. A 制 屯冋步 #設(shè)詈；ifla白田緒*這時候你會看到新建數(shù)據(jù)庫幾個字,下面是已經(jīng)創(chuàng)建的數(shù)據(jù)庫。如果第一次安裝上去的話，默認(rèn)已經(jīng)有兩個數(shù)據(jù)庫了的配置信息的東西，我們在上面創(chuàng)建好數(shù)據(jù)庫名稱。整理選擇utf8-ge neral-ci碼情況，如果是獨立安裝 php 環(huán)境的話之前在安裝Mysq 的時候已經(jīng)配置好后這個地方就不需要選了,數(shù)據(jù)庫就創(chuàng)建好了。,這兩個數(shù)據(jù)庫不要管他，里面是些Mysql編碼形式，選上的話主要是避免以后岀現(xiàn)亂最后點擊創(chuàng)建，這樣接下來就是運行 wordpress，在地址欄里

8、面輸入http:/localhost/XXX（會看到一個按鈕這里是你的 wordpress 文件夾名稱），運行后你整理rJ創(chuàng)建mysql試試創(chuàng)建一丫配置文件點擊進(jìn)去之后便是一個歡迎頁面，然后在點擊現(xiàn)在就開始的按鈕。便會看到如下配置信息:WordPress 主題（模板）修改教程（三）:主題文件結(jié)構(gòu)和作用作者：比克發(fā)布：2013-11-10 19:59分類：網(wǎng)站建設(shè)閱讀：1,260 次評論：1今天為大家講解 wordpress主題基本的文件以及它的每個文件的作用。如果剛接觸 wordpress 建議先去看下之前的教程哈，昨天說到了本地安裝wordpress ，安裝成功后默認(rèn)啟動了一個主題叫twen

9、tyeleven這個主題是對新版的wordpress 功能的一個展示。今天磊子就對這個主題在做下具體的講解。這樣大家也可以了解新版wordpress 的一些功能。安裝好 wordpress 后，了解下它的文件結(jié)構(gòu)，如下圖：大家可以清楚的看下里面有三個文件夾和一些文件。因為我們是修改主題所以我們只需要找到主題文件放哪兒就可以了。具體是在wp-c on te nt-themes 里面，wp-admin可以看做是 wordpress 后臺的核心文件， wp-i ncludes 可以看做是 wordpress主要的核心和方法文件。我們現(xiàn)在的 wp-co nte nt 里面，plugin 就是插件放置的

10、地方，lan guage 是語言包，之后還會有 uploads 你的 一些附加圖片什么的。 還有一個 upgrade 是你升級插件或 wordpress 系統(tǒng)時會自動生成的， 我們主要看下 themes 里面的 東西，默認(rèn)有兩個主題文件。其中一個便是twe ntyeleve n 里面機構(gòu)如下：rpBiACl-qd4-i：PHFjLL.iex. phpF旳Sei* a pK OLnctnze. tit me檔t7 KBtf E也dna. htdlFLrtEoM Bo rm ent5Prp-*Ctiv4t fc. phpFMF ScriptS KBp_bl( (-h.ftft.i&r. p

11、hpFHF ScraptE KB/ ft PHP ScriptC/ | qKBwpeMnrLL trii2.護(hù)hpFHP ScriptL KBi-p-linkE-cjjnl ph( (pPHP吐LJJt 2 EEwp-f df php HffScrtf liL EE；frp_S.L餌口p.php FHF Scrtpt1.9KU帑一1!?HP Script4矗-:4-vf-eaciff xuipl# .FHF Script3 EBuJt rp-loLn, phpJftPHF Seripk宅f# 2TT貳yp-recister. phpF密STEjiliL EEwpTssZ. php吋Srapi

12、L肚vfphpFHF ScriptZ霑yp-giL. phpPHF Script8 KBPT53.phj?5-Hi- Srripi-E陽xnlrpc pbpjtfv FHF Script fZ 4 KEFHF Scrijt WKDYp-&ton.phpFHP ScriptE KBEZB1Tftei ph 5jLi JI *Rp hSSphj-嵐訂，p.LTiL.php/ (V FHF Scr ipttp-tT-teHjtck沖JMF Scrijt4 ISt B. phfl FMF Script 2KB可以看到里面有很多的文件，假如你是制作主題的話，磊子在wordpress簡單結(jié)構(gòu)介紹這

13、片文章介紹過，是不需要這么多文件的。假如你制作單頁面得話那文件就更少了，我們只需要一些基本的header.php , index.php, footer.php ，style.css這四個文件你就可以做一個網(wǎng)站岀來！但是為了便于管理和進(jìn)行修改，我們可以把 in dex.php進(jìn)行分解開來。我們還需要添加圖片需要創(chuàng)建 images 文件夾，需要加載 js 創(chuàng)建 js 文件夾。這個主題呢有 36 個文件，5 個文件夾。我們先從文件夾說起， 第一個 color 文件夾里面有個 dark.css 這個主要用于主題的皮膚所需要的顏色樣式，第二個images 主要就是放圖片文件了，還有 header 頭部

14、的一些圖片，inc 這個文件夾可以當(dāng)做是主題的擴展，一些額外的功能和設(shè)置。我們在wordpress 后臺的外觀那兒可以看到有個主題選項。這里面顯示的，主要是就inc 里面文件所以運行的效果。js 文件夾這個就是放置一些js 文件，Ianguage就是主題的語言包。然后在下面的 36 個文件中，我們除了主題一般需要的文件外，比如index.php（主體），header.php（ 頭部），footer.php（ 底部），sidebar.php（ 側(cè)邊欄），4O4.php（ 未找到頁面內(nèi)容），category.php（ 分類內(nèi)容文件），author.php（ 作者內(nèi)容文件），page.php（ 頁面

15、內(nèi)容文件），search.php（ 搜索內(nèi)容顯示文件）和 searchform.php（搜索框文件），single.php（單頁內(nèi)容文件），style.css（ 樣式文件）functions.php（主題需要用到的方法文件），還有 tag.php（標(biāo)簽內(nèi)容文件）。以上這些文件把 wordpress每個板塊顯示的內(nèi)容需要用到的文件都創(chuàng)建了岀來。這樣的話便于我們進(jìn)行修改而不影響其他頁面的顯示效果，比如你每個文章后面都加入了標(biāo)簽，當(dāng)你點進(jìn)去的時候里面內(nèi)容是你不想要的效果你就直接修改tag.php文件即可。前提是你了解文件里面那些代碼都是做什么用的。因為每個主題它的結(jié)構(gòu)和寫法都是不一樣的，比如在 ta

16、g.php文件中有個是 wordpress一個函數(shù)方法，字面意思就是獲得引入主題里面一些模板kulhor.phfiFHF ScirL?tFHF Script2曙cohnAats. phpFHP Script 4 KBcfiL th-L1 vtU? tdFHP Sctipt2陽富中吐*吐AftXl響jrplip f jfFHF ScriptUH良耐*rti世Jbp FHF Script 4礎(chǔ)phpPHP Script1 KHconf ent-ji iEe. phpFMP SetLfLL EE；ctfDLt-q,UQ. ptp ycnntent-SLnle. phpPHP wpH 4 ECBCll

17、tMlt-St fct-aS：. ptiFHF Script 3 EfiEattrphpFHTScrijtLESEuncticns phpFlff Scraft 21 KBLfeAxLtF.phpPMFSOTLIH.SLTidiX. pFHF Script:shbMy. ptipPHP Script 7 KH醫(yī)匪弁式質(zhì)文檔IL BS3Ldebiur phFMP SetipL1YEPs* E3 deb-irpigfl phpHtt Serkft L ESp昨a. phpPHF Script l翹F4r chfrn flypFMF Script E ECBsiEkclphj?PHP,pE陽get_

18、template_part -arcbLLvt. pbpPHF Script 2曲4D4. php百時H phpPlff Sa i pt4 KB+hiBH i* dt j*陽fFKP Script驚3 JCB護(hù) Jcwit Ent-link php5 Mic嵋p. phpFKF Scriptii deb4F-faster, php FMPSetifL EE：LiCJlS.tMt15 Di.?r4-rnT) )ipl;卩*3M i 225亂臨比FG SJ煩tvir ck phpJHf ScriiptZEEPHPEtylt-. C559 EE/文件的內(nèi)容，而這個模板文件的主要部分組成名稱叫cont

19、ent ，如果大家已經(jīng)打開這個主題文件就會很/清楚的看到里面有一些content-xxx.php的文件，比如你定義了一個文件的名稱叫content-1.php/那么這個方法就可以這么寫get_template_part(,content?,1);至于這么做的原因如果以這個主題/來說的話，就是 tag.php 的代碼內(nèi)容是和模板文件的內(nèi)容是一樣，完全可以共用一個模板文件。/那 get_post_format()是什么呢？大家看下面的截圖就可以明白。形式日志r 強c相冊c狀態(tài)r引再c囹蟻這個叫形式的東東在添加或者編輯日志的時候在右側(cè)邊欄就會看到。這樣大家應(yīng)該知道主題文件里的con te n- xx

20、x.php主要就是對這個形式內(nèi)容分別創(chuàng)建的文件。它們每個的顯示效果也會不一樣。這個在wordpress之前的版本是沒有的。剩下的image.php 和 showcase.php還有一些 css 文件的東西。大家都可以理解為主題專門定制的一些內(nèi)容的文件。image.php的話圖片附件也就是wordpress 后臺媒體那兒添加圖片時查看顯示的效果，showcase.php是一個模板文件主要用在wordpress后臺頁面那邊添加或者編輯頁面時選擇的模板效果。最后還有sidebar-footer.php 和 sidebar-page.php 這些都可以當(dāng)做是主題里面的模板。這樣我們大概就對這個默認(rèn)主題

21、做了一些了解，我想大家也有所了解吧。但是我們要做模板修改的話這個主題是不怎么適合做修改的，特別是對新手。原因就是里面有配置文件inc 這個文件，有配置文件就有調(diào)用這個文件的代碼在header.php 或者其他地方我們還得去找，這樣是很麻煩的。所以選擇適合的主題框架進(jìn)行修改，是非常重要的。今天磊子主要就是說下結(jié)合默認(rèn)主題大概對文件結(jié)構(gòu)以及一些作用還有wordpress一些功能的做了下講解，在明天磊子具體說下我們主題里面的一些常用到的函數(shù)。諳在下方揄入數(shù)據(jù)庫相關(guān)信息-若怨不蓿楚，諸咨詢主機提供商數(shù)據(jù)庫名用戶名密碼數(shù)據(jù)庫主機您希望WordPyeSS使用吃亍數(shù)曙庫運行？慳的MjQL尾尸容以廉MySQL

22、密瑪.iirts況下，應(yīng)埴寫localhost,若測試連接失 陽潔聯(lián)丟主機提供商咨詢?nèi)魞x希聲在一平數(shù)據(jù)庫中薦放容平Wordfrt的救 君，誰哆改 H 項說醫(yī)另：第一個呢就是填寫之前創(chuàng)建好的數(shù)據(jù)庫名稱，然后是你的用戶名還有密碼。默認(rèn)安裝好wamp 后用戶名是 root 密碼是沒有的，所以密碼不填。然后提交，在點進(jìn)行安裝按鈕。就會出現(xiàn)讓你填寫站點標(biāo)題，后臺登錄的用戶名和密碼，還有就是郵箱地址。最后點擊安裝wordpress 。這樣 wordpress就安裝成功了，你可以登錄進(jìn)去后臺看看了（后臺地址的話就是http:/localhost/XXX/wp-admin），剛安裝好后會有兩個默認(rèn)的主題。 有

23、一個叫 twentyeleven得主題，這個主題已經(jīng)把新版的 wordpress 的大部分自帶的功能都包含了。大家可以先看下他的文件結(jié)構(gòu)?，F(xiàn)在呢，磊子在教大家第二種安裝wordpress的方法，直接修改配置修改安裝。在把wordpress文件放到 www 目錄后，點擊進(jìn)去找到 wp-config-sample.php這個文件。然后把它的名字改成wp-config.php再打開。主要是修改里面的 18 和21 和 24 行 填好之后保存，然后在地址欄直接運行 wordpress 。你會看到他直接跳到了填寫網(wǎng)站標(biāo)題和賬戶已經(jīng)密碼的地方，這樣安裝的話也是比較方便的，看大家自己選擇了。WordPres

24、s 主題（模板）修改教程（四）:常用的 wordpress 主題函數(shù)和作用作者：比克發(fā)布：2013-11-11 10:32分類：網(wǎng)站建設(shè)閱讀：1,076 次評論：暫無今天繼續(xù)為大家講解， 上一篇磊子結(jié)合默認(rèn)主題講解了下主題（模板）文件結(jié)構(gòu)和作用今兒也會結(jié)合默認(rèn)主題說下wordpress主題中需要用到的函數(shù)和它的作用。用法的話磊子會在后面章節(jié)具體用到時在具體講下，今天只講主題常用函數(shù)是什么。先讓大家有個了解，廢話不多說進(jìn)入正題。首先我們在做網(wǎng)站時腦子里要有個大概，想你這個網(wǎng)站的整體結(jié)構(gòu)。是上，中，下型呢，還是左，中，右呢，自己得有個思路。不過一般都是從上往下，也就是頭部中間和底部，那我們先從頭部

25、開始講起。wordpress 的 header.php 文件中v/head之間需要用到的一些函數(shù)。（建議大家不管在看什么教程的時候，先提前把需要的文件都準(zhǔn)備好，邊看邊操作影響更深刻，呵呵）1. 這個函數(shù)用于聲明網(wǎng)頁所使用的語言，如果你的主題是用于中文站點，而且文字方向是從左往右讀那么在查看源碼的時候會看到dir= ” ltr ” lang= ” z-hCN 這么一小段。主要放在 里面。2. ?php bloginfo（ charset ）; ?這個函數(shù)用于聲明網(wǎng)站的編碼，這個編碼可以在WordPress 后臺-設(shè)置-閱讀,最后一個選項”頁面和 feed 編碼”那里設(shè)置，一般都是UTF-8。填寫

26、你創(chuàng)建的數(shù)據(jù)庫名稱你的數(shù)據(jù)庫用戶名你的數(shù)據(jù)庫密碼，沒有的話不填3. ?php wp_title(T , true,right 該標(biāo)） 簽顯?|?。http:/example/wp-co nte nt/themes/XXX/style.css使用了這個函數(shù)就省去了寫這么長的地址。8. 于輸岀博客的 ” style.css 文件所在的目錄 ”，女口http:/example/wp-c onten t/themes/XXX。9. ?php bloginfo( rss2_url ); ?用于輸岀你的 feed 的網(wǎng)址，一般形式如：http:/example/feed。10. ?php bloginfo

27、(pingback_url ); ?用于輸岀你的 pingback 的網(wǎng)址。(pingback大概意思就是說別人引用了你的文章也加上了你網(wǎng)站的鏈接，你就會受到pin gback的信息。)11. 這個函數(shù)是非常重要的，大家可以理解成我們裝的插件和主題的接口，一些插件的作用是通過這個函數(shù)顯示在主題上面的。還有一個是wp_footer() 這個也是，不過它是放在footer.php里面的。結(jié)束后我們繼續(xù)往下看，到了這里面的東西就很多了。我們網(wǎng)站的內(nèi)容都是放在html標(biāo)簽之間的(這個不清楚的，大家可以先去網(wǎng)上搜下，磊子會在以后講到html 標(biāo)簽)。首先網(wǎng)站肯定需要你自己 logo 可以是文字也可以是圖

28、片。如果要用圖片呢，我們就需要這個函數(shù)?phpbloginfo( template_url ); ?顯示主題文件地址比如你的主題叫XXX，那么你的主題文件地址就是http:/你的網(wǎng)站，然后圖片是放在 images 文件里面的，這樣完整的代碼是/images/logo.jpg alt= title= /II 這里用到了 html 的圖片標(biāo)簽 img 以及里面一些屬性這樣做的好處是假如你本地測試后要傳到空間上不需要自己再去修改圖片地址。我們繼續(xù)往下看，我們可以在logo 的右邊加上搜索框，就像磊子博客上一樣，那么用到的函數(shù)是這個是調(diào)用 wp 內(nèi)置的搜索框，當(dāng)然我們也可以自定義。接下來是菜單導(dǎo)航。在

29、 wordpress之前的版本中我們常用到的菜單導(dǎo)航函數(shù)是但由于新版的 wp 后臺有了菜單選項，這個方法很少用了，而是新的函數(shù)primary ); ?要使用這個函數(shù)還需要在functions.php里面激活這個功能，寫法是 以上這些部分一般都是放在header.php里面的，原因就是它們都是公用的，你每個頁面都會用到這些，所以呢在網(wǎng)站頭部中如果是每個頁面都會用到的可以放在header.php里面。放進(jìn)去之后那其他文件需要在文件里面最頂端加上如果是調(diào)用 footer.php在文件的最低端就上 ,側(cè)邊欄調(diào)用就是 ?php4. 用于輸岀博客網(wǎng)站的名稱，可以在WordPress 后臺-設(shè)置-常規(guī)站點標(biāo)

30、題那兒修5. ?php bloginfo(6. ?php bloginfo(7. ?php bloginfo(可以打開你的網(wǎng)站首頁,description ); ?站點的描述，可以在url );用于輸岀博客的”站點地址(URL )stylesheet_url);用于輸岀博 客的”WordPress 后臺-設(shè)置-副標(biāo)題那兒修改?！保梢栽?WordPress 后臺-設(shè)置-常規(guī)那里找到。然后用瀏覽器的”查看源代碼”功能來查看網(wǎng)頁的源代碼，查找style.css 文件的地地址 /wp-content/themes/XXXget_sidebar(); ?，昨天講到文件結(jié)構(gòu)時有個sidebar-page

31、.php的文件，那調(diào)用代碼就要寫成。這樣就把文件引入進(jìn)來了。其次網(wǎng)站主要內(nèi)容部分，我們看博客首頁的時候都是以列表的形式顯示岀來的，那么需要用到循環(huán)。把整個文章里面的標(biāo)題 和內(nèi)容全部顯示岀來，代碼是v?php /*開始循環(huán)*/ ?v?php while (have_posts():the_post(); ? /顯示文章標(biāo)題 /顯示文章作者 /顯示文章發(fā)布時間，格式為 2011-11-23 21:10:11/顯示分類名稱用逗號,隔開 /顯示標(biāo)簽名稱用逗號,隔開 /顯示文章摘要/顯示文章內(nèi)容/這些都需要放在循環(huán)里才可以顯示岀來，還有下面這些需要在循環(huán)里面添加的/以上是網(wǎng)站的主要內(nèi)容部分用到的常用函數(shù)

32、。主要部分顯示完之后如果需要有側(cè)邊欄.方法是: /獲得每篇文章的鏈接，一般放在 /?php comments_popup_link(_(暫無評論，leizi), _(1/評論的鏈接以及一些設(shè)置，無評論時顯示暫無評論，有一條時顯示a 標(biāo)簽里面獲取文章作者的鏈接同樣也是a 標(biāo)簽里面條評論,leizi), _(%條評論,leizi); ?1 條評論，多條時就是條評論判斷是否存在 id 是 post-sidebar 的側(cè)邊欄v?php /*開始循環(huán)*/ ?/然后你需要在 functions.php _(id= post-sidebar,description= _(before_widget = ,=

33、 v/liv/ulv/div,= ,= ,);add_action( widgets_init,lei_widgets_init);/通過這個方法，就可以在后臺的小工具那兒使用叫首頁的側(cè)邊欄了這樣一個網(wǎng)站大概內(nèi)容基本都顯示岀來了。還需要在詳細(xì)頁面sin gle.php里面加上評論框，代碼是 , single.php里面內(nèi)容顯示的方法和主要列表內(nèi)容顯示的方法是一樣的。把那些代碼貼過去用就行。還有分類文件category.php，作者內(nèi)容文件 author.php ，存檔文件 archive.php 等，都可以用上面的循環(huán)來顯示岀來。我們用到上面的代碼就可以做一個主題岀來了。在加上下面的一些判斷。

34、is_404(),是否是 404 頁面 is_admin(),/是否是管理員 is_archive(),is_attachment(),/是否是附件頁面 is_author(),是否是作者頁面is_category(),/是否是分類頁面is_date(), is_day(), is_feed(),/是否是時間，天以及訂閱頁面is_tag(), /是否是標(biāo)簽頁面。/等等.一些判斷有了這些判斷我們可以更靈活的編寫代碼。還有一些函數(shù)磊子就不在寫了，在后面的具體操作中在講，這些呢都是需要知道 的，希望大家多看下，多試著寫一下用用。明天講解html 方面的比較更基礎(chǔ)的知識。大家先消化下吧，WordPre

35、ss 主題(模板)修改教程(五):需要了解的 html 標(biāo)簽和屬性作者：比克發(fā)布：2013-11-12 13:19 分類：網(wǎng)站建設(shè)閱讀：740 次評論：暫無昨天講了常用的 wordpress 主題函數(shù)和作用，今天磊子就來說下更基礎(chǔ)的東西，html 標(biāo)簽和屬性，我這里講一些比較用的多的，其余的就需要大家去查閱了和搜索網(wǎng)站了。我這邊也有精通div+css 的教材，因為容量比較大所以就沒有上傳，如果有需要的可以來聯(lián)系我。我們在制作的和修改主題的時候，大部分都是使用 html 和 css 來對主題進(jìn)行樣式和排版上的修改。可以說制作一個簡單的主題并不需要知道太多的wordpress 函數(shù)和 php 代碼

36、，而 html 的話你就得非常了解和熟悉，你才 能更好的去下手修改。is_home(); /is_page(); /is_single(); /is_front_page(); /is_search(); /是否是存檔頁面首先是基本的結(jié)構(gòu)標(biāo)簽組成(大家可以對照著自己的html 文件看一下)style 。寫法例如：, 表示是 html 文件,標(biāo)簽里面可以加網(wǎng)站標(biāo)題，描述，樣式還有js 腳本等。,包含文件的標(biāo)題，標(biāo)題岀現(xiàn)在瀏覽器標(biāo)題欄中 是的結(jié)束標(biāo)簽,放置瀏覽器中顯示信息的所有標(biāo)志和屬性，其中內(nèi)容在瀏覽器中顯示., 是的結(jié)束標(biāo)簽,是的結(jié)束標(biāo)簽然后在標(biāo)簽之間就是我們主要用到的標(biāo)簽了。 這是一個例子

37、/class值可以定義多個中間用空格隔開就可以，id 只能有一個，style是直接給 div 里面的內(nèi)容進(jìn)行/樣式定義的，比如上面直接加了一個文件顯示紅色的css 代碼。title 是對 div 內(nèi)容的提示。/我們用鼠標(biāo)放在 這是一個例子上面時就會有這個提示告訴用戶這是做什么的。/通過定義 class 或者 id 的值我們就可以在 css 文件里面來給這個 div 內(nèi)容加樣式上去，寫法是/ .test 或者#test1第一個是 class 的寫法第二個是 id 值的寫法，這樣我們以后如果要給/這個 div 加樣式就可以去找下它的 id 值或者 class 值，然后在之間添加 css 代碼。其他

38、的 html/標(biāo)簽也是一樣的，都可以用來定義，比如v/avpv/pvh1v/h2 等等2. v/h1,vh2v/h2,vh3vh3,vh4vh4,vh5v/h5,vh6v/h6這些都是標(biāo)題標(biāo)簽，標(biāo)題大小由數(shù)字逐漸變小。5. vform action=” method= ” name= ” id= ”表單標(biāo)簽，用來提交一些信息，比如我們評論就需要用這個標(biāo)簽。屬性以此是：需要把內(nèi)容提交的地址，提交的方法，表單的名稱，id 值。6. vinput type=” name= ” size= ”vali 可以用在vfoi/m里面然后把內(nèi)容提交給action 地址，屬性 type 定1.v/div是一個塊

39、級元素，瀏覽器通常會在div 元素前后放置一個換行符。它常用的屬性有id, class, title,義它的類型，可以是文本框，復(fù)選框，密碼框，按鈕，單選按鈕等7. vpv/p段落標(biāo)簽，瀏覽器默認(rèn)給它一個換行符。主要用在文章中。8. vspa nv/spa n標(biāo)簽因為它不換行所以常用來內(nèi)容組合。然后分別給定義樣式。9./iframe 框架標(biāo)簽，常常用來嵌入視頻地址來顯示在網(wǎng)站上面。含有可以定義寬度width，高度 height，是否顯示滾動scrolling= ” ,yes 顯示 no 不顯示。10. 加粗標(biāo)簽可以給文件進(jìn)行加粗，也可以用11. 居中標(biāo)簽，對文字或者圖片等進(jìn)行居中。12. 換行

40、標(biāo)簽，可以對文章進(jìn)行強制換行。定顯示的行數(shù)。以上這些呢，就是我們比較常用的標(biāo)簽了，這些標(biāo)簽用的多了慢慢的就記住了。屬性主要是用來執(zhí)行和觸發(fā)JavaScript 事件。比如磊子首頁的圖片滾動，我們在某些網(wǎng)站注冊時會彈岀一個框來提示你注冊哪些內(nèi)容。這些都是事件觸發(fā)后發(fā)生的。例如：on click鼠標(biāo)點擊后觸發(fā)，onm ousedow n鼠標(biāo)按下時觸發(fā),onmousemove,鼠標(biāo)移動時觸發(fā)等等。有了這些屬性我們就可以來執(zhí)行javascript 腳本。如果大家想了解的可以網(wǎng)上搜下 html 事件屬性，磊子只是簡單的介紹了下。我們有了這些標(biāo)簽后，就可以做頁面已經(jīng)改一些簡單的頁面，但是直接用標(biāo)簽顯示岀來

41、的東西是非常不美觀的。我們還需要css 來給這些標(biāo)簽定義樣式，就像我們穿衣服一樣。標(biāo)簽就相當(dāng)于自己，而 就看你自己的了。磊子會在明天給大家說下css 常用到的樣式屬性。WordPress 主題（模板）修改教程（六）:需要了解的 css 樣式作者：比克發(fā)布：2013-11-13 13:41分類：網(wǎng)站建設(shè)閱讀：789 次評論：暫無今天接著昨天的需要了解的html 標(biāo)簽和屬性 為大家繼續(xù)講解基礎(chǔ)性的知識，常用到的css 樣式和屬性。可以說很多。讓我一一道來。首先說下寫法。給大家看個例子就明白了。/定義一個 div 標(biāo)簽里面給個 id 值，或者 class 值src 里面輸入視頻地址。常用屬性包13.

42、v/em可以將文字斜體顯示14.可以文件縮小對應(yīng)的將文件變大15./textar 文本域標(biāo)簽可以定義多行, 如評論輸入框,cols 規(guī)定它的寬度，rows 規(guī)16. 標(biāo)簽為 in put元素定義標(biāo)注（標(biāo)記）.17.標(biāo)簽用于直接html 文件中定義樣式.18.標(biāo)簽定義 html 表格,簡單的 html 表格由 table元素以及一個或多個 tr、th 或 td 元素組成,tr元素定義表格的行,th元素定義表頭，td 元素定義表格的單元。html 標(biāo)簽屬性中還有一個事件屬性，這個css 定義的樣式相當(dāng)于我們穿的衣服。怎么打扮vdiv id=mytest這是一個測試 /然后在 css 文件中定義樣式

43、.test color:#FF000; background:#000000; /或者 #mytest color:#FF000; background:#000000; /可以看到樣式是寫在里面的，class 用點，id 值用# 號一.文本屬性1.word-spac ing:單詞之間的距離2.l etter-spac ing:字母之間的距離3.text-decorati on:定義文字的裝飾：none（ 沒有）/underline（下劃線）/overline（上劃線）4.vertical-alig n:元素在垂直方向的位置:baseline（基線）/top（ 頂部）/text-top（ 文本

44、頂部）/middle（ 中間）/bottom（ 底部）/text-bottom（文本頂部）5.text-tra nsform:使文本轉(zhuǎn)換為其它方式:capitalize（字母全部大與）/uppercase（首字母大與）/lowercase（ 字母全部小寫）/none（無）6. text-align:文字的對齊：left（ 左）/right（右）/center（居中）7. text-i ndent:文本的首行縮進(jìn)8.li ne-height:10px 文本的行高二字體屬性1. fo nt-family:使用什么字體2. font-style: 字體的樣式：normal/italic（斜體）/3.

45、 font-variant:字體大小寫：normal/small-caps4. font-weight:字體的粗細(xì)：normal/bold5. fo nt-size: 字體的大小三.顏色和背景屬性（backgroud）1.color:定義字體顏色2.backgrou nd-color:定義背景色3.backgrou nd-image:定義背景圖片4.backgrou nd-repeat:背景圖案重復(fù)方式：repeat-x/repeat-y/no-repeat5.backgrou nd-attachment:設(shè)置滾動：scroll（滾動）/fixed（固定的）6.backgrou nd-posi

46、ti on:背景圖案的初始位置：top/left/right/bottom四.塊屬性（block）邊距屬性：1. margi n-top:設(shè)置頂部邊距2. margi n-right:設(shè)置右邊距3. margi n-bottom:設(shè)置底邊距4. margi n-left:設(shè)置左邊距填充距屬性：5. paddi ng-top:設(shè)置頂端填充距6. paddi ng-right:設(shè)置頂端填充距7. paddi ng-bottom:設(shè)置頂端填充距8. paddi ng-left:設(shè)置頂端填充距五 . 定義超鏈接a:link color:green;text-decoration:nore a:visi

47、ted color:ren;text-decoration:underline;16px a:hover color:blue;text-decoration:underline;16px border-width（ 一次定義邊框?qū)挾?） border-color（ 設(shè)置邊框顏色 ） border-style（ 設(shè)置邊框樣式 ）border-top（ 一次定義頂端各種屬性 ） border-right（ 一次定義右端各種屬性 ） border-bottom（ 一次定義底端各種屬性 ） border-left（ 一次定義左端各種屬性 ） 七 . 項目符號和編號display: 定義是否顯示 no

48、ne（ 不顯示 ）,block（ 塊狀顯示 ）white-space: 屬性設(shè)置如何處理元素內(nèi)的空白 list-style-type: 在列表前加項目符號 ,disc（ 圓點 ）,circle（ 圈 ）,square（ 方形 ）,decimal（ 阿拉伯?dāng)?shù)字 ）,lower-roman:（ 小寫羅 馬數(shù)字 ）,upper-roman（ 大寫羅馬數(shù)字 ）,lower-alpha（ 小寫英文字母 ）,upper-alpha: 大寫英文字母 ）,none list-style-tyle: 在列表前加圖標(biāo)或者符號 list-style-position: 決定列表位置 list-style: 一次性定

49、義列表樣式 八 . 定位 （positioning）即層屬性類型 : 設(shè)定對象的定位方式。有三種方式： Absolute（絕對定位）、 Relative（相對定位）、 Static（無特殊定位）。相對應(yīng)的 CSS 屬性是 ” position ”, 如 :position:relative。1.Visibility: 設(shè)定對象定位層的最初顯示狀態(tài) , 有三種狀態(tài) :Inherit（ 繼承父層的顯示屬性 ）Visible（ 對象可視 ）,Hidden 隱藏對 象。相對應(yīng)的 CSS 屬性是 ” visibility ?！?.Z-Index: 設(shè)置對象的層疊順序。編號較大的層會顯示在編號較小的層上邊

50、。變量值可以是正值也可以是負(fù)值。相對應(yīng)的 CSS 屬性是”z-index ”。3.Overflow: 設(shè)置如果層的內(nèi)容超出了層的大小時如何處理。有四種處理方式 :visible, 增加層的大小 , 從而將層的所有內(nèi)容顯示出來 ,hidden, 保持層的大小不變，將超出層的內(nèi)容剪裁掉；Scroll ，總是顯示滾動； Auto ，只有在內(nèi)容超出層的邊界時才顯示滾動條。九 . 其他width: 定義寬度屬性 height: 定義高度屬性float:浮動，left（左浮動）,right（ 右浮動）clear:清除浮動以上便是一些比較常用到的css 屬性了，這些就需要大家多多去寫去做，這樣才印象深刻點，

51、建議大家使用 Dreamweaver主要是使用軟件里面的提示功能。有些東西我們不必要都記住，但是知道怎么使用就可以，也可以在網(wǎng)上找些 css 手冊來看。這些基礎(chǔ)性的東西磊子就說到這里了，其他的就需要自己來學(xué)習(xí)了，我這里的并不是很全。未訪問過的狀態(tài)訪問過的狀態(tài) 鼠標(biāo)激活的狀態(tài)六 . 邊框?qū)傩?(border)border-top-width( border-right-width( border-bottom-width( border-left-width(d頂端邊框?qū)挾?）右端邊框?qū)挾?）底端邊框?qū)挾?）左邊框?qū)挾?）WordPress 主題（模板）修改教程（七）:如何使用火狐的 fireb

52、ug 插件作者：比克發(fā)布：2013-11-14 10:36分類：網(wǎng)站建設(shè)閱讀：1,619 次評論：暫無今天繼續(xù)為大家講解wordpress主題修改，前幾篇主要說了下基礎(chǔ)方面的東西，雖然簡單但是還需要下點功夫來掌握喲。今兒主要說下主題修改的必要工具，火狐瀏覽器的firebug插件使用安裝方法磊子在第一篇教程準(zhǔn)備工作中有寫到，不大清楚的可以點擊看下。我們在修改主題時一般都是找到自己的喜歡的一款的主題后，將里面自己覺得不需要的，或者哪里需要添加點兒功能和樣式的然后進(jìn)行修改。還有就是自己開發(fā)主題，但是不想一個一個文件創(chuàng)建這樣一步一步做，于是找些適合開發(fā)的主題框架進(jìn)行 修改和制作，不過通過磊子在網(wǎng)上的接

53、觸大多數(shù)都是前者。自己建個博客寫點東西，并沒有想把學(xué)習(xí)這些東西，即便如此你 也需要一個方便的工具來使用，這樣做起來效率上是非常高的。而后者選擇合適的主題框架進(jìn)行開發(fā)，我們需要的框架首先 主題很簡潔，文件結(jié)構(gòu)簡單（像默認(rèn)主題顯得有點兒多，有些東西其實我們是用不到的），還有就是沒有過多的主題設(shè)置等等一些內(nèi)容進(jìn)行開發(fā)制作主題，這樣更需要一個好的輔助工具來幫助你，火狐瀏覽器的 firebug 插件就是一款非常好用的工具。剛好磊子在：龜仙島站中看到了 在 Firebug 中調(diào)試 CSS,這篇文章！分享給大家！1.審核層級表規(guī)則檢查一個 CSS 元素非常簡單，類似于在上一章中介紹的檢查一個HTML 元素。

54、要檢查一個 CSS 元素，我們只需要將 Firefox以檢查模式（inspect mode）打開。注意：可以使用以下兩個方法來打開Firebug 的檢查模式：Ctrl+Shift+c快捷鍵直接打開檢查模式按 F12，然后點擊如下圖標(biāo)，這個圖標(biāo)在Firebug 窗口左上角，緊挨著臭蟲圖標(biāo)。F 面這個截圖演示了對一個HTML 元素的 CSS 檢查（觀察屏幕上的 Zen Garden的矩形框）：3CM7en he licauly in CSS Detign - Mo/ilh f irefox_A ,UrthHDptirHebd#r hl k-gi： 屮4 t rt-nt util /001 /h 1

55、 . gii f) nficrol 1 leftdi 1 i hlGclct丄白皿；1 ci f rheight: 0昨和 t宙1口tpz lOpKridth：l?px下面是找到并檢查一個HTML 元素的 CSS 格式的步驟：打開一個站點（本例是http:/）并且按 Ctrl+Shift+C（默認(rèn)快捷鍵），以檢查模式打開Firebug。 移動鼠標(biāo)指針到 Web 頁面我們希望檢查的HTML 元素上。如下一個截圖所示（本例中是印有“ Zen Garden 字樣的圖片）。隨著鼠標(biāo)移動，我們可以看到在鼠標(biāo)下面顯示有一個藍(lán)色的矩形框。無論矩形框內(nèi)包含的是什么內(nèi)容，F(xiàn)irebug都將立即顯示 該內(nèi)容的 H

56、TML 代碼在左邊的面板中，而該內(nèi)容的CSS 代碼將顯示在右邊的面板中。當(dāng)我們找到了有問題的 HTML 元素，點擊它。此時 Web 頁面上的矩形框消失了，在Firebug 將顯示岀該元素的 HTML 代碼和 CSS 規(guī)則。Firebug也將顯示鏈接（在右邊的面板中），并指示岀 CSS 文件中所應(yīng)用的CSS 屬性所在行數(shù)。當(dāng)我們點擊鏈接，F(xiàn)irebug將轉(zhuǎn)到 CSS 標(biāo)簽頁， 并顯示岀該 CSS 文件所鏈接的行的內(nèi)容。這個特性能夠幫助web 開發(fā)者和設(shè)計者輕松的找到準(zhǔn)確的 CSS 文件以及需要作岀調(diào)整的內(nèi)容所在行。2.預(yù)覽顏色與圖片為確認(rèn)我們是否已經(jīng)選擇了正確的元素，在CSS 規(guī)則查看的面板中，

57、移動鼠標(biāo)指針在到背景的URL 值上面，如下圖所示。這時將在 Firebug 中顯示岀圖片預(yù)覽。只要我們把鼠標(biāo)移動到這個值上面，F(xiàn)irebug 將顯示方便的預(yù)覽提示，并在這個圖片預(yù)覽中顯示圖片的寬度與高度。C x 1d 11Ld Sfbew Hitar#曲?如事1潛Iwte tljete冏旳Ibnij?WrV HrtlrugWidow BE Tito Rte OrisncMtei., J tATA Tile Ortm CIrcIFTFL Wndns MMn* divUJ-LEFLI?-DveInherited from b udv亡 s-s -獸庭虛囪匸denMorA WHedHTML *LBS

58、 bcrlpt tMlM lMetiaiJh-#pgsKeoder寸“當(dāng)滬肝打Mv#rrt3gF tody #5 -fprr-Q-yden hbEdlv id* J；il tr門* 疏dip 1_段就住塁去5丘Style *-11 v寸id k；J：Ji * c/dilv di v i d* 3科j Et-IIJ-J- T e : t Cu 叮rnrf lirfrIrJieriti&d firarit h J cJEr - xl*nDone與之類似，我們也可以在 Firebug 中預(yù)覽顏色。例如，我們來檢查 元素：The Road to En lightme nt，如下圖所示:現(xiàn)在，我

59、們移動鼠標(biāo)指針到CSS 屬性 color 的值上（在本例中該值為 #7D775C ），如下面的屏幕截圖:HIMIL Edt I hl drvrckajeH&ajer dvrtro dvrfccntaner bodyden htrdunlft-g * hetp: / /ww. w3_ s.r 193 9 /Jihe bl11xali lang &n.* +-也 bodyid匚 s -z：ei- gniden1* H lx s %IIIHK9p&gieHe&dE h n上 bchgrl: tran?pofni4 url (/001/hl. oa tl In4-ret

60、?u*hl croll ieft 電口QJiisplaybloclc； Lot：i#rt： h-fiihr 67px;UiairLnt op: lOpK;CFLdtll： 21$px;ComoleHTMIScriptEdit pnan h3 dhv#pr eanble dMhrtro diwfcortaHieF bodyllcsiZBiY-ijarden hbrnllLayout DOM-p*n*Litring dark and dznry road lay tha 共reliizf ofbEovscrpccific 電鼻 incowtftible亶刑0b3Hj dal * rDH亡rInheriteid Frucii LJ17D77SC；tgnt- i ly:f