【WooCommerce】商品ページの編集をブロックエディタに切り替えてみよう！

『もう少し柔軟にカスタマイズしたい』
『クラシック形式だと、商品ページが作りづらい』
『商品ページもブロックエディタで編集できないかな』

WordPressを使っていると、

• クラシックエディタ
• ブロックエディタ

の2種類の編集方法があります。

クラシックエディタは、『ブログ執筆』などに使いやすく、
ブロックエディタは、『ホームページ作成』に活用しています。

クラシックエディタはシンプルな反面、細かな調整がしづらい点もあるため、
最近はブロックエディタを中心に使うようになりました。

そして、ブログやホームページであれば、

• 投稿ページ（ブログの記事）
• 固定ページ（ホームページ）

の2種類ですが、WooCommerceというプラグインを入れると、

• 商品ページ

といった要素が追加されます。

このページは、デフォルトの設定では『クラシックエディタ』形式ですが、編集しづらい点も感じたため、
これを『ブロックエディタ』形式に変える方法をお伝えします。

※クラシックからブロックへ

WooCommerce（ウーコマース）って、なんだっけ？

WooCommerceとは、『WordPress向けのECサイト構築プラグイン』です。

特徴としては、

• 無料で利用可能
  （プラグイン本体は完全無料）
• 高いカスタマイズ性
  （オリジナルのネットショップを自由に構築）
• WordPressとの連携
  （ブログ機能と組み合わせてコンテンツマーケティングが可能）

といったものが挙げられます。

私は、WooCommerceを使って以下の動画販売サイトを運営しています。

free to design Academy

動画販売サイト│free to design Academy　『自由な生き方』をデザインする学びを。

このようなECサイトを自分で構築できるのが、WooCommerceです。

• WordPressの知識が必要
• 初期設定に手間がかかる
• 決済手段の用意が必要

といったハードルも多少なりともありますが、これをクリアできれば、
自分以外のプラットフォームに依存せずにECサイトを構築できるようになります。

free to design Academy

動画を自分で売れる仕組みを作る！ 「0から始める」 動画販売サイト構築 超入門 – free to design Academy 【内容】 無料プレビュー動画で、講座の一部をご覧いただけます。 2倍速で見て頂くことをおすすめします。     ひとりで独立すると、何をするにも時間が必要です。 その点…

※作り方をゼロから解説しています

ブロックエディタに変えるメリット・デメリット

商品ページのクラシックエディタでの編集画面はこのようなものです。

商品ページの編集に、クラシックエディタを使うメリットは、

• シンプル
• とっつきやすい
• 標準機能で安心

といった点が挙げられます。

一方で、

• フォントの統一など、見た目の調整がしづらい
• 動画埋め込み等の応用がやりづらい
• 普段ブロックエディタ（WordPressはこちらが標準）を使っていると違和感がある

というデメリットも。

私は、デメリットの方が大きく感じたため、ブロックエディタに変更を試みました。

ブロックエディタに変更する方法

いくつか方法があります。

結論としては、①②では上手くいかず、③の方法で変更しました。

①WooCommerceのβ機能を使う方法

1つ目は、WooCommerceの公式機能のβ版を使うというもの。

ネットで調べると、まずこの方法が出てきます。

しかし、一時期は導入されていたようですが、現時点では公開されていない機能となっており、断念しました。

②プラグインを使う方法

『WooCommerce Blocks』というプラグインが存在します。

これは、ブロックエディタを使って、ECサイトの機能を簡単に実装できるプラグインで、コードを書かずにドラッグ&ドロップの直感的な操作で構築が可能なものです。

と聞くと、『とてもいいじゃないか！』と思うのですが、目的である、

　　　商品ページをブロックエディタ形式にする。

ことはできませんでした。

少しややこしいのですが、

• 商品ページ（個別の商品詳細ページ）そのものを作る

というよりも、

• 商品を使った様々なページレイアウトを作るツール

といったものです。

これ以外にめぼしいプラグインは見当たらず、③functions.php編集に進むことになります。

③functions.phpを編集する

functions.phpの編集方法・留意点は、以下の記事をご覧ください。

慣れればリスクは低めですが、バックアップなどをきちんと取っておかないと、復旧できなくなる可能性もあります。

phpに追加するコード自体はシンプルで、以下を追加します。

// WooCommerce商品でブロックエディタを有効化
function 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', 'activate_gutenberg_product', 10, 2 );

// WooCommerceタクソノミー（カテゴリー・タグ）をREST APIで有効化
function enable_taxonomy_rest( $args ) {
    $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' );

これだけでは意味不明なので、解説していきます。

• 興味がなければ、読み飛ばしてください。
• 上記コードを入れればブロックエディタとして商品ページを編集できるようになります。

このコードは2つの機能に分かれています。

• 商品編集画面をブロックエディタにする（前半）
• カテゴリーとタグをブロックエディタで使えるようにする（後半）

①商品編集画面をブロックエディタにする（前半）

function activate_gutenberg_product( $can_edit, $post_type ) {

ここでは、『activate_gutenberg_product』という関数を定義します。

• $can_edit = 「ブロックエディタを使えるか？」の判定（true/false）
• $post_type = 「今編集しようとしているのは何か？」（投稿、固定ページ、商品など）

といった情報を渡します。

if ( $post_type == 'product' ) {
    $can_edit = true;
}

• if = 「もし〜なら」という条件分岐
• $post_type == 'product' = 「編集しようとしているのが商品ページ（product）なら」
• $can_edit = true; = 「ブロックエディタを使えるようにする（true = はい）

といった条件分岐を設定しています。

    return $can_edit;

• return = 「この関数の結果として、この値を返す」
• 判定結果（true または false）をWordPressに伝える

といった記述をし、最後の『}』で関数が終わることを示します。

最も重要なのが、最後の以下のコードです。

add_filter( 'use_block_editor_for_post_type', 'activate_gutenberg_product', 10, 2 );

• add_filter = WordPressの「フィルター」という仕組み
• 'use_block_editor_for_post_type' = 「ブロックエディタを使うかどうか判定する場面」というWordPressの仕組み
• 'activate_gutenberg_product' = 上で作った関数の名前を指定
• 10 = 優先順位（数字が小さいほど早く実行、通常は10）
• 2 = この関数が受け取る引数の数（2つ）

要するに、

『WordPressがブロックエディタを使うかどうか判断するタイミングで、 activate_gutenberg_product 関数も呼んで、商品ページならブロックエディタを使えるようにしてね』

ということを伝えています。

②カテゴリーとタグをブロックエディタで使えるようにする（後半）

次にカテゴリーとタグの設定です。

function enable_taxonomy_rest( $args ) {

• enable_taxonomy_rest = 関数名
• $args = カテゴリーやタグの設定情報（配列）

を設定します。

タクソノミーとは、カテゴリーやタグのことです。

    $args['show_in_rest'] = true;

• $args['show_in_rest'] = 「REST APIで使えるようにするか」という設定
• = true = 「はい、使えるようにする」

REST APIとは、『ブロックエディタが裏側で使う通信の仕組み』を指し、ここで「カテゴリーとタグをブロックエディタで使えるようにする」といった設定をしています。

    return $args;

変更した設定をWordPressに返しています。

　　　add_filter( 'woocommerce_taxonomy_args_product_cat', 'enable_taxonomy_rest' );
　　　add_filter( 'woocommerce_taxonomy_args_product_tag', 'enable_taxonomy_rest' );

• 1行目：商品カテゴリーに対して関数を適用
• 2行目：商品タグに対して関数を適用

以上、ざっくりとコードの解説を記載しました。

やっていることは、

1. 「商品ページではブロックエディタを使う」とWordPressに伝える
2. 「カテゴリーとタグもブロックエディタで使えるようにする」設定を追加

といったものです。

以上、何か参考になる点があれば嬉しいです。

では、また次回。

編集後記

◇日記
　昨日は、ブログ・YouTubeからスタート。
　午前中は長男・三男と病院＆公園へ。
　（妻は教習所へ）
　午後から仕事。合間にランを。

◇ブログネタ経緯
　過去のネタ帳から。

◇1日1新
　お知らせアーカイブページの作成
　CW-X（HOT）：ランニングウェア
　Google Adsense