• wordpress CMS主题:ssmay主题wordpress CMS主题:ssmay主题
  • 首页 > wordpress CMS主题制作 > wordpress主题制作:怎样获取页面列表制作网站百科页面?

    wordpress主题制作:怎样获取页面列表制作网站百科页面?

    作者: 分类:wordpress CMS主题制作 点击: 2,552 次
    wordpress CMS主题:ssmay主题

      最近在帮一个客户定制主题时,对方提出一个要求,就是想制作一个类似网站百科的页面,而这个页面调用网站的页面列表(效果如下图)。那么,怎样调用页面列表来制作wordpress网站百科页面呢?下面,就一起来看看吧。

      wordpress主题制作:怎样获取页面列表制作网站百科页面?

       

      首先,我们在主题文件夹下创建一个页面文件,文件名可自定,这里我们就定名为baike.php ,然后打开这个页面,在页面中添加如下代码:

      <?php
      /*
      Template Name: 百科目录
      */
      get_header();
      ?>

      <div id="wrapper">

      <div class="bcrumbs">

      <strong><a href="<?php bloginfo('home'); ?>" title="返回首页">首页</a> <p>></p> </strong>
      <a><?php the_title(); ?></a>
      </div>

      <div class="page-mulu">

      <?php
      //$page_id_2 = get_option('baike_pages'); //获取后台添加在列表中不显示的页面ID
      $page_object = get_queried_object();
      $page_id = get_queried_object_id(); //获取当前页面ID

      $defaults = array(
      'depth' => 0,   //显示所有页面,包括所有父页面和子页面
      'show_date' => '',   //不显示创建日期
      'date_format' => get_option('date_format'),
      'child_of' => 0,   //子页面无限制
      //'exclude' => $page_id.','.$page_id_2,  //在百科页面不显示的页面ID

      'exclude' => $page_id,  //在百科页面不显示的页面ID
      'title_li' => '',   //页面列表的标题不显示
      'echo' => 1,
      'authors' => '',   //不局限于特定作者
      'sort_column' => 'menu_order, post_title',   //先按页面顺序, 再按页面标题排序
      'link_before' => '',
      'link_after' => '',
      'exclude_tree'=> 1   //按父级/子级树显示列表
      );
      wp_list_pages($defaults);   //wp_list_pages函数是调用页面列表函数
      ?>

      </div>

      <?php get_footer(); ?>

      通过上面的代码,我们可以获取到网站所有页面的列表。不过,要想达到上图中的那种效果 ,我们还要添加相应的CSS代码,这里也贴上CSS代码。

      /* 百科目录页面 */
      .page-mulu{ width:100%; float:left; background:#fff; height:auto; }
      .page-mulu .page_item_has_children{ width:978px; float:left; border:1px solid #ddd; padding:10px; margin-bottom:10px; font-size:14px;}
      .page-mulu .page_item_has_children a{ float:left; background:#FF3366; padding:0px 6px; color:#FFFFFF; }
      .page-mulu .page_item_has_children .children{ float:left; width:100%; margin-top:8px; }
      .page-mulu .page_item_has_children .children li{ float:left; width:100px; height:28px;line-height:28px; overflow:hidden; padding:0 4px; }
      .page-mulu .page_item_has_children .children li a{ background:#fff !important; padding:0px !important; color:#333 !important; }

      好了,网站百科页面就介绍到这里。

       



      QQ二维码

    文章作者:高时银博客
    本文地址:http://wanlimm.com/77201506134374.html
    版权所有 © 转载时必须以链接形式注明作者和原始出处!

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

    或许你会感兴趣的文章:

    发表评论

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

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