wordpress仿站教程#7：制作index.php

最近比较忙，忙着找工作，经济不景气，在本地稳不到好点的工作，目前还在待业中，郁闷，家在农村，割稻，摘茶子，事也比较多，准备国庆后去外面转转！
前段时间介绍了仿站的首页分解，header.php以及footer.php制作，今天重点讲解index.php的制作过程。
仿站需要有一定的html基础，首页分解是第一步，这步必须做好，要不然下面很难进行工作!

  1. <?php get_header();?>  
  2. <div id="wrap">  
  3.   <div id="container">  
  4.     <div id="content">  
  5.       <div id="main">  
  6.           
  7.         <article class="post" id="830" itemscope="" itemtype="http://schema.org/Article">  
  8.           <h2><a itemprop="name" class="title" href="https://www.xxko.net/wordpress-theme-index.html" title="wordpress仿站教程#3：首页分解"> wordpress仿站教程#3：首页分解 </a></h2>  
  9.           <div class="info"> <span class="date">2016-08-03</span> <span class="author" itemprop="author">随之长风</span> <span class="views">阅读： 8 次</span>&nbsp;&nbsp;&nbsp;&nbsp;  
  10.             <div class="act"> <span class="comments"> <a href="https://www.xxko.net/wordpress-theme-index.html#respond">抢沙发</a> </span>  
  11.               <div class="fixed"></div>  
  12.             </div>  
  13.             <div class="fixed"></div>  
  14.           </div>  
  15.           <div class="content" itemprop="description">  
  16.             <p>在  
  17.               这篇中，我们将要着手开始写 WordPress 代码，这里建议搭建首先在本地电脑上安装   
  18.               WordPress，而不是安装到服务器上，因为本地更方便测试。第1步：打开 XAMPP 控制面板。第2步：创建你的主题文件夹。在你本地安装的   
  19.               WordPress 主题文件夹下（应该在xampp/htdocs/wordpress/wp-content/themes），创建一个新的文件夹   
  20.               ...</p>  
  21.             <p style="float:right;"><a itemprop="url" href="https://www.xxko.net/wordpress-theme-index.html" title="阅读全文：wordpress仿站教程#3：首页分解" rel="nofollow"><strong>阅读全文…</strong></a></p>  
  22.             <div class="fixed"></div>  
  23.           </div>  
  24.           <div class="under"> <span title="分类" class="categories"> <a href="https://www.xxko.net/category/internet" rel="category tag">网络教程</a> </span> <span class="tags" itemprop="keywords"><a href="https://www.xxko.net/tag/wordpress" rel="tag">wordpress</a>, <a href="https://www.xxko.net/tag/%e4%b8%bb%e9%a2%98%e5%88%b6%e4%bd%9c" rel="tag">主题制作</a></span> </div>  
  25.         </article>  
  26.         <div id="pagenavi">  
  27.           <div class="wp-pagenavi"><span class="pages">页数</span> <span class="page-numbers current">1</span><a class="page-numbers" href="https://www.xxko.net/page/2">2</a><a class="page-numbers" href="https://www.xxko.net/page/3">3</a><span class="page-numbers dots">…</span><a class="page-numbers" href="https://www.xxko.net/page/20">20</a><a class="next page-numbers" href="https://www.xxko.net/page/2">下一页 ?</a></div>  
  28.         </div>  
  29.         <div class="fixed"></div>  
  30.       </div>  
  31.     </div>  
  32.     <?php get_sidebar.php(); ?>  
  33.     <div class="fixed"></div>  
  34.   </div>  
  35.     
  36.   <?php get_footer();?>  

上面代码是分解出的index.php的html代码，上面是纯代码，需要对其动态化处理，为了简化代码，只留了一篇文章，这样也比较直观化。
首先用DW打开index.php，设计栏下，点选文章部分，然后选择article.post#830，这是文章循环标签，所有的文章都是用这一个标签循环的，选择好后，在代码下，在选择的代码上面和下面分别回车几个空行出来，方便下一步添加循环代码，在代码的上面添加

  1. <?php if (have_posts()) : ?>  
  2. <?php while (have_posts()) : the_post(); ?>  

这段代码的意思是循环开始代码。
在代码的下面添加

  1. <?php endwhile; ?>  
  2. <?php endif; wp_reset_query(); ?>  

循环结束标签，然后保存。在仿站过程中可以随时浏览首页情况，如果你的wordpress有文章，并设置了首页文章数后会发现，这时出现几篇相同的文章列表简介。
重头戏，循环代码更改。

  1. <article class="post" id="830" itemscope="" itemtype="http://schema.org/Article">  
  2.           <h2><a itemprop="name" class="title" href="https://www.xxko.net/wordpress-theme-index.html" title="wordpress仿站教程#3：首页分解"> wordpress仿站教程#3：首页分解 </a></h2>  
  3.           <div class="info"> <span class="date">2016-08-03</span> <span class="author" itemprop="author">随之长风</span> <span class="views">阅读： 8 次</span>&nbsp;&nbsp;&nbsp;&nbsp;  
  4.             <div class="act"> <span class="comments"> <a href="https://www.xxko.net/wordpress-theme-index.html#respond">抢沙发</a> </span>  
  5.               <div class="fixed"></div>  
  6.             </div>  
  7.             <div class="fixed"></div>  
  8.           </div>  
  9.           <div class="content" itemprop="description">  
  10.             <p>在  
  11.               这篇中，我们将要着手开始写 WordPress 代码，这里建议搭建首先在本地电脑上安装   
  12.               WordPress，而不是安装到服务器上，因为本地更方便测试。第1步：打开 XAMPP 控制面板。第2步：创建你的主题文件夹。在你本地安装的   
  13.               WordPress 主题文件夹下（应该在xampp/htdocs/wordpress/wp-content/themes），创建一个新的文件夹   
  14.               ...</p>  
  15.             <p style="float:right;"><a itemprop="url" href="https://www.xxko.net/wordpress-theme-index.html" title="阅读全文：wordpress仿站教程#3：首页分解" rel="nofollow"><strong>阅读全文…</strong></a></p>  
  16.             <div class="fixed"></div>  
  17.           </div>  
  18.           <div class="under"> <span title="分类" class="categories"> <a href="https://www.xxko.net/category/internet" rel="category tag">网络教程</a> </span> <span class="tags" itemprop="keywords"><a href="https://www.xxko.net/tag/wordpress" rel="tag">wordpress</a>, <a href="https://www.xxko.net/tag/%e4%b8%bb%e9%a2%98%e5%88%b6%e4%bd%9c" rel="tag">主题制作</a></span> </div>  
  19.         </article>  

将上面代码中文章连接地址替换成<?php the_permalink() ?>，文章标题替换成<?php the_title(); ?>，时间替换成<?php the_time(__('Y-m-d')) ?>文章的post-id也就是上面的830替换成<?php the_ID(); ?>，文章简介部分替换成

  1. <?php  
  2.     if(is_singular()){the_content();}else{  
  3.     $pc=$post->post_content;  
  4.     $st=strip_tags(apply_filters('the_content',$pc));  
  5.     if(has_excerpt())  
  6.         the_excerpt();  
  7.     elseif(preg_match('/<!--more.*?-->/',$pc) || mb_strwidth($st)<300)  
  8.         the_content('');  
  9.     elseif(function_exists('mb_strimwidth'))  
  10.         echo'<p>'  
  11.         .mb_strimwidth($st,0,300,' ...')  
  12.         .'</p>';  
  13.     else the_content();  
  14. }?>  

上面这段代码的意思是，对文章显示优化显示，如文章有设置简介显示简介部分，或者设置了分隔线，显示分隔线以上部分，没有则只显示文章前300字节。
保存并刷新首页，现在就可以看出文章循环部分效果已经出来，最后对分类，关键字，以及分页替换。
关键字：<?php the_tags(); ?>
分类：<?php the_category(',') ?>
分页：安装 WP-PageNavi 插件,<?php wp_pagenavi(); ?>
到此index.php页面制作完成，下节将讲解侧边栏制作。