给主题杂志布局添加主体单栏分类列表(无缩略图)模块

  • A+
所属分类:建博笔记

在主题的主题选项--杂志布局模块中有一个主体单栏分类列表(5篇文章)设置项,通过该设置项可以在杂志布局页面中输出带有缩略图的单栏分类列表。有时,希望输出不带缩略图的分类列表,因此增加了该设置项,同时也是为了保持与原版主题功能同步。

 

效果演示

给主题杂志布局添加主体单栏分类列表(无缩略图)模块

 

主题选项添加设置项

首先:打开inc/options/begin-options.php文件,大约690行的位置,找到代码

  1. $options[] = array(
  2. 'name' => '主体单栏分类列表(10篇文章)',
  3. 'desc' => '显示',
  4. 'id' => 'cat_one_10',
  5. 'class' => 'be_ico',
  6. 'std' => '0',
  7. 'type' => 'checkbox'
  8. );

在其上面添加

  1. $options[] = array(
  2. 'name' => '主体单栏分类列表(无缩略图)',
  3. 'desc' => '显示',
  4. 'id' => 'cat_one_no_img',
  5. 'class' => 'be_ico',
  6. 'std' => '0',
  7. 'type' => 'checkbox'
  8. );
  9. $options[] = array(
  10. 'name' => '',
  11. 'desc' => '排序:6',
  12. 'id' => 'cat_one_no_img_s',
  13. 'std' => '6',
  14. 'class' => 'mini hidden',
  15. 'type' => 'text'
  16. );
  17. $options[] = array(
  18. 'name' => '',
  19. 'desc' => '显示篇数',
  20. 'id' => 'cat_one_no_img_n',
  21. 'std' => '4',
  22. 'class' => 'hidden',
  23. 'type' => 'text'
  24. );
  25. $options[] = array(
  26. 'name' => '选择分类列表分类',
  27. 'desc' => '输入分类ID,多个分类用英文半角逗号","隔开',
  28. 'id' => 'cat_one_no_img_id',
  29. 'std' => '1',
  30. 'class' => 'hidden',
  31. 'type' => 'text'
  32. );
  33. $options[] = array(
  34. 'name' => '分类ID对照',
  35. 'desc' => '<ul>'.$cats_id.'</ul>',
  36. 'id' => 'catids',
  37. 'class' => 'ovn-catid hidden',
  38. 'type' => 'info'
  39. );
  40. $options[] = array(
  41. 'id' => 'clear'
  42. );

然后:打开inc/options/includes/themes-options.php文件,大约246行的位置,找到代码

  1. jQuery('#cat_one_5').click(function() {
  2. jQuery('#section-cat_one_5_id, .ov-catid, #section-cat_one_5_s').fadeToggle(400);
  3. });
  4. if (jQuery('#cat_one_5:checked').val() !== undefined) {
  5. jQuery('#section-cat_one_5_id,.ov-catid, #section-cat_one_5_s').show();
  6. }

在其下面添加

  1. jQuery('#cat_one_no_img').click(function() {
  2. jQuery('#section-cat_one_no_img_s, .ovn-catid, #section-cat_one_no_img_n, #section-cat_one_no_img_id').fadeToggle(400);
  3. });
  4. if (jQuery('#cat_one_no_img:checked').val() !== undefined) {
  5. jQuery('#section-cat_one_no_img_s, .ovn-catid, #section-cat_one_no_img_n, #section-cat_one_no_img_id').show();
  6. }

代码作用

  • 当不启用时,隐藏相关设置项

完成以上两个步骤后,就可以在主题选项--杂志布局模块中看到新增的主体单栏分类列表(无缩略图)功能了。

给主题杂志布局添加主体单栏分类列表(无缩略图)模块

 

前台输出

首先:在cms/目录下新建一个名为cms-cat-one-no-img.php的文件

然后:复制下面的代码到这个文件中

  1. <?php if (zm_get_option('cat_one_no_img')) { ?>
  2. <div class="line-one sort" name="<?php echo zm_get_option('cat_one_no_img_s'); ?>">
  3. <?php $display_categories = explode(',',zm_get_option('cat_one_no_img_id') ); foreach ($display_categories as $category) { ?>
  4. <?php if (zm_get_option('no_cat_child')) { ?>
  5. <?php query_posts( array('cat' => $category ) ); ?>
  6. <?php query_posts( array( 'showposts' => 2, 'category__in' => array(get_query_var('cat')), 'post__not_in' => $do_not_duplicate ) ); ?>
  7. <?php } else { ?>
  8. <?php query_posts( array( 'showposts' => 2, 'cat' => $category, 'post__not_in' => $do_not_duplicate ) ); ?>
  9. <?php } ?>
  10. <div class="cat-box wow fadeInUp" data-wow-delay="0.3s">
  11. <h3 class="cat-title"><a href="<?php echo get_category_link($category);?>">
  12. <?php if (zm_get_option('cat_icon')) { ?>
  13. <i class="t-icon <?php echo zm_taxonomy_icon_code(); ?>"></i>
  14. <?php } else { ?>
  15. <span class="title-i"><span></span><span></span><span></span><span></span></span>
  16. <?php } ?>
  17. <?php single_cat_title(); ?><span class="more-i"><span></span><span></span><span></span></span></a>
  18. </h3>
  19. <div class="clear"></div>
  20. <div class="cat-site">
  21. <ul class="cat-one-list">
  22. <?php if (zm_get_option('no_cat_child')) { ?>
  23. <?php query_posts( array( 'showposts' => zm_get_option('cat_one_no_img_n'), 'cat' => $category, 'offset' => 0, 'category__in' => array(get_query_var('cat')), 'post__not_in' => $do_not_duplicate ) ); ?>
  24. <?php } else { ?>
  25. <?php query_posts( array( 'showposts' => zm_get_option('cat_one_no_img_n'), 'cat' => $category, 'offset' => 0, 'post__not_in' => $do_not_duplicate ) ); ?>
  26. <?php } ?>
  27. <?php while ( have_posts() ) : the_post(); ?>
  28. <?php if (zm_get_option('list_date')) { ?><li class="list-date"><?php the_time('m/d'); ?></li><?php } ?>
  29. <?php if ( get_post_meta($post->ID, 'mark', true) ) {
  30. the_title( sprintf( '<li class="list-cat-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a><span class="t-mark">' . $mark = get_post_meta($post->ID, 'mark', true) . '</span></li>' );
  31. } else {
  32. the_title( sprintf( '<li class="list-cat-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></li>' );
  33. } ?>
  34. <?php endwhile; ?>
  35. <?php wp_reset_query(); ?>
  36. </ul>
  37. <div class="clear"></div>
  38. </div>
  39. </div>
  40. <?php } ?>
  41. </div>
  42. <?php } ?>

最后:打开template/cms.php文件,找到大约24行的代码

  1. require get_template_directory() . '/cms/cms-cat-one-5.php';

在其下面添加

  1. require get_template_directory() . '/cms/cms-cat-one-no-img.php';

即可。

 

其他说明

  • 完成上面所有操作后,在后台就可以启用并设置相关选项,前台可正常输出
  • 本文代码与原版主题代码略有不同,主要修正了原版主题代码中命名的规范问题
若文章图片、下载链接、网盘密码等信息出错,请留言反馈,博主将第一时间更新!

发表评论

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