自定义术语分类图片选项在管理面板中 - PHP

简介

在 WordPress 中，术语分类是一种用于对文章或页面进行分类和组织的方法。默认情况下，术语分类只包含名称和描述字段。然而，在某些情况下，我们需要将图像作为术语分类的一部分。本篇文章将介绍如何通过 PHP 在 WordPress 后台中为自定义术语分类添加图像选项。

实现步骤

1. 注册自定义术语分类

首先，我们需要注册一个自定义术语分类，以便我们可以在后台添加图像选项。我们可以使用 register_taxonomy() 函数注册自定义分类。以下是一个示例：

function custom_taxonomy() {
  $args = array(
    'label' => '自定义分类',
    'public' => true,
    'show_ui' => true,
    'hierarchical' => true,
    'show_admin_column' => true,
    'query_var' => true,
    'rewrite' => array( 'slug' => 'custom_taxonomy' ),
  );
  register_taxonomy( 'custom_taxonomy', array( 'post' ), $args );
}
add_action( 'init', 'custom_taxonomy' );

2. 添加图像上传字段

接下来，我们需要向自定义分类中添加一个图像上传字段。为此，我们可以使用 add_action() 函数，将自定义分类的编辑表单添加到 admin_enqueue_scripts 钩子上。在这个表单中，我们可以添加用于上传和预览图像的字段。以下是示例代码：

function custom_taxonomy_image_option() {
  ?><div class="form-field form-required term-name-wrap">
    <label for="custom_taxonomy_image"><?php _e( '分类图像', 'custom_taxonomy_image' ); ?></label>
    <input type="hidden" id="custom_taxonomy_image" name="custom_taxonomy_image" class="custom_taxonomy_image" value="">
    <div id="custom_taxonomy_image_preview"></div>
    <div style="margin-top:5px;">
      <input type="button" id="custom_taxonomy_image_button" class="button button-primary" value="<?php _e( '上传图像', 'custom_taxonomy_image' ); ?>">
    </div>
  </div>
 
  <script>
  jQuery(document).ready(function($) {
    // Uploading files
    var file_frame;
    var wp_media_post_id = wp.media.model.settings.post.id; // Store the old id
    var set_to_post_id = 0; // Set this
       
    jQuery('#custom_taxonomy_image_button').on('click', function( event ){
      event.preventDefault();
      // If the media frame already exists, reopen it.
      if ( file_frame ) {
        // Set the post ID to what you want
        file_frame.uploader.uploader.param( 'post_id', set_to_post_id );
        file_frame.open();
        return;
      } else {
        // Set the wp.media post id so the uploader grabs the ID we want when initialized
        wp.media.model.settings.post.id = set_to_post_id;
      }
       
      // Create the media frame.
      file_frame = wp.media.frames.file_frame = wp.media({
        title: $( this ).data( 'uploader_title' ),
        button: {
          text: $( this ).data( 'uploader_button_text' ),
        },
        multiple: false  // Set to true to allow multiple files to be selected
      });
           
      // When an image is selected, run a callback.
      file_frame.on( 'select', function() {
        // We set multiple to false so only get one image from the uploader
        attachment = file_frame.state().get('selection').first().toJSON();
       
        // Do something with attachment.id and/or attachment.url here
        $( '#custom_taxonomy_image' ).val( attachment.id );
        $( '#custom_taxonomy_image_preview' ).html( '<img src="' + attachment.url + '" style="max-width:300px;">' );
       
        // Restore the main post ID
        wp.media.model.settings.post.id = wp_media_post_id;
      });
           
      // Finally, open the modal
      file_frame.open();
    });
 
    // Restore the main ID when the add media button is pressed
    jQuery( 'a.add_media' ).on( 'click', function() {
      wp.media.model.settings.post.id = wp_media_post_id;
    });
  });
  </script><?php
}
add_action( 'custom_taxonomy_add_form_fields', 'custom_taxonomy_image_option', 10, 2 );
add_action( 'custom_taxonomy_edit_form_fields', 'custom_taxonomy_image_option', 10, 2 );

在上面的代码中，我们使用了 wp_enqueue_media() 函数来加载 WordPress 媒体库。我们还为上传按钮添加了一个单击事件，该事件打开 WordPress 媒体库以选择图像。选定的图像将在隐藏输入字段中保存，并在预览区域中显示。

3. 保存图像选项

最后，我们需要确保上传的图像选项在保存术语分类时保存。为此，我们可以使用 edited_custom_taxonomy 和 create_custom_taxonomy 钩子，并使用 update_term_meta() 函数将图像数据保存到数据库中。以下是示例代码：

function save_custom_taxonomy_image( $term_id, $tt_id ) {
  if( isset( $_POST['custom_taxonomy_image'] ) && '' !== $_POST['custom_taxonomy_image'] ) {
    $image = $_POST['custom_taxonomy_image'];
    add_term_meta( $term_id, 'custom_taxonomy_image', $image, true );
  }
}
add_action( 'create_custom_taxonomy', 'save_custom_taxonomy_image', 10, 2 );
add_action( 'edited_custom_taxonomy', 'save_custom_taxonomy_image', 10, 2 );

结论

通过在 WordPress 后台中为自定义术语分类添加图像选项，我们可以在文章或页面上的分类中显示图像，达到更好的分类和组织效果。本篇文章提供了一个完整的示例代码，希望可以帮助您实现自己的自定义分类图像选项。