• wordpress CMS主题:ssmay主题 wordpress CMS主题:ssmay主题
  • 首页 > 网站建设 > WordPress主题index.php制作

    WordPress主题index.php制作

    作者: 分类:网站建设 点击: 3,377 次
    wordpress CMS主题:ssmay主题

      扫描下面的二维码,“关注”我的百家号。

      这次要介绍的是相关index.php的制作,先前如果已经看过基本格局及header.php的介绍,我想接下来这篇你应该也能马上就得心应手,其实主题的教学真的很难写,因此阿汤都是以最入门及基础方式教学,相关更进阶深入的技术,你可能就得靠自己多多摸索啰。

      如果你是突然看这篇的朋友,建议可以往前先回顾这系列的前文。

      设置index范围:

      如同先前在介绍header.php时一样,我们先来设置内容的範围,简单的定义一下区块,比如我将他的div id设置为content。

       1: <div id="content">

       2: </div>

      WordPress主题index.php制作

      在前一篇教学中,我们已经将header定义在980px的宽度,当然index的内容宽度最好也一样,只不过这次我们在margin的部份可以将前面设为15px,表示上下间隔15px才不会太挤。

      WordPress主题index.php制作

      这时我们可以先随意加一点内容到这个div区块里,检视看看有没有正常。

      加上去之后,你会发现在文字乱跑了,我们不是把他定义在header下方吗?这是因为没有定义高度,导致区块是浮动的,所以会有这样重叠的现象,不过并不是header都适合定义高度,我们可以应用另一种做法,往下来看。

      我们先在内容与header之间插入一个clear的class区块。

       1: <div class="clear"></div>

      WordPress主题index.php制作

      然后在style.css里增加一行clear的定义如下:

       1: .clear{clear:both;}

      WordPress主题index.php制作

      你会发现就正常了,那段css的作用是清除浮动,详细用法及解说可以自行google,阿汤在这里只是用了最简单的方式来将区块正常拼凑上去,往后各位在熟悉css后自行再修改相关内容。

      设置文章区块範围:

      WordPress主题index.php制作

      刚刚我们的content设置的範围是包含了文章内容及侧边栏的总宽度,所以我们必须再针对文章的部份再设定一次区块,先加入文章的div区块。

       1: <div id="post">

       2: </div>

      WordPress主题index.php制作

      然后再定义区块的宽度,因为总宽度有980px,你可以自由分配文章区块及侧边栏各要佔多少,比如阿汤要让文章680px的宽度,然届时侧边栏就是设定300px的宽度。

       1: #post{width:680px;float:left;}

      设置文章循环:

      在设置好文章区块后,当然就是要让文章可以显示出来,而WordPress的作法就需要利用既有的语法产生迴圈让文章显示,所以我们要在post区块里再加入以下内容:

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

       2:

       3:

       4: <?php endwhile;?><?php else: ?>

       5: <?php endif; ?>

      主要作用是判断目前的页面有没有文章,如果有的话就会显示相关内容,而这些相关内容包含文章标题、日期、作者、内容、分类及标籤等等,我们必须再各别设置他,往下我们继续来看。

      读取文章标题及内容:

      因为章是循环的,一页里可以显示3篇、5篇或是10篇,所以当我们在定义区块时必须使用「class」,这在之前已经有提过,所以我们先在迴圈加上区块后,加入文章标题语法及内容的语法:

       1: <div class="article">

       2: <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>

       3: <?php the_content( ) ;?>

       4: </div>

      the_title是指读取文章标题,the_content则是该文章内容,而在标题用a连结包覆的the_permalink是指该连结。

      然后我们可以再简单的定义一下文章部份的css,比如让每篇文章间隔15px,再让标题的文章大一点,设定为18px,并与内容间隔10px:

       1: .article {margin-bottom:15px;}

       2: .article h2{font-size:18px;margin-bottom:10px;}

      WordPress主题index.php制作

      加入作者与日期:

      在经过前面的一些内容之后,相信你对于加入区块已经愈来愈熟悉,没错,当我们需要一个新的内容时,基本上都会再去定义一个新的区块,方便我们使用,这次我们是要加入作者与日期,比如我想加在标题底下,那我就在标题区块下加入,比如我加入一个区块是meta,然后再加入二个span分别是作者及时间的语法,div与span有何不同请参考:这里

       1: <div class="meta">

       2: <span><?php the_author() ;?></span>

       3: <span><?php the_time('Y/m/d') ;?></span>

       4: </div>

      WordPress主题index.php制作

      然后我们一样稍微定义一下meta及span的css语法,因为meta只是基本资讯,我们可以让他字小一点点。

       1: .meta{margin-bottom:10px;}

       2: .meta span{font-size:13px;}

      加入分类与标籤:

      分类与标籤的区块加入方式和前一个加入作者与日期是大同小异的,一样先加入一个区块后,在里面应用分类及标籤的呼叫语法。

       1: <div class="meta2">

       2: <span>分类:<?php the_category(',') ?></span>

       3: <span>标籤:<?php the_tags('', ', ', '');?></span>

       4: </div>

      然后一样定义css,这就不再解说。
      WordPress主题index.php制作

      到这边为止,index.php其实还没有完成,因为还有侧边栏及底部,不过那是另外的教程,在下一次我们就会介绍到sidebar.php这一区块,index.php就到这边告一段落,大家赶紧动手吧。



      欢迎“关注”我的百家号。

      头条二维码
      加入我的QQ群
      头条二维码
      关注我的百家号

    文章作者:码不停蹄
    本文地址:http://wanlimm.com/77201505143831.html
    版权所有 © 转载时必须以链接形式注明作者和原始出处!

    上一篇:
    下一篇:
    wordpress CMS主题:ssmay主题

    或许你会感兴趣的文章:

    发表评论

    电子邮件地址不会被公开。 必填项已用*标注

    This site uses Akismet to reduce spam. Learn how your comment data is processed.