Begin4.2版本主题添加TAB栏

  • A+
所属分类:折腾
摘要

Begin主题非常优秀,早莫博客一直在使用,在使用的过程中,折腾折腾是不可少的,对于主题Begin想要添加多个TAB栏的,可以参考一下本文,为什么说是Begin主题4.2参考本文呢,因为其他版本的早莫也不懂啊!

在浏览wordpress搭建的博客系统时,看到Begin主题的博客,会停留好长时间,看看博客如何进行布局,设计的,从中学习,改进早莫博客的布局。最近看到有人的博客将Begin主题的TAB栏设计为三个以上的结构,使得网站容纳更多的内容,所以也进行了尝试,最终得到的结果如下图所示:

在这里进行参考的文章是:begin二次开发-首页tab增加多个

Begin4.2版本主题添加TAB栏

在操作的过程中,按照这篇文章尝试了好几次,因为Begin主题为了防止用户破解,所以在每次升级的时候,内部的整体架构会有轻微的调整,完全参考上文,失败了好几次。最终测试下来,对于Begin4.2版本添加TAB栏目的几个文件为:begin\inc\options-theme下的:options以及:begin\cms文件下的:cms-tab参照上面的外文,之后找到相关的两个文件,最终修改的代码放上:

  1. $options[] = array(
  2.         'name' => 'Tab“自定义类目”设置',
  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' => 'tabp_t',
  13.         'type' => 'select',
  14.         'options' => $options_categories);
  15.     }

在:options加上如上代码,位置在这部分代码下面:

在这里要注意一下,上面代码中需要修改的两个位置'id' => 'tab_d',’tab_d‘早莫只是将’c‘换成了’d‘;'id' => 'tabp_t',’tabp_t‘这个按照原文章命名为’new‘不管选择哪个分类,总是会显示最新文章,其中的道理不懂,但是早莫希望显示指定文章,最后想到了将 ’id‘完全命名为不同于已经使用的试一试,结果成功了。早莫是小白,大神轻喷。

  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.     }

这部分代码下面,最终显示的效果如下:

Begin4.2版本主题添加TAB栏

上面的代码添加好之后,还需要:cms-tab在这些代码下:

  1. <span class="tab-hd-con"><a href="javascript:"><?php echo zm_get_option('tab_a'); ?></a></span>
  2.         <span class="tab-hd-con"><a href="javascript:"><?php echo zm_get_option('tab_b'); ?></a></span>
  3.         <span class="tab-hd-con"><a href="javascript:"><?php echo zm_get_option('tab_c'); ?></a></span>

添加一行代码:

  1. <span class="tab-hd-con"><a href="javascript:"><?php echo zm_get_option('tab_d'); ?></a></span>

上面的部分结束了,操作最后一步:

在这个代码下:

  1. <ul class="tab-bd-con">
  2.                 <?php query_posts('showposts='.zm_get_option('tabt_n').'&cat='.zm_get_option('tabq_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>

添加如下代码:

  1. <ul class="tab-bd-con">
  2.                 <?php query_posts('showposts='.zm_get_option('tabt_n').'&cat='.zm_get_option('tabp_t')); 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>

这样整个修改过程便结束了,但是在原文中提到了对于手机的显示可能只能显示三个,按照原文给出的线索,在研究原网站,最后修改style.css文件:

将原来的代码

  1. .tab-hd {
  2.     overflow: hidden;
  3.     height: 40px;
  4.     line-height: 40px;
  5. }
  6. .tab-product .tab-hd .current, .tab-area .current {
  7.     position: relative;
  8.     z-index: 1;
  9.     height: 40px;
  10.     background: #fff;
  11. }
  12. .tab-hd-con {
  13.     float: left;
  14.     text-align: center;
  15.     cursor: pointer;
  16.     height: 39px;
  17.     border-right: 1px solid #ddd;
  18. }

修改为:

  1. @media screen and (max-width: 624px) {
  2. .tab-hd {
  3. overflow: hidden;
  4. line-height: 40px;
  5. }
  6. .tab-product .tab-hd .current, .tab-area .current {
  7. position: relative;
  8. z-index: 1;
  9. width: 33.33%;
  10. background: #FFF8DC;
  11. }
  12. .tab-hd-con {
  13. float: left;
  14. text-align: center;
  15. cursor: pointer;
  16. height: 39px;
  17. width: 33.33%;
  18. border-right: 1px solid #000;
  19. }
  20. }
  21. @media screen and (min-width: 625px) {
  22. .tab-hd {
  23. overflow: hidden;
  24. height: 40px;
  25. line-height: 40px;
  26. }
  27. .tab-product .tab-hd .current, .tab-area .current {
  28. position: relative;
  29. z-index: 1;
  30. height: 40px;
  31. width: 16.66%;
  32. background: #fff;
  33. }
  34. .tab-hd-con {
  35. float: left;
  36. text-align: center;
  37. cursor: pointer;
  38. height: 39px;
  39. width: 16.66%;
  40. border-right: 1px solid #ddd;
  41. }
  42. }

上面这部分代码,直接是照搬指导网站,没有做什么改动。最终在手机上实现的效果如下:
Begin4.2版本主题添加TAB栏

      在这里先感谢写出指导文章的作者,如果有需要的,并且正在使用Begin主题4.2,想添加TAB 栏的,按照上面的操作可以多次尝试,应该能成功,早莫是小白,自己折腾成功了!!

  • 早莫公众号
  • weinxin
  • 个人微信
  • weinxin

发表评论

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