WordPress 知更鸟主题杂志模板增加 Tab 选项卡为 4 个的方法

  • 5
  • 504 views
  • A+
所属分类：WordPress

WordPress 知更鸟主题杂志模板增加 Tab 选项卡为 4 个的方法。

一：修改 cms-tab.php 文件

  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="be be-arrowright"></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>

 

三：修改 begin-options.php 文件（在 begin/inc/options 目录下）

搜索'id' => 'tab_c'，在'id' => 'tab_c'的下面代码

  1. 'options' => $options_categories);
  2. }

后添加以下的部分：

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

 

四：修改 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. }

 

五：设置 tab 切换及效果图

只要在主题设置中完成 Tab 切换设置即可。

Wordpress 知更鸟主题杂志模板增加 Tab 选项卡为 4 个的方法

 

历史上的今天:

唯心寒辞

评论已关闭！

目前评论：5   其中：访客  0   博主  0

    • avatar 叶忠文博客 3
      2019年12月6日 下午2:42  沙发

      分享了教程，代码却复制不了，虽然现实已复制但是粘贴不了什么鬼

        • avatar 唯心寒辞  博主
          2019年12月6日 下午4:51  1层

          我用Chrome试了下，可以复制粘贴。

        • avatar 叶忠文博客 3
          2019年12月5日 下午5:03  板凳

          第四点没学会

          • avatar 叶忠文博客 3
            2019年12月5日 下午5:02  地板

            找到了，感谢分享

            • avatar MAY网络营销 4
              2019年3月4日 下午1:24  4楼

              感谢分享