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

2017年11月20日17:10:10 发表评论 164 views
博 主 推 荐 热 门 项 目
兼职必做 邀请1人赚8元挖矿项目ECO生态币温商链WSC
新手必看网络赚钱方法理财项目360你财富ST实体积分

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>
  7. <ul class="tab-bd-con">
  8.     <?php query_posts('showposts='.zm_get_option('tabt_n').'&cat='.zm_get_option('taby_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. </ul>
  13. <ul class="tab-bd-con">
  14.     <?php query_posts('showposts='.zm_get_option('tabt_n').'&cat='.zm_get_option('tabm_n')); while (have_posts()) : the_post(); ?>
  15.     <?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>' ); ?>
  16.     <?php endwhile; ?>
  17.     <?php wp_reset_query(); ?>
  18. </ul>
  19. <ul class="tab-bd-con">
  20.     <?php query_posts('showposts='.zm_get_option('tabt_n').'&cat='.zm_get_option('tabg_n')); while (have_posts()) : the_post(); ?>
  21.     <?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>' ); ?>
  22.     <?php endwhile; ?>
  23.     <?php wp_reset_query(); ?>
  24. </ul>
  25. <ul class="tab-bd-con">
  26.     <?php query_posts('showposts='.zm_get_option('tabt_n').'&cat='.zm_get_option('tabh_n')); while (have_posts()) : the_post(); ?>
  27.     <?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>' ); ?>
  28.     <?php endwhile; ?>
  29.     <?php wp_reset_query(); ?>
  30. </ul>
  31. <ul class="tab-bd-con">
  32.     <?php query_posts('showposts='.zm_get_option('tabt_n').'&cat='.zm_get_option('tabx_n')); while (have_posts()) : the_post(); ?>
  33.     <?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>' ); ?>
  34.     <?php endwhile; ?>
  35.     <?php wp_reset_query(); ?>
  36. </ul>
  37. <ul class="tab-bd-con">
  38.     <?php query_posts('showposts='.zm_get_option('tabt_n').'&cat='.zm_get_option('tabz_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>

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' => 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>
  23. <div class="img-tab-bd-con">
  24.     <p class="edd-inf"><?php echo zm_get_option('dow_tab_e_s'); ?></p>
  25.     <?php
  26.         $args = array('tax_query' => arrayarray('taxonomy' => 'download_category', 'field' => 'id', 'terms' => explode(',',zm_get_option('cms_edd_e_id') ))), 'posts_per_page' => zm_get_option('cms_edd_n'));
  27.         query_posts($args); while ( have_posts() ) : the_post();
  28.     ?>
  29.     <article id="post-<?php the_ID(); ?>" class="w4 x4">
  30.         <div class="picture">
  31.             <figure class="picture-img">
  32.                 <?php tao_thumbnail(); ?>
  33.             </figure>
  34.             <?php the_title( sprintf( '<h2><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h2>' ); ?>
  35.             <div class="img-tab-meta">
  36.                 <div class="img-cat">分类:<?php echo get_the_term_list($post->ID,  'download_category', '', ', ', ''); ?></div>
  37.                 <div class="clear"></div>
  38.             </div>
  39.         </div>
  40.     </article>
  41.     <?php endwhile; ?>
  42.     <?php wp_reset_query(); ?>
  43.     <div class="clear"></div>
  44. </div>
  45. <div class="img-tab-bd-con">
  46.     <p class="edd-inf"><?php echo zm_get_option('dow_tab_f_s'); ?></p>
  47.     <?php
  48.         $args = array('tax_query' => arrayarray('taxonomy' => 'download_category', 'field' => 'id', 'terms' => explode(',',zm_get_option('cms_edd_f_id') ))), 'posts_per_page' => zm_get_option('cms_edd_n'));
  49.         query_posts($args); while ( have_posts() ) : the_post();
  50.     ?>
  51.     <article id="post-<?php the_ID(); ?>" class="w4 x4">
  52.         <div class="picture">
  53.             <figure class="picture-img">
  54.                 <?php tao_thumbnail(); ?>
  55.             </figure>
  56.             <?php the_title( sprintf( '<h2><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h2>' ); ?>
  57.             <div class="img-tab-meta">
  58.                 <div class="img-cat">分类:<?php echo get_the_term_list($post->ID,  'download_category', '', ', ', ''); ?></div>
  59.                 <div class="clear"></div>
  60.             </div>
  61.         </div>
  62.     </article>
  63.     <?php endwhile; ?>
  64.     <?php wp_reset_query(); ?>
  65.     <div class="clear"></div>
  66. </div>
  67. <div class="img-tab-bd-con">
  68.     <p class="edd-inf"><?php echo zm_get_option('dow_tab_g_s'); ?></p>
  69.     <?php
  70.         $args = array('tax_query' => arrayarray('taxonomy' => 'download_category', 'field' => 'id', 'terms' => explode(',',zm_get_option('cms_edd_g_id') ))), 'posts_per_page' => zm_get_option('cms_edd_n'));
  71.         query_posts($args); while ( have_posts() ) : the_post();
  72.     ?>
  73.     <article id="post-<?php the_ID(); ?>" class="w4 x4">
  74.         <div class="picture">
  75.             <figure class="picture-img">
  76.                 <?php tao_thumbnail(); ?>
  77.             </figure>
  78.             <?php the_title( sprintf( '<h2><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h2>' ); ?>
  79.             <div class="img-tab-meta">
  80.                 <div class="img-cat">分类:<?php echo get_the_term_list($post->ID,  'download_category', '', ', ', ''); ?></div>
  81.                 <div class="clear"></div>
  82.             </div>
  83.         </div>
  84.     </article>
  85.     <?php endwhile; ?>
  86.     <?php wp_reset_query(); ?>
  87.     <div class="clear"></div>
  88. </div>
  89. <div class="img-tab-bd-con">
  90.     <p class="edd-inf"><?php echo zm_get_option('dow_tab_k_s'); ?></p>
  91.     <?php
  92.         $args = array('tax_query' => arrayarray('taxonomy' => 'download_category', 'field' => 'id', 'terms' => explode(',',zm_get_option('cms_edd_k_id') ))), 'posts_per_page' => zm_get_option('cms_edd_n'));
  93.         query_posts($args); while ( have_posts() ) : the_post();
  94.     ?>
  95.     <article id="post-<?php the_ID(); ?>" class="w4 x4">
  96.         <div class="picture">
  97.             <figure class="picture-img">
  98.                 <?php tao_thumbnail(); ?>
  99.             </figure>
  100.             <?php the_title( sprintf( '<h2><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h2>' ); ?>
  101.             <div class="img-tab-meta">
  102.                 <div class="img-cat">分类:<?php echo get_the_term_list($post->ID,  'download_category', '', ', ', ''); ?></div>
  103.                 <div class="clear"></div>
  104.             </div>
  105.         </div>
  106.     </article>
  107.     <?php endwhile; ?>
  108.     <?php wp_reset_query(); ?>
  109.     <div class="clear"></div>
  110. </div>
  111. <div class="img-tab-bd-con">
  112.     <p class="edd-inf"><?php echo zm_get_option('dow_tab_i_s'); ?></p>
  113.     <?php
  114.         $args = array('tax_query' => arrayarray('taxonomy' => 'download_category', 'field' => 'id', 'terms' => explode(',',zm_get_option('cms_edd_i_id') ))), 'posts_per_page' => zm_get_option('cms_edd_n'));
  115.         query_posts($args); while ( have_posts() ) : the_post();
  116.     ?>
  117.     <article id="post-<?php the_ID(); ?>" class="w4 x4">
  118.         <div class="picture">
  119.             <figure class="picture-img">
  120.                 <?php tao_thumbnail(); ?>
  121.             </figure>
  122.             <?php the_title( sprintf( '<h2><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h2>' ); ?>
  123.             <div class="img-tab-meta">
  124.                 <div class="img-cat">分类:<?php echo get_the_term_list($post->ID,  'download_category', '', ', ', ''); ?></div>
  125.                 <div class="clear"></div>
  126.             </div>
  127.         </div>
  128.     </article>
  129.     <?php endwhile; ?>
  130.     <?php wp_reset_query(); ?>
  131.     <div class="clear"></div>
  132. </div>
  133. <div class="img-tab-bd-con">
  134.     <p class="edd-inf"><?php echo zm_get_option('dow_tab_j_s'); ?></p>
  135.     <?php
  136.         $args = array('tax_query' => arrayarray('taxonomy' => 'download_category', 'field' => 'id', 'terms' => explode(',',zm_get_option('cms_edd_j_id') ))), 'posts_per_page' => zm_get_option('cms_edd_n'));
  137.         query_posts($args); while ( have_posts() ) : the_post();
  138.     ?>
  139.     <article id="post-<?php the_ID(); ?>" class="w4 x4">
  140.         <div class="picture">
  141.             <figure class="picture-img">
  142.                 <?php tao_thumbnail(); ?>
  143.             </figure>
  144.             <?php the_title( sprintf( '<h2><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h2>' ); ?>
  145.             <div class="img-tab-meta">
  146.                 <div class="img-cat">分类:<?php echo get_the_term_list($post->ID,  'download_category', '', ', ', ''); ?></div>
  147.                 <div class="clear"></div>
  148.             </div>
  149.         </div>
  150.     </article>
  151.     <?php endwhile; ?>
  152.     <?php wp_reset_query(); ?>
  153.     <div class="clear"></div>
  154. </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. );
  8. if ( $options_categories ) {
  9. $options[] = array(
  10.     'name' => '',
  11.     'desc' => '选择一个分类',
  12.     'id' => 'tabw_n',
  13.     'type' => 'select',
  14.     'options' => $options_categories);
  15. }
  16. $options[] = array(
  17.     'name' => 'Tab“特色文章2”设置',
  18.     'desc' => '自定义文字',
  19.     'id' => 'tab_e',
  20.     'std' => '分类文章',
  21.     'type' => 'text'
  22. );
  23. if ( $options_categories ) {
  24. $options[] = array(
  25.     'name' => '',
  26.     'desc' => '选择一个分类',
  27.     'id' => 'taby_n',
  28.     'type' => 'select',
  29.     'options' => $options_categories);
  30. }
  31. $options[] = array(
  32.     'name' => 'Tab“特色文章3”设置',
  33.     'desc' => '自定义文字',
  34.     'id' => 'tab_f',
  35.     'std' => '分类文章',
  36.     'type' => 'text'
  37. );
  38. if ( $options_categories ) {
  39. $options[] = array(
  40.     'name' => '',
  41.     'desc' => '选择一个分类',
  42.     'id' => 'tabm_n',
  43.     'type' => 'select',
  44.     'options' => $options_categories);
  45. }
  46. $options[] = array(
  47.     'name' => 'Tab“特色文章4”设置',
  48.     'desc' => '自定义文字',
  49.     'id' => 'tab_g',
  50.     'std' => '分类文章',
  51.     'type' => 'text'
  52. );
  53. if ( $options_categories ) {
  54. $options[] = array(
  55.     'name' => '',
  56.     'desc' => '选择一个分类',
  57.     'id' => 'tabg_n',
  58.     'type' => 'select',
  59.     'options' => $options_categories);
  60. }
  61. $options[] = array(
  62.     'name' => 'Tab“特色文章5”设置',
  63.     'desc' => '自定义文字',
  64.     'id' => 'tab_k',
  65.     'std' => '分类文章',
  66.     'type' => 'text'
  67. );
  68. if ( $options_categories ) {
  69. $options[] = array(
  70.     'name' => '',
  71.     'desc' => '选择一个分类',
  72.     'id' => 'tabh_n',
  73.     'type' => 'select',
  74.     'options' => $options_categories);
  75. }
  76. $options[] = array(
  77.     'name' => 'Tab“特色文章6”设置',
  78.     'desc' => '自定义文字',
  79.     'id' => 'tab_i',
  80.     'std' => '分类文章',
  81.     'type' => 'text'
  82. );
  83. if ( $options_categories ) {
  84. $options[] = array(
  85.     'name' => '',
  86.     'desc' => '选择一个分类',
  87.     'id' => 'tabx_n',
  88.     'type' => 'select',
  89.     'options' => $options_categories);
  90. }
  91. $options[] = array(
  92.     'name' => 'Tab“特色文章7”设置',
  93.     'desc' => '自定义文字',
  94.     'id' => 'tab_j',
  95.     'std' => '分类文章',
  96.     'type' => 'text'
  97. );
  98. if ( $options_categories ) {
  99. $options[] = array(
  100.     'name' => '',
  101.     'desc' => '选择一个分类',
  102.     'id' => 'tabz_n',
  103.     'type' => 'select',
  104.     'options' => $options_categories);
  105. }

2.4(修改style.css文件)

 

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

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

3.注意事项

 

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

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

逐梦驿站

发表评论

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