首页 问答 正文

如何在WordPress中为自定义分类法添加图标?

注册会员 / 悠然自学 / 2023-06-12/ 浏览 75 次

要在 WordPress 中为自定义分类法添加图标,需要进行以下步骤:

  1. 为自定义分类法添加图标字段

在自定义分类法的注册函数中添加如下代码:

$args = array(
    // 添加以下两行代码
    'meta_box_cb' => 'add_taxonomy_icon_meta_box',
    'show_admin_column' => true,
);
register_taxonomy('custom_taxonomy', array('post'), $args); 
  1. 创建图标上传表单

编写一个名为 "add_taxonomy_icon_meta_box" 的 Callback 函数,并添加如下代码:

function add_taxonomy_icon_meta_box($taxonomy) {
    if (!isset($taxonomy->term_id)) {
        $term_id = '';
    } else {
        $term_id = $taxonomy->term_id;
    }
    $icon_url = get_term_meta($term_id, 'taxonomy_icon', true);
    ?>
    <div class="form-field term-group">
        <label for="taxonomy-icon"><?php _e('Icon', 'text-domain'); ?></label>
        <div class="taxonomy-icon-wrap">
            <?php if (!empty($icon_url)) : ?>
                <img src="<?php echo esc_url($icon_url); ?>" alt="" style="margin-bottom: 5px; max-width: 100%; height: auto; display: block;" />
            <?php endif; ?>
            <input type="text" class="taxonomy-icon-field" name="taxonomy_icon" id="taxonomy-icon" value="<?php echo esc_url($icon_url); ?>" />
            <input type="button" class="taxonomy-icon-upload button" value="<?php _e('Upload/Add icon', 'text-domain'); ?>" />
        </div>
        <p><?php _e('Add a custom icon for this taxonomy. Recommend size: 50x50 px', 'text-domain'); ?></p>
    </div>
    <?php
} 
  1. 保存图标

添加以下代码将图标保存到数据库中:

function save_taxonomy_icon_meta_box($term_id) {
    if (isset($_POST['taxonomy_icon'])) {
        update_term_meta($term_id, 'taxonomy_icon', esc_url_raw($_POST['taxonomy_icon']));
    }
}
add_action('edited_custom_taxonomy', 'save_taxonomy_icon_meta_box', 10, 2);
add_action('create_custom_taxonomy', 'save_taxonomy_icon_meta_box', 10, 2); 
  1. 显示图标

最后,可以添加以下代码来显示图标:

function custom_taxonomy_icon($classes, $item) {
    if ('taxonomy' == $item->object) {
        $taxonomy = get_taxonomy($item->object_id);
        $icon_url = get_term_meta($item->object_id, 'taxonomy_icon', true);
        if (!empty($icon_url)) {
            $icon = "<img src="{$icon_url}" class="menu-item-icon" />";
            array_push($classes, 'menu-icon');
        }
    }
    return $classes;
}
add_filter('nav_menu_css_class', 'custom_taxonomy_icon', 10, 2);
add_filter('nav_menu_item_title', 'insert_taxonomy_icons', 10, 4);
function insert_taxonomy_icons($title, $item, $args, $depth) {
    return $title . $icon;
} 

注:以上代码仅供参考,具体实现需要根据需要进行调整。

大家谈论
    我的见解