wordpress给分类目录添加缩略图+模板选择功能(1)

2017-04-18 0 625 百度已收录

方法1、Categories Images插件。

Categories Images是一款扩展wordpress分类功能、添加分类图片的插件,该插件支持默认wordpress的文章类型,也支持wordpressP自定义文章类型以及多站点。这个插件使用比较简单,可以轻松上手,这里就不多做介绍 ,网上这方面的 次料很多。

wordpress给分类目录添加缩略图+模板选择功能(1)

方法2、代码实现。

个人还是比较喜欢直接代码实现,这样做,既可以让网站不会有太多的插件而影响速度,也可以让wordpress主题集成更多的功能,这也是wordpress控们比较喜欢的方式,这就不多说了。其实,代码也是从插件中提练出来的,只是做了一些相应的改动。
第一步:在主题functions.php文件中添加如下代码:

  1. /**
  2. * Plugin Name: 分类图像
  3. */
  4. define(‘Z_IMAGE_PLACEHOLDER’, T_PATH.“/img/random/5.jpg”); //默认缩略图
  5. add_action(‘admin_init’, ‘z_init’);
  6. function z_init() {
  7. $z_taxonomies = get_taxonomies();
  8. if (is_array($z_taxonomies)) {
  9. $zci_options = get_option(‘zci_options’);
  10. if (emptyempty($zci_options[‘excluded_taxonomies’]))
  11. $zci_options[‘excluded_taxonomies’] = array();
  12. foreach ($z_taxonomies as $z_taxonomy) {
  13. if (in_array($z_taxonomy$zci_options[‘excluded_taxonomies’]))
  14. continue;
  15. add_action($z_taxonomy.’_add_form_fields’, ‘z_add_texonomy_field’);
  16. add_action($z_taxonomy.’_edit_form_fields’, ‘z_edit_texonomy_field’);
  17. add_filter( ‘manage_edit-‘ . $z_taxonomy . ‘_columns’, ‘z_taxonomy_columns’ );
  18. add_filter( ‘manage_’ . $z_taxonomy . ‘_custom_column’, ‘z_taxonomy_column’, 10, 3 );
  19. }
  20. }
  21. }
  22. // add image field in add form
  23. function z_add_texonomy_field() {
  24. if (get_bloginfo(‘version’) >= 3.5)
  25. wp_enqueue_media();
  26. else {
  27. wp_enqueue_style(‘thickbox’);
  28. wp_enqueue_script(‘thickbox’);
  29. }
  30. }
  31. // 在编辑表单中添加图像字段
  32. function z_edit_texonomy_field($taxonomy) {
  33. if (get_bloginfo(‘version’) >= 3.5)
  34. wp_enqueue_media();
  35. else {
  36. wp_enqueue_style(‘thickbox’);
  37. wp_enqueue_script(‘thickbox’);
  38. }
  39. if (z_taxonomy_image_url( $taxonomy->term_id, NULL, TRUE ) == Z_IMAGE_PLACEHOLDER)
  40. $image_text = “”;
  41. else
  42. $image_text = z_taxonomy_image_url( $taxonomy->term_id, NULL, TRUE );
  43. echo ‘<tr class=“form-field”>
  44. <th scope=“row” valign=“top”><label for=“taxonomy_image”>图像</label></th>
  45. <td><input type=“text” name=“taxonomy_image” id=“taxonomy_image” value=“‘.$image_text.'” />
  46. <button class=“z_upload_image_button button”>上传/添加图像</button>
  47. <button class=“z_remove_image_button button”>删除图像</button>
  48. <img class=“taxonomy-image” src=“‘ . $image_text . ‘” width=“150” height=“auto”/>
  49. </td>
  50. </tr>’.z_script();
  51. }
  52. // 图片上传函数
  53. function z_script() {
  54. return ‘<script type=“text/javascript”>
  55. jQuery(document).ready(function($) {
  56. var wordpress_ver = “‘.get_bloginfo(“version“).'”, upload_button;
  57. $(“.z_upload_image_button”).click(function(event) {
  58. upload_button = $(this);
  59. var frame;
  60. if (wordpress_ver >= “3.5”) {
  61. event.preventDefault();
  62. if (frame) {
  63. frame.open();
  64. return;
  65. }
  66. frame = wp.media();
  67. frame.on( “select”function() {
  68. // Grab the selected attachment.
  69. var attachment = frame.state().get(“selection”).first();
  70. frame.close();
  71. if (upload_button.parent().prev().children().hasClass(“tax_list”)) {
  72. upload_button.parent().prev().children().val(attachment.attributes.url);
  73. upload_button.parent().prev().prev().children().attr(“src”, attachment.attributes.url);
  74. }
  75. else
  76. $(“#taxonomy_image”).val(attachment.attributes.url);
  77. });
  78. frame.open();
  79. }
  80. else {
  81. tb_show(“”“media-upload.php?type=image&amp;TB_iframe=true”);
  82. return false;
  83. }
  84. });
  85. $(“.z_remove_image_button”).click(function() {
  86. $(“#taxonomy_image”).val(“”);
  87. $(this).parent().siblings(“.title”).children(“img”).attr(“src”,“‘ . Z_IMAGE_PLACEHOLDER . ‘”);
  88. $(“.inline-edit-col :input[name=\’taxonomy_image\’]”).val(“”);
  89. return false;
  90. });
  91. if (wordpress_ver < “3.5”) {
  92. window.send_to_editor = function(html) {
  93. imgurl = $(“img”,html).attr(“src”);
  94. if (upload_button.parent().prev().children().hasClass(“tax_list”)) {
  95. upload_button.parent().prev().children().val(imgurl);
  96. upload_button.parent().prev().prev().children().attr(“src”, imgurl);
  97. }
  98. else
  99. $(“#taxonomy_image”).val(imgurl);
  100. tb_remove();
  101. }
  102. }
  103. $(“.editinline”).live(“click”function(){
  104. var tax_id = $(this).parents(“tr”).attr(“id”).substr(4);
  105. var thumb = $(“#tag-“+tax_id+” .thumb img”).attr(“src”);
  106. if (thumb != “‘ . Z_IMAGE_PLACEHOLDER . ‘”) {
  107. $(“.inline-edit-col :input[name=\’taxonomy_image\’]”).val(thumb);
  108. else {
  109. $(“.inline-edit-col :input[name=\’taxonomy_image\’]”).val(“”);
  110. }
  111. $(“.inline-edit-col .title img”).attr(“src”,thumb);
  112. return false;
  113. });
  114. });
  115. </script>’;
  116. }
  117. // 保存分类图像,同时编辑或保存期限
  118. add_action(‘edit_term’,’z_save_taxonomy_image’);
  119. add_action(‘create_term’,’z_save_taxonomy_image’);
  120. function z_save_taxonomy_image($term_id) {
  121. if(isset($_POST[‘taxonomy_image’]))
  122. update_option(‘z_taxonomy_image’.$term_id$_POST[‘taxonomy_image’]);
  123. }
  124. // 通过图片网址获取附件
  125. function z_get_attachment_id_by_url($image_src) {
  126. global $wpdb;
  127. $query = “SELECT ID FROM {$wpdb->posts} WHERE guid = ‘$image_src'”;
  128. $id = $wpdb->get_var($query);
  129. return (!emptyempty($id)) ? $id : NULL;
  130. }
  131. // 对于给定的term_id得到分类图像的URL(默认占位符图像)
  132. function z_taxonomy_image_url($term_id = NULL, $size = NULL, $return_placeholder = FALSE) {
  133. if (!$term_id) {
  134. if (is_category())
  135. $term_id = get_query_var(‘cat’);
  136. elseif (is_tax()) {
  137. $current_term = get_term_by(‘slug’, get_query_var(‘term’), get_query_var(‘taxonomy’));
  138. $term_id = $current_term->term_id;
  139. }
  140. }
  141. $taxonomy_image_url = get_option(‘z_taxonomy_image’.$term_id);
  142. if(!emptyempty($taxonomy_image_url)) {
  143. $attachment_id = z_get_attachment_id_by_url($taxonomy_image_url);
  144. if(!emptyempty($attachment_id)) {
  145. if (emptyempty($size))
  146. $size = ‘full’;
  147. $taxonomy_image_url = wp_get_attachment_image_src($attachment_id$size);
  148. $taxonomy_image_url = $taxonomy_image_url[0];
  149. }
  150. }
  151. if ($return_placeholder)
  152. return ($taxonomy_image_url != ) ? $taxonomy_image_url : Z_IMAGE_PLACEHOLDER;
  153. else
  154. return $taxonomy_image_url;
  155. }
  156. function z_quick_edit_custom_box($column_name$screen$name) {
  157. if ($column_name == ‘thumb’)
  158. echo ‘<fieldset>
  159. <div class=“thumb inline-edit-col”>
  160. <label>
  161. <span class=“title”><img src=“” alt=“Thumbnail”/></span>
  162. <span class=“input-text-wrap”><input type=“text” name=“taxonomy_image” value=“” class=“tax_list” /></span>
  163. <span class=“input-text-wrap”>
  164. <button class=“z_upload_image_button button”>上传/添加图像</button>
  165. <button class=“z_remove_image_button button”>删除图像</button>
  166. </span>
  167. </label>
  168. </div>
  169. </fieldset>’;
  170. }
  171. // 缩略图列添加到类别管理
  172. function z_taxonomy_columns( $columns ) {
  173. $new_columns = array();
  174. $new_columns[‘cb’] = $columns[‘cb’];
  175. $new_columns[‘thumb’] = ‘图像’;
  176. unset( $columns[‘cb’] );
  177. return array_merge$new_columns$columns );
  178. }
  179. // 缩略图列值添加到类别管理。
  180. function z_taxonomy_column( $columns$column$id ) {
  181. if ( $column == ‘thumb’ )
  182. $columns = ‘<span><img src=“‘ . z_taxonomy_image_url($id, NULL, TRUE) . ‘” alt=“Thumbnail” class=“wp-post-image”/></span>’;
  183. return $columns;
  184. }
  185. // “更改”插入“使用该图像”
  186. function z_change_insert_button_text($safe_text$text) {
  187. return str_replace(“Insert into Post”“Use this image”$text);
  188. }
  189. // 在类别列表中的图像
  190. if ( strpos$_SERVER[‘SCRIPT_NAME’], ‘edit-tags.php’ ) > 0 ) {
  191. add_action( ‘admin_head’, ‘z_add_style’ );
  192. add_action(‘quick_edit_custom_box’, ‘z_quick_edit_custom_box’, 10, 3);
  193. add_filter(“attribute_escape”“z_change_insert_button_text”, 10, 2);
  194. }
  195. // 注册插件设置
  196. function z_register_settings() {
  197. register_setting(‘zci_options’, ‘zci_options’, ‘z_options_validate’);
  198. add_settings_section(‘zci_settings’, , ‘z_section_text’, ‘zci-options’);
  199. add_settings_field(‘z_excluded_taxonomies’, ‘排除的分类’,’z_excluded_taxonomies’, ‘zci-options’, ‘zci_settings’);
  200. }
  201. function z_add_style() {
  202. echo ‘<style type=“text/css” media=“screen”>
  203. th.column-thumb {width:60px;}
  204. .form-field #taxonomy_image {border:1px solid #eee;width:200px; margin-left:30px;}
  205. .inline-edit-row fieldset .thumb label span.title {width:48px;height:48px;border:1px solid #eee;display:inline-block;}
  206. .column-thumb span {width:48px;height:48px;border:1px solid #eee;display:inline-block;}
  207. .inline-edit-row fieldset .thumb img,.column-thumb img {width:48px;height:48px;}
  208. label{ font-weight:800; font-size:16px;}
  209. .taxonomy-image {border:1px solid #eee;width:auto !important;height:60px; margin-bottom:-40px; }
  210. #taxonomy_image{ margin-left:180px; }
  211. #taxonomy_image,.z_upload_image_button,.z_remove_image_button{vertical-align:bottom !important;}
  212. </style>’;
  213. }

如果觉得代码比较多,也可以把它放到一个单独的php文件中,然后,再在functions.php文件中引用它。
第二步:在前台页面模板中调用这个分类缩略图。
在当前分类目录页面调用代码:

  1. <img src=“<?php if (function_exists(‘z_taxonomy_image_url’)) echo z_taxonomy_image_url(); ?>”>

或者

  1. <?php if (function_exists(‘z_taxonomy_image_url’)&&(z_taxonomy_image_url()!=“”)){ ?><img src=“<?php echo z_taxonomy_image_url(); ?>”><?php } ?>

在其它页面调用代码:这里需要我添加一个分类目录ID号

  1. <img src=“<?php if (function_exists(‘z_taxonomy_image_url’)) echo z_taxonomy_image_url(栏目ID号); ?>”>

或者

  1. <?phpif(function_exists(‘z_taxonomy_image_url’)&&(z_taxonomy_image_url(栏目ID号)!=)) {  
  2.     $img_url = z_taxonomy_image_url(栏目ID号);  
  3. }  
  4. else {  
  5.     $img_url = T_PATH.’/img/banner/catt.jpg’;  
  6.     //默认图片  
  7. }?><img src=“<?php echo $img_url;?>” alt=“”/>  

通过上面的代码,我们就实现了在wordspress分类目录中添加了缩略图功能模块,如果你也想让自己的网站主题的不同分类目录显示不同的banner图片的话,那就不防用一用上面的2种方法,从此你的网站就与众不同哦。

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

所有文章为演示数据,不提供下载地址,版权归原作者所有,仅提供演示效果!

模板下载吧 WP技术 wordpress给分类目录添加缩略图+模板选择功能(1) https://www.mbxzb.cn/blog/file/wordpress/4008.html

从明天起,做一个幸福的人,喂马、劈柴、周游世界…

常见问题
  • 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。
查看详情
  • 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用
查看详情

相关文章

评论
暂无评论
wordpress给分类目录添加缩略图+模板选择功能(1)-海报

分享本文封面