wordpress CMS主题 微信
  • 全部教程
  • Home > wordpress CMS主题制作 > wordpress主题制作:怎样获取页面列表制作网站百科页面?

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

    高时银博客 wordpress CMS主题制作 点击: 1,620 次 0 0

    最近在帮一个客户定制主题时,对方提出一个要求,就是想制作一个类似网站百科的页面,而这个页面调用网站的页面列表(效果如下图)。那么,怎样调用页面列表来制作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; }

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

     


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

    目前还没有评论。赶快来坐沙发吧。

    发表评论