IT博客汇
  • 首页
  • 精华
  • 技术
  • 设计
  • 资讯
  • 扯淡
  • 权利声明
  • 登录 注册

    begin二次开发-首页tab增加多个

    yumanutong发表于 2015-12-28 04:55:20
    love 0

    begin主题首页的tab切换文章的,默认只有一个推荐文章、一个专题和一个随机。可是这明显不够用呢。那么我们就需要修改代码来实现啦。

    首先,从修改设置下手。假设我是一个新手,那么我搜索:option ,这个时候,可以搜索出很多文件。我从options 这个文件夹里面进去看。发现一个options.php 文件,编辑器打开,搜索“Tab切换模块”果然找到,那就是这个文件了,而且从其代码也不难看出,这个就是后台主题设定的区域文件。

    PS:文件路径:/wp-content/themes/begin/inc/options/options.php

    我们找到如下代码:

    1. $options[] = array(
    2.     'name' => 'Tab模块“专题文章”设置',
    3.     'desc' => '自定义文字',
    4.     'id' => 'tab_b',
    5.     'std' => '专题文章',
    6.     'type' => 'text'
    7. );
    8. if ( $options_categories ) {
    9. $options[] = array(
    10.     'name' => '',
    11.     'desc' => '选择一个分类',
    12.     'id' => 'tabz_n',
    13.     'type' => 'select',
    14.     'options' => $options_categories);
    15. }

    这个是控制专题文章的,我们可以继续对比下下面这个代码:

    1. $options[] = array(
    2.     'name' => 'Tab模块“推荐文章”设置',
    3.     'desc' => '自定义文字',
    4.     'id' => 'tab_a',
    5.     'std' => '推荐文章',
    6.     'type' => 'text'
    7. );
    8. if ( $options_categories ) {
    9. $options[] = array(
    10.     'name' => '',
    11.     'desc' => '选择一个分类',
    12.     'id' => 'tabt_id',
    13.     'type' => 'select',
    14.     'options' => $options_categories);
    15. }

    假设是新手,看不太懂,咋办呢,这两个代码一对比,很明显的差异就出来了。我们只需修改差异部分。得出需要添加的代码是:

    1. $options[] = array(
    2.     'name' => 'Tab模块“专题文章二”设置', /* 后台设定名称 */
    3.     'desc' => '自定义文字[留空不显示]', /* tab标签名称 */
    4.     'id' => 'tab_new', /* TAB的ID */
    5.     'std' => '',  /* 预设TAB标签名称 */
    6.     'type' => 'text'
    7. );
    8. if ( $options_categories ) {
    9. $options[] = array(
    10.     'name' => '', /* 预设分类 */
    11.     'desc' => '选择一个分类', /* 分类右边的提示语 */
    12.     'id' => 'tabz_new', /* 内容对应的分类ID */
    13.     'type' => 'select',
    14.     'options' => $options_categories);
    15. }

    上面不同的地方我已经注释出来了,实际上每增加一个TAB,就修改这里的内容即可了。预设TAB标签为何留空呢?因为增加的专题可以灵活开关也是不错的。留空则关,这样不需要另外增加一个值判断。方便。

    如果需要添加多个,按照上面的这个示例自己添加不同的,注意修改ID的值。这个是最重要的。

    home-cms-tab

    设定做好了,接下来就是显示输出了。我们再次以新手的角度找文件。恩,搜索,还是搜索,搜索“tab”会找到一个 cms-tab.php 的文件。打开看代码,修改里面的两个地方。

    PS:文件路径:/wp-content/themes/begin/cms/cms-tab.php

    首先,我们从设置里面,就看到了几个ID值,比如:tab_a、tab_b这样的。然后我们看到如下代码:

    1. <h2 class="tab-hd">
    2.  <span class="tab-hd-con"><a href="javascript:"><?php echo zm_get_option('tab_a'); ?></a></span>
    3.  <span class="tab-hd-con"><a href="javascript:"><?php echo zm_get_option('tab_b'); ?></a></span>
    4.  <span class="tab-hd-con"><a href="javascript:"><?php echo zm_get_option('tab_c'); ?></a></span>
    5. </h2>

    我们想把随机文章放最后的话,就在 tab_b 和 tab_c 中间插入新的切换标签按钮代码:

    1. <?php if(zm_get_option('tab_new')) { ?>
    2. <span class="tab-hd-con"><a href="javascript:"><?php echo zm_get_option('tab_new'); ?></a></span>
    3. <?php } ?>

    多个请自行添加。if判断是判断是否为空,如果没填写TAB名称,则是空,则不显示这个地方。同样这个判断可以利用在现有的三个TAB上面。

    TAB标签切换按钮加好了,肯定也要加入对应内容了。我们可以看下面的代码:

    1. <div class="tab-bd-con current">
    2.         <?php query_posts('showposts='.zm_get_option('tabt_n').'&cat='.zm_get_option('tabt_id')); while (have_posts()) : the_post(); ?>
    3.         <?php the_title( sprintf( '<li class="list-title"><i class="fa fa-angle-right"></i><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></li>' ); ?>
    4.         <?php endwhile; ?>
    5.         <?php wp_reset_query(); ?>
    6. </div>
    7. <div class="tab-bd-con">
    8.         <?php query_posts('showposts='.zm_get_option('tabt_n').'&cat='.zm_get_option('tabz_n')); while (have_posts()) : the_post(); ?>
    9.         <?php the_title( sprintf( '<li class="list-title"><i class="fa fa-angle-right"></i><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></li>' ); ?>
    10.         <?php endwhile; ?>
    11.         <?php wp_reset_query(); ?>
    12. </div>

    从这里,我们继续找出不同点,也就是tabt_id 和 tabt_n ,其他代码都相同,除了class里面的current,这个用于默认显示的TAB。那么,我们可以在这个下面添加如下代码:

    1. <?php if(zm_get_option('tab_new')) { ?>
    2.     <div class="tab-bd-con">
    3.         <?php query_posts('showposts='.zm_get_option('tabt_n').'&cat='.zm_get_option('tabz_new')); while (have_posts()) : the_post(); ?>
    4.         <?php the_title( sprintf( '<li class="list-title"><i class="fa fa-angle-right"></i><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></li>' ); ?>
    5.         <?php endwhile; ?>
    6.         <?php wp_reset_query(); ?>
    7.     </div>
    8. <?php } ?>

    多个自定义自行累加。这里的if判断语句,一样是用于判断是否TAB名称为空,如果对应是空,则不调用这个对应文章。同样可以把判断加在默认的三个TAB上面。

    上面不同的区域已经用红色标记出来了,大家仔细看代码。写这个文章,主要是给新手一个思路。如果还是看不懂,建议查看本站的php基础入门,熟悉基础语法。以后代码看多了,写多了,自然有经验。找文件也不一定就要搜索了。看个文件夹大概都能猜测下。因为每个程序员的作品文件架构不一样。所以我们看到的WP主题里面的文件都有或多或少的出入。大体的还是不变的。下次有空多说几个找文件的方法。

    当然了。加多了几个TAB,会发现小屏幕下,不显示第四个和之后的TAB。这个就需要修改CSS了。详细查看本站关于CSS的文章若干,也可以研究下CSS3的@media标签的用法。

     



沪ICP备19023445号-2号
友情链接