WP酷 WP酷
  • 主题
  • 教程
  • 插件
  • 官方 QQ 群
  • 建站推荐
  • 联系
  • nicetheme® 奈思主题
  • 注册
    登录
立即登录
  • 请到 [后台->外观->菜单] 中设置菜单
首页 › WordPress 开发 › WordPress主题制作教程(九):制作index.php文件

WordPress主题制作教程(九):制作index.php文件

PCDotFan9年前

我们前面已经将index.php文件里面的公用代码提取出来制作成了header.php\footer.php\sidebar.php,现在我们就来整理一下index.php的代码,index.php文件算是一个最普遍使用的模板页面了,如果你的主题没有home.php、且后台设置首页显示最新文章,那么index.php文件就是首页模板了,如果你的主题没有文章也模板(single.php)、没有单页面模板(page.php)、没有分类页模板(category.php)、没有标签页(index.php)……没有404页面等的,都将会使用index.php文件代替。

那么我们今天要整理的index.php文件到底要以什么形式来显示呢?一般来说都是文章列表,这样这个文件做首页能正确显示、还能做归档页、搜索结果页等。。

不过我们首页如果需要显示20篇文章?我们是不是需要写20篇文章的代码呢?其实这20篇文章代码都是同样的形式,所以我们只需要写一篇文章的代码,然后将这个代码循环输出就好了。如果你之前学过任何一门编程语言,那么while\for循环应该不陌生,条件语句if也应该不陌生。

下面用编辑器打开index.php文件,可以看到里面有3篇文章的代码,我们将其中两篇代码删除,只留下一篇、并且将摘要文字删除:

<?php get_header(); ?>   
    <!-- Column 1 /Content -->   
    <div class="grid_8">   
        <!-- Blog Post -->   
        <div class="post">   
            <!-- Post Title -->   
            <h3 class="title"><a href="single.html">Loreum ipsium massa cras phasellus</a></h3>   
            <!-- Post Data -->   
            <p class="sub"><a href="#">News</a>, <a href="#">Products</a> &bull; 31st Sep, 09 &bull; <a href="#">1 Comment</a></p>   
            <div class="hr dotted clearfix">&nbsp;</div>   
            <!-- Post Image -->   
            <img class="thumb" alt="" src="<?php bloginfo('template_url'); ?>/images/610x150.gif" />   
            <!-- Post Content -->   
               
            <!-- Read More Button -->   
            <p class="clearfix"><a href="single.html" class="button right"> Read More...</a></p>   
        </div>   
        <div class="hr clearfix">&nbsp;</div>   
           
        <!-- Blog Navigation -->   
        <p class="clearfix"> <a href="#" class="button float">&lt;&lt; Previous Posts</a> <a href="#" class="button float right">Newer Posts >></a> </p>   
    </div>   
    <?php get_sidebar(); ?>   
<?php get_footer(); ?>  

我们可以看到,实际上文章骨架,也就是每篇文章都需要的那个代码框架,当然这里说的仅仅是只的这个主题,如果主题的样式不同那html代码的结构也不一样,代码如下:

<div class="post">   
    <!-- Post Title -->   
    <h3 class="title"><a href="single.html">文章标题</a></h3>   
    <!-- Post Data -->   
    <p class="sub"><a href="#">标签1</a>, <a href="#">标签12</a> &bull; 发布时间 &bull; <a href="#">评论数</a></p>   
    <div class="hr dotted clearfix">&nbsp;</div>   
    <!-- Post Image 文章的缩略图 -->   
    <img class="thumb" alt="" src="<?php bloginfo('template_url'); ?>/images/610x150.gif" />   
    <!-- Post Content -->   
    文章内容   
    <!-- Read More Button -->   
    <p class="clearfix"><a href="single.html" class="button right"> 阅读全文按钮</a></p>   
</div>   
<div class="hr clearfix">&nbsp;</div>  

 接下来我们将里面的静态内容更改为动态输出,依据文章内容自动调整。

 

一、文章标题

将文章标题代码:

<h3 class="title"><a href="single.html">Loreum ipsium massa cras phasellus</a></h3>  

 替换成:

<h3 class="title"><a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a></h3>  

the_permalink(); 是输出当前文章的链接地址,注意是直接输出;the_title(); 函数直接输出当前文章的标题。

 

二、文章标签

将index.php里面的标签代码:

<a href="#">News</a>, <a href="#">Products</a>  

 替换成:

<?php the_tags('标签:', ', ', ''); ?>  

the_tags 函数将直接输出文章标签,以上代码所带参数以:“标签:标签1,标签2,标签3……”的形式输出。

 

三、日期

找到日期文字,31st Sep, 09直接替换成:

<?php the_time('Y年n月j日') ?>  

the_time 函数直接输出文章日期,至于输出格式Y年n月j日可以改你也可以改成Y-n-j这些参数非常多,请自己到官网查询。

 

四、评论数

在文章归档页显示文章的评论数和点击数似乎很是流行,将里面的评论代码:

<a href="#">1 Comment</a>  

 替换成:

<?php comments_popup_link('0 条评论', '1 条评论', '% 条评论', '', '评论已关闭'); ?>  

comments_popup_link() 函数里面的三个参数分别代表输出无评论、一条评论、N条评论,里面那个%相当于占位符了。在此每个占位符将输出评论的数量。这个函数输出的代码带有链接,会链接到文章页,并定位到评论位置。

 

五、文章内容

在文章内容的位置添加代码:

<?php the_content('阅读全文...'); ?>  

如果我们要输出的是摘要怎么办?而the_content 是输出文章内容的,但是在首页和归档页,如果你在文章中添加了more标签,则会输出more标签之前的内容,并且在后面加上一个“阅读全文”的链接。但是很多人会想到使用另一个输出摘要的函数the_excerpt(); 我不建议你这样做,这个函数会输出文章的摘要(也就是在后台添加文章的时候有一个专门用来添加摘要的地方),如果没有摘要的话,就会自动截取前50个字符,不过这是对于英文而言,对于中文的多字节语言,这个函数是截取不了的,所以他会全文输出,相比而言,添加More标签更麻烦还是填写摘要更麻烦呢?不过如果你打算每篇文章手动指定一个摘要的话,建议你使用the_excerpt函数。

 

六、文章循环

前面的代码我们已经将一篇文章的框架写好了,现在要做的就是将这个文章框架代码放在一个循环语句中输出。在文章框架的前面,也就是有<!– Blog Post –> 注释的地方,添加代码:

<!-- Blog Post -->   
        <?php if (have_posts()) : while (have_posts()) : the_post(); ?>  

再在文章框架后面,添加结束循环的代码,找到:

<div class="hr clearfix">&nbsp;</div>  

 修改为:

<div class="hr clearfix">&nbsp;</div>   
        <?php endwhile; ?>  

再找到:

</div>   
    <?php get_sidebar(); ?>  

修改为:

<?php else : ?>   
       <h3 class="title"><a href="#" rel="bookmark">未找到</a></h3>   
       <p>没有找到任何文章!</p>   
       <?php endif; ?>   
   </div>   
<?php get_sidebar(); ?>  

OK,到此为止我们的循环代码已经完成,分析一下我们刚才添加的代码,大致是这样子的:

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>   
    文章html骨架   
<?php endwhile; ?>   
<?php else : ?>   
    输出找不到文章提示   
<?php endif; ?>  

have_posts()函数是判断当前是否有文章:当前页面要输出的所有文章存放在一个全局数组$posts中,have_post()函数就是检查这个数组的一个计数器,如果当前还有文章,那么就返回true,如果没有就返回false;
the_post()函数用来将have_posts计数器前移,并且将当前文章填进变量$post中,而前面的函数the_title(),the_content()这些函数只是用用来输出$post变量中的的内容,你完全可以用

<?php echo $post->title;?>  

 来代替the_title()函数,你也可以输出$post变量中的其它内容,比如文章ID。

 

七、文章分页

前面的代码一次只能输出部分文章,如果整个博客有100篇文章,不可能将100篇文章全部列出来,这时候就需要分页显示了。
找到我们的分页代码:

<p class="clearfix"> <a href="#" class="button float">&lt;&lt; Previous Posts</a> <a href="#" class="button float right">Newer Posts >></a> </p>  

 替换成:

<p class="clearfix"><?php previous_posts_link('&lt;&lt; 查看新文章', 0); ?> <span class="float right"><?php next_posts_link('查看旧文章 &gt;&gt;', 0); ?></span></p>  

 

0
分享

本站下载管理系统「dl.mywpku.com」因年久失修而永久关闭。若需获得往年主题,请至 WP酷的百度网盘(提取码: 5rbm) 自行搜索下载。默认解压密码为「www.mywpku.com」。

对您造成的不便,敬请谅解!

PCDotFan 站长
文章 435评论 859
相关文章
  • 移除 WordPress 中的「找回密码」功能
  • WordPress 实现添加角色与更改角色名称
  • WordPress 4.1 中新的主题函数
  • 借助Github – 为WordPress插件添加自动更新功能
  • WordPress进阶教程(一):WordPress文章类型
  • WordPress进阶教程:前言
  • WordPress主题制作函数全攻略
  • WordPress主题制作教程(十二):单页面模板page.php
评论 (1)
再想想
  • 同盟源 http://tmy123.com/

    好高级

    8年前
PCDotFan
站长
若无特别注明,则默认我发布的所有文章均为内容原创 / 翻译原创,转载时请保留来源。
435文章
859评论
3K获赞
猜你喜欢
FrontOpen – 极简自适应博客主题1.5.04.05【持续更新】
8年前
PremiumPixels – 国外灰色质感WordPress博客主题
9年前
无聊功能:页面翻转效果的实现
10年前
  • 杂记
  • WordPress 付费主题推荐
Copyright © 2023 WP酷. Designed by nicetheme. 琼ICP备13002067号-1