如何在类别中创建自定义元框字段?

时间:2021-03-17 作者:Leonardo Alves

我正在创建一个网站,我想在每次创建新类别时关联图像?有人知道我是如何通过这个菜单给用户这个选项的吗?

enter image description here

1 个回复
最合适的回答,由SO网友:Kirtan 整理而成

只需将此代码添加到functions.php 文件

add_action ( \'category_add_form_fields\', \'___add_form_field_term_meta_text\' );
function ___add_form_field_term_meta_text() {
    ?>
    <div class="form-field custom_image_upload">
        <label for="tag-description">File Upload</label>
        <img src="" style="width:100px;height:100px;border:0;display:none;" />
        <a title="Set listing image" href="javascript:;" id="upload_listing_image_button" id="set-listing-image" data-uploader_title="Choose an image" data-uploader_button_text="Set listing image">Set listing image</a>
        <input type="hidden" id="upload_listing_image" name="_listing_cover_image" value="" />
    </div>
    <?php
}

add_action ( \'category_edit_form_fields\', \'___edit_form_field_term_meta_text\' );
function ___edit_form_field_term_meta_text($term) {
    $image_id = get_term_meta ( $term->term_id, \'_listing_cover_image\', true );
    if( empty ( $image_id ) ) {
        $display_none = \'display:none;\';
        $upload_link  = \'<a title="Set listing image" href="javascript:;" id="upload_listing_image_button" id="set-listing-image" data-uploader_title="Choose an image" data-uploader_button_text="Set listing image">Set listing image</a>\';
    } else {
        $display_none = \'\';
        $upload_link  = \'<a title="Set listing image" href="javascript:;" id="remove_listing_image_button" data-uploader_title="Choose an image" data-uploader_button_text="Set listing image">Remove listing image</a>\';
    }
    ?>
    <tr class="form-field custom_image_upload">
        <th scope="row"><label for="term-meta-text"><?php _e ( \'File Upload\', \'text_domain\' ); ?></label></th>
        <td>
            <img src="<?php echo wp_get_attachment_image_src ( $image_id )[ 0 ]; ?>" style="width:100px;height:100px;border:0;<?php echo $display_none; ?>" />
            <?php echo $upload_link; ?>
            <input type="hidden" id="upload_listing_image" name="_listing_cover_image" value="<?php echo $image_id; ?>" />
        </td>
    </tr>
    <?php
}

add_action ( \'edit_category\', \'___save_term_meta_text\' );
add_action ( \'create_category\', \'___save_term_meta_text\' );
function ___save_term_meta_text($term_id) {
    if( isset ( $_POST[ \'_listing_cover_image\' ] ) ) {
        $image_id = (int) $_POST[ \'_listing_cover_image\' ];
        update_term_meta ( $term_id, \'_listing_cover_image\', $image_id );
    }
}

add_filter ( \'manage_edit-category_columns\', \'___edit_term_columns\' );
function ___edit_term_columns($columns) {
    $columns[ \'__term_meta_text\' ] = __ ( \'Image\', \'text_domain\' );
    return $columns;
}

// RENDER COLUMNS (render the meta data on a column)
add_filter ( \'manage_category_custom_column\', \'___manage_term_custom_column\', 10, 3 );
function ___manage_term_custom_column($out, $column, $term_id) {
    if( \'__term_meta_text\' === $column ) {
        $image_id = get_term_meta ( $term_id, \'_listing_cover_image\', true );
        if( ! empty ( $image_id ) ) {
            $out = \'<span class="term-meta-text-block" style="" ><img src="\' . wp_get_attachment_image_src ( $image_id )[ 0 ] . \'"style="width:50px;height:50px;border:0;" /></div>\';
        }
    }
    return $out;
}

在注册的管理员javascript文件中添加以下代码,该文件通过admin_enqueue_scripts

例如,我的是admin-script.js

jQuery(document).ready(function ($) {

    // Uploading files
    var file_frame;

    jQuery.fn.upload_listing_image = function (button) {
        var button_id = button.attr(\'id\');
        var field_id = button_id.replace(\'_button\', \'\');

        // If the media frame already exists, reopen it.
        if (file_frame) {
            file_frame.open();
            return;
        }

        // Create the media frame.
        file_frame = wp.media.frames.file_frame = wp.media({
            title: jQuery(this).data(\'uploader_title\'),
            button: {
                text: jQuery(this).data(\'uploader_button_text\'),
            },
            multiple: false
        });

        // When an image is selected, run a callback.
        file_frame.on(\'select\', function () {
            var attachment = file_frame.state().get(\'selection\').first().toJSON();
            jQuery("#" + field_id).val(attachment.id);
            jQuery(".custom_image_upload img").attr(\'src\', attachment.url);
            jQuery(\'.custom_image_upload img\').show();
            jQuery(\'#\' + button_id).attr(\'id\', \'remove_listing_image_button\');
            jQuery(\'#remove_listing_image_button\').text(\'Remove listing image\');
        });

        // Finally, open the modal
        file_frame.open();
    };

    jQuery(\'.custom_image_upload\').on(\'click\', \'#upload_listing_image_button\', function (event) {
        event.preventDefault();
        jQuery.fn.upload_listing_image(jQuery(this));
    });

    jQuery(\'.custom_image_upload\').on(\'click\', \'#remove_listing_image_button\', function (event) {
        event.preventDefault();
        jQuery(\'#upload_listing_image\').val(\'\');
        jQuery(\'.custom_image_upload img\').attr(\'src\', \'\');
        jQuery(\'.custom_image_upload img\').hide();
        jQuery(this).attr(\'id\', \'upload_listing_image_button\');
        jQuery(\'#upload_listing_image_button\').text(\'Set listing image\');
    });
    jQuery(document).ajaxSuccess(function (event, xhr, settings) {
        if (settings.data.indexOf(\'add-tag\') > -1) {
            jQuery(document).find(\'#remove_listing_image_button\').trigger(\'click\');
        }
    });

});
你应该得到这样的结果

enter image description here

enter image description here