为WordPress分类目录添加个性化图像功能扩展(二)

在做wordpress主题开发的时候,突然被客户要求做一个页面,来展示所有的分类,且分类还是要图片形式的来展示,话说做音乐类站,分类确实需要做个类似封面的分类图像才行,可是特么的wordpress分类目录设置里值有标题、别名和描述,在描述里又不能加图片代码。。。总么办?其实我在《WordPress分类目录添加个性化图像功能扩展(一)》 里面有讲到。。。而这篇文章就涵盖了,上面说了做一个页面,来展示所有的分类,且分类还是要图片形式的来展示 好吧,我给个图你就能够理解了!

为WordPress分类目录添加个性化图像功能扩展(二)

下面就直接上教程吧,首先,打开你wordpress主题文件夹下的functions.php文件夹,然后将下面的代码放入:

  1. <?php
  2. global $texonomy_slug;
  3. $texonomy_slug='category'; // texonomy slug
  4. add_action($texonomy_slug.'_add_form_fields','categoryimage');
  5. function categoryimage($taxonomy){ ?>
  6.     <div>
  7.     <label for="tag-image">分类图像</label>
  8.     <input type="text" name="tag-image" id="tag-image" value="" /><br /><span>请在此输入图像URL地址。</span>
  9. </div>
  10. <?php script_css(); }
  11. add_action($texonomy_slug.'_edit_form_fields','categoryimageedit');
  12. function categoryimageedit($taxonomy){ ?>
  13. <tr>
  14.     <th scope="row" valign="top"><label for="tag-image">图像</label></th>
  15.     <td><input type="text" name="tag-image" id="tag-image" value="<?php echo get_option('_category_image'.$taxonomy->term_id); ?>" /><br /><span>请在此输入图像URL地址。</span></td>
  16. </tr>
  17. <?php script_css(); }
  18. function script_css(){ ?>
  19. <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/category-image_thickbox.js"></script>
  20. <link rel='stylesheet' id='thickbox-css'  href='<?php echo includes_url(); ?>js/thickbox/thickbox.css' type='text/css' media='all' />
  21. <script type="text/javascript">
  22.     jQuery(document).ready(function() {
  23.     var fileInput = '';
  24.     jQuery('#tag-image').live('click',
  25.     function() {
  26.         fileInput = jQuery('#tag-image');
  27.         tb_show('', 'media-upload.php?type=image&amp;TB_iframe=true');
  28.         return false;
  29.     });
  30.         window.original_send_to_editor = window.send_to_editor;
  31.     window.send_to_editor = function(html) {
  32.         if (fileInput) {
  33.             fileurl = jQuery('img', html).attr('src');
  34.             if (!fileurl) {
  35.                 fileurl = jQuery(html).attr('src');
  36.             }
  37.             jQuery(fileInput).val(fileurl);
  38.             tb_remove();
  39.         } else {
  40.             window.original_send_to_editor(html);
  41.         }
  42.     };
  43.     });
  44. </script>
  45. <?php }
  46. //edit_$taxonomy
  47. add_action('edit_term','categoryimagesave');
  48. add_action('create_term','categoryimagesave');
  49. function categoryimagesave($term_id){
  50.     if(isset($_POST['tag-image'])){
  51.         if(isset($_POST['tag-image']))
  52.             update_option('_category_image'.$term_id,$_POST['tag-image'] );
  53.     }
  54. }
  55. function print_image_function(){
  56.     $texonomy_slug='category';
  57.     $_terms = wp_get_post_terms(get_the_ID(),$texonomy_slug);
  58.     $_termsidlist=array();
  59.     $result = '';
  60.     foreach($_terms as $val){
  61.         $result .= '<div style="float:left; margin-right:2px;"><a href="'.get_term_link($val).'"><img height="22px" title="'.$val->name.'" alt="'.$val->name.'" src="'.get_option('_category_image'.$val->term_id).'" /></a></div>';
  62.     }
  63.     return $result;
  64. }
  65. add_shortcode('print-image','print_image_function');
  66. ?>

新手需要注意的是,将以上代码加入到functions.php文件的时候,看是否需要去掉头尾的

  1. <?php
  2. ?>

很多新手都是因为未去掉头部,造成了网站打不开的情况,至于老手,求别打我,我是大叔我罗嗦!
代码加入后,就会出现下图的效果
为WordPress分类目录添加个性化图像功能扩展(二)

最后,运用到wordpress主题里,将下面的循环加入你想要现实的位置

  1. <?php
  2. $categories=get_categories($args);
  3. foreach($categories as $category) {
  4.     if ( get_option('_category_image'.$category->term_id) ){
  5.             echo '<div><a href="'.get_term_link($category).'"><img title="'.$category->name.'" alt="'.$category->name.'" src="'.get_option('_category_image'.$category->term_id).'" /></a></div>';
  6.     }
  7.     echo '<div style=" text-align:center;"><a href="' . get_category_link( $category->term_id ) . '" title="' . sprintf( __( "View all posts in %s" ), $category->name ) . '" ' . '><b>' . $category->name.'</b></a></div>';
  8. }?>

最终的大体效果就如文章第一张图所示!

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有M币奖励和额外收入!

模板下载吧 快速入门 为WordPress分类目录添加个性化图像功能扩展(二) https://www.mbxzb.com/blog/file/rumen/3141.html

从明天起,做一个幸福的人,喂马、劈柴、周游世界…

常见问题
  • 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。
查看详情
  • 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用
查看详情

相关文章

评论
暂无评论
点击按钮快速添加回复内容: 支持 高兴 激动 给力 加油 苦寻 生气 回帖 路过 威武 友军 顶贴
官方客服团队

为您解决烦忧 - 24小时在线 专业服务

为WordPress分类目录添加个性化图像功能扩展(二)-海报

分享本文封面