• wordpress CMS主题:ssmay主题wordpress CMS主题:ssmay主题
  • 首页 > wordpress CMS主题制作 > 怎样给wordpress主题分类目录添加缩略图功能?

    怎样给wordpress主题分类目录添加缩略图功能?

    作者: 分类:wordpress CMS主题制作 点击: 876 次
    wordpress CMS主题:ssmay主题

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

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

      //添加缩略图
      function salong_add_category_field(){
      echo '<div class="form-field">
      <label for="thumb">'.__('缩略图','salong').'</label>
      <input name="thumb" id="thumb" type="text" value="" size="40">
      <p>'.__('输入分类的缩略图链接。','salong').'</p>
      </div>';
      }
      add_action('category_add_form_fields','salong_add_category_field',10,2);
      //分类编辑字段
      function salong_edit_category_field($tag){
      echo '<tr class="form-field">
      <th scope="row"><label for="thumb">'.__('灰色地图','salong').'</label></th>
      <td>
      <input name="thumb" id="thumb" type="text" value="';
      echo get_option('thumb-'.$tag->term_id).'" size="40"/><br>
      <span class="thumb">'.$tag->name.__('分类的缩略图链接。','salong').'</span>
      </td>
      </tr>';
      }
      add_action('category_edit_form_fields','salong_edit_category_field',10,2);
      //保存数据
      function salong_category_thumb($term_id){
      if(isset($_POST['thumb'])){
      //判断权限--可改
      if(!current_user_can('manage_categories')){
      return $term_id;
      }
      $thumb_key = 'thumb-'.$term_id;
      $thumb_value = $_POST['thumb'];
      // 更新选项值
      update_option( $thumb_key, $thumb_value );
      }
      }
      add_action('created_category','salong_category_thumb',10,1);
      add_action('edited_category','salong_category_thumb',10,1);

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

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

      echo get_option('thumb_color-'.$category_id)

      方法二:上传缩略图功能

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

      <?php
      /**
       * Plugin Name: 分类图像
       */
      ?>
      <?php
      if (!defined('Z_PLUGIN_URL'))
      define('Z_PLUGIN_URL', untrailingslashit(plugins_url('', __FILE__)));
      define('Z_IMAGE_PLACEHOLDER', get_bloginfo("template_url")."/images/placeholder.jpg");
      // l10n
      load_plugin_textdomain('zci', FALSE, 'categories-images/languages');
      add_action('admin_init', 'z_init');
      function z_init() {
      $z_taxonomies = get_taxonomies();
      if (is_array($z_taxonomies)) {
      $zci_options = get_option('zci_options');
      if (empty($zci_options['excluded_taxonomies']))
      $zci_options['excluded_taxonomies'] = array();
         foreach ($z_taxonomies as $z_taxonomy) {
      if (in_array($z_taxonomy, $zci_options['excluded_taxonomies']))
      continue;
             add_action($z_taxonomy.'_add_form_fields', 'z_add_texonomy_field');
      add_action($z_taxonomy.'_edit_form_fields', 'z_edit_texonomy_field');
      add_filter( 'manage_edit-' . $z_taxonomy . '_columns', 'z_taxonomy_columns' );
      add_filter( 'manage_' . $z_taxonomy . '_custom_column', 'z_taxonomy_column', 10, 3 );
         }
      }
      }
      function z_add_style() {
      echo '<style type="text/css" media="screen">
      th.column-thumb {width:60px;}
      .form-field img.taxonomy-image {border:1px solid #eee;max-width:300px;max-height:300px;}
      .inline-edit-row fieldset .thumb label span.title {width:48px;height:48px;border:1px solid #eee;display:inline-block;}
      .column-thumb span {width:48px;height:48px;border:1px solid #eee;display:inline-block;}
      .inline-edit-row fieldset .thumb img,.column-thumb img {width:48px;height:48px;}
      </style>';
      }
      // add image field in add form
      function z_add_texonomy_field() {
      if (get_bloginfo('version') >= 3.5)
      wp_enqueue_media();
      else {
      wp_enqueue_style('thickbox');
      wp_enqueue_script('thickbox');
      }
      echo '<div class="form-field">
      <label for="taxonomy_image">' . __('图像', 'zci') . '</label>
      <input type="text" name="taxonomy_image" id="taxonomy_image" value="" />
      <br/>
      <button class="z_upload_image_button button">' . __('上传/添加图像', 'zci') . '</button>
      </div>'.z_script();
      }
      // add image field in edit form
      function z_edit_texonomy_field($taxonomy) {
      if (get_bloginfo('version') >= 3.5)
      wp_enqueue_media();
      else {
      wp_enqueue_style('thickbox');
      wp_enqueue_script('thickbox');
      }
      if (z_taxonomy_image_url( $taxonomy->term_id, NULL, TRUE ) == Z_IMAGE_PLACEHOLDER)
      $image_text = "";
      else
      $image_text = z_taxonomy_image_url( $taxonomy->term_id, NULL, TRUE );
      echo '<tr class="form-field">
      <th scope="row" valign="top"><label for="taxonomy_image">' . __('图像', 'zci') . '</label></th>
      <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 />
      <button class="z_upload_image_button button">' . __('上传/添加图像', 'zci') . '</button>
      <button class="z_remove_image_button button">' . __('删除图像', 'zci') . '</button>
      </td>
      </tr>'.z_script();
      }
      // upload using wordpress upload
      function z_script() {
      return '<script type="text/javascript">
         jQuery(document).ready(function($) {
      var wordpress_ver = "'.get_bloginfo("version").'", upload_button;
      $(".z_upload_image_button").click(function(event) {
      upload_button = $(this);
      var frame;
      if (wordpress_ver >= "3.5") {
      event.preventDefault();
      if (frame) {
      frame.open();
      return;
      }
      frame = wp.media();
      frame.on( "select", function() {
      // Grab the selected attachment.
      var attachment = frame.state().get("selection").first();
      frame.close();
      if (upload_button.parent().prev().children().hasClass("tax_list")) {
      upload_button.parent().prev().children().val(attachment.attributes.url);
      upload_button.parent().prev().prev().children().attr("src", attachment.attributes.url);
      }
      else
      $("#taxonomy_image").val(attachment.attributes.url);
      });
      frame.open();
      }
      else {
      tb_show("", "media-upload.php?type=image&amp;TB_iframe=true");
      return false;
      }
      });
      $(".z_remove_image_button").click(function() {
      $("#taxonomy_image").val("");
      $(this).parent().siblings(".title").children("img").attr("src","' . Z_IMAGE_PLACEHOLDER . '");
      $(".inline-edit-col :input[name=\'taxonomy_image\']").val("");
      return false;
      });
      if (wordpress_ver < "3.5") {
      window.send_to_editor = function(html) {
      imgurl = $("img",html).attr("src");
      if (upload_button.parent().prev().children().hasClass("tax_list")) {
      upload_button.parent().prev().children().val(imgurl);
      upload_button.parent().prev().prev().children().attr("src", imgurl);
      }
      else
      $("#taxonomy_image").val(imgurl);
      tb_remove();
      }
      }
      $(".editinline").live("click", function(){
         var tax_id = $(this).parents("tr").attr("id").substr(4);
         var thumb = $("#tag-"+tax_id+" .thumb img").attr("src");
      if (thumb != "' . Z_IMAGE_PLACEHOLDER . '") {
      $(".inline-edit-col :input[name=\'taxonomy_image\']").val(thumb);
      } else {
      $(".inline-edit-col :input[name=\'taxonomy_image\']").val("");
      }
      $(".inline-edit-col .title img").attr("src",thumb);
         return false;
      });
         });
      </script>';
      }
      // save our taxonomy image while edit or save term
      add_action('edit_term','z_save_taxonomy_image');
      add_action('create_term','z_save_taxonomy_image');
      function z_save_taxonomy_image($term_id) {
          if(isset($_POST['taxonomy_image']))
              update_option('z_taxonomy_image'.$term_id, $_POST['taxonomy_image']);
      }
      // get attachment ID by image url
      function z_get_attachment_id_by_url($image_src) {
          global $wpdb;
          $query = "SELECT ID FROM {$wpdb->posts} WHERE guid = '$image_src'";
          $id = $wpdb->get_var($query);
          return (!empty($id)) ? $id : NULL;
      }
      // get taxonomy image url for the given term_id (Place holder image by default)
      function z_taxonomy_image_url($term_id = NULL, $size = NULL, $return_placeholder = FALSE) {
      if (!$term_id) {
      if (is_category())
      $term_id = get_query_var('cat');
      elseif (is_tax()) {
      $current_term = get_term_by('slug', get_query_var('term'), get_query_var('taxonomy'));
      $term_id = $current_term->term_id;
      }
      }
          $taxonomy_image_url = get_option('z_taxonomy_image'.$term_id);
          if(!empty($taxonomy_image_url)) {
         $attachment_id = z_get_attachment_id_by_url($taxonomy_image_url);
         if(!empty($attachment_id)) {
         if (empty($size))
         $size = 'full';
         $taxonomy_image_url = wp_get_attachment_image_src($attachment_id, $size);
         $taxonomy_image_url = $taxonomy_image_url[0];
         }
      }
          if ($return_placeholder)
      return ($taxonomy_image_url != '') ? $taxonomy_image_url : Z_IMAGE_PLACEHOLDER;
      else
      return $taxonomy_image_url;
      }
      function z_quick_edit_custom_box($column_name, $screen, $name) {
      if ($column_name == 'thumb')
      echo '<fieldset>
      <div class="thumb inline-edit-col">
      <label>
      <span class="title"><img src="" alt="Thumbnail"/></span>
      <span class="input-text-wrap"><input type="text" name="taxonomy_image" value="" class="tax_list" /></span>
      <span class="input-text-wrap">
      <button class="z_upload_image_button button">' . __('上传/添加图像', 'zci') . '</button>
      <button class="z_remove_image_button button">' . __('删除图像', 'zci') . '</button>
      </span>
      </label>
      </div>
      </fieldset>';
      }
      /**
       * Thumbnail column added to category admin.
       *
       * @access public
       * @param mixed $columns
       * @return void
       */
      function z_taxonomy_columns( $columns ) {
      $new_columns = array();
      $new_columns['cb'] = $columns['cb'];
      $new_columns['thumb'] = __('图像', 'zci');
      unset( $columns['cb'] );
      return array_merge( $new_columns, $columns );
      }
      /**
       * Thumbnail column value added to category admin.
       *
       * @access public
       * @param mixed $columns
       * @param mixed $column
       * @param mixed $id
       * @return void
       */
      function z_taxonomy_column( $columns, $column, $id ) {
      if ( $column == 'thumb' )
      $columns = '<span><img src="' . z_taxonomy_image_url($id, NULL, TRUE) . '" alt="' . __('Thumbnail', 'zci') . '" class="wp-post-image" /></span>';
      return $columns;
      }
      // change 'insert into post' to 'use this image'
      function z_change_insert_button_text($safe_text, $text) {
          return str_replace("Insert into Post", "Use this image", $text);
      }
      // style the image in category list
      if ( strpos( $_SERVER['SCRIPT_NAME'], 'edit-tags.php' ) > 0 ) {
      add_action( 'admin_head', 'z_add_style' );
      add_action('quick_edit_custom_box', 'z_quick_edit_custom_box', 10, 3);
      add_filter("attribute_escape", "z_change_insert_button_text", 10, 2);
      }
      // New menu submenu for plugin options in Settings menu
      add_action('admin_menu', 'z_options_menu');
      function z_options_menu() {
      add_options_page(__('分类图像设置', 'zci'), __('分类图像', 'zci'), 'manage_options', 'zci-options', 'zci_options');
      add_action('admin_init', 'z_register_settings');
      }
      // Register plugin settings
      function z_register_settings() {
      register_setting('zci_options', 'zci_options', 'z_options_validate');
      add_settings_section('zci_settings', __('', 'zci'), 'z_section_text', 'zci-options');
      add_settings_field('z_excluded_taxonomies', __('排除的分类', 'zci'), 'z_excluded_taxonomies', 'zci-options', 'zci_settings');
      }
      // Settings section description
      function z_section_text() {
      echo '<p>'.__('', 'zci').'</p>';
      }
      // Excluded taxonomies checkboxs
      function z_excluded_taxonomies() {
      $options = get_option('zci_options');
      $disabled_taxonomies = array('nav_menu', 'link_category', 'post_format');
      foreach (get_taxonomies() as $tax) : if (in_array($tax, $disabled_taxonomies)) continue; ?>
      <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 />
      <?php endforeach;
      }
      // Validating options
      function z_options_validate($input) {
      return $input;
      }
      // Plugin option page
      function zci_options() {
      if (!current_user_can('manage_options'))
      wp_die(__( 'You do not have sufficient permissions to access this page.', 'zci'));
      $options = get_option('zci_options');
      ?>
      <div class="wrap">
      <?php screen_icon(); ?>
      <h2><?php _e('分类图像设置', 'zci'); ?></h2>
      <form method="post" action="options.php">
      <?php settings_fields('zci_options'); ?>
      <?php do_settings_sections('zci-options'); ?>
      <?php submit_button(); ?>
      </form>
      </div>
      <?php
      }

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

      怎样给wordpress主题分类目录添加缩略图功能?

      缩略图调用方法:

      分类页代码调用:
      <img src="<?php if (function_exists('z_taxonomy_image_url')) echo z_taxonomy_image_url(); ?>">

      在首页或其它页代码调用:
      <?php echo z_taxonomy_image_url( $category->term_id); ?>

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



      QQ二维码

    文章作者:高时银博客
    本文地址:http://wanlimm.com/77201902287140.html
    版权所有 © 转载时必须以链接形式注明作者和原始出处!

    上一篇:
    下一篇:
    wordpress CMS主题:ssmay主题

    或许你会感兴趣的文章:

    一条回应:“怎样给wordpress主题分类目录添加缩略图功能?”

    1. michaelzheng说道:

      wordpress 主题制作开发视频教程

    发表评论

    电子邮件地址不会被公开。 必填项已用*标注

    This site uses Akismet to reduce spam. Learn how your comment data is processed.