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页面制作完成,下节将讲解侧边栏制作。

© 版权声明
THE END
喜欢就支持以下吧
点赞0赞赏
分享
评论 共8条

请登录后发表评论

    • 随之长风
    • QQ-484929610

      学习带来乐趣,谢谢博主!

      4年前
    • 随之长风
    • 增达任务网0

      相当不错,自愧不如!

      4年前
    • 随之长风
    • 一生一世套图0

      三天不来手痒痒!

      4年前
    • 随之长风
    • 增达网0

      你的博客就像冬天里的一把火!

      4年前
    • 随之长风
    • 冰点0

      看了博主的文章,受益蛮多!

      3年前