小鹿学院 > SEM营销 > 资讯正文
wordpress知更鸟主题CMS增加Tab选项卡的教程
2018-01-22 15:33 小鹿推广

小鹿系列竞价软件覆盖百度、360、搜狗、神马四大搜索平台,采用独创的竞价算法,智能精准出价,一键批量查排名,根据关键词位置实时调整出价,降低出价虚高,稳定排名,节省企业预算。

小鹿竞价软件专题介绍:https://www.xiaolutg.com/bidding/fengchao?ref=menu

一:本站修改后的截图:

小鹿推广,竞价软件,SEM营销

二:教程步骤:

第一步:修改cms-tab.php文件

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

  1. <spanclass=“tab-hd-con”><ahref=“javascript:”><?phpechozm_get_option(‘tab_d’);?></a></span>

找到<div class=”tab-bd dom-display”>…</div>,在</div>的上面加入以下代码:

  1. <ulclass=“tab-bd-con”>
  2. <?phpquery_posts(‘showposts=’.zm_get_option(‘tabt_n’).’&cat=’.zm_get_option(‘tabw_n’));while(have_posts()):the_post();?>
  3. <?phpthe_title(sprintf(‘<liclass=“list-title><iclass=“fafa-angle-right”></i><ahref=“%s”rel=“bookmark”>’,esc_url(get_permalink())),‘</a></li>’);?>
  4. <?phpendwhile;?>
  5. <?phpwp_reset_query();?>
  6. </ul>

第二步:修改cms-dow-tab.php文件

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

  1. <?phpif(zm_get_option(‘dow_tab_d’)==){?><?php}else{?><spanclass=“img-tab-hd-con”><ahref=“javascript:”><?phpechozm_get_option(‘dow_tab_d’);?></a></span><?php}?>

找到<div class=”img-tab-bd img-dom-display”>…</div>,在</div>标签上面加入以下代码:

  1. <divclass=“img-tab-bd-con”>
  2. <pclass=“edd-inf”><?phpechozm_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. <articleid=“post-<?phpthe_ID();?>”class=“w4x4”>
  8. <divclass=“picture”>
  9. <figureclass=“picture-img”>
  10. <?phptao_thumbnail();?>
  11. </figure>
  12. <?phpthe_title(sprintf(‘<h2><ahref=“%s”rel=“bookmark”>’,esc_url(get_permalink())),‘</a></h2>’);?>
  13. <divclass=“img-tab-meta”>
  14. <divclass=“img-cat”>分类:<?phpechoget_the_term_list($post->ID,‘download_category’,,‘,‘,);?></div>
  15. <divclass=“clear”></div>
  16. </div>
  17. </div>
  18. </article>
  19. <?phpendwhile;?>
  20. <?phpwp_reset_query();?>
  21. <divclass=“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:0010px0;
  4. border:1pxsolid#ddd;
  5. border-radius:8px;
  6. box-shadow:01px1pxrgba(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:1pxsolid#ddd;
  37. }
  38. .tab-hd-cona{
  39. display:inlineblock;
  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:1pxsolid#ddd;
  51. }
  52. .tab-bdli{
  53. float:left;
  54. width:45%;
  55. line-height:210%;
  56. margin:020px00;
  57. whitewhite-space:nowrap;
  58. word-wrap:normal;
  59. text-overflow:ellipsis;
  60. overflow:hidden;
  61. }
  62. @mediascreenand(max-width:480px){
  63. .tab-bdli{
  64. width:95%;
  65. margin:0000;
  66. }
  67. }

第五步:CMS设置tab切换

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

须知:

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

卧龙

百度

点睛

搜狗

标签: 小鹿运营推广
<< 上一篇

wordpress的Canvas实现进度环返回顶部按钮

下一篇 >>

站长们注意了!刷流量神器内藏漏洞病毒,数十万自媒体电脑中招

相关资讯

关注公众号 获取更多干货资讯

400-998-8026