圖文教程版press主題制作

大多數(shù)使用WordPress的朋友都喜歡去嘗試新的，但是換來換去，總是找多人看到代碼就頭大。露兜博客正在著手編寫一個(gè)WordPress制作的系列，將從頭到尾手把你如何制作一個(gè)完整的WordPress，希望對你有所幫助。開始之前先，這系列只能讓你感性地認(rèn)識的制作過程，并不能讓你完完全全地掌握WordPress的原理。至少配備三種瀏覽器，InternetExplorer、MozillaFirefox、在開始制作WordPress之前，首先得了解WordPress到底由哪些文件構(gòu)成，PHP編寫的，而不是純HTML+CSS，所以模板文件的后綴名是.php，如果你想精通WordPress的制作，完美控制你的博客，最好要熟悉PHP編程。要是不會(huì)PHP編程怎么辦？就做不了WordPress了嗎？那也不是，至少看完本系列，你也能夠掌握基本的WordPress制作方法。下面是WordPress文件層次結(jié)構(gòu)，訴你：當(dāng)WordPress顯示特定的頁面類型時(shí)，會(huì)使用哪個(gè)模板文件呢？只有了解了以下層次結(jié)構(gòu)，你才能知道你的WordPress到底需要寫哪些文件。 single-{post_type}.php–如果文章類型是 ，WordPres查找single- s.php（WordPress3.0及以上版本支持） {slug}.php–如果頁面的縮略名是newsWordPressnews.php（WordPress2.9及以上版本支持 {id}.phpID6，WordPress category-{slug}.php–如果分類的縮略名為newsWordPress將會(huì)查找category-news.php(WordPress2.9category-{id}.phpID6，WordPresscategory-tag-{slug}.php–如果標(biāo)簽縮略名為sometag，WordPress6WordPress6.phpWordPressauthor-{nicename}.php–如果作者的昵稱為ramiWordPress將會(huì)查找author-rami.php（WordPress3.0及以上版本支持author-{id}.php–如果作者ID為6WordPress將會(huì)查找author-MIME_type.php–可以是任何MIME類型(image.php,.php,audio.php,application.php或者其他).atta：HTML制作odPss需要了解HP，但是不管怎樣，你的博客頁面都是一張網(wǎng)頁，網(wǎng)頁之所MLSS和S等終端代碼，最終由這些代碼控制瀏覽器的顯示結(jié)果。制作ds也不例外，它們都是網(wǎng)頁，網(wǎng)頁最基本的是TL。要想制作ods，首先得設(shè)計(jì)界面，含蓄、簡約、厚重、奔放……，風(fēng)格完全隨你，接著再將你的設(shè)計(jì)理念轉(zhuǎn)化為.hml，并能在瀏覽器中正常顯示出來。本系列不會(huì)教你如何去設(shè)計(jì)博客的界面，也不會(huì)教你HTML和CSS基礎(chǔ)知識，本系列將使用由tutsplus無償提供的html模板Aurelius為例，來講解以此來練習(xí)如何將HTML靜態(tài)頁面與PHP代碼結(jié)合，制作WordPress。html好，現(xiàn)在就開始我們的WordPress主題制作。在你的WordPress目錄wp-content\themes\下新建一個(gè)文件夾，命名為Aurelius，將WordPress制作全過程（三）：HTML靜態(tài)模板制作到的style.css和index.html放到該下，再將index.htmlindex.php，這樣wp-content\themes\Aurelius下就有下面兩登陸你的WordPress博客管理–外觀，里面是不是多了一個(gè)"Aurelius"呢？ThemeName:這里 ThemeURI這里填 ThemeName:這里 ThemeURI這里填 Version版本號Author:作者名AuthorURI作者的123456789HT放到Aurelius下，再到WordPress管理"外觀"欄目下，看看有什么變化，是不是多了個(gè)預(yù)覽圖呢？制作完畢后，你可以給你的界面截個(gè)圖，命名為screenshot.png，大小300*225，放置到為縮略圖。最后將WordPress制作全過程（三）：HTML靜態(tài)模板制作到的下的所有文件拷貝到wp-content\themes\Aurelius下，并將所有.html后綴改成.php，以備我們下節(jié)內(nèi)容使用。：HTML到的.html文件，不知道你有沒有發(fā)現(xiàn)他們頭部的代碼都非常的相似呢？其實(shí)我們可phpinclude接著我們上次創(chuàng)建的p-cnnt\thme\uius，在該下新建一個(gè)php文件hdehp，我們提取出ndx.php的頭部代碼粘貼到hdehp中，下面是的代碼就是目前hdehp中的所有代碼了(當(dāng)然不同的頭部代碼都是不一樣，<h2class="grid_12captionclearfix">Our<span>blog</span>,keeup-to-dateonourlatestnews.</h2>再用文本編輯器打開index.php、archive.php、contact.php、full_width.php、page.php和single.php，刪掉以上類似代碼，改成：1好，現(xiàn)在打開你的測試博客主頁，看看我們制作的是否還可以正常工作，答案是中的代碼拷貝到當(dāng)前的php文件。接下來，仔細(xì)探討header.php中的動(dòng)態(tài)內(nèi)容。header.php將會(huì)被所有的模板頁面（主頁、分類頁、頁面、頁等）所包含，所以header.php中代碼應(yīng)該是動(dòng)態(tài)，適合不同頁面的，所以這里面需要用到PHP代碼，而不是單純的HTML。下面讓我們一起來修改header.php：titletitleSEO果，所以這里應(yīng)該謹(jǐn)慎設(shè)置。下面提供一種SEO優(yōu)化的title寫法，將<title>Aurelius|<title><title><?phpif(is_home(){bloginfo('name');echo"-";}elseif(is_category(){single_cat_title();echo"-";{}elseif(is_search())echo"搜索結(jié)果"echo;}elseif(is_404()echo'頁面未找到;}else}123456789is_home加上。你可以在header.php中找到這一段代碼：media="screen"/>1聰明的你可能問：wp- 下不是已經(jīng)有一個(gè)嗎？那為什么header.php沒有加載css呢？結(jié)果你是可以看到的，頁面一篇，可media="screen"/>1bloginfo('stylesheet_url')輸出的是你的主題css文件絕對網(wǎng)址，如，WordPress程序會(huì)自動(dòng)以試著更改一下，然后刷新一下你的博客首頁，查看網(wǎng)頁源代碼，style.css的是不是不過，還有幾張的路徑不對，還不能顯示出來，現(xiàn)在我們一起用文本編輯器打開index.php、archive.php、contact.php、full_width.php、page.phpsingle.php，給bloginfo('temte_url');?>/images/?，F(xiàn)在再刷新你的主頁，看文章的縮略圖610×150是否可以正常顯示。<?phpbloginfo('temte_url');?>用于輸出的URL。3、添加至于什么是back，你可以在搜索引擎中輸入關(guān)鍵字WordPressback，就back"1在12onourlatest12現(xiàn)在你的博客首頁看到的就是你博客名稱和描述了，并且logo也是一個(gè)指向你的博客首頁。我們這里說說這些php代碼的作用。 博客名稱和描述可以在WordPress管理–設(shè)置–常規(guī)那里更改。以后制作你自己的WordPress的時(shí)候，你可參照上面的說明對你的進(jìn)行修改。-12-6jscss，要讓這些插件能夠正常的工作，也讓你的有更好的兼容性，你應(yīng)該添加wp_head()函數(shù)。打開header.php，在</head>前1都是wp_head()的功勞：1href=""23href=""47Description和關(guān)于添加網(wǎng)頁描述和關(guān)鍵字，可以查看我之前寫過的文章：WordPress使用經(jīng)驗(yàn)（一）獨(dú)立的Description和然你也可以再放置分類，根據(jù)你的喜好來吧，將header.php中：touch</span><br/>123news</span><br/>45678<li<li<?phpif(is_home()){echo'class="current"';}?>><a_order);<?php1234<?phpget_header();?>從當(dāng)前文件夾中包含header.php文<?phpbloginfo('stylesheet_url');?>輸出文件夾中style.css文件的路<?phpbloginfo('back_url');?>輸出博客back<?phpbloginfo('temte_url');?>輸出博客<?phpechoget_option('home輸出你的博客首頁<?phpwp_list_categories(<?phpwp_list_pages跟你修改的文件比較比較（尤其是heade.php，看看你改得怎么樣？上節(jié)內(nèi)容我們已經(jīng)弄好了博客的頁頭header.php，今天我們就一起來制作頁腳footer.php。footer.phpheader.php提高代碼的重用性，Aurelius中的所有頁面的頁腳代碼幾乎都是一樣的，我們就把這些代碼提取出來放到footer.php。By</strong><a2By</strong><a23right"right"href="#">top</a>">Ludou</a></span><a<pclass="grid_12footerclearfix"><span45611再用文本編輯器打開index.php、archive.php、contact.php、full_width.php、page.php和single.php，刪掉以上類似代碼，改成：的，跟原來幾乎沒什么兩樣，頁腳還是跟原來一樣。現(xiàn)在來添加上你的博客信息和wp_footer()函數(shù)，將footer.php中所有代碼刪除，改成：CodeBy<a;;Design&&©2010<?phpbloginfo('name');<span123456789和wp_head()差不多，都是用于提高你的兼容性，畢竟有很多插件要在頁腳輸出一些header.phpfooter.phpsidebar.php。由于側(cè)邊欄作為各個(gè)頁面公用的側(cè)邊欄，我們還是像制作header.php和footer.php那樣，從index.php中提取側(cè)邊欄，放到sidebar.php。好，現(xiàn)在在你的Aurelius下新建文件sidebar.php，從index.php中提取一下代碼，放到sidebar.php中：<!--<!--Column2/Sidebar--<div<ul12345678 <ul91側(cè)邊欄還都是靜態(tài)的代碼，大家可能都知道在WordPress–外觀–小工具，那里可以作完整的sidebar。為了適應(yīng)WordPress程序，我們還要對sidebar.php做一些微調(diào)，新的樣式style.css，替換Aurelius下的style.css，點(diǎn)此開始sidebar.php的制作，在側(cè)邊欄放置4個(gè)欄目。在初始狀態(tài)下，也就是你沒有在側(cè)邊欄放置任何小工具的情況下，這4個(gè)欄目自上而下為分類、文章、云和文章月存檔?，F(xiàn)在將sidebar.php中所有代碼刪除，改成：1<!--Column2/Sidebar--2<div3<?phpif( <?phpif( echo'<li><ahref=".get_permalink().'">'.get_the_title()23 $post=<?phpendif;<?phpif(||!dynamic_sidebar('Third_sidebar'))<?phpendif;<?phpif(<?phpendif;然后點(diǎn)此處functions.php放到Aurelius下，這時(shí)候你的側(cè)邊欄就以正常工作了，在WordPress–外觀–小工具，可以正常地拖動(dòng)小工具到側(cè)邊欄了好了，sidebar.php到，主頁中每篇文章的樣式都是一樣的，只是標(biāo)題、時(shí)間、作者和等文字內(nèi)容不一樣而html，況且這樣也不是動(dòng)態(tài)的內(nèi)容。我們只需要一個(gè)循環(huán)就可以將所有文章顯示到首可以看到文章的3個(gè)標(biāo)記<!--BlogPost-->，我們現(xiàn)在其他將兩篇文章的代碼刪除，留下一篇，并將文章去除。修改后的代碼是這樣的： <div<h3class="title"><ahref="single.html">Loreumipsiummassacras31stSep,09•<ahref="#">1Comment</a></p>123456789從上面的代碼可以看出，一篇文章的html1<div234567<imgclass="thumb"alt=""src="<?php 89文章骨架，以上是我們這個(gè)的骨架，以此為基礎(chǔ)給index.php加上動(dòng)態(tài)內(nèi)容1the_title();?></a></h3>11 ：,','');1日'1Ynj（中文） <?phpthe_time('Ynj<?phpthe_time('Ymd <?phpthe_time('Y-m-d')<?phpthe_time('y-m-dH:i:s')99-05-01<<ahref="#">11<?php<?phpcomments_popup_link('0條評論''1條評論''%條評論''''評論已關(guān)閉');?>1該函數(shù)會(huì)根據(jù)文章的評論數(shù)量顯示不同的文字，0條評論、1條評論等等，當(dāng)然論區(qū)，你可以點(diǎn)此查看效果：2條評論<?php<?phpcomments_popup_link('0條評論''1條評論''%'''評論已關(guān)閉'?><?phpedit_post_link('編輯','•','');?>1 方案，任君選擇。查找：<!--PostContent-->12 1211<?phpif(have_posts()):while12<<divclass="hr 1<divclass="hr<divclass="hr 12121<?phpelse:2345<?phpendif;6endwhile；如果<?php<?phpif(have_posts())while(have_posts()):the_post();?>文章html<?phpelse:<?phpendif;123456Thehref="#"class="buttonfloatright">NewerPosts>></a></p>1<pclass="clearfix"><pclass="clearfix"><?phpprevious_posts_link('<<查看新文章',0);?><span1 12archive.phpindex.php不過需要在functions.php里添加一個(gè)函數(shù)，這里就不再羅嗦，自己看吧，注意：functions.php中的代碼已經(jīng)修改，要想讓你的分類、等存檔頁能夠正常顯示，請的functions.php覆蓋原來的。另外，頁和分類頁支持在該頁面頂部顯示介紹，Ludou9.9,滿分10分(21票)評分人氣:8,403添加評論(29)今天我們來制作單文章頁single.php，有了之前制作index.php的經(jīng)驗(yàn)，制作single.php也不再那么難了，這里將直接略過一些內(nèi)容，直接給出結(jié)果。如果對某些修改不太清楚，可以先參考：WordPress制作全過程（八：制作index.php1the_title();?></a></h3>11 ：,','');1找到：31stSep09日'1<<ahref="#">71<?php<?phpcomments_popup_link('0條評論''1條評論''%條評論''''評論已關(guān)閉');?>1<?php<?phpcomments_popup_link('0條評論''1條評論''%'''評論已關(guān)閉'?><?phpedit_post_link('編輯','•','');?>1PostContentPostLinks1 1過get_option('home');來獲取博客地址。<<pclass="clearfix"><ahref="blog.html"class="buttonfloat"><<BacktoBlog</a><ahref="#commentform"class="buttonfloatright">Discussthispost</a>1 </a>1上一個(gè)條件語句，這樣WordPress才會(huì)去數(shù)據(jù)庫讀出你的文章內(nèi)容。搜索代碼：<!--Column1/Content--><?phpif(have_posts()):the_post();update_post_caches($posts);?>1212<?phpelse:<?phpendif;1234567Ourblog,keeyouup-to-dateonourlatest1<h2class="grid_12captionclearfix">Our<span>blog</span>,keeonourlatestnews.</h2>2今天我們來制作評論的評論模塊。在Aurelius下新建comments.php，在single.php剪切以下代碼，粘貼到comments.php：<<ol<li<divclass="gravatar"><imgalt=""src=’images/gravatar.png’height=’48′width=’48/><aclass="comment-reply-link"href=">Reply</a></div><divat6:26<div<!–Comment’sList123456789<!–CommentForm<h3>Adda<li <li <<li <li<li<!–AddCommentButton te();1在single.php寫comments.php中的代碼效果是一樣的。為了安全起見，不讓用戶直接打開 件，請?jiān)赾omments.php頭部添加if(isset($_SERVER['SCRIPT_FILENAME'])&&'comments.php'==1234因?yàn)閃ordPress的輸出評論函數(shù) 1<li23456789<divNullavitaeipsum.Donecligulaante,bibendumsitamet,elementumquis,viverraante.ante.Fuscetincidunt.Maurispellentesque,arcuegetfeugiataccumsan,ipsummimolestieorci,utpulvinarsapienloremnecdui.</p>1//ifthere'sa//anditdoesn'tmatchthe<p><a }elseif(!comments_open())<p><a HASH]23456789}elseif ments())<p><a }else }以上代碼的意思大致也可以看得出來了，就是一大堆如果…就….，如果以上條件都不滿足就列出所有評論。現(xiàn)在將文件夾Aurelius中的functions.php中的?>，改成以下代碼，如果你之前從本博客到的functions.php已經(jīng)有以下代碼則不用再添加：get_option('show_avatars')){echoget_avatar($comment,48);}{123456789<div<?phpprintf(('<cite <div<?phpendif;<?php}："<li<li<!–CommentForm<h3>Adda123456789<<li <li<li<!–AddCommentButton<atype="submit"c