wordpress仿站教程#7：制作index.php-信息库博客

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

<?php get_header();?>
<div id=“wrap”>
<div id=“container”>
<div id=“content”>
<div id=“main”>
<article class=“post” id=“830” itemscope=“” itemtype=“http://schema.org/Article”>
<h2><a itemprop=“name” class=“title” href=“https://www.xxko.net/wordpress-theme-index.html” title=“wordpress仿站教程#3：首页分解”> wordpress仿站教程#3：首页分解 </a></h2>
<div class=“info”> <span class=“date”>2016-08-03</span> <span class=“author” itemprop=“author”>随之长风</span> <span class=“views”>阅读： 8 次</span>    
<div class=“act”> <span class=“comments”> <a href=“https://www.xxko.net/wordpress-theme-index.html#respond”>抢沙发</a> </span>
<div class=“fixed”></div>
</div>
<div class=“fixed”></div>
</div>
<div class=“content” itemprop=“description”>
<p>在
这篇中，我们将要着手开始写 WordPress 代码，这里建议搭建首先在本地电脑上安装
WordPress，而不是安装到服务器上，因为本地更方便测试。第1步：打开 XAMPP 控制面板。第2步：创建你的主题文件夹。在你本地安装的
WordPress 主题文件夹下（应该在xampp/htdocs/wordpress/wp-content/themes），创建一个新的文件夹
…</p>
<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>
<div class=“fixed”></div>
</div>
<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>
</article>
<div id=“pagenavi”>
<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>
</div>
<div class=“fixed”></div>
</div>
</div>
<?php get_sidebar.php(); ?>
<div class=“fixed”></div>
</div>
<?php get_footer();?>

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

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

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

<?php endwhile; ?>
<?php endif; wp_reset_query(); ?>

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

<article class=“post” id=“830” itemscope=“” itemtype=“http://schema.org/Article”>
<h2><a itemprop=“name” class=“title” href=“https://www.xxko.net/wordpress-theme-index.html” title=“wordpress仿站教程#3：首页分解”> wordpress仿站教程#3：首页分解 </a></h2>
<div class=“info”> <span class=“date”>2016-08-03</span> <span class=“author” itemprop=“author”>随之长风</span> <span class=“views”>阅读： 8 次</span>    
<div class=“act”> <span class=“comments”> <a href=“https://www.xxko.net/wordpress-theme-index.html#respond”>抢沙发</a> </span>
<div class=“fixed”></div>
</div>
<div class=“fixed”></div>
</div>
<div class=“content” itemprop=“description”>
<p>在
这篇中，我们将要着手开始写 WordPress 代码，这里建议搭建首先在本地电脑上安装
WordPress，而不是安装到服务器上，因为本地更方便测试。第1步：打开 XAMPP 控制面板。第2步：创建你的主题文件夹。在你本地安装的
WordPress 主题文件夹下（应该在xampp/htdocs/wordpress/wp-content/themes），创建一个新的文件夹
…</p>
<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>
<div class=“fixed”></div>
</div>
<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>
</article>

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

<?php
if(is_singular()){the_content();}else{
$pc=$post->post_content;
$st=strip_tags(apply_filters(‘the_content’,$pc));
if(has_excerpt())
the_excerpt();
elseif(preg_match(‘/<!–more.*?–>/’,$pc) || mb_strwidth($st)<300)
the_content(”);
elseif(function_exists(‘mb_strimwidth’))
echo‘<p>’
.mb_strimwidth($st,0,300,’ …’)
.'</p>’;
else the_content();
}?>

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

文章版权归作者所有，未经允许请勿转载。

THE END