知更鸟主题cms设置页Tab显示增加选项卡教程

逐梦驿站
2152
文章
27
评论
更多
 2017年11月20日17:10:10知更鸟主题cms设置页Tab显示增加选项卡教程已关闭评论 14475字

1.教程简介

我们在使用任一款wordpress主题时，都会有微调主题的想法，用以实现个人的主题特色。本篇教程是针对知更鸟主题cms设置页Tab显示增加选项卡教程，使用其他主题可通过本教程修改文件作为参考。

 

先附上一张原图，一张修改后的图片，看下效果：

知更鸟主题cms设置页Tab显示增加选项卡教程

原图

 

知更鸟主题cms设置页Tab显示增加选项卡教程

修改后效果

2.修改步骤（修改前请备份源文件）

2.1：（cms-tab.php文件修改）

 

找到主题文件夹下cms文件夹里面的cms-tab.php文件：

添加以下代码在tab_c整段代码之后。

  1. <span class="tab-hd-con"><a href="javascript:"><?php echo zm_get_option('tab_d'); ?></a></span>
  2. <span class="tab-hd-con"><a href="javascript:"><?php echo zm_get_option('tab_e'); ?></a></span>
  3. <span class="tab-hd-con"><a href="javascript:"><?php echo zm_get_option('tab_f'); ?></a></span>
  4. <span class="tab-hd-con"><a href="javascript:"><?php echo zm_get_option('tab_g'); ?></a></span>
  5. <span class="tab-hd-con"><a href="javascript:"><?php echo zm_get_option('tab_k'); ?></a></span>
  6. <span class="tab-hd-con"><a href="javascript:"><?php echo zm_get_option('tab_j'); ?></a></span>

在“  <div class="tab-bd dom-display"> ”内最后的</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>
  8. <ul class="tab-bd-con">
  9.     <?php query_posts('showposts='.zm_get_option('tabt_n').'&cat='.zm_get_option('taby_n')); while (have_posts()) : the_post(); ?>
  10.     <?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>' ); ?>
  11.     <?php endwhile; ?>
  12.     <?php wp_reset_query(); ?>
  13. </ul>
  15. <ul class="tab-bd-con">
  16.     <?php query_posts('showposts='.zm_get_option('tabt_n').'&cat='.zm_get_option('tabm_n')); while (have_posts()) : the_post(); ?>
  17.     <?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>' ); ?>
  18.     <?php endwhile; ?>
  19.     <?php wp_reset_query(); ?>
  20. </ul>
  22. <ul class="tab-bd-con">
  23.     <?php query_posts('showposts='.zm_get_option('tabt_n').'&cat='.zm_get_option('tabg_n')); while (have_posts()) : the_post(); ?>
  24.     <?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>' ); ?>
  25.     <?php endwhile; ?>
  26.     <?php wp_reset_query(); ?>
  27. </ul>
  29. <ul class="tab-bd-con">
  30.     <?php query_posts('showposts='.zm_get_option('tabt_n').'&cat='.zm_get_option('tabh_n')); while (have_posts()) : the_post(); ?>
  31.     <?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>' ); ?>
  32.     <?php endwhile; ?>
  33.     <?php wp_reset_query(); ?>
  34. </ul>
  37. <ul class="tab-bd-con">
  38.     <?php query_posts('showposts='.zm_get_option('tabt_n').'&cat='.zm_get_option('tabx_n')); while (have_posts()) : the_post(); ?>
  39.     <?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>' ); ?>
  40.     <?php endwhile; ?>
  41.     <?php wp_reset_query(); ?>
  42. </ul>
  44. <ul class="tab-bd-con">
  45.     <?php query_posts('showposts='.zm_get_option('tabt_n').'&cat='.zm_get_option('tabz_n')); while (have_posts()) : the_post(); ?>
  46.     <?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>' ); ?>
  47.     <?php endwhile; ?>
  48.     <?php wp_reset_query(); ?>
  49. </ul>

2.2（cms-dow-tab.php文件修改）

 

找到主题文件夹下cms文件夹里面的cms-dow-tab.php文件：

在<div class="img-tab-hd">末尾</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 } ?>
  2. <?php if ( zm_get_option('dow_tab_e') == '' ) { ?><?php } else { ?><span class="img-tab-hd-con"><a href="javascript:"><?php echo zm_get_option('dow_tab_e'); ?></a></span><?php } ?>
  3. <?php if ( zm_get_option('dow_tab_f') == '' ) { ?><?php } else { ?><span class="img-tab-hd-con"><a href="javascript:"><?php echo zm_get_option('dow_tab_f'); ?></a></span><?php } ?>
  4. <?php if ( zm_get_option('dow_tab_g') == '' ) { ?><?php } else { ?><span class="img-tab-hd-con"><a href="javascript:"><?php echo zm_get_option('dow_tab_g'); ?></a></span><?php } ?>
  5. <?php if ( zm_get_option('dow_tab_k') == '' ) { ?><?php } else { ?><span class="img-tab-hd-con"><a href="javascript:"><?php echo zm_get_option('dow_tab_k'); ?></a></span><?php } ?>
  6. <?php if ( zm_get_option('dow_tab_i') == '' ) { ?><?php } else { ?><span class="img-tab-hd-con"><a href="javascript:"><?php echo zm_get_option('dow_tab_i'); ?></a></span><?php } ?>
  7. <?php if ( zm_get_option('dow_tab_j') == '' ) { ?><?php } else { ?><span class="img-tab-hd-con"><a href="javascript:"><?php echo zm_get_option('dow_tab_j'); ?></a></span><?php } ?>

在<div class="img-tab-bd img-dom-display">末尾的</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>
  24. <div class="img-tab-bd-con">
  25.     <p class="edd-inf"><?php echo zm_get_option('dow_tab_e_s'); ?></p>
  26.     <?php
  27.         $args = array('tax_query' => array( array('taxonomy' => 'download_category', 'field' => 'id', 'terms' => explode(',',zm_get_option('cms_edd_e_id') ))), 'posts_per_page' => zm_get_option('cms_edd_n'));
  28.         query_posts($args); while ( have_posts() ) : the_post();
  29.     ?>
  30.     <article id="post-<?php the_ID(); ?>" class="w4 x4">
  31.         <div class="picture">
  32.             <figure class="picture-img">
  33.                 <?php tao_thumbnail(); ?>
  34.             </figure>
  35.             <?php the_title( sprintf( '<h2><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h2>' ); ?>
  36.             <div class="img-tab-meta">
  37.                 <div class="img-cat">分类：<?php echo get_the_term_list($post->ID,  'download_category', '', ', ', ''); ?></div>
  38.                 <div class="clear"></div>
  39.             </div>
  40.         </div>
  41.     </article>
  42.     <?php endwhile; ?>
  43.     <?php wp_reset_query(); ?>
  44.     <div class="clear"></div>
  45. </div>
  47. <div class="img-tab-bd-con">
  48.     <p class="edd-inf"><?php echo zm_get_option('dow_tab_f_s'); ?></p>
  49.     <?php
  50.         $args = array('tax_query' => array( array('taxonomy' => 'download_category', 'field' => 'id', 'terms' => explode(',',zm_get_option('cms_edd_f_id') ))), 'posts_per_page' => zm_get_option('cms_edd_n'));
  51.         query_posts($args); while ( have_posts() ) : the_post();
  52.     ?>
  53.     <article id="post-<?php the_ID(); ?>" class="w4 x4">
  54.         <div class="picture">
  55.             <figure class="picture-img">
  56.                 <?php tao_thumbnail(); ?>
  57.             </figure>
  58.             <?php the_title( sprintf( '<h2><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h2>' ); ?>
  59.             <div class="img-tab-meta">
  60.                 <div class="img-cat">分类：<?php echo get_the_term_list($post->ID,  'download_category', '', ', ', ''); ?></div>
  61.                 <div class="clear"></div>
  62.             </div>
  63.         </div>
  64.     </article>
  65.     <?php endwhile; ?>
  66.     <?php wp_reset_query(); ?>
  67.     <div class="clear"></div>
  68. </div>
  70. <div class="img-tab-bd-con">
  71.     <p class="edd-inf"><?php echo zm_get_option('dow_tab_g_s'); ?></p>
  72.     <?php
  73.         $args = array('tax_query' => array( array('taxonomy' => 'download_category', 'field' => 'id', 'terms' => explode(',',zm_get_option('cms_edd_g_id') ))), 'posts_per_page' => zm_get_option('cms_edd_n'));
  74.         query_posts($args); while ( have_posts() ) : the_post();
  75.     ?>
  76.     <article id="post-<?php the_ID(); ?>" class="w4 x4">
  77.         <div class="picture">
  78.             <figure class="picture-img">
  79.                 <?php tao_thumbnail(); ?>
  80.             </figure>
  81.             <?php the_title( sprintf( '<h2><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h2>' ); ?>
  82.             <div class="img-tab-meta">
  83.                 <div class="img-cat">分类：<?php echo get_the_term_list($post->ID,  'download_category', '', ', ', ''); ?></div>
  84.                 <div class="clear"></div>
  85.             </div>
  86.         </div>
  87.     </article>
  88.     <?php endwhile; ?>
  89.     <?php wp_reset_query(); ?>
  90.     <div class="clear"></div>
  91. </div>
  93. <div class="img-tab-bd-con">
  94.     <p class="edd-inf"><?php echo zm_get_option('dow_tab_k_s'); ?></p>
  95.     <?php
  96.         $args = array('tax_query' => array( array('taxonomy' => 'download_category', 'field' => 'id', 'terms' => explode(',',zm_get_option('cms_edd_k_id') ))), 'posts_per_page' => zm_get_option('cms_edd_n'));
  97.         query_posts($args); while ( have_posts() ) : the_post();
  98.     ?>
  99.     <article id="post-<?php the_ID(); ?>" class="w4 x4">
  100.         <div class="picture">
  101.             <figure class="picture-img">
  102.                 <?php tao_thumbnail(); ?>
  103.             </figure>
  104.             <?php the_title( sprintf( '<h2><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h2>' ); ?>
  105.             <div class="img-tab-meta">
  106.                 <div class="img-cat">分类：<?php echo get_the_term_list($post->ID,  'download_category', '', ', ', ''); ?></div>
  107.                 <div class="clear"></div>
  108.             </div>
  109.         </div>
  110.     </article>
  111.     <?php endwhile; ?>
  112.     <?php wp_reset_query(); ?>
  113.     <div class="clear"></div>
  114. </div>
  116. <div class="img-tab-bd-con">
  117.     <p class="edd-inf"><?php echo zm_get_option('dow_tab_i_s'); ?></p>
  118.     <?php
  119.         $args = array('tax_query' => array( array('taxonomy' => 'download_category', 'field' => 'id', 'terms' => explode(',',zm_get_option('cms_edd_i_id') ))), 'posts_per_page' => zm_get_option('cms_edd_n'));
  120.         query_posts($args); while ( have_posts() ) : the_post();
  121.     ?>
  122.     <article id="post-<?php the_ID(); ?>" class="w4 x4">
  123.         <div class="picture">
  124.             <figure class="picture-img">
  125.                 <?php tao_thumbnail(); ?>
  126.             </figure>
  127.             <?php the_title( sprintf( '<h2><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h2>' ); ?>
  128.             <div class="img-tab-meta">
  129.                 <div class="img-cat">分类：<?php echo get_the_term_list($post->ID,  'download_category', '', ', ', ''); ?></div>
  130.                 <div class="clear"></div>
  131.             </div>
  132.         </div>
  133.     </article>
  134.     <?php endwhile; ?>
  135.     <?php wp_reset_query(); ?>
  136.     <div class="clear"></div>
  137. </div>
  139. <div class="img-tab-bd-con">
  140.     <p class="edd-inf"><?php echo zm_get_option('dow_tab_j_s'); ?></p>
  141.     <?php
  142.         $args = array('tax_query' => array( array('taxonomy' => 'download_category', 'field' => 'id', 'terms' => explode(',',zm_get_option('cms_edd_j_id') ))), 'posts_per_page' => zm_get_option('cms_edd_n'));
  143.         query_posts($args); while ( have_posts() ) : the_post();
  144.     ?>
  145.     <article id="post-<?php the_ID(); ?>" class="w4 x4">
  146.         <div class="picture">
  147.             <figure class="picture-img">
  148.                 <?php tao_thumbnail(); ?>
  149.             </figure>
  150.             <?php the_title( sprintf( '<h2><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h2>' ); ?>
  151.             <div class="img-tab-meta">
  152.                 <div class="img-cat">分类：<?php echo get_the_term_list($post->ID,  'download_category', '', ', ', ''); ?></div>
  153.                 <div class="clear"></div>
  154.             </div>
  155.         </div>
  156.     </article>
  157.     <?php endwhile; ?>
  158.     <?php wp_reset_query(); ?>
  159.     <div class="clear"></div>
  160. </div>

2.3（options.php文件修改）

 

搜索id' => 'tab_c在 “      );        ”下面添加以下代码

  1. $options[] = array(
  2.     'name' => 'Tab“特色文章1”设置',
  3.     'desc' => '自定义文字',
  4.     'id' => 'tab_d',
  5.     'std' => '分类文章',
  6.     'type' => 'text'
  7. );
  9. if ( $options_categories ) {
  10. $options[] = array(
  11.     'name' => '',
  12.     'desc' => '选择一个分类',
  13.     'id' => 'tabw_n',
  14.     'type' => 'select',
  15.     'options' => $options_categories);
  16. }
  18. $options[] = array(
  19.     'name' => 'Tab“特色文章2”设置',
  20.     'desc' => '自定义文字',
  21.     'id' => 'tab_e',
  22.     'std' => '分类文章',
  23.     'type' => 'text'
  24. );
  26. if ( $options_categories ) {
  27. $options[] = array(
  28.     'name' => '',
  29.     'desc' => '选择一个分类',
  30.     'id' => 'taby_n',
  31.     'type' => 'select',
  32.     'options' => $options_categories);
  33. }
  35. $options[] = array(
  36.     'name' => 'Tab“特色文章3”设置',
  37.     'desc' => '自定义文字',
  38.     'id' => 'tab_f',
  39.     'std' => '分类文章',
  40.     'type' => 'text'
  41. );
  43. if ( $options_categories ) {
  44. $options[] = array(
  45.     'name' => '',
  46.     'desc' => '选择一个分类',
  47.     'id' => 'tabm_n',
  48.     'type' => 'select',
  49.     'options' => $options_categories);
  50. }
  52. $options[] = array(
  53.     'name' => 'Tab“特色文章4”设置',
  54.     'desc' => '自定义文字',
  55.     'id' => 'tab_g',
  56.     'std' => '分类文章',
  57.     'type' => 'text'
  58. );
  60. if ( $options_categories ) {
  61. $options[] = array(
  62.     'name' => '',
  63.     'desc' => '选择一个分类',
  64.     'id' => 'tabg_n',
  65.     'type' => 'select',
  66.     'options' => $options_categories);
  67. }
  69. $options[] = array(
  70.     'name' => 'Tab“特色文章5”设置',
  71.     'desc' => '自定义文字',
  72.     'id' => 'tab_k',
  73.     'std' => '分类文章',
  74.     'type' => 'text'
  75. );
  77. if ( $options_categories ) {
  78. $options[] = array(
  79.     'name' => '',
  80.     'desc' => '选择一个分类',
  81.     'id' => 'tabh_n',
  82.     'type' => 'select',
  83.     'options' => $options_categories);
  84. }
  86. $options[] = array(
  87.     'name' => 'Tab“特色文章6”设置',
  88.     'desc' => '自定义文字',
  89.     'id' => 'tab_i',
  90.     'std' => '分类文章',
  91.     'type' => 'text'
  92. );
  94. if ( $options_categories ) {
  95. $options[] = array(
  96.     'name' => '',
  97.     'desc' => '选择一个分类',
  98.     'id' => 'tabx_n',
  99.     'type' => 'select',
  100.     'options' => $options_categories);
  101. }
  103. $options[] = array(
  104.     'name' => 'Tab“特色文章7”设置',
  105.     'desc' => '自定义文字',
  106.     'id' => 'tab_j',
  107.     'std' => '分类文章',
  108.     'type' => 'text'
  109. );
  111. if ( $options_categories ) {
  112. $options[] = array(
  113.     'name' => '',
  114.     'desc' => '选择一个分类',
  115.     'id' => 'tabz_n',
  116.     'type' => 'select',
  117.     'options' => $options_categories);
  118. }

2.4（修改style.css文件）

 

在style.css文件中搜索 tab-product ，修改width值，直至页面美观即可。（使用firebug在网页中调整好以后再行修改style.css中width值。）

将修改后的文件上传到相应的位置替换原文件。

3.注意事项

 

如启用静态缓存插件，请清理缓存。至此便能看到和本站一样的tab选项卡效果了。

如需，修改tab选项卡数量，可参照以上修改文件对代码进行删减或增加。

继续阅读
  • 版权声明： 发表于 2017年11月20日17:10:10
  • 转载注明：https://www.517zhumeng.com/?p=1756