wordpress知更鸟主题CMS增加Tab选项卡的教程

2018年6月26日18:20:26 发表评论 10,482 views

一:本站修改后的截图:

wordpress知更鸟主题CMS增加Tab选项卡的教程的图片

二:教程步骤:

第一步:修改cms-tab.php文件

添加以下代码在tab_c整行代码之后:

  1. <span class="tab-hd-con"><a href="javascript:"><?php echo zm_get_option('tab_d'); ?></a></span>

找到<div class="tab-bd dom-display">...</div>,在</div>的上面加入以下代码:

  1. <ul class="tab-bd-con">
  2. <?php query_posts('showposts='.zm_get_option('tabt_n').'&cat='.zm_get_option('tabw_n')); 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. </ul>

第二步:修改cms-dow-tab.php文件

找到<div class="img-tab-hd">...</div>,在</div>的上面加入以下代码:

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

找到<div class="img-tab-bd img-dom-display">...</div>,在</div>标签上面加入以下代码:

  1. <div class="img-tab-bd-con">
  2.       <p class="edd-inf"><?php echo zm_get_option('dow_tab_d_s'); ?></p>
  3.       <?php
  4.           $args = array('tax_query' => arrayarray('taxonomy' => 'download_category', 'field' => 'id', 'terms' => explode(',',zm_get_option('cms_edd_d_id') ))), 'posts_per_page' => zm_get_option('cms_edd_n'));
  5.           query_posts($args); while ( have_posts() ) : the_post();
  6.       ?>
  7.       <article id="post-<?php the_ID(); ?>" class="w4 x4">
  8.           <div class="picture">
  9.               <figure class="picture-img">
  10.                   <?php tao_thumbnail(); ?>
  11.               </figure>
  12.               <?php the_title( sprintf( '<h2><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h2>' ); ?>
  13.               <div class="img-tab-meta">
  14.                   <div class="img-cat">分类:<?php echo get_the_term_list($post->ID,  'download_category', '', ', ', ''); ?></div>
  15.                   <div class="clear"></div>
  16.               </div>
  17.           </div>
  18.       </article>
  19.       <?php endwhile; ?>
  20.       <?php wp_reset_query(); ?>
  21.       <div class="clear"></div>
  22.   </div>

第三步:修改options.php文件(在begin/inc/options-theme目录下)

搜索'id' => 'tab_c',将tab_c所在的函数替换及添加以下的部分,自己对比下,然后合适添加即可:

  1. $options[] = array(
  2.         'name' => 'Tab“分类文章”设置',
  3.         'desc' => '自定义文字',
  4.         'id' => 'tab_c',
  5.         'std' => '分类文章',
  6.         'type' => 'text'
  7.     );
  8.     if ( $options_categories ) {
  9.     $options[] = array(
  10.         'name' => '',
  11.         'desc' => '选择一个分类',
  12.         'id' => 'tabq_n',
  13.         'type' => 'select',
  14.         'options' => $options_categories);
  15.     }
  16.  $options[] = array(
  17.     'name' => 'Tab“特色文章1”设置',
  18.     'desc' => '自定义文字',
  19.     'id' => 'tab_d',
  20.     'std' => '分类文章',
  21.     'type' => 'text'
  22. );
  23.   if ( $options_categories ) {
  24. $options[] = array(
  25.     'name' => '',
  26.     'desc' => '选择一个分类',
  27.     'id' => 'tabw_n',
  28.     'type' => 'select',
  29.     'options' => $options_categories);
  30. }

第四步:修改style.css文件

搜索.tab-site标签及下面代码中的几个标签,这几个标签应该都在一起,如果没压缩过css的话,备注应该是/**TAB **/",将这个备注下的css样式,全部替换成下面的代码即可:

  1. .tab-site {
  2.     overflowhidden;
  3.     margin: 0 0 10px 0;
  4.     border1px solid #ddd;
  5.     border-radius: 8px;
  6.     box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
  7. }
  8. .dom-display .current {
  9.     displayblock;
  10. }
  11. .tab-hd {
  12.     background#f8f8f8;
  13. }
  14. .tab-hd-con {
  15.     width: 25%;
  16. }
  17. .tab-hd .current {
  18.     width: 25%;
  19. }
  20. .tab-hd {
  21.     overflowhidden;
  22.     height40px;
  23.     line-height40px;
  24. }
  25. .tab-product .tab-hd .current, .tab-area .current {
  26.     positionrelative;
  27.     z-index: 1;
  28.     height40px;
  29.     background#fff;
  30. }
  31. .tab-hd-con {
  32.     floatleft;
  33.     text-aligncenter;
  34.     cursorpointer;
  35.     height39px;
  36.     border-right1px solid #ddd;
  37. }
  38. .tab-hd-con a {
  39.     displayinline-block;
  40.     color#606777;
  41. }
  42. .tab-bd-con {
  43.     displaynone;
  44.     overflowhidden;
  45. }
  46. .tab-bd {
  47.     background#fff;
  48.     padding20px;
  49.     margin-top: -1px;
  50.     border-top1px solid #ddd;
  51. }
  52. .tab-bd li {
  53.     floatleft;
  54.     width: 45%;
  55.     line-height: 210%;
  56.     margin: 0 20px 0 0;
  57.     whitewhite-spacenowrap;
  58.     word-wrap: normal;
  59.     text-overflow: ellipsis;
  60.     overflowhidden;
  61. }
  62. @media screen and (max-width480px) {
  63.     .tab-bd li {
  64.         width: 95%;
  65.         margin: 0 0 0 0;
  66.     }
  67. }

第五步:CMS设置tab切换

依此点击外观->主题选项->CMS设置->找到Tab切换,进行相关设置即可~

须知:

本站只是增加了一个tab页,如果想增加多个,可以模仿以上代码进行编写,不过css样式,需要你自己F12进行调整了。

weinxin
欢迎加入中国SEO站长博客之家
本站的所有资源都会上传分享到博客之家,希望大家互相学习交流进步。中国企鹅SEO站长博客群
企鹅博客

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: