如何制作WordPress的分类图片？(非插件给wordpress分类目录和页面添加bannle图的方法)
如何制作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>
<?php }?>
非插件给wordpress分类目录和页面添加bannle图的方法
前面教程中我们介绍了通过插件：Categories Images
来实现wordpress分类调用图片的方法，今天给大家介绍非插件实现bannle图的方法。
第一步需要在主题函数function.php里面添加以下代码
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 |
第一步：在主题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文件里面，直接调用会好些。
第二步：在页面中进行调用就可以了
|
1 |
<imgsrc=”<?phpif(function_exists(‘z_taxonomy_image_url’))echoz_taxonomy_image_url();?>”> |
在其它页面调用代码：这里需要我添加一个分类目录ID号
|
1 |
<imgsrc=”<?phpif(function_exists(‘z_taxonomy_image_url’))echoz_taxonomy_image_url(栏目ID号);?>”> |
通过这个方法，可以很方便调用wordpress分类的图片，不需要用到插件。
由于网站搬家，部分链接失效，如无法下载，请联系站长！谢谢支持！
1. 带 [亲测] 说明源码已经被站长亲测过!
2. 下载后的源码请在24小时内删除,仅供学习用途！
3. 分享目的仅供大家学习和交流，请不要用于商业用途！
4. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
5. 本站所有资源来源于站长上传和网络，如有侵权请邮件联系站长！
6. 没带 [亲测] 代表站长时间紧促,站长会保持每天更新 [亲测] 源码 !
7. 盗版ripro用户购买ripro美化无担保,若设置不成功/不生效我们不支持退款!
8. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
9. 如果你也有好源码或者教程，可以到审核区发布，分享有金币奖励和额外收入!
10.如果您购买了某个产品，而我们还没来得及更新，请联系站长或留言催更，谢谢理解 !
GG资源网 » 如何制作WordPress的分类图片？(非插件给wordpress分类目录和页面添加bannle图的方法)
1. 带 [亲测] 说明源码已经被站长亲测过!
2. 下载后的源码请在24小时内删除,仅供学习用途！
3. 分享目的仅供大家学习和交流，请不要用于商业用途！
4. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
5. 本站所有资源来源于站长上传和网络，如有侵权请邮件联系站长！
6. 没带 [亲测] 代表站长时间紧促,站长会保持每天更新 [亲测] 源码 !
7. 盗版ripro用户购买ripro美化无担保,若设置不成功/不生效我们不支持退款!
8. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
9. 如果你也有好源码或者教程，可以到审核区发布，分享有金币奖励和额外收入!
10.如果您购买了某个产品，而我们还没来得及更新，请联系站长或留言催更，谢谢理解 !
GG资源网 » 如何制作WordPress的分类图片？(非插件给wordpress分类目录和页面添加bannle图的方法)
