WordPress 为分类添加图片的插件:Categories Images

转载 2015年07月10日 18:52:45

Categories Images is a WordPress plugin which allow you to add an image for each category (or term), it is so easy to user. This plugin will create a new text input that will had the image url of the category, in both forms when adding a new category or edit an existing one, you can put a url for the image or upload it bu click on the text input.

Installation:

  1. Open your wordpress admin panel, then plugins menu > Add New and search for ‘Categories Images’.
  2. Click to install.
  3. Once installed, activate and it is functional.

Or you can install in manual:

  1. Download the plugin from WordPress Plugins.
  2. Extract it, then upload the extracted folder ‘categories-images’ to ‘/wp-content/plugins/’.
  3. Go to your wordpress plugins menu, then activate it.

You are done! And the plugin is ready to use.
Usage and documentation:
after installing and activating the plugin, just use the following code:
Default usage:
use the following code in category or taxonomy template,put it in any <img /> tag :
1
<?php if (function_exists('z_taxonomy_image_url')) echo z_taxonomy_image_url(); ?>

or simply:

1
<?php if (function_exists('z_taxonomy_image')) z_taxonomy_image(); ?>
Difference between the two methods are as following:
  • z_taxonomy_image_url() return the taxonomy image url as a string so you can put it in any <img /> tag with support of the following parameters:
    • $term_id, the category or taxonomy ID, default NULL
    • $size, default ‘full’
    • $return_placeholder, default FALSE
  • z_taxonomy_image() return category or taxonomy image as html with support of the following parameters:
    • $term_id, the category or taxonomy ID, default NULL
    • $size, image size (check here for more about WordPress image resizing), default ‘full’
    • $attr, array of some html img tag attributes like: (default NULL) please check parameter $attrhere
      • alt, default is the image file name
      • class, default is ‘attachment-$size’
      • height, default none
      • width, default none
      • title, default none
    • $echo, to enable or disable printing out the html, default TRUE.
Using inside a loop:
use the following code in anywhere at your wordpress theme, here is an example:
If  looping for categories:
1
2
3
4
5
6
7
8
<ul>
 <?php foreach (get_categories() as $cat) : ?>
 <li>
 <img src="<?php echo z_taxonomy_image_url($cat->term_id); ?>" />
 <a href="<?php echo get_category_link($cat->term_id); ?>"><?php echo $cat->cat_name; ?></a>
 </li>
 <?php endforeach; ?>
</ul>

or

1
2
3
4
5
6
7
8
<ul>
 <?php foreach (get_categories() as $cat) : ?>
 <li>
 <?php z_taxonomy_image($cat->term_id); ?>
 <a href="<?php echo get_category_link($cat->term_id); ?>"><?php echo $cat->cat_name; ?></a>
 </li>
 <?php endforeach; ?>
</ul>

If looping for taxonomies:

1
2
3
4
5
6
7
8
<ul>
 <?php foreach (get_terms('your_taxonomy') as $cat) : ?>
 <li>
 <img src="<?php echo z_taxonomy_image_url($cat->term_id); ?>" />
 <a href="<?php echo get_term_link($cat->slug, 'your_taxonomy'); ?>"><?php echo $cat->name; ?></a>
 </li>
 <?php endforeach; ?>
</ul>

or

1
2
3
4
5
6
7
8
<ul>
 <?php foreach (get_terms('your_taxonomy') as $cat) : ?>
 <li>
 <?php z_taxonomy_image($cat->term_id); ?>
 <a href="<?php echo get_term_link($cat->slug, 'your_taxonomy'); ?>"><?php echo $cat->name; ?></a>
 </li>
 <?php endforeach; ?>
</ul>

If your post had more than one category and you want to loop for all post categories use the following example:

1
2
3
4
5
6
7
8
<ul>
 <?php foreach (get_the_category() as $cat) : ?>
 <li>
 <img src="<?php echo z_taxonomy_image_url($cat->term_id); ?>" />
 <a href="<?php echo get_category_link($cat->term_id); ?>"><?php echo $cat->cat_name; ?></a>
 </li>
 <?php endforeach; ?>
</ul>

or

1
2
3
4
5
6
7
8
<ul>
 <?php foreach (get_the_category() as $cat) : ?>
 <li>
 <?php z_taxonomy_image($cat->term_id); ?>
 <a href="<?php echo get_category_link($cat->term_id); ?>"><?php echo $cat->cat_name; ?></a>
 </li>
 <?php endforeach; ?>
</ul>

And if your post had more than one taxonomy and you want to loop for all post taxonomies use the following example:

1
2
3
4
5
6
7
8
<ul>
 <?php foreach (get_the_terms(get_the_ID(), 'your_taxonomy') as $cat) : ?>
 <li>
 <img src="<?php echo z_taxonomy_image_url($cat->term_id); ?>" />
 <a href="<?php echo get_term_link($cat->term_id, 'your_taxonomy'); ?>"><?php echo $cat->name; ?></a>
 </li>
 <?php endforeach; ?>
</ul>

or

1
2
3
4
5
6
7
8
<ul>
 <?php foreach (get_the_terms(get_the_ID(), 'your_taxonomy') as $cat) : ?>
 <li>
 <?php z_taxonomy_image($cat->term_id); ?>
 <a href="<?php echo get_term_link($cat->term_id, 'your_taxonomy'); ?>"><?php echo $cat->name; ?></a>
 </li>
 <?php endforeach; ?>
</ul>

Using resizing feature:

To resize category image simply add the size as a second parameter, for example:
if in category or taxonomy template:

1
<img src="<?php echo z_taxonomy_image_url(NULL, 'thumbnail'); ?>" />

or

1
<?php z_taxonomy_image(NULL, 'thumbnail'); ?>

or if inside a loop:

1
2
3
4
5
6
7
8
<ul>
 <?php foreach (get_the_terms(get_the_ID(), 'your_taxonomy') as $cat) : ?>
 <li>
 <img src="<?php echo z_taxonomy_image_url($cat->term_id, 'medium'); ?>" />
 <a href="<?php echo get_term_link($cat->term_id, 'your_taxonomy'); ?>"><?php echo $cat->name; ?></a>
 </li>
 <?php endforeach; ?>
</ul>

you can choose to resize from these (thumbnail, medium, large, full) or any custom sizes, also you can use it as array with dimensions for example:

1
<img src="<?php echo z_taxonomy_image_url(NULL, array(300, 250)); ?>" />

or

1
<?php z_taxonomy_image(NULL, array(300, 250)); ?>

Please check WordPress codex here for more information about resizing.

To display image with support for alt, class, width and height, you can do as this example:

1
2
3
4
5
6
7
8
9
<?php
$attr = array(
'class' => 'category_image',
'alt' => 'image alt',
'height' => 200,
'width' => 300,
'title' => 'category title',
);
z_taxonomy_image(NULL, 'full', $attr); ?>

if there were any bugs or you faced any problems please reply to this post, if I had more time I will update this plugin and add more features.

update 26-07-2012: I had noticed that there is some people talking about my plugin, here is a link to the post :)

http://wpshock.com/wordpress-category-images-taxonomy-images-plugin/

another one here also:

http://www.williamsgraphics.co.uk/featured-images-categories-wordpress/

Update 06-10-2012: Finally I got some time to test the plugin in WordPress MU and now I confirm that the plugin works so fine whether you choose to activate the plugin by blog or using network activation from your network control panel

Update 25-01-2013: A great update had been made to this plugin, and hope you liked it, Thank so much to Joe Tse http://tkjune.com

Update 14-06-2013: I had updated the plugin with some new features like using WordPress new media uploader and new sub menu (Categories Images) in Settings menu allowing you to exclude any taxonomies from the plugin, this for fixing and avoiding any conflicts with another plugins like WooCommerce plugin, hope you all like the last update.

Update 20-12-2013: I had updated the plugin with new features like resizing images please check the docs above for more help about using this new feature, and also adding support for Spanish language. Thanks so much to Maria Ramos and to Rahil Wazir for their help.

Update 2.5 28-03-2015: A nice update which introduce a new function to display category or taxonomy image directly with support for size and alt and more attributes, please check the documentation above. Also adding support for Ukrainian language, thanks so much to Michael Yunat.

WordPress下拉式框显示所分类目录标签函数-wp_dropdown_categories()

WordPress的wp_dropdown_categories()函数可以让我们以下拉式框的方式显示所分类目录标签,如下图所示:   下面来看看这个标签函数的用法。 说明 ...
  • qikexun
  • qikexun
  • 2013年06月20日 16:02
  • 1083

wordpress分类列表函数:wp_list_categories 参数详解

做主题的过程中遇到了 categories 的一些参数设置问题,在中文 WordPress 范围内搜索无果后,最终在 WordPress 官网中找到了相应的内容,这里我就简要的把重点记录在此,算是对 ...
  • fdemon
  • fdemon
  • 2011年06月17日 14:57
  • 1953

Responsive-Images响应式图片插件的工作原理

一、什么是响应式图片   随着不同分辨率的移动设备出现,网页需要在不同分辨率的设备下给用户提供更加舒适的体验,随之就出现了响应式布局的概念。   响应式布局是Ethan Marcotte提出来的,说白...

WordPress分类目录排序插件 Category Order

WordPress默认的分类目录排序往往不能符合我们的要求,为了增强用户体验还需要对分类目录进行重新排序,下面小编就给大家介绍一款WordPress分类目录排序插件—Category Order,...

wordpress远程图片本地化插件

  • 2012年11月07日 10:18
  • 5.56MB
  • 下载

WordPress 论坛图片签名插件

  • 2010年10月17日 19:56
  • 5.25MB
  • 下载

一个让WordPress媒体库支持外链图片的插件

最近有一个月左右没更新了,因为这个月的业余时间都在忙于一个WordPress插件:External Media without Import。 其实只是很小很简单的一个插件,代码不过短短几百行。不...

WordPress专用直接粘贴图片到文章编辑器插件Imagepaste

不知道大家平时在编辑文章的时候,是怎么插入图片的?我平时都是制作好图片,然后上传到七牛或服务器指定文件夹,然后再通过URL插入图片,看到这个过程大家是否觉得很繁琐啊?为了解决这个问题,今天就给大家推荐...

21款Wordpress图片相册插件

原文:http://www.cnblogs.com/lhb25/archive/2010/07/22/1782796.html 用插件把你的图片相册打扮的更加漂亮, 更加容易自己管理, 也更...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:WordPress 为分类添加图片的插件:Categories Images
举报原因:
原因补充:

(最多只允许输入30个字)