在主题的functions.php文件中添加下面的代码即可实现

基础版:直接添加代码实现

//添加标题选项卡并允许用户后台使用经典编辑器编辑。
function add_custom_tab( $tabs ) {
    $tabs['custom_tab'] = array(
        'title'    => __('Custom Tab', 'your-textdomain'),
        'callback' => 'custom_tab_content',
        'priority' => 50,
    );
    return $tabs;
}
add_filter( 'woocommerce_product_tabs', 'add_custom_tab' );

function custom_tab_content( $slug, $tab ) {
    global $post;
    $custom_tab_content = get_post_meta( $post->ID, '_custom_tab_content', true );
    echo apply_filters( 'the_content', $custom_tab_content );
}

function add_custom_tab_meta_box() {
    add_meta_box(
        'custom_tab_content',
        __('Custom Tab Content', 'your-textdomain'),
        'custom_tab_content_box',
        'product',
        'normal',
        'high'
    );
}
add_action( 'add_meta_boxes', 'add_custom_tab_meta_box' );

function custom_tab_content_box( $post ) {
    $content = get_post_meta( $post->ID, '_custom_tab_content', true );
    wp_editor( $content, 'custom_tab_content_editor' );
    wp_nonce_field( 'custom_tab_content_nonce', 'custom_tab_content_nonce_field' );
}

function save_custom_tab_content( $post_id ) {
    if ( ! isset( $_POST['custom_tab_content_nonce_field'] ) ) {
        return;
    }
    if ( ! wp_verify_nonce( $_POST['custom_tab_content_nonce_field'], 'custom_tab_content_nonce' ) ) {
        return;
    }
    if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) {
        return;
    }
    if ( isset( $_POST['custom_tab_content_editor'] ) ) {
        update_post_meta( $post_id, '_custom_tab_content', $_POST['custom_tab_content_editor'] );
    }
}
add_action( 'save_post', 'save_custom_tab_content' );

Custom Tab的标题你可以自行修改,在代码中找到这个标题,对其进行修改即可。

升级版:代码优化实现更多功能

如果你对于目前的形式还不满足,还想要直接能在后台对Custom Tab 进行编辑,并且可以选择性的打开或者关闭,我们可以优化一下代码,优化后的代码如下

// 添加自定义标签页和内容编辑器
add_action( 'add_meta_boxes', 'add_custom_tab_meta_box' );
function add_custom_tab_meta_box() {
    add_meta_box(
        'custom_tab_options',
        __('Custom Tab Options', 'your-textdomain'),
        'custom_tab_options_box',
        'product',
        'normal',
        'high'
    );
}

function custom_tab_options_box( $post ) {
    $custom_tab_title = get_post_meta( $post->ID, '_custom_tab_title', true );
    $custom_tab_enabled = get_post_meta( $post->ID, '_custom_tab_enabled', true );
    $content = get_post_meta( $post->ID, '_custom_tab_content', true );

    echo '<p><strong>' . __('Tab Title', 'your-textdomain') . '</strong></p>';
    echo '<input type="text" name="custom_tab_title" value="' . esc_attr( $custom_tab_title ) . '" class="widefat" />';

    echo '<p><strong>' . __('Enable Tab', 'your-textdomain') . '</strong></p>';
    echo '<input type="checkbox" name="custom_tab_enabled" value="yes" ' . checked( $custom_tab_enabled, 'yes', false ) . ' /> ' . __('Enable', 'your-textdomain');

    wp_editor( $content, 'custom_tab_content_editor' );
    wp_nonce_field( 'custom_tab_options_nonce', 'custom_tab_options_nonce_field' );
}

// 保存自定义标签页设置和内容
add_action( 'save_post', 'save_custom_tab_content' );
function save_custom_tab_content( $post_id ) {
    if ( ! isset( $_POST['custom_tab_options_nonce_field'] ) ) {
        return;
    }
    if ( ! wp_verify_nonce( $_POST['custom_tab_options_nonce_field'], 'custom_tab_options_nonce' ) ) {
        return;
    }
    if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) {
        return;
    }

    if ( isset( $_POST['custom_tab_title'] ) ) {
        update_post_meta( $post_id, '_custom_tab_title', sanitize_text_field( $_POST['custom_tab_title'] ) );
    }

    $custom_tab_enabled = isset( $_POST['custom_tab_enabled'] ) ? 'yes' : 'no';
    update_post_meta( $post_id, '_custom_tab_enabled', $custom_tab_enabled );

    if ( isset( $_POST['custom_tab_content_editor'] ) ) {
        update_post_meta( $post_id, '_custom_tab_content', $_POST['custom_tab_content_editor'] );
    }
}

// 添加自定义标签页到产品详情页
add_filter( 'woocommerce_product_tabs', 'add_custom_tab' );
function add_custom_tab( $tabs ) {
    global $post;

    $custom_tab_enabled = get_post_meta( $post->ID, '_custom_tab_enabled', true );
    if ( $custom_tab_enabled !== 'yes' ) {
        return $tabs;
    }

    $custom_tab_title = get_post_meta( $post->ID, '_custom_tab_title', true );
    $custom_tab_title = !empty( $custom_tab_title ) ? $custom_tab_title : __('Custom Tab', 'your-textdomain');

    $tabs['custom_tab'] = array(
        'title'    => $custom_tab_title,
        'callback' => 'custom_tab_content',
        'priority' => 50,
    );

    return $tabs;
}

function custom_tab_content( $slug, $tab ) {
    global $post;
    $custom_tab_content = get_post_meta( $post->ID, '_custom_tab_content', true );
    echo apply_filters( 'the_content', $custom_tab_content );
}

进阶版:更加自由化的编辑

下面的代码可以让你无限添加你需要的Tab,并且自定义名称、自定义内容,在网站后台菜单栏会生成一个Custom Tab(以后可能会改名)的工具,你可以在不同的产品中选择添加tab当然以后我会把这个功能做成插件,当然也会对插件进行一定的优化。

下面是实现效果,如果需要调整tab的顺序,可以直接在custom tab列表中上下拖拽,前台会显示成按顺序排过去的tab。

//添加select2库
function load_select2_library() {
    wp_enqueue_script('select2', 'https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js', array('jquery'), '4.0.13', true);
    wp_enqueue_style('select2-css', 'https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css', array(), '4.0.13', 'all');

    wp_add_inline_script('select2', '
        jQuery(document).ready(function($) {
            $("#custom_tabs_select").select2({
                closeOnSelect: false,
                placeholder: "Select Custom Tabs",
                allowClear: true
            });
        });
    ');
	// 引入jQuery UI Sortable
    wp_enqueue_script('jquery-ui-sortable');
}
add_action('admin_enqueue_scripts', 'load_select2_library');




//1.创建自定义标签页类型
function create_custom_tabs_post_type() {
    register_post_type('custom_tabs', array(
        'labels' => array(
            'name' => __('Custom Tabs', 'your-textdomain'),
            'singular_name' => __('Custom Tab', 'your-textdomain'),
        ),
        'public' => true,
        'has_archive' => false,
        'supports' => array('title', 'editor'),
    ));
}
add_action('init', 'create_custom_tabs_post_type');

// 在Custom Tabs列表添加ID列
add_filter('manage_custom_tabs_posts_columns', 'add_custom_tabs_id_column');
function add_custom_tabs_id_column($columns) {
    $columns['tab_id'] = __('ID', 'your-textdomain');
    return $columns;
}

// 填充ID列的内容
add_action('manage_custom_tabs_posts_custom_column', 'custom_tabs_column_content', 10, 2);
function custom_tabs_column_content($column, $post_id) {
    if ($column == 'tab_id') {
        echo $post_id;
    }
}


//2.创建一个新的自定义标签页
function add_custom_tab_options_meta_box() {
    add_meta_box(
        'custom_tab_options',
        __('Custom Tab Options', 'your-textdomain'),
        'custom_tab_options_meta_box_callback',
        'product',
        'normal',
        'high'
    );
}
add_action('add_meta_boxes', 'add_custom_tab_options_meta_box');


// 更新产品编辑页面的自定义字段显示
function custom_tab_options_meta_box_callback($post) {
    // 获取所有自定义标签页
    $custom_tabs = get_posts(array('post_type' => 'custom_tabs', 'numberposts' => -1));
    // 获取当前产品已选择的标签页
    $selected_tabs = get_post_meta($post->ID, '_custom_tabs_selected', true);

    // 显示下拉复选框
    echo '<p>' . __('Select the tabs to enable for this product:', 'your-textdomain') . '</p>';
    echo '<select id="custom_tabs_select" name="custom_tabs_selected[]" multiple="multiple" style="width:100%;">';
    foreach ($custom_tabs as $tab) {
        $selected = in_array($tab->ID, $selected_tabs) ? 'selected' : '';
        echo '<option value="' . $tab->ID . '" ' . $selected . '>' . esc_html($tab->post_title) . ' (ID: ' . $tab->ID . ')</option>';
    }
    echo '</select>';

    wp_nonce_field('custom_tab_options_nonce', 'custom_tab_options_nonce_field');
}







// 保存产品编辑页面的自定义字段
function save_custom_tab_options($post_id) {
    if (!isset($_POST['custom_tab_options_nonce_field']) || !wp_verify_nonce($_POST['custom_tab_options_nonce_field'], 'custom_tab_options_nonce')) {
        return;
    }

    $selected_tabs = isset($_POST['custom_tabs_selected']) ? (array) $_POST['custom_tabs_selected'] : array();
    update_post_meta($post_id, '_custom_tabs_selected', $selected_tabs);
}
add_action('save_post', 'save_custom_tab_options');


//3.在产品详情页显示选定的自定义标签页

add_filter('woocommerce_product_tabs', 'add_custom_tabs_to_product');
function add_custom_tabs_to_product($tabs) {
    global $post;

    // 获取当前产品已选择的标签页
    $selected_tabs = get_post_meta($post->ID, '_custom_tabs_selected', true);

    if (!empty($selected_tabs)) {
        // 根据menu_order排序获取自定义标签页
        $args = array(
            'post_type' => 'custom_tabs',
            'post__in' => $selected_tabs,
            'orderby' => 'menu_order',
            'order' => 'ASC',
            'posts_per_page' => -1,
        );
        $custom_tabs = get_posts($args);

        foreach ($custom_tabs as $tab_post) {
            $tabs['custom_tab_' . $tab_post->ID] = array(
                'title'    => $tab_post->post_title,
                'callback' => 'display_custom_tab_content',
                'priority' => 25, // 设置优先级为25,小于评论标签的默认优先级30
                'content'  => $tab_post->post_content,
            );
        }
    }

    return $tabs;
}

function display_custom_tab_content($key, $tab) {
    echo apply_filters('the_content', $tab['content']);
}


// 在Custom Tabs列表页添加拖拽支持
add_action('admin_footer-edit.php', 'custom_tabs_sortable_script');
function custom_tabs_sortable_script() {
    $screen = get_current_screen();

    if ($screen->id != 'edit-custom_tabs') {
        return;
    }

    ?>
    <script>
        jQuery(document).ready(function($) {
            var table = $('table.wp-list-table');
            var rows = table.find('tbody tr');
            rows.css('cursor', 'move');
            
            table.sortable({
                items: 'tr:not(.no-sort)',
                axis: 'y',
                update: function(event, ui) {
                    var order = $(this).sortable('toArray', { attribute: 'id' });
                    $.post(ajaxurl, { action: 'save_custom_tabs_order', order: order });
                }
            });
        });
    </script>
    <?php
}


add_action('wp_ajax_save_custom_tabs_order', 'save_custom_tabs_order');
function save_custom_tabs_order() {
    if (!current_user_can('edit_posts')) {
        wp_die(-1);
    }

    $order = isset($_POST['order']) ? $_POST['order'] : array();
    foreach ($order as $index => $tab_id) {
        wp_update_post(array(
            'ID' => str_replace('post-', '', $tab_id),
            'menu_order' => $index
        ));
    }

    wp_die();
}

如果对本文有疑问,可以在下方评论区留言,看到后我会在这里回复你。

关于作者:张东星

我是一位打工人 & 创业者,曾在某世界500强公司打工,现在正在创业,喜欢折腾wordpress,为外贸创业者提供wordpress的建站技术支持,我会为您解决wordpress、Avada以及服务器等的操作使用方面的相关问题。 工作时间:9:00~24:00

加微信咨询(为了方便大家添加微信,直接放在这里了):

发表评论

12 + 9 =

相关文章

目录