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

wp美化评论35.4K views1阅读模式

一：本站修改后的截图：

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' => array( array('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.     overflow: hidden;
  3.     margin: 0 0 10px 0;
  4.     border: 1px solid #ddd;
  5.     border-radius: 8px;
  6.     box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
  7. }
  8. .dom-display .current {
  9.     display: block;
  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.     overflow: hidden;
  22.     height: 40px;
  23.     line-height: 40px;
  24. }
  25. .tab-product .tab-hd .current, .tab-area .current {
  26.     position: relative;
  27.     z-index: 1;
  28.     height: 40px;
  29.     background: #fff;
  30. }
  31. .tab-hd-con {
  32.     float: left;
  33.     text-align: center;
  34.     cursor: pointer;
  35.     height: 39px;
  36.     border-right: 1px solid #ddd;
  37. }
  38. .tab-hd-con a {
  39.     display: inline-block;
  40.     color: #606777;
  41. }
  42. .tab-bd-con {
  43.     display: none;
  44.     overflow: hidden;
  45. }
  46. .tab-bd {
  47.     background: #fff;
  48.     padding: 20px;
  49.     margin-top: -1px;
  50.     border-top: 1px solid #ddd;
  51. }
  52. .tab-bd li {
  53.     float: left;
  54.     width: 45%;
  55.     line-height: 210%;
  56.     margin: 0 20px 0 0;
  57.     whitewhite-space: nowrap;
  58.     word-wrap: normal;
  59.     text-overflow: ellipsis;
  60.     overflow: hidden;
  61. }
  62. @media screen and (max-width: 480px) {
  63.     .tab-bd li {
  64.         width: 95%;
  65.         margin: 0 0 0 0;
  66.     }
  67. }

第五步：CMS设置tab切换

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

须知：

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

企鹅SEO
  • 本文由 发表于 2019年5月30日 20:10:43
  • 转载请务必保留本文链接：https://www.qieseo.com/1183.html

发表评论