為 WooCommerce 的產(chǎn)品發(fā)布啟用古騰堡編輯器

幾年時間過去了，古騰堡（Gutenberg）編輯器不斷完善，目前的內(nèi)容編輯體驗還是不錯的。然而 WooCommerce 還是采用經(jīng)典編輯器，要在發(fā)布產(chǎn)品介紹的時候做一些簡單的布局，就顯得比較麻煩了。所以今天我們就分享下 為 WooCommerce 的產(chǎn)品發(fā)布啟用古騰堡編輯器的方法。

只需要將下面的代碼添加到當(dāng)前主題的 functions.php 即可：

// Enable Gutenberg editor for WooCommerce
function wpkj_activate_gutenberg_product( $can_edit, $post_type ) {
 if ( $post_type == 'product' ) {
        $can_edit = true;
    }
    return $can_edit;
}
add_filter( 'use_block_editor_for_post_type', 'wpkj_activate_gutenberg_product', 10, 2 );

// enable taxonomy fields for woocommerce with gutenberg on
function wpkj_enable_taxonomy_rest( $args ) {
    $args['show_in_rest'] = true;
    return $args;
}
add_filter( 'woocommerce_taxonomy_args_product_cat', 'wpkj_enable_taxonomy_rest' );
add_filter( 'woocommerce_taxonomy_args_product_tag', 'wpkj_enable_taxonomy_rest' );

最終的效果如下所示：

可能需要的樣式修正代碼

如果你發(fā)現(xiàn)切換為古騰堡編輯器后，單選、多選無法勾選（其實(shí)是勾選后還是顯示未勾選），可以嘗試添加下面的代碼進(jìn)行修復(fù)。如果不存在這個問題，可以不添加。

function wpkj_fixed_wc_css() {
    echo '<style>
		#woocommerce-product-data input[type=checkbox]:checked::before,
		#woocommerce-product-data input[type=radio]:checked::before {
		display: block;
		float: none;
	}
	#woocommerce-product-data input[type=checkbox]{
		width: 16px;
		height: 16px;
	}
    </style>';
}
// 修復(fù)開啟古騰堡后WC選項樣式問題
add_action('admin_head', 'wpkj_fixed_wc_css');