如何制作WordPress的分类图片？

我制作WordPress分类图片的原因是做分类页面的banner图，如果分类很多，那么希望分类与图片做一个一一对应的关系，这样就不用再用php做判断或者css去单独写样式。

首先获取到当前分类：get_the_category()。

foreach( get_the_category() as $cat) {

var_dump($cat);

}

var_dump($cat)可以将当前分类的数据输出，这里我们只取分类的ID即可：$cat_ID = $cat->cat_ID，用来拼接banner图片的名称：banner-ID.webp。

示例代码：

<?php

foreach( get_the_category() as $cat) {

$cat_ID = $cat->cat_ID;

?>

<div class="banner-<?php echo $cat_ID;?> position-relative">

<div class="text-end">

<img src="<?php echo get_template_directory_uri();?>/dist/images/banner-<?php echo $cat_ID;?>.webp" alt="<?php single_cat_title();?>">

</div>

</div>

非插件给wordpress分类目录和页面添加bannle图的方法

前面教程中我们介绍了通过插件：Categories Images

来实现wordpress分类调用图片的方法，今天给大家介绍非插件实现bannle图的方法。

第一步需要在主题函数function.php里面添加以下代码

第一步：在主题functions.php文件中添加如下代码：
/**
*PluginName:分类图像
*/
define(‘Z_IMAGE_PLACEHOLDER’,T_PATH.”/img/random/5.jpg”);//默认缩略图
add_action(‘admin_init’,‘z_init’);
functionz_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_taxonomiesas$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);
}
}
}
//addimagefieldinaddform
functionz_add_texonomy_field(){
if(get_bloginfo(‘version’)>=3.5)
wp_enqueue_media();
else{
wp_enqueue_style(‘thickbox’);
wp_enqueue_script(‘thickbox’);
}
}
//在编辑表单中添加图像字段
functionz_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‘<trclass=”form-field”>
<thscope=”row”valign=”top”><labelfor=”taxonomy_image”>图像</label></th>
<td><inputtype=”text”name=”taxonomy_image”id=”taxonomy_image”value=”‘.$image_text.'”/>
<buttonclass=”z_upload_image_buttonbutton”>上传/添加图像</button>
<buttonclass=”z_remove_image_buttonbutton”>删除图像</button>
<imgclass=”taxonomy-image”src=”‘.$image_text.‘”width=”150″height=”auto”/>
</td>
</tr>’.z_script();
}
//图片上传函数
functionz_script(){
return‘<scripttype=”text/javascript”>
jQuery(document).ready(function($){
varwordpress_ver=“‘.get_bloginfo(“version”).'”,upload_button;
$(“.z_upload_image_button”).click(function(event){
upload_button=$(this);
varframe;
if(wordpress_ver>=“3.5”){
event.preventDefault();
if(frame){
frame.open();
return;
}
frame=wp.media();
frame.on(“select”,function(){
//Grabtheselectedattachment.
varattachment=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”);
returnfalse;
}
});
$(“.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(“”);
returnfalse;
});
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(){
vartax_id=$(this).parents(“tr”).attr(“id”).substr(4);
varthumb=$(“#tag-“+tax_id+”.thumbimg”).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.titleimg”).attr(“src”,thumb);
returnfalse;
});
});
</script>’;
}
//保存分类图像，同时编辑或保存期限
add_action(‘edit_term’,’z_save_taxonomy_image’);
add_action(‘create_term’,’z_save_taxonomy_image’);
functionz_save_taxonomy_image($term_id){
if(isset($_POST[‘taxonomy_image’]))
update_option(‘z_taxonomy_image’.$term_id,$_POST[‘taxonomy_image’]);
}
//通过图片网址获取附件
functionz_get_attachment_id_by_url($image_src){
global$wpdb;
$query=“SELECTIDFROM{$wpdb->posts}WHEREguid=‘$image_src'”;
$id=$wpdb->get_var($query);
return(!empty($id))?$id:NULL;
}
//对于给定的term_id得到分类图像的URL（默认占位符图像）
functionz_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;
}
functionz_quick_edit_custom_box($column_name,$screen,$name){
if($column_name==‘thumb’)
echo‘<fieldset>
<divclass=”thumbinline-edit-col”>
<label>
<spanclass=”title”><imgsrc=””alt=”Thumbnail”/></span>
<spanclass=”input-text-wrap”><inputtype=”text”name=”taxonomy_image”value=””class=”tax_list”/></span>
<spanclass=”input-text-wrap”>
<buttonclass=”z_upload_image_buttonbutton”>上传/添加图像</button>
<buttonclass=”z_remove_image_buttonbutton”>删除图像</button>
</span>
</label>
</div>
</fieldset>’;
}
//缩略图列添加到类别管理
functionz_taxonomy_columns($columns){
$new_columns=array();
$new_columns[‘cb’]=$columns[‘cb’];
$new_columns[‘thumb’]=‘图像’;
unset($columns[‘cb’]);
returnarray_merge($new_columns,$columns);
}
//缩略图列值添加到类别管理。
functionz_taxonomy_column($columns,$column,$id){
if($column==‘thumb’)
$columns=‘<span><imgsrc=”‘.z_taxonomy_image_url($id,NULL,TRUE).‘”alt=”Thumbnail”class=”wp-post-image”/></span>’;
return$columns;
}
//“更改”插入“使用该图像”
functionz_change_insert_button_text($safe_text,$text){
returnstr_replace(“InsertintoPost”,“Usethisimage”,$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);
}
//注册插件设置
functionz_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’);
}
functionz_add_style(){
echo‘<styletype=”text/css”media=”screen”>
th.column-thumb{width:60px;}
.form-field#taxonomy_image{border:1pxsolid#eee;width:200px;margin-left:30px;}
.inline-edit-rowfieldset.thumblabelspan.title{width:48px;height:48px;border:1pxsolid#eee;display:inline-block;}
.column-thumbspan{width:48px;height:48px;border:1pxsolid#eee;display:inline-block;}
.inline-edit-rowfieldset.thumbimg,.column-thumbimg{width:48px;height:48px;}
label{font-weight:800;font-size:16px;}
.taxonomy-image{border:1pxsolid#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文件里面，直接调用会好些。

第二步：在页面中进行调用就可以了

<imgsrc=”<?phpif(function_exists(‘z_taxonomy_image_url’))echoz_taxonomy_image_url();?>”>

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

<imgsrc=”<?phpif(function_exists(‘z_taxonomy_image_url’))echoz_taxonomy_image_url(栏目ID号);?>”>

通过这个方法，可以很方便调用wordpress分类的图片，不需要用到插件。