◆◆0

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

来源：企鹅SEO 2019-04-25 11:20:36 WordPress 394 0

一：本站修改后的截图：

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

<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>的上面加入以下代码：

<ul class=“tab-bd-con”>
<?php query_posts(‘showposts=’.zm_get_option(‘tabt_n’).’&cat=’.zm_get_option(‘tabw_n’)); while (have_posts()) : the_post(); ?>
<?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>’ ); ?>
<?php endwhile; ?>
<?php wp_reset_query(); ?>
</ul>

找到<div class=”img-tab-hd”>…</div>，在</div>的上面加入以下代码：

<?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>标签上面加入以下代码:

<div class=“img-tab-bd-con”>
<p class=“edd-inf”><?php echo zm_get_option(‘dow_tab_d_s’); ?></p>
<?php
$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’));
query_posts($args); while ( have_posts() ) : the_post();
?>
<article id=“post-<?php the_ID(); ?>” class=“w4 x4”>
<div class=“picture”>
<figure class=“picture-img”>
<?php tao_thumbnail(); ?>
</figure>
<?php the_title( sprintf( ‘<h2><a href=“%s” rel=“bookmark”>’, esc_url( get_permalink() ) ), ‘</a></h2>’ ); ?>
<div class=“img-tab-meta”>
<div class=“img-cat”>分类：<?php echo get_the_term_list($post->ID, ‘download_category’, ”, ‘, ‘, ”); ?></div>
<div class=“clear”></div>
</div>
</div>
</article>
<?php endwhile; ?>
<?php wp_reset_query(); ?>
<div class=“clear”></div>
</div>

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

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

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

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

声明：站长码字很辛苦啊,转载时请保留本声明及附带文章链接：https://blog.tag.gg/showinfo-19-18702-0.html

亲爱的：若该文章解决了您的问题,可否收藏+评论+分享呢？