• wordpress CMS主题:ssmay主题 wordpress CMS主题:ssmay主题
  • 首页 > wordpress CMS主题制作 > WP主题开发14:怎样添加wordpress主题trans的文章列表页模板?

    WP主题开发14:怎样添加wordpress主题trans的文章列表页模板?

    作者: 分类:wordpress CMS主题制作 点击: 128 次
    wordpress CMS主题:ssmay主题

      扫描下面的二维码,“关注”我的头条号,我会每天更新免费视频课程。

      在前面的章节中,我们创建了wordpress主题trans的公共模板:header.php头部模板、sidebar.php侧边栏模板、footer.php底部模板,这样就更加方便了trans主题的其它动态模板的开发。就比如,今天我们要开发的模板——文章列表页模板,就不需要再去修改头部、侧边栏、底部的代码了。好了,闲话不多说,我们直接进入到今天的主题当中,怎样添加trans主题的文章列表页模板?

      第一步:创建列表页模板文件。

      在trans主题目录下创建一个列表页模板的文件——archive.php。wordpress程序默认的文章列表页模板的名字必须是:archive 或 categoty,也就是说,可以是archive.php,也可以是category.php,我们这里用archive.php。

      第二步:引入头部模板。

      用sublime等编辑器打开trans主题的静态模板list.html,把里的代码复制到archive.php文件中。然后,在代码找到</header>这句代码,从<!doctype html>与</header>这间的所有代码全部删除,因为这段代码,我们已经可以使用公共模板——header.php来代替了。

      删除后,我们再来引入header.php这个头部模板:

      < ?php get_header(); ?>

      这时,我们可以正常打开列表页了。但是有一个小问题:标题显示的不是文章分类的名称,仍然是网站的名称。而我们需要的效果是,在列表页时,我们需要显示的是文章分类目录的名称。所以,我们要在header.php文件中的<title></title>标签中修改一个调用代码,

      原代码是:

      < title>< ?php echo get_bloginfo("name"); ?></title>

      修改成如下代码:

      < title>
      < ?php
      if(is_home()){
      echo get_bloginfo("name");
      }else{
      if(is_category()){
      $cat_c = get_the_category();
      echo $cat_c[0]->cat_name;
      echo " - "; bloginfo("name");
      }else{
      the_title(); echo " - "; bloginfo("name");
      }
      }
      ?>
      </title>

      这段代码的意思是:如果是网站的首页,就显示网站的名称;如果是列表页,就显示为“分类目录名称 + 网站名称”;否则就显示“文章标题+网站名称”。

      第三步:引入右侧边栏模板。

      在archive.php中找到< div class="c_right">标签中的所有代码,删除掉,然后,在当前位置上,引入公共模板sidebar.php侧边栏模板,代码如下:

      < ?php get_sidebar(); ?>

      这样,我们就不需要再去修改原< div class="c_right">标签内的代码了,而只需直接把sidebar.php拿来用就可以了。

      第四步:引入底部模板。

      同上,在archive.php代码中找到< footer>标签,然后,把< footer>及它后面的所有代码全部删除掉,现在不需要了,因为,我们有footer.php底部公共模板了。删除掉后,我们在原位置上直接引入这个footer.php底部模板,代码如下:

      < ?php get_footer(); ?>

      在引入完头部、侧边栏、底部的公共模板后,我们再来看看archive.php的模板代码,如下图:

      然后,我们只需要修改archive.php模板代码中的 < div class="c_left">标签内部的代码就可以了。

      第五步:修改左侧主体部分。

      WP主题开发14:怎样添加wordpress主题trans的文章列表页模板?

      其实,我们查看trans主题的静态代码的效果时,我们可以看到,列表页与首页基本上是一样的,只是左侧的顶部多了一个面包屑导航。所以,我们只需要修改< div class="c_left">标签里的代码就可以了(如上图所示)。我们可以先把archive.php代码中的< div class="c_left">里的代码全部删除掉,然后把首页模板index.php代码中的< div class="c_left">所有代码全部复制下来,粘贴到archive.php中。这段代码包括了左侧的文章列表以及分页按钮。这样,archive.php的左侧主体部分基本弄好。

      第六步:添加面包屑导航。

      我们在archive.php模板的< div class="c_left"> 标签中的< div class="left_bottom">标签的上方,添加发下代码:

      < div class="left_top">
      < ul>
      < li><span class="dashicons-before dashicons-admin-generic"></span><?php echo $cat_c[0]->cat_name; //获取当前分类名 ?></li>
      < li>
      < a href="< ?php bloginfo("siteurl"); ?>">< span class="dashicons-before dashicons-admin-home"></span>首页</a> >
      < ?php the_category(","); ?>
      </li>
      </ul>
      < ul>
      < ?php
      $cat_desc = $cat_c[0]->category_description; //获取当前分类的描述。
      if($cat_desc){
      echo $cat_desc;
      }else{
      echo $cat_c[0]->cat_name; //获取当前分类名
      }
      ?>
      </ul>
      </div>

      这段代码中,我们又用到了几个wordpress的函数:

      the_category(","):获取当前分类导航;
      $cat_c = get_the_category():获取当前分类的信息,并赋值给$cat_c这个变量

      面包屑导航的主要作用,就是让用户可以看到当前页面所在的个体位置。而且,可以通过点击面包屑导航中的相关链接,可以跳转到链接页面,如:返回首页(如下图)。

      WP主题开发14:怎样添加wordpress主题trans的文章列表页模板?

      通过上面的几步,我们就完成了wordpress主题trans的文章列表页动态模板的修改。嗯,是不是有一个小小的发现:修改trans主题的列表页模板要比修改首页模板index.php所花的时间要少得多。是的,因为在修改index.php首页模板时,我们需要所有的代码,而修改archive.php模板时,我们只需要把公共模板拿来直接用就可以了,省去了大量的时间,这就是公共模板的魅力之所在。好了,本节就介绍到这里,如有疑问,欢迎点评。



      欢迎“关注”我的头条号,我会每天更新免费视频课程。

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

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

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

    或许你会感兴趣的文章:

    发表评论

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

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