在主题的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
加微信咨询（为了方便大家添加微信，直接放在这里了）：
相关文章
目录
联系我
强烈推荐
加微信随便聊聊
平时比较忙，除非你来主动咨询，日常不会去一直发没有意义的推广信息。