WooCommerce 商品ページでブロックエディタを使用する

Last Updated: 2024 年 11 月 21 日 2のコメント

WordPress WooCommerce ショッピングモールでは、商品ページはデフォルトでクラシックエディタが使用されます。エレメントを使用している場合は、エレメントで商品ページを編集するように設定できます。

WooCommerce 基本商品ページ編集画面。

Naver カフェにクラシックエディタ(クラシックエディタ)の代わりにブロックエディタで商品ページを編集する方法がないかという質問が上がり、ここについてまとめてみました。

WooCommerce 商品ページをエレメントとして編集できるようにする

エレメンを使用している場合 Elementorで商品ページを飾ることができます。デフォルトでは、エレメントは投稿、ページに対して有効になっています。 WordPress お知らせ» Elementor »設定»一般​​タブに移動して投稿タイプで商品をチェックすると、商品ページをエレメントとして作成できます。

ちなみに、ページは通常エレメントと同じページビルダーを使用しても構いませんが、投稿(投稿)はなるべく基本エディタであるブロックエディタを使用してください。これに関連して」WordPress 記事をページビルダーとして書いてはいけないEU「を参照してください。

商品ページの編集でエレメントを有効にすると、商品ページの編集画面に「エレメントで編集」ボタンが表示されます。

商品ページをエレメンタで作成する場合、後でエレメンタを無効にすると問題になりますので Elementor 使用するかどうかを慎重に決定してください。

エレメンプロを使用している場合は、商品ページレイアウトをテーマビルダーでテンプレートにすることができます。この方法を利用すれば商品ページの全体的なレイアウトをテンプレートにして古典エディタやブロックエディタ(下記の「商品ページでブロックエディタを有効にする「部分参照」などを使用して個別の商品ページを作成できます。 これにより、テンプレートで構成したレイアウトで商品ページが表示されます。商品ページのレイアウト構成を精巧にカスタマイズしたい場合に便利です。

新しい商品エディタを有効にする

WooCommerce(WooCommerce)では、ベータ機能で新しい商品エディタを有効にするオプションを提供します。

新しい商品エディタを有効にするには WordPress ダッシュボード » WooCommerce »設定»詳細タブ»機能に移動し、 実験的機能 セクションの 新しい商品エディタ オプションをチェックして有効にします。

新しい商品エディタを有効にすると、商品編集画面は以下のようにすべての商品情報を1ページに入力するのではなく、 一般、オプション、組織、在庫、配送、関連商品 などのタブで分離して入力できます。

このように商品情報を入力したい場合は、新しい商品エディタの使用を検討することができます。

商品ページでブロックエディタを有効にする

商品ページにブロックエディタを使用させる機能は、 WordPressには搭載されていませんが、簡単なコードを追加してブロックエディタを使用するように有効にすることができます。

チャイルドテーマ(子テーマ)がインストールされていない場合は、チャイルドテーマを作成した後、チャイルドテーマの関数ファイルに次のコードを追加します。

// WooCommerce 상품 편집 페이지에서 블록 에디터 활성화
// Enable WordPress Block Editor on WooCommerce product edit pages
function activate_gutenberg_product( $can_edit, $post_type ) {

    // 상품(post_type: 'product')에 대해서만 블록 에디터 활성화
    // Enable block editor only for 'product' post type
    if ( $post_type === 'product' ) {
        $can_edit = true;
    }

    return $can_edit;
}
add_filter( 'use_block_editor_for_post_type', 'activate_gutenberg_product', 10, 2 );

// WooCommerce 상품 카테고리 및 태그에 대해 REST API 지원 활성화
// Enable REST API support for WooCommerce product categories and tags
function enable_taxonomy_rest( $args ) {

    // show_in_rest 설정을 true로 변경
    // Set show_in_rest to true
    $args['show_in_rest'] = true;

    return $args;
}
add_filter( 'woocommerce_taxonomy_args_product_cat', 'enable_taxonomy_rest' ); // 상품 카테고리
add_filter( 'woocommerce_taxonomy_args_product_tag', 'enable_taxonomy_rest' ); // 상품 태그

チャイルドテーマはプラグインを使用して作成したり、テーマインストールファイルに含めることができます。例えば、 Avadaを使用している場合、 Avada テーマインストールファイルに含まれているチャイルドテーマファイルを使用して、チャイルドテーマをインストールして有効にできます。

チャイルドテーマの関数ファイルパスは / WP-コンテンツ/themes/child-theme-folder/functions.phpです。テーマファイルを変更するには、FTPに接続してください。

上記のコードを追加して保存すると、商品ページをブロックエディタで編集できるようにブロックエディタが有効になります。

GeneratePress テーマでテストしてうまくいくことを確認しました。他のテーマでもうまく機能すると思います。 WooCommerceナ WordPressが更新され、上記のコードが機能しなくなる場合は、下記のコメントでお知らせください。コードを最新バージョンに合わせて修正いたします。

最後に、

以上で WooCommerce 商品ページでブロックエディタを有効にする方法について説明しました。エレメントなどのページビルダーを使用すると、サイトの速度に影響を与える可能性があります。

サイトが遅くて悩みの場合 GeneratePress テーマのように軽量で高速なテーマを使用し、エレメントなどのページビルダーの代わりにブロックエディタを使用すると、速度が確実に向上します。

参照


2のコメント

コメント

  1. こんにちは! 頭書なしで質問しましたが、こんなに丁寧に投稿していただきありがとうございます。 WooCommerce ベータ機能でブロック編集機を使うのが安定性の面からだから、現在運営中のショッピングモールで決済機能や他の機能と衝突を起こしたりするのではなく、単にクラシックをブロックに変えると理解すればいいでしょうか? WooCommerce 正式版でブロックエディタをサポートするのを待つのに疲れて一旦ベータ機能をまず使ってみようかと思うのにもう少し待たなければならないか心配ですねㅜ

    応答
    • こんにちは、Alexkimさん。新しい商品エディタはブロックエディタではありません。この記事で紹介する方法でブロックエディタを有効にしても問題はありません。 WooCommeryでブロックエディタを有効にするオプションを追加するようには思えません。

      応答