wordpress主题分类目录添加缩略图功能

半岛未凉° 2019-08-19 快速入门 385 已收录 本文共11572个字,预计阅读需要29分钟。
  • 文章介绍
  • 快速入门
  • 增值服务

一直以来,wordpress的后台的分类目录没有添加缩略图的功能,一般情况下,也没什么,毕竟很多网站也用不上这些。但有些企业网站可能就会需要这个缩略图,它们想在不同的分类目录页面展示不同的缩略图。当然,可以通过指定图片来实现,但那样一业,后期更换图片时,就相对不太灵活。而给wordpress后台分类目录里添加缩略图功能,就显得方便的多——如果想修改哪个分类的缩略图,只需要在后台设置一下就好了,多方便。闲话不多说,一起来看看怎样实现吧。

方法一:非上传形式添加缩略图功能。

  1. //添加缩略图
  2. function salong_add_category_field(){
  3. echo '<div class="form-field">
  4. <label for="thumb">'.__('缩略图','salong').'</label>
  5. <input name="thumb" id="thumb" type="text" value="" size="40">
  6. <p>'.__('输入分类的缩略图链接。','salong').'</p>
  7. </div>';
  8. }
  9. add_action('category_add_form_fields','salong_add_category_field',10,2);
  10. //分类编辑字段
  11. function salong_edit_category_field($tag){
  12. echo '<tr class="form-field">
  13. <th scope="row"><label for="thumb">'.__('灰色地图','salong').'</label></th>
  14. <td>
  15. <input name="thumb" id="thumb" type="text" value="';
  16. echo get_option('thumb-'.$tag->term_id).'" size="40"/><br>
  17. <span class="thumb">'.$tag->name.__('分类的缩略图链接。','salong').'</span>
  18. </td>
  19. </tr>';
  20. }
  21. add_action('category_edit_form_fields','salong_edit_category_field',10,2);
  22. //保存数据
  23. function salong_category_thumb($term_id){
  24. if(isset($_POST['thumb'])){
  25. //判断权限--可改
  26. if(!current_user_can('manage_categories')){
  27. return $term_id;
  28. }
  29. $thumb_key = 'thumb-'.$term_id;
  30. $thumb_value = $_POST['thumb'];
  31. // 更新选项值
  32. update_option( $thumb_key, $thumb_value );
  33. }
  34. }
  35. add_action('created_category','salong_category_thumb',10,1);
  36. add_action('edited_category','salong_category_thumb',10,1);

把上面这段代码添加到主题的functions.php文件中,这样就为wordpress分类目录添加好了缩略图功能。只是这个不是上传图片,而是填写图片url地址。

然后,在wordpress主题前台页面想要添加缩略图的地方调用下面这句:

  1. echo get_option('thumb_color-'.$category_id)

方法二:上传缩略图功能

把下面这段代码添加到wordpress主题 的functions.php文件中:

  1. <?php
  2. /**
  3.  * Plugin Name: 分类图像
  4.  */
  5. ?>
  6. <?php
  7. if (!defined('Z_PLUGIN_URL'))
  8. define('Z_PLUGIN_URL', untrailingslashit(plugins_url('', __FILE__)));
  9. define('Z_IMAGE_PLACEHOLDER', get_bloginfo("template_url")."/images/placeholder.jpg");
  10. // l10n
  11. load_plugin_textdomain('zci', FALSE, 'categories-images/languages');
  12. add_action('admin_init', 'z_init');
  13. function z_init() {
  14. $z_taxonomies = get_taxonomies();
  15. if (is_array($z_taxonomies)) {
  16. $zci_options = get_option('zci_options');
  17. if (empty($zci_options['excluded_taxonomies']))
  18. $zci_options['excluded_taxonomies'] = array();
  19.    foreach ($z_taxonomies as $z_taxonomy) {
  20. if (in_array($z_taxonomy, $zci_options['excluded_taxonomies']))
  21. continue;
  22.        add_action($z_taxonomy.'_add_form_fields', 'z_add_texonomy_field');
  23. add_action($z_taxonomy.'_edit_form_fields', 'z_edit_texonomy_field');
  24. add_filter( 'manage_edit-' . $z_taxonomy . '_columns', 'z_taxonomy_columns' );
  25. add_filter( 'manage_' . $z_taxonomy . '_custom_column', 'z_taxonomy_column', 103 );
  26.    }
  27. }
  28. }
  29. function z_add_style() {
  30. echo '<style type="text/css" media="screen">
  31. th.column-thumb {width:60px;}
  32. .form-field img.taxonomy-image {border:1px solid #eee;max-width:300px;max-height:300px;}
  33. .inline-edit-row fieldset .thumb label span.title {width:48px;height:48px;border:1px solid #eee;display:inline-block;}
  34. .column-thumb span {width:48px;height:48px;border:1px solid #eee;display:inline-block;}
  35. .inline-edit-row fieldset .thumb img,.column-thumb img {width:48px;height:48px;}
  36. </style>';
  37. }
  38. // add image field in add form
  39. function z_add_texonomy_field() {
  40. if (get_bloginfo('version') >= 3.5)
  41. wp_enqueue_media();
  42. else {
  43. wp_enqueue_style('thickbox');
  44. wp_enqueue_script('thickbox');
  45. }
  46. echo '<div class="form-field">
  47. <label for="taxonomy_image">' . __('图像', 'zci') . '</label>
  48. <input type="text" name="taxonomy_image" id="taxonomy_image" value="" />
  49. <br/>
  50. <button class="z_upload_image_button button">' . __('上传/添加图像', 'zci') . '</button>
  51. </div>'.z_script();
  52. }
  53. // add image field in edit form
  54. function z_edit_texonomy_field($taxonomy) {
  55. if (get_bloginfo('version') >= 3.5)
  56. wp_enqueue_media();
  57. else {
  58. wp_enqueue_style('thickbox');
  59. wp_enqueue_script('thickbox');
  60. }
  61. if (z_taxonomy_image_url( $taxonomy->term_id, NULL, TRUE ) == Z_IMAGE_PLACEHOLDER)
  62. $image_text = "";
  63. else
  64. $image_text = z_taxonomy_image_url( $taxonomy->term_id, NULL, TRUE );
  65. echo '<tr class="form-field">
  66. <th scope="row" valign="top"><label for="taxonomy_image">' . __('图像', 'zci') . '</label></th>
  67. <td><img class="taxonomy-image" src="' . z_taxonomy_image_url( $taxonomy->term_id, NULL, TRUE ) . '" style="width:400px;"/><br/><input type="text" name="taxonomy_image" id="taxonomy_image" value="'.$image_text.'" /><br />
  68. <button class="z_upload_image_button button">' . __('上传/添加图像', 'zci') . '</button>
  69. <button class="z_remove_image_button button">' . __('删除图像', 'zci') . '</button>
  70. </td>
  71. </tr>'.z_script();
  72. }
  73. // upload using wordpress upload
  74. function z_script() {
  75. return '<script type="text/javascript">
  76.    jQuery(document).ready(function($) {
  77. var wordpress_ver = "'.get_bloginfo("version").'", upload_button;
  78. $(".z_upload_image_button").click(function(event) {
  79. upload_button = $(this);
  80. var frame;
  81. if (wordpress_ver >= "3.5") {
  82. event.preventDefault();
  83. if (frame) {
  84. frame.open();
  85. return;
  86. }
  87. frame = wp.media();
  88. frame.on( "select", function() {
  89. // Grab the selected attachment.
  90. var attachment = frame.state().get("selection").first();
  91. frame.close();
  92. if (upload_button.parent().prev().children().hasClass("tax_list")) {
  93. upload_button.parent().prev().children().val(attachment.attributes.url);
  94. upload_button.parent().prev().prev().children().attr("src", attachment.attributes.url);
  95. }
  96. else
  97. $("#taxonomy_image").val(attachment.attributes.url);
  98. });
  99. frame.open();
  100. }
  101. else {
  102. tb_show("""media-upload.php?type=image&amp;TB_iframe=true");
  103. return false;
  104. }
  105. });
  106. $(".z_remove_image_button").click(function() {
  107. $("#taxonomy_image").val("");
  108. $(this).parent().siblings(".title").children("img").attr("src","' . Z_IMAGE_PLACEHOLDER . '");
  109. $(".inline-edit-col :input[name=\'taxonomy_image\']").val("");
  110. return false;
  111. });
  112. if (wordpress_ver < "3.5") {
  113. window.send_to_editor = function(html) {
  114. imgurl = $("img",html).attr("src");
  115. if (upload_button.parent().prev().children().hasClass("tax_list")) {
  116. upload_button.parent().prev().children().val(imgurl);
  117. upload_button.parent().prev().prev().children().attr("src", imgurl);
  118. }
  119. else
  120. $("#taxonomy_image").val(imgurl);
  121. tb_remove();
  122. }
  123. }
  124. $(".editinline").live("click", function(){
  125.    var tax_id = $(this).parents("tr").attr("id").substr(4);
  126.    var thumb = $("#tag-"+tax_id+" .thumb img").attr("src");
  127. if (thumb != "' . Z_IMAGE_PLACEHOLDER . '") {
  128. $(".inline-edit-col :input[name=\'taxonomy_image\']").val(thumb);
  129. else {
  130. $(".inline-edit-col :input[name=\'taxonomy_image\']").val("");
  131. }
  132. $(".inline-edit-col .title img").attr("src",thumb);
  133.    return false;
  134. });
  135.    });
  136. </script>';
  137. }
  138. // save our taxonomy image while edit or save term
  139. add_action('edit_term','z_save_taxonomy_image');
  140. add_action('create_term','z_save_taxonomy_image');
  141. function z_save_taxonomy_image($term_id) {
  142.     if(isset($_POST['taxonomy_image']))
  143.         update_option('z_taxonomy_image'.$term_id, $_POST['taxonomy_image']);
  144. }
  145. // get attachment ID by image url
  146. function z_get_attachment_id_by_url($image_src) {
  147.     global $wpdb;
  148.     $query = "SELECT ID FROM {$wpdb->posts} WHERE guid = '$image_src'";
  149.     $id = $wpdb->get_var($query);
  150.     return (!empty($id)) ? $id : NULL;
  151. }
  152. // get taxonomy image url for the given term_id (Place holder image by default)
  153. function z_taxonomy_image_url($term_id = NULL, $size = NULL, $return_placeholder = FALSE) {
  154. if (!$term_id) {
  155. if (is_category())
  156. $term_id = get_query_var('cat');
  157. elseif (is_tax()) {
  158. $current_term = get_term_by('slug', get_query_var('term'), get_query_var('taxonomy'));
  159. $term_id = $current_term->term_id;
  160. }
  161. }
  162.     $taxonomy_image_url = get_option('z_taxonomy_image'.$term_id);
  163.     if(!empty($taxonomy_image_url)) {
  164.    $attachment_id = z_get_attachment_id_by_url($taxonomy_image_url);
  165.    if(!empty($attachment_id)) {
  166.    if (empty($size))
  167.    $size = 'full';
  168.    $taxonomy_image_url = wp_get_attachment_image_src($attachment_id, $size);
  169.    $taxonomy_image_url = $taxonomy_image_url[0];
  170.    }
  171. }
  172.     if ($return_placeholder)
  173. return ($taxonomy_image_url != '') ? $taxonomy_image_url : Z_IMAGE_PLACEHOLDER;
  174. else
  175. return $taxonomy_image_url;
  176. }
  177. function z_quick_edit_custom_box($column_name, $screen, $name) {
  178. if ($column_name == 'thumb')
  179. echo '<fieldset>
  180. <div class="thumb inline-edit-col">
  181. <label>
  182. <span class="title"><img src="" alt="Thumbnail"/></span>
  183. <span class="input-text-wrap"><input type="text" name="taxonomy_image" value="" class="tax_list" /></span>
  184. <span class="input-text-wrap">
  185. <button class="z_upload_image_button button">' . __('上传/添加图像', 'zci') . '</button>
  186. <button class="z_remove_image_button button">' . __('删除图像', 'zci') . '</button>
  187. </span>
  188. </label>
  189. </div>
  190. </fieldset>';
  191. }
  192. /**
  193.  * Thumbnail column added to category admin.
  194.  *
  195.  * @access public
  196.  * @param mixed $columns
  197.  * @return void
  198.  */
  199. function z_taxonomy_columns( $columns ) {
  200. $new_columns = array();
  201. $new_columns['cb'] = $columns['cb'];
  202. $new_columns['thumb'] = __('图像', 'zci');
  203. unset( $columns['cb'] );
  204. return array_merge( $new_columns, $columns );
  205. }
  206. /**
  207.  * Thumbnail column value added to category admin.
  208.  *
  209.  * @access public
  210.  * @param mixed $columns
  211.  * @param mixed $column
  212.  * @param mixed $id
  213.  * @return void
  214.  */
  215. function z_taxonomy_column( $columns, $column, $id ) {
  216. if ( $column == 'thumb' )
  217. $columns = '<span><img src="' . z_taxonomy_image_url($id, NULL, TRUE) . '" alt="' . __('Thumbnail', 'zci') . '" class="wp-post-image" /></span>';
  218. return $columns;
  219. }
  220. // change 'insert into post' to 'use this image'
  221. function z_change_insert_button_text($safe_text, $text) {
  222.     return str_replace("Insert into Post""Use this image", $text);
  223. }
  224. // style the image in category list
  225. if ( strpos( $_SERVER['SCRIPT_NAME'], 'edit-tags.php' ) > 0 ) {
  226. add_action( 'admin_head', 'z_add_style' );
  227. add_action('quick_edit_custom_box', 'z_quick_edit_custom_box', 103);
  228. add_filter("attribute_escape""z_change_insert_button_text"102);
  229. }
  230. // New menu submenu for plugin options in Settings menu
  231. add_action('admin_menu', 'z_options_menu');
  232. function z_options_menu() {
  233. add_options_page(__('分类图像设置', 'zci'), __('分类图像', 'zci'), 'manage_options', 'zci-options', 'zci_options');
  234. add_action('admin_init', 'z_register_settings');
  235. }
  236. // Register plugin settings
  237. function z_register_settings() {
  238. register_setting('zci_options', 'zci_options', 'z_options_validate');
  239. add_settings_section('zci_settings', __('', 'zci'), 'z_section_text', 'zci-options');
  240. add_settings_field('z_excluded_taxonomies', __('排除的分类', 'zci'), 'z_excluded_taxonomies', 'zci-options', 'zci_settings');
  241. }
  242. // Settings section description
  243. function z_section_text() {
  244. echo '<p>'.__('', 'zci').'</p>';
  245. }
  246. // Excluded taxonomies checkboxs
  247. function z_excluded_taxonomies() {
  248. $options = get_option('zci_options');
  249. $disabled_taxonomies = array('nav_menu', 'link_category', 'post_format');
  250. foreach (get_taxonomies() as $tax) : if (in_array($tax, $disabled_taxonomies)) continue; ?>
  251. <input type="checkbox" name="zci_options[excluded_taxonomies][<?php echo $tax ?>]" value="<?php echo $tax ?>" <?php checked(isset($options['excluded_taxonomies'][$tax])); ?> /> <?php echo $tax ;?><br />
  252. <?php endforeach;
  253. }
  254. // Validating options
  255. function z_options_validate($input) {
  256. return $input;
  257. }
  258. // Plugin option page
  259. function zci_options() {
  260. if (!current_user_can('manage_options'))
  261. wp_die(__( 'You do not have sufficient permissions to access this page.', 'zci'));
  262. $options = get_option('zci_options');
  263. ?>
  264. <div class="wrap">
  265. <?php screen_icon(); ?>
  266. <h2><?php _e('分类图像设置', 'zci'); ?></h2>
  267. <form method="post" action="options.php">
  268. <?php settings_fields('zci_options'); ?>
  269. <?php do_settings_sections('zci-options'); ?>
  270. <?php submit_button(); ?>
  271. </form>
  272. </div>
  273. <?php
  274. }

当然,你也可以把上面的代码放到一个单独的文件中,再把这个文件引入到wordpress主题的functions.php文件中。这样,我们就为wordpress主题的分类目录添加好了上传缩略图功能,如下图:

缩略图调用方法:

  1. 分类页代码调用:
  2. <img src="<?php if (function_exists('z_taxonomy_image_url')) echo z_taxonomy_image_url(); ?>">
  3. 在首页或其它页代码调用:
  4. <?php echo z_taxonomy_image_url( $category->term_id); ?>

上面我们介绍了2种方法为wordpress主题分类目录添加缩略图,当然,wordpress插件这么发达,这方面的插件也是很多的,如:http://wordpress.org/plugins/categories-images/这个就是一款很不错的wordpress分类缩略图插件。如果你是代码控,那还是使用我们上面提供的代码吧。

上一篇:

下一篇:

wordpress主题分类目录添加缩略图功能:等您坐沙发呢!
大牛,别默默的看了,快来点评一下吧!:)。

您必须登录后才能发表评论哦!:)

站内登录 QQ登录 微博登录
wordpress自适应高级图片shejigh主题

Hi, 如果你对这款模板有疑问,可以跟我联系哦!

联系作者

模板下载吧,累计帮助1000+用户成功建站,为草根创业提供助力!

立刻开启你的建站之旅
现在加入模板下载吧,注册一个账号
  • 模板下载吧拥有海量网站模板及源码,站长亲测干净无后门。

  • 注册即能下载免费模板栏目资源,帮您更快的完成网站建设。

  • 每日更新模板资源,每日精品推荐,及时获取最新模板资源流行去向。

  • 完美的售后服务,帮助草根站长、企业等成功建站。

  • 将您最爱的资源收藏,建立自己的资源库,并与朋友分享。

喜欢我嘛?喜欢就按“ctrl+D”收藏我吧!♡