图文教程版press主题制作

大多数使用WordPress的朋友都喜欢去尝试新的，但是换来换去，总是找多人看到代码就头大。露兜博客正在着手编写一个WordPress制作的系列，将从头到尾手把你如何制作一个完整的WordPress，希望对你有所帮助。开始之前先，这系列只能让你感性地认识的制作过程，并不能让你完完全全地掌握WordPress的原理。至少配备三种浏览器，InternetExplorer、MozillaFirefox、在开始制作WordPress之前，首先得了解WordPress到底由哪些文件构成，PHP编写的，而不是纯HTML+CSS，所以模板文件的后缀名是.php，如果你想精通WordPress的制作，完美控制你的博客，最好要熟悉PHP编程。要是不会PHP编程怎么办？就做不了WordPress了吗？那也不是，至少看完本系列，你也能够掌握基本的WordPress制作方法。下面是WordPress文件层次结构，诉你：当WordPress显示特定的页面类型时，会使用哪个模板文件呢？只有了解了以下层次结构，你才能知道你的WordPress到底需要写哪些文件。 single-{post_type}.php–如果文章类型是 ，WordPres查找single- s.php（WordPress3.0及以上版本支持） {slug}.php–如果页面的缩略名是newsWordPressnews.php（WordPress2.9及以上版本支持 {id}.phpID6，WordPress category-{slug}.php–如果分类的缩略名为newsWordPress将会查找category-news.php(WordPress2.9category-{id}.phpID6，WordPresscategory-tag-{slug}.php–如果标签缩略名为sometag，WordPress6WordPress6.phpWordPressauthor-{nicename}.php–如果作者的昵称为ramiWordPress将会查找author-rami.php（WordPress3.0及以上版本支持author-{id}.php–如果作者ID为6WordPress将会查找author-MIME_type.php–可以是任何MIME类型(image.php,.php,audio.php,application.php或者其他).atta：HTML制作odPss需要了解HP，但是不管怎样，你的博客页面都是一张网页，网页之所MLSS和S等终端代码，最终由这些代码控制浏览器的显示结果。制作ds也不例外，它们都是网页，网页最基本的是TL。要想制作ods，首先得设计界面，含蓄、简约、厚重、奔放……，风格完全随你，接着再将你的设计理念转化为.hml，并能在浏览器中正常显示出来。本系列不会教你如何去设计博客的界面，也不会教你HTML和CSS基础知识，本系列将使用由tutsplus无偿提供的html模板Aurelius为例，来讲解以此来练习如何将HTML静态页面与PHP代码结合，制作WordPress。html好，现在就开始我们的WordPress主题制作。在你的WordPress目录wp-content\themes\下新建一个文件夹，命名为Aurelius，将WordPress制作全过程（三）：HTML静态模板制作到的style.css和index.html放到该下，再将index.htmlindex.php，这样wp-content\themes\Aurelius下就有下面两登陆你的WordPress博客管理–外观，里面是不是多了一个"Aurelius"呢？ThemeName:这里 ThemeURI这里填 ThemeName:这里 ThemeURI这里填 Version版本号Author:作者名AuthorURI作者的123456789HT放到Aurelius下，再到WordPress管理"外观"栏目下，看看有什么变化，是不是多了个预览图呢？制作完毕后，你可以给你的界面截个图，命名为screenshot.png，大小300*225，放置到为缩略图。最后将WordPress制作全过程（三）：HTML静态模板制作到的下的所有文件拷贝到wp-content\themes\Aurelius下，并将所有.html后缀改成.php，以备我们下节内容使用。：HTML到的.html文件，不知道你有没有发现他们头部的代码都非常的相似呢？其实我们可phpinclude接着我们上次创建的p-cnnt\thme\uius，在该下新建一个php文件hdehp，我们提取出ndx.php的头部代码粘贴到hdehp中，下面是的代码就是目前hdehp中的所有代码了(当然不同的头部代码都是不一样，<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好，现在打开你的测试博客主页，看看我们制作的是否还可以正常工作，答案是中的代码拷贝到当前的php文件。接下来，仔细探讨header.php中的动态内容。header.php将会被所有的模板页面（主页、分类页、页面、页等）所包含，所以header.php中代码应该是动态，适合不同页面的，所以这里面需要用到PHP代码，而不是单纯的HTML。下面让我们一起来修改header.php：titletitleSEO果，所以这里应该谨慎设置。下面提供一种SEO优化的title写法，将<title>Aurelius|<title><title><?phpif(is_home(){bloginfo('name');echo"-";}elseif(is_category(){single_cat_title();echo"-";{}elseif(is_search())echo"搜索结果"echo;}elseif(is_404()echo'页面未找到;}else}123456789is_home加上。你可以在header.php中找到这一段代码：media="screen"/>1聪明的你可能问：wp- 下不是已经有一个吗？那为什么header.php没有加载css呢？结果你是可以看到的，页面一篇，可media="screen"/>1bloginfo('stylesheet_url')输出的是你的主题css文件绝对网址，如，WordPress程序会自动以试着更改一下，然后刷新一下你的博客首页，查看网页源代码，style.css的是不是不过，还有几张的路径不对，还不能显示出来，现在我们一起用文本编辑器打开index.php、archive.php、contact.php、full_width.php、page.phpsingle.php，给bloginfo('temte_url');?>/images/。现在再刷新你的主页，看文章的缩略图610×150是否可以正常显示。<?phpbloginfo('temte_url');?>用于输出的URL。3、添加至于什么是back，你可以在搜索引擎中输入关键字WordPressback，就back"1在12onourlatest12现在你的博客首页看到的就是你博客名称和描述了，并且logo也是一个指向你的博客首页。我们这里说说这些php代码的作用。 博客名称和描述可以在WordPress管理–设置–常规那里更改。以后制作你自己的WordPress的时候，你可参照上面的说明对你的进行修改。-12-6jscss，要让这些插件能够正常的工作，也让你的有更好的兼容性，你应该添加wp_head()函数。打开header.php，在</head>前1都是wp_head()的功劳：1href=""23href=""47Description和关于添加网页描述和关键字，可以查看我之前写过的文章：WordPress使用经验（一）独立的Description和然你也可以再放置分类，根据你的喜好来吧，将header.php中：touch</span><br/>123news</span><br/>45678<li<li<?phpif(is_home()){echo'class="current"';}?>><a_order);<?php1234<?phpget_header();?>从当前文件夹中包含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，看看你改得怎么样？上节内容我们已经弄好了博客的页头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，删掉以上类似代码，改成：的，跟原来几乎没什么两样，页脚还是跟原来一样。现在来添加上你的博客信息和wp_footer()函数，将footer.php中所有代码删除，改成：CodeBy<a;;Design&&©2010<?phpbloginfo('name');<span123456789和wp_head()差不多，都是用于提高你的兼容性，毕竟有很多插件要在页脚输出一些header.phpfooter.phpsidebar.php。由于侧边栏作为各个页面公用的侧边栏，我们还是像制作header.php和footer.php那样，从index.php中提取侧边栏，放到sidebar.php。好，现在在你的Aurelius下新建文件sidebar.php，从index.php中提取一下代码，放到sidebar.php中：<!--<!--Column2/Sidebar--<div<ul12345678 <ul91侧边栏还都是静态的代码，大家可能都知道在WordPress–外观–小工具，那里可以作完整的sidebar。为了适应WordPress程序，我们还要对sidebar.php做一些微调，新的样式style.css，替换Aurelius下的style.css，点此开始sidebar.php的制作，在侧边栏放置4个栏目。在初始状态下，也就是你没有在侧边栏放置任何小工具的情况下，这4个栏目自上而下为分类、文章、云和文章月存档。现在将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;然后点此处functions.php放到Aurelius下，这时候你的侧边栏就以正常工作了，在WordPress–外观–小工具，可以正常地拖动小工具到侧边栏了好了，sidebar.php到，主页中每篇文章的样式都是一样的，只是标题、时间、作者和等文字内容不一样而html，况且这样也不是动态的内容。我们只需要一个循环就可以将所有文章显示到首可以看到文章的3个标记<!--BlogPost-->，我们现在其他将两篇文章的代码删除，留下一篇，并将文章去除。修改后的代码是这样的： <div<h3class="title"><ahref="single.html">Loreumipsiummassacras31stSep,09•<ahref="#">1Comment</a></p>123456789从上面的代码可以看出，一篇文章的html1<div234567<imgclass="thumb"alt=""src="<?php 89文章骨架，以上是我们这个的骨架，以此为基础给index.php加上动态内容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条评论''%条评论''''评论已关闭');?>1该函数会根据文章的评论数量显示不同的文字，0条评论、1条评论等等，当然论区，你可以点此查看效果：2条评论<?php<?phpcomments_popup_link('0条评论''1条评论''%'''评论已关闭'?><?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里添加一个函数，这里就不再罗嗦，自己看吧，注意：functions.php中的代码已经修改，要想让你的分类、等存档页能够正常显示，请的functions.php覆盖原来的。另外，页和分类页支持在该页面顶部显示介绍，Ludou9.9,满分10分(21票)评分人气:8,403添加评论(29)今天我们来制作单文章页single.php，有了之前制作index.php的经验，制作single.php也不再那么难了，这里将直接略过一些内容，直接给出结果。如果对某些修改不太清楚，可以先参考：WordPress制作全过程（八：制作index.php1the_title();?></a></h3>11 ：,','');1找到：31stSep09日'1<<ahref="#">71<?php<?phpcomments_popup_link('0条评论''1条评论''%条评论''''评论已关闭');?>1<?php<?phpcomments_popup_link('0条评论''1条评论''%'''评论已关闭'?><?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上一个条件语句，这样WordPress才会去数据库读出你的文章内容。搜索代码：<!--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中的代码效果是一样的。为了安全起见，不让用户直接打开 件，请在comments.php头部添加if(isset($_SERVER['SCRIPT_FILENAME'])&&'comments.php'==1234因为WordPress的输出评论函数 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 }以上代码的意思大致也可以看得出来了，就是一大堆如果…就….，如果以上条件都不满足就列出所有评论。现在将文件夹Aurelius中的functions.php中的?>，改成以下代码，如果你之前从本博客到的functions.php已经有以下代码则不用再添加：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