• wordpress CMS主题:ssmay主题wordpress CMS主题:ssmay主题
  • 首页 > wordpress CMS主题制作 > wordpress主题如何给分类目录添加缩略图

    wordpress主题如何给分类目录添加缩略图

    作者: 分类:wordpress CMS主题制作 点击: 5,084 次
    wordpress CMS主题:ssmay主题

      缩略图片在wordpress主题中使用过是非常广泛的,尤其是wordpress CMS门户类主题中,因为它们在页面中会使用非常多的图片来增加页面的美观度。在前面的章节中我们介绍了wordpress主题如何在不同的页面设置和调用文章不同的缩略图,这里,我们再来介绍一下wordpress主题如何给分类目录添加缩略图功能(如下图)。wordpress程序分类目录自身是不带有缩略图功能模块的,可能是因为大多情况下,我们也用不着分类目录的缩略图。但是,在一些特殊要求的网站,如:企业站。我就曾经给一个客户做过这样的一个站,客户要求不同的分类目录要显示不同的banner图片。下面一起来看看如何给wordpress分类目录添加缩略图功能吧。

      wordpress主题如何给分类目录添加缩略图

      方法1、Categories Images插件。

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

      方法2、代码实现。

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

      第一步:在主题functions.php文件中添加如下代码:

      /**
      * Plugin Name: 分类图像
      */
      define('Z_IMAGE_PLACEHOLDER', T_PATH."/img/random/5.jpg"); //默认缩略图

      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 );
      }
      }
      }

      // 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');
      }

      }

      // 在编辑表单中添加图像字段
      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">图像</label></th>
      <td><input type="text" name="taxonomy_image" id="taxonomy_image" value="'.$image_text.'" />
      <button class="z_upload_image_button button">上传/添加图像</button>
      <button class="z_remove_image_button button">删除图像</button>
      <img class="taxonomy-image" src="' . $image_text . '" width="150" height="auto"/>
      </td>
      </tr>'.z_script();
      }
      // 图片上传函数
      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>';
      }

      // 保存分类图像,同时编辑或保存期限
      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']);
      }

      // 通过图片网址获取附件
      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;
      }

      // 对于给定的term_id得到分类图像的URL(默认占位符图像)
      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">上传/添加图像</button>
      <button class="z_remove_image_button button">删除图像</button>
      </span>
      </label>
      </div>
      </fieldset>';
      }

      // 缩略图列添加到类别管理
      function z_taxonomy_columns( $columns ) {
      $new_columns = array();
      $new_columns['cb'] = $columns['cb'];
      $new_columns['thumb'] = '图像';
      unset( $columns['cb'] );
      return array_merge( $new_columns, $columns );
      }

      // 缩略图列值添加到类别管理。
      function z_taxonomy_column( $columns, $column, $id ) {
      if ( $column == 'thumb' )
      $columns = '<span><img src="' . z_taxonomy_image_url($id, NULL, TRUE) . '" alt="Thumbnail" class="wp-post-image"/></span>';
      return $columns;
      }

      // “更改”插入“使用该图像”
      function z_change_insert_button_text($safe_text, $text) {
      return str_replace("Insert into Post", "Use this image", $text);
      }

      // 在类别列表中的图像
      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);
      }

      // 注册插件设置
      function z_register_settings() {
      register_setting('zci_options', 'zci_options', 'z_options_validate');
      add_settings_section('zci_settings', '', 'z_section_text', 'zci-options');
      add_settings_field('z_excluded_taxonomies', '排除的分类','z_excluded_taxonomies', 'zci-options', 'zci_settings');
      }
      function z_add_style() {
      echo '<style type="text/css" media="screen">
      th.column-thumb {width:60px;}
      .form-field #taxonomy_image {border:1px solid #eee;width:200px; margin-left:30px;}
      .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;}
      label{ font-weight:800; font-size:16px;}
      .taxonomy-image {border:1px solid #eee;width:auto !important;height:60px; margin-bottom:-40px; }
      #taxonomy_image{ margin-left:180px; }
      #taxonomy_image,.z_upload_image_button,.z_remove_image_button{vertical-align:bottom !important;}
      </style>';
      }

      如果觉得代码比较多,也可以把它放到一个单独的php文件中,然后,再在functions.php文件中引用它。

      第二步:在前台页面模板中调用这个分类缩略图。

      在当前分类目录页面调用代码:

      <img src="<?php if (function_exists('z_taxonomy_image_url')) echo z_taxonomy_image_url(); ?>">
      或者
      <?php if (function_exists('z_taxonomy_image_url')&&(z_taxonomy_image_url()!="")){ ?>
      <img src="<?php echo z_taxonomy_image_url(); ?>">
      <?php } ?>

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

      <img src="<?php if (function_exists('z_taxonomy_image_url')) echo z_taxonomy_image_url(栏目ID号); ?>">
      或者
      <?php
      if(function_exists('z_taxonomy_image_url')&&(z_taxonomy_image_url(栏目ID号)!='')){
      $img_url = z_taxonomy_image_url(栏目ID号);
      }else{
      $img_url = T_PATH.'/img/banner/catt.jpg'; //默认图片
      }
      ?>
      <img src="<?php echo $img_url; ?>" alt=""/>

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



      QQ二维码

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

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

    或许你会感兴趣的文章:

    发表评论

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

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