自定义文章类型分类列表页添加幻灯

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

本文基于begin主题创建,非该主题的童鞋仅供参考。

预期实现的功能

  • 自定义文章类型:视频分类列表页添加幻灯
  • 可自定义幻灯开启/关闭
  • 可自定义幻灯显示数量
  • 可自定义幻灯跳转链接
  • 可自定义幻灯文章排序

 

效果预览

自定义文章类型分类列表页添加幻灯

PC端效果预览

自定义文章类型分类列表页添加幻灯

移动端效果预览

PC端动态预览:点击这里

移动端动态预览:请使用手机浏览器打开https://isdola.com/videos/avonline/

各种屏幕尺寸适配性:请使用浏览器的F12功能自行查看

 

一、后台主题选项中添加自定义文章类型:视频幻灯选项

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

  1. $options[] = array(
  2. 'name' => '首页幻灯',
  3. 'desc' => '显示',
  4. 'id' => 'slider',
  5. 'class' => 'be_ico',
  6. 'std' => '0',
  7. 'type' => 'checkbox'
  8. );
  9. $options[] = array(
  10. 'name' => '',
  11. 'desc' => '自定义排序,需给幻灯中的文章添加排序编号',
  12. 'id' => 'show_order',
  13. 'std' => '0',
  14. 'class' => 'hidden',
  15. 'type' => 'checkbox'
  16. );
  17. $options[] = array(
  18. 'name' => '',
  19. 'desc' => '幻灯显示篇数',
  20. 'id' => 'slider_n',
  21. 'std' => '2',
  22. 'class' => 'mini hidden',
  23. 'type' => 'text'
  24. );
  25. $options[] = array(
  26. 'id' => 'clear'
  27. );

下面(也可以在你喜欢的地方)添加

  1. $options[] = array(
  2. 'name' => '视频分类页幻灯',
  3. 'desc' => '显示',
  4. 'id' => 'video_slider',
  5. 'class' => 'be_ico',
  6. 'std' => '0',
  7. 'type' => 'checkbox'
  8. );
  9. $options[] = array(
  10. 'name' => '',
  11. 'desc' => '自定义排序,需给幻灯中的文章添加排序编号',
  12. 'id' => 'video_show_order',
  13. 'std' => '0',
  14. 'class' => 'hidden',
  15. 'type' => 'checkbox'
  16. );
  17. $options[] = array(
  18. 'name' => '',
  19. 'desc' => '幻灯显示篇数',
  20. 'id' => 'video_slider_n',
  21. 'std' => '2',
  22. 'class' => 'mini hidden',
  23. 'type' => 'text'
  24. );
  25. $options[] = array(
  26. 'id' => 'clear'
  27. );

代码作用:

  • 主题选项中添加自定义文章类型:视频分类列表页幻灯显示开关
  • 添加自定义排序开关
  • 添加幻灯显示数量

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

  1. jQuery('#slider').click(function() {
  2. jQuery('#section-show_order, #section-slider_n').fadeToggle(400);
  3. });
  4. if (jQuery('#slider:checked').val() !== undefined) {
  5. jQuery('#section-show_order, #section-slider_n').show();
  6. }

下面(也可以在你喜欢的地方)添加

  1. jQuery('#video_slider').click(function() {
  2. jQuery('#section-video_show_order, #section-video_slider_n').fadeToggle(400);
  3. });
  4. if (jQuery('#video_slider:checked').val() !== undefined) {
  5. jQuery('#section-video_show_order, #section-video_slider_n').show();
  6. }

代码作用:

  • 让添加的功能可以正常显示和使用

完成上面的操作后就可以在后台--主题选项--首页设置中看到相关的选项了,如下图所示:

自定义文章类型分类列表页添加幻灯

Ps:具体显示在哪个位置和你在begin-options.php文件中添加的位置有关。

 

二、后台自定义文章类型:视频文章编辑页添加幻灯设置面板

打开inc/meta-boxs.php文件,大约489~497行的位置,找到代码

  1. // 文章标题幻灯
  2. $header_show_meta_boxes =
  3. array(
  4. "header_img" => array(
  5. "name" => "header_img",
  6. "std" => "",
  7. "title" => "输入图片地址,一行一个不能有回行和空格,图片尺寸必须相同",
  8. "type"=>"textarea"),
  9. );

上面(也可以在你喜欢的地方)添加

  1. // 添加到视频分类页幻灯
  2. $show_video_meta_boxes =
  3. array(
  4. "video_show" => array(
  5. "name" => "video_show",
  6. "std" => "",
  7. "title" => "输入图片链接地址,则显示在视频分类页幻灯中,图片宽度大于760px,尺寸必须相同",
  8. "type"=>"text"),
  9. "video_go_url" => array(
  10. "name" => "video_show_url",
  11. "std" => "",
  12. "title" => "输入链接地址,可让幻灯跳转到任意链接页面",
  13. "type"=>"text"),
  14. "video_show_order" => array(
  15. "name" => "video_show_order",
  16. "std" => "",
  17. "title" => "输入数值,实现幻灯排序,数值越大越靠前",
  18. "type"=>"text"),
  19. );
  20. // 面板内容
  21. function show_video_meta_boxes() {
  22. global $post, $show_video_meta_boxes;
  23. //获取保存
  24. foreach ($show_video_meta_boxes as $meta_box) {
  25. $meta_box_value = get_post_meta($post->ID, $meta_box['name'] . '', true);
  26. if ($meta_box_value != "")
  27. //将默认值替换为已保存的值
  28. $meta_box['std'] = $meta_box_value;
  29. echo '<input type="hidden" name="' . $meta_box['name'] . '_noncename" id="' . $meta_box['name'] . '_noncename" value="' . wp_create_nonce(plugin_basename(__FILE__)) . '" />';
  30. //选择类型输出不同的html代码
  31. switch ($meta_box['type']) {
  32. case 'title':
  33. echo '<h4>' . $meta_box['title'] . '</h4>';
  34. break;
  35. case 'text':
  36. echo '<h4>' . $meta_box['title'] . '</h4>';
  37. echo '<span class="form-field"><input type="text" size="40" name="' . $meta_box['name'] . '" value="' . $meta_box['std'] . '" /></span><br />';
  38. break;
  39. case 'textarea':
  40. echo '<h4>' . $meta_box['title'] . '</h4>';
  41. echo '<textarea id="seo-excerpt" cols="40" rows="2" name="' . $meta_box['name'] . '">' . $meta_box['std'] . '</textarea><br />';
  42. break;
  43. case 'radio':
  44. echo '<h4>' . $meta_box['title'] . '</h4>';
  45. $counter = 1;
  46. foreach ($meta_box['buttons'] as $radiobutton) {
  47. $checked = "";
  48. if (isset($meta_box['std']) && $meta_box['std'] == $counter) {
  49. $checked = 'checked = "checked"';
  50. }
  51. echo '<input ' . $checked . ' type="radio" class="kcheck" value="' . $counter . '" name="' . $meta_box['name'] . '_value"/>' . $radiobutton;
  52. $counter++;
  53. }
  54. break;
  55. case 'checkbox':
  56. if (isset($meta_box['std']) && $meta_box['std'] == 'true') $checked = 'checked = "checked"';
  57. else $checked = '';
  58. echo '<br /><label><input type="checkbox" name="' . $meta_box['name'] . '" value="true" ' . $checked . ' />';
  59. echo '' . $meta_box['title'] . '</label><br />';
  60. break;
  61. }
  62. }
  63. }
  64. // 创建面板
  65. function show_video_meta_box() {
  66. global $theme_name;
  67. if (function_exists('add_meta_box')) {
  68. add_meta_box('show_video_meta_box', '将文章添加到视频分类页幻灯', 'show_video_meta_boxes', 'video', 'normal', 'high');
  69. }
  70. }
  71. // 保存数据
  72. function save_show_video_postdata($post_id) {
  73. global $post, $show_video_meta_boxes;
  74. foreach ($show_video_meta_boxes as $meta_box) {
  75. if (!wp_verify_nonce($_POST[$meta_box['name'] . '_noncename'], plugin_basename(__FILE__))) {
  76. return $post_id;
  77. }
  78. if ('page' == $_POST['post_type']) {
  79. if (!current_user_can('edit_page', $post_id)) return $post_id;
  80. } else {
  81. if (!current_user_can('edit_post', $post_id)) return $post_id;
  82. }
  83. $data = $_POST[$meta_box['name'] . ''];
  84. if (get_post_meta($post_id, $meta_box['name'] . '') == "") add_post_meta($post_id, $meta_box['name'] . '', $data, true);
  85. elseif ($data != get_post_meta($post_id, $meta_box['name'] . '', true)) update_post_meta($post_id, $meta_box['name'] . '', $data);
  86. elseif ($data == "") delete_post_meta($post_id, $meta_box['name'] . '', get_post_meta($post_id, $meta_box['name'] . '', true));
  87. }
  88. }
  89. // 触发
  90. add_action('admin_menu', 'show_video_meta_box');
  91. add_action('save_post', 'save_show_video_postdata');

代码说明:

这部分代码本来也可以不添加,直接调用首页幻灯对应的面板代码即可。但考虑到代码的独立性,避免日后因为其他需求的原因造成代码混乱,所以单独注册了这个面板。

添加代码后,就可以在自定义文章类型:视频文章编辑页中看到这个面板了,如下图所示:

自定义文章类型分类列表页添加幻灯

Ps:如果你看不到这个面板的话,请在右上角的显示选项勾选这个面板。

 

三、向meta-delete.php文件追加数据删除

打开inc/meta-delete.php文件,找到第4行开始的数组

  1. array(
  2. ......
  3. );

在这个数组中的任意行添加

  1. "video_show" => array("name" => "video_show"),
  2. "video_go_url" => array("name" => "video_show_url"),
  3. "video_show_order" => array("name" => "video_show_order"),

代码作用:

  • 当添加的幻灯文章数量大于主题选项中设定的数量时,最早发布的文章中的幻灯数据将被删除
  • 由于各种原因需要删除原来添加过的幻灯或文章时,可使数据同步到前台

作用解释:

因为你在面板中删除了幻灯图片,但数据库中还是有这个数据的,如果不彻底从数据库中删除这个数据的话,前台会误认为“原来的这篇文章还是应该显示在幻灯中,只不过是幻灯图片丢失”的假象。那样的话,幻灯中就会只显示该文章的标题而不显示幻灯图片,达不到你预期的“不想显示在幻灯中”的效果了。

 

四、前台幻灯模块输出

打开template/header-sub.php文件,在第一行代码

  1. <?php if (!is_search() && !is_tag() && is_archive()) { ?>

下面添加

  1. <?php if (get_post_type()=='video' && zm_get_option('video_slider') && !is_paged()) { ?>
  2. <div class="header-sub">
  3. <div id="slideshow" class="wow fadeInUp" data-wow-delay="0.3s">
  4. <ul class="rslides" id="slider">
  5. <?php if (zm_get_option('video_show_order')) { ?>
  6. <?php
  7. $args = array(
  8. 'post_type' => 'video',
  9. 'posts_per_page' => zm_get_option('video_slider_n'),
  10. 'meta_key' => 'video_show',
  11. 'meta_key' => 'video_show_order',
  12. 'orderby' => 'meta_value',
  13. 'order' => 'date'
  14. );
  15. query_posts($args);
  16. ?>
  17. <?php } else { ?>
  18. <?php
  19. $args = array(
  20. 'post_type' => 'video',
  21. 'posts_per_page' => zm_get_option('video_slider_n'),
  22. 'meta_key' => 'video_show'
  23. );
  24. query_posts($args);
  25. ?>
  26. <?php } ?>
  27. <?php while (have_posts()) : the_post(); $do_not_duplicate[] = $post->ID; $do_show[] = $post->ID; ?>
  28. <?php $image = get_post_meta($post->ID, 'video_show', true); ?>
  29. <?php $go_url = get_post_meta($post->ID, 'video_show_url', true); ?>
  30. <li>
  31. <?php if ( get_post_meta($post->ID, 'video_show_url', true) ) : ?>
  32. <a href="<?php echo $video_go_url; ?>" target="_blank" rel="external nofollow"><img src="<?php echo $image; ?>" alt="<?php the_title(); ?>" /></a>
  33. <?php else: ?>
  34. <a href="<?php the_permalink() ?>" rel="bookmark"><img src="<?php echo $image; ?>" alt="<?php the_title(); ?>" /></a>
  35. <?php endif; ?>
  36. <p class="slider-caption"><?php the_title(); ?></p>
  37. </li>
  38. <?php endwhile; ?>
  39. <?php wp_reset_query(); ?>
  40. </ul>
  41. </div>
  42. </div>
  43. <?php } ?>

完成以上操作后,在自定义文章类型:视频文章的幻灯面板中添加图片后就可以在前台看到效果了。

 

五、注意事项

  • 注意事项一

如果你在后台--主题选项--基本设置启用显示分类图片功能

自定义文章类型分类列表页添加幻灯

同时你又启用了幻灯功能的话,那么建议你在自定义文章类型:视频--视频分类中(包括子分类)不要设置图片描述分类图片

自定义文章类型分类列表页添加幻灯

否则的话,前台就会同时输出幻灯和分类图片,布局就会很难看,就像下图这样:

自定义文章类型分类列表页添加幻灯

上图是幻灯,下图是分类图片

  • 注意事项二

幻灯左上角的标题位置和样式我是直接使用的主题的原有样式,如果你只想调整幻灯标题的位置和样式但又不想调整其他分类中的对应位置的标题位置和样式的话,建议你修改第四步操作中的第36行代码的class类名,然后在style.css中针对这个class类名重新设计一个样式。

  • 注意事项三

由于个人能力有限,这个幻灯会同时显示在主分类列表页和子分类列表页。如果你想让幻灯只显示在主分类列表而不显示在子分类列表中,请自行修改代码。

另外,由于我的自定义文章类型:视频的主分类只有一个(该分类下有多个子分类),因此在有多个主分类的情况下是否显示同一个幻灯我就不清楚了,没有进一步测试。如果你有多个主分类,而这些主分类想实现不同的幻灯文章的话,也需要你自己进一步测试和改进代码。

发表评论

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