3DプリントアイテムのWebショップにモデルをグリグリ回せるギミックをつける。盗用もある程度防ぐ。

2026年6月19日2026年6月19日 furuta コメントをする

3Dプリント品を販売しているWebショップで、アイテムの形状などを確認できるように3Dモデルをブラウザ上でグリグリ動かしたりズームしたりできる仕掛けを実装したいと思いました。stl形式のデータをアップして、WordPressのプラグインを使って表示すれば実現は可能なのですが、そのstlファイルを抜かれると3Dプリンターを持ってる人なら簡単に複製できてしまうので、売り物でやるのは躊躇われていました。

なにか暗号化してファイルを取得されても再利用はできないような仕組みがあればなと思って調べてみたんですが、やはりブラウザ上でレンダリングするにはWebGLとかに変換された時点で完全には盗用は防げないっぽい。より高等なプラグインを使う外部サービスとかはあるみたいですが、個人でそこまで大がかりなことはしたくないし、外部サービス依存も避けたい。

ということで、方針として、

・メッシュデータを簡略化して、「形状確認でグリグリするするには足りるけど、プリントするにはガタ付いていて実用にならない」くらいの精度に落としたものを使う

ということを目指すことにしました。Bambu Studioにある簡略化という機能に着想を得たんですが、CADソフトのFusion側でもサクっとできることが判明。覚え書きにしておきます。

STL形式よりもglTF 2.0形式

同時にブラウザ上で3Dモデルを表示するにはSTLよりもglTF形式というフォーマットの方が優れていることがわかりました。

STLより軽量でスマホも含めて快適にレンダリングできる
3MFのようにカラー情報も保持できる（STLは純粋な形状データだけ）
スライサーに直接読み込めなかったり、内部データも軽量化されていて盗用されにくい

といった特徴があります。もちろんWordPress/WooCommerceでも簡単にプラグインで表示できます。

ただFusionでは標準で書き出し機能が備わっておらず有料アドオンが必要。そこで一度obj形式などでエクスポートして、無償のBlenderでコンバートするという手順を採りますので、それも合わせて解説します。

WordPress用プラグイン bPlugins 3D Viewerを選択

フル機能を使うには有償（サブスク）ですが、無償の基本機能でもやりたいことは実装できました。

実際の適用例はこちら（リンク先をご覧ください）。

こちらで注文できます

Tzパ－プルセーバー＆消棒レスキュードアポケットホルダー（新型クラウン用）

参考価格: ¥1,200（別途消費税、送料がかかります）

在庫: なし

単純にページ内にインラインでビューワーを表示もしていますが、加えてWooComemrcが標準でもっている画像表示機能の中に統合もできます。１枚目の画像の右下にアイコンが出るので、それをクリック／タップするとグリグリできるモデルが表示される形です。メッシュ削減してあるので拡大してみると円筒部分がガタガタになっているのがわかります。

ざっくり手順メモ

Fusionで精度を落としたメッシュを作る

Fusion上で変換したいボディを複製します（メッシュに置き換わってしまうため）。

「メッシュ」タブ->作成->テッセレーション。全く聞いたことがない言葉ですが、ソリッドボディがメッシュボディに変換されます（白い円柱アイコンから黄色い六角柱アイコンへ）。パラメーターは特にいじりませんでしたが、寸法が重要なCAD系モデルの場合、盗用防止の意味でサイズや縦横比をわずかに狂わせておくのがトラップとして有効かもしれません(笑)。

続いて「修正」->「削減」で文字通りローポリ化します。タイプを「比率」の場合、比率を10とかにすると10%つまり、1/10まで削減するよということみたいです。プレビューをオンにしておき、許容できるギリギリまで減らします。綺麗さを追求すると盗用もしやすくなるので、形状確認が目的なら多少カクカクが見えるくらいにした方が良い気がします。

で、2026年6月現在、Fusionからは直接glTF（.glb）は書き出せないので、一旦.objでエクスポートします。

Blenderで色設定とファイル変換

Blender使うの何年かぶりで全て忘れてるので、無駄な手順とかあってもご勘弁ください。是非コメントでフォローいただけると嬉しいです。

Blenderでも直接.objを開けないので、一旦新規ファイルを開き、デフォルトで入っている立方体を消し、「ファイル」->インポート->Wabefront (.obj)から読み込みます。

座標系の違いから、へんな場所に浮かんでたり倒立してたりするので、周りを見回してオブジェクトを見つけ、右サイドバーの「トランスフォーム」で位置や回転パラメーターをいじって希望する初期位置／向きに直します。原点に寄せておく必要はないかも知れませんが念のため。

次にその横に小さなアイコンがたくさん縦に並んでいる中の一番下の「マテリアル」を選択。

Fusionで割り付けてあったテクスチャーがついてる場合は一度削除して新規作成した方がなんか上手く行く印象です。「ベースカラー」で色を変更。「メタリック」は上げると金属っぽい光沢になります。「荒さ」を半分くらいまで上げるとプラスチックっぽい質感になるとのことですがあんまりわからず。この辺り、使いこなせばもっとリアルさを追求できると思いますが、ウチは3Dプリント品なのでそこまで凝ったことはしてません。

「エクスポート」からglTF 2.0（.glb/gltf）を選んで書き出します。

WordPress/WooCommerceで活用

上でエクスポートしたglTFファイルをメディアにアップロードし、投稿者「bPlugins」の「3D Viewer」というプラグインを導入しておきます。

a. 投稿／ページ内にインラインで挿入するショートコードを作る場合

左サイドバーの「3D Viewe」から「Add New」で新規作成画面に行きます。

サイドバーにModel、Settings、Styleの垂直タブがあります。ここでは最低限の手順だけ触れます。

Modelタブの3D SourceでメディアにアップロードしておいたglTFファイルを選択。3D Poster Imageは最初に表示される。グリグリしてる時の背景にもなります。

Settingsタブで各操作要素を有効／無効化できます。

Styleタブでは、デフォルトでWidthが100%（横幅一杯）、高さが狭めなのでお好みで広げておきます。Background Color（背景色）を変更してモデル色が埋もれない色にしておくといいでしょう。

これで「公開（更新）」をクリックして、青色の「3d_viewer id=’xxxx’」というショートコードをクリックしてコピーし、挿入したい場所に貼り付ければOKです。

b. WooCommerceの商品画像に追加する場合

商品編集画面で、下の方にスクロールすると本プラグインの設定ゾーンが出現しています。

特有なのは「3D Viewer Position」です。選択肢を簡単に訳すと、

None: 表示しない
Top of the product image: 商品画像の上
Bottom of the product image: 商品画像の下
Replace Product Image with 3D: 商品画像を3Dで置き換える
Show 3D on First Image of WooCommerce Gallaery: WooCommerceギャラリーの先頭画像として3Dを表示

とでもなるでしょうか。個人的には最後のが使いやすいと思います。Top/BottomはWooCommerceテーマによってはおかしな配置になってしまいました。「Show 3D on First Image～」にして、3D Posterに元々先頭にあった画像ファイルを指定しておけば、デフォルトで従来と同じ画像が表示されつつ、右下に3Dグリグリボタンが出る、という感じで、元のレイアウトを崩さずにスマートに3Dモデル表示ができます（さりげなさ過ぎて気付かれないかもですが）。Backgroundで透明度（α値）を指定しておくと、グリグリ中にも後ろにポスター画像を透けさせることができて気に入っています。

まとめ

簡単ですが、盗用されにくい最低限の細工をしつつ（完全ではない）3Dプリントモデル表示をWordPress/WooCommerce上に貼り付ける手順です。

ちょっと工数が多いですが、様々な角度の写真を複数枚貼るよりもスッキリして、なおかつモダンな印象の販売ページになるかなと思います。Fusionから直接glTFを書き出せればなぁと思いますが、有料プラグインは結構お高いので、当面はBlenderを使います。

別に盗られても問題ないモデルであれば、.stlのままアップロードして、別の無償プラグインを使うこともできます。

WooCommerceの商品情報をREST APIで取り出す

2025年10月15日2025年10月15日 furuta コメントをする

WordPress + WooCommerceプラグインでECショップを構築しました。このブログで紹介したオリジナル3Dプリント品を販売するサイトなので、こちらのブログ記事にもショップの当該アイテムページにリンクを貼りたい、それも画像入りカード形式でカッコ良くしたい、というのがゴール。

通常はWordPress同士ならoEmbedというOGPのようなヘッダー情報があり、WordPressのGutenbergエディタにURLをペーストするだけでカード形式になってくれます。しかしなぜか今回の２サイト間では上手くいかない。

こんな感じで「このコンテンツを埋め込めませんでした。」と出てカードに展開されません。

ChatGPTに言われたとおりにApacheの設定かえたり子テーマにPHPコード書いたり二日くらい格闘しましたが解決せず。JSONのエンドポイントをブラウザで開くとレスポンスコードが200できちんと表示されるのに、curlだと401になったり。

あきらめて前から活用しているPZLinkカードというプラグインを使うことも考えたのですが、こちらでも403になって取得できない。

次にEmbedlyというWebサービスベースのプラグインを入れて無事サムネ、タイトル、概要などは出るようになったんですが、iframeで描画されるのでCSSで詳細がカスタムできない。無料プランだとサービスロゴが表示されたりというのもやや気になります。

Geminiにプラグイン書いてもらう

ChatGPTの助言も堂々巡りで疲れ切っていた時、ふと「もう同じサーバー上にあるので、MariaDB（MySQL）のID/PWを使ってPHPで直接データ取得してカードをレンダリングするプラグインを自前で作ったれ、と閃きました。するとChatGPTもセカンドオピニオンとして聞いたGeminiも技術的に可能だと返答。加えてGeminiが「それもいいけど、WordPress（というかWooCommerce）にはREST APIで記事（商品情報）のメタデータを取得する機能がるから、そっち使うのも手だよ」と提案してきました。なるほど、そんないいものが。それなら（まずないけど）将来的にサーバーを分離しても取得できます。やりたいことを読み取って最適な別解も提示してくれるGeminiさん強い。

ということで、そこからは主にGeminiを使ってショートコードプラグインを作ってみたので、ざっくり手順を記録しておきます。

利用イメージは、Gutenbergエディターのショートコードブロックに「[shop id="123"]」のように入れることでカード展開されるというスタイルです。「[shop id="123,124"]」と複数のIDを入れるとカードが連続で並ぶところまで改良してもらいました。

APIにアクセスする認証キーを発行する

まずは読み出される側（ソース）のWordPressの管理画面を開き、WooCommerceプラグインの設定画面から「高度な設定」→「REST API」を開いて、「キーを追加」で発行します。今回は商品情報を参照するのみなので、権限を「Read」にしておけば万一キーが漏洩しても情報を書き換えられないのでお勧めです。

最終的に、Consumer KeyとConsumer Secretという２つの文字列が生成されるので、どこかにコピペしてメモっておきます（再表示できません）。

curlコマンドで動作チェック

商品IDを調べる

特定の商品を参照するID番号を調べます。WooCommerceの商品一覧で赤丸の箇所に表示されるのが商品IDです。

WindowsやMacの黒画面から以下を叩きます。

curl "https://hogeshop.com/wp-json/wc/v3/products/123?consumer_key=ck_abcdef1234567890&consumer_secret=cs_fedcba0987654321"

1	curl "https://hogeshop.com/wp-json/wc/v3/products/123?consumer_key=ck_abcdef1234567890&consumer_secret=cs_fedcba0987654321"

123が商品ID、cunsumer_keyとconsumer_secretはさきほど作成したものに置き換えてください。

StatusCode:200とかJSONデータが返ってくれば成功です。黒画面だと途中までしか見られませんが、ちゃんと価格や在庫情報なども含まれています。これを読み込んでカードHTMLをレンダリングするプラグインを作っていきます。

認証キーを安全な場所（wp-config.php）に記述

プラグインのソースコードにREST API認証キーを直書きするのはセキュリティ的に危険なので、通常Web経由でアクセスできない場所にあるwp-config.php内に定義して、それをプラグインから読み出すようにします。具体的には以下の形式で記述。

// ********** WooCommerce APIの定数を定義 **********
define( 'WC_EXTERNAL_API_CONSUMER_KEY', 'ck_xxxxxxxxxxxxxxxxxxxxxxxxxxxxx' );
define( 'WC_EXTERNAL_API_CONSUMER_SECRET', 'cs_yyyyyyyyyyyyyyyyyyyyyyyyyyyyy' );
define( 'WC_EXTERNAL_API_HOSTNAME', 'https://hogeshop.com' );
// *******************************************************

/* これ以上の編集は必要ありません ! WordPress の力を信じましょう。 */　←これより手前に書く

// ********** WooCommerce APIの定数を定義 **********

define( 'WC_EXTERNAL_API_CONSUMER_KEY', 'ck_xxxxxxxxxxxxxxxxxxxxxxxxxxxxx' );

define( 'WC_EXTERNAL_API_CONSUMER_SECRET', 'cs_yyyyyyyyyyyyyyyyyyyyyyyyyyyyy' );

define( 'WC_EXTERNAL_API_HOSTNAME', 'https://hogeshop.com' );

// *******************************************************

/* これ以上の編集は必要ありません ! WordPress の力を信じましょう。 */　←これより手前に書く

wp-config.phpはたぶんWordPress上からは読み書きできないので、シェルでサーバーにログインするか、FTP/SFPTで一旦ダウンロードして編集します。書き込み権限も削ってあると思うので、一時的にchmod +wする必要もあるでしょう。編集が終わったら-wも忘れずに。

WC_EXTERNAL_API_HOSTNAMEは便宜上ホスト名としていますが、もしWordPressがサブディレクトリにインストールされていたら、そのパスも書く必要があると思います。

プラグインのフォルダとファイルを作成

/wp-content/plugin/フォルダ下にshop-item-linkというフォルダを作ります。これがプラグイン名になります。さらに同じ名前でphpファイルshop-item-link.phpという名前で以下のコードをコピペして保存します。

<?php
/**
 * Plugin Name: Shop Item Link
 * Description: 別のWooCommerceストアから商品情報を取得し、ショートコードで表示します。(キャッシュ無効化済み)
 * Version: 1.0
 * Author: Kazuyoshi Furuta
 */

// 直接ファイルにアクセスされた場合の保護
if ( ! defined( 'ABSPATH' ) ) {
    exit;
}

// ----------------------------------------------------
// 1. ショートコードの登録
// ----------------------------------------------------
add_shortcode( 'shop', 'shop_item_link_product_shortcode' );

// ----------------------------------------------------
// 2. ショートコードのコールバック関数
// ----------------------------------------------------
function shop_item_link_product_shortcode( $atts ) {

    // ショートコード属性 (id属性にカンマ区切りの文字列を想定)
    $atts = shortcode_atts( array(
        'id' => '', // 商品ID (カンマ区切り文字列)
    ), $atts, 'woo_product' );

    $ids_string = trim( $atts['id'] );

    // IDが空の場合はエラー
    if ( empty( $ids_string ) ) {
        return '<p style="color: red;">[woo_product] エラー: IDを指定してください。</p>';
    }

    // カンマ区切り文字列を配列に変換し、数値のみを抽出
    $product_ids = array_filter( array_map( 'intval', explode( ',', $ids_string ) ) );

    if ( empty( $product_ids ) ) {
        return '<p style="color: red;">[woo_product] エラー: 有効な商品IDが指定されていません。</p>';
    }

    // ----------------------------------------------------
    // 3. 認証情報とURLの取得 (wp-config.phpから)
    // ----------------------------------------------------
    $consumer_key = defined( 'WC_EXTERNAL_API_CONSUMER_KEY' ) ? WC_EXTERNAL_API_CONSUMER_KEY : '';
    $consumer_secret = defined( 'WC_EXTERNAL_API_CONSUMER_SECRET' ) ? WC_EXTERNAL_API_CONSUMER_SECRET : '';
    $site_url = defined( 'WC_EXTERNAL_API_HOSTNAME' ) ? WC_EXTERNAL_API_HOSTNAME : '';

    // 認証情報・ホスト名の欠落チェック
    if ( empty( $consumer_key ) || empty( $consumer_secret ) || empty( $site_url ) ) {
        // ... 致命的エラー出力 (変更なし) ...
        $missing = [];
        if ( empty($consumer_key) ) $missing[] = 'Consumer Key';
        if ( empty($consumer_secret) ) $missing[] = 'Consumer Secret';
        if ( empty($site_url) ) $missing[] = 'Hostname';

        $error_msg = '【致命的エラー】wp-config.phpで以下の定数が未定義です: ' . implode(', ', $missing);
        error_log( $error_msg );
        return '<div style="background-color: #ffcccc; padding: 10px; border: 1px solid red;">' . esc_html($error_m\
sg) . '</div>';

    // ----------------------------------------------------
    // 4. 各IDを処理し、HTML出力を結合
    // ----------------------------------------------------
    $final_output = '<h2>こちらで注文できます</h2>';

    foreach ( $product_ids as $product_id ) {
        // APIからデータを取得し、HTMLを生成するメイン処理
        $final_output .= shop_item_link_fetch_and_render( $product_id, $site_url, $consumer_key, $consumer_secret )\
;
    }

    return $final_output;
}

/**
 * 個別の商品情報をAPIから取得し、HTMLをレンダリングする関数
 * この関数は、ショートコードのループから呼ばれます。
 */
function shop_item_link_fetch_and_render( $product_id, $site_url, $consumer_key, $consumer_secret ) {

    // ホスト名末尾のスラッシュを削除し、エンドポイントを構築
    $url = rtrim($site_url, '/') . "/wp-json/wc/v3/products/{$product_id}";
    $authorization = base64_encode( "{$consumer_key}:{$consumer_secret}" );

    $response = wp_remote_get( $url, array(
        'headers' => array(
            'Authorization' => 'Basic ' . $authorization,
        ),
        'timeout' => 15,
    ) );

    // ----------------------------------------------------
    // APIレスポンスのチェック (デバッグ出力)
    // ----------------------------------------------------
    if ( is_wp_error( $response ) ) {
        $error_message = $response->get_error_message();
        error_log( 'API Request WP_Error: ' . $error_message . ' for ID: ' . $product_id );
        return '<div style="background-color: #ffcc99; padding: 10px; border: 1px solid orange;">【API通信エラー】I\
D ' . $product_id . '、エラー: ' . esc_html($error_message) . '</div>';
    }

    $status_code = wp_remote_retrieve_response_code( $response );
    $body = wp_remote_retrieve_body( $response );

    if ( $status_code < 200 || $status_code >= 300 ) {
        // ステータスコードエラー (401:認証失敗, 404:商品見つからずなど)
        error_log( 'API Response Code Error: ' . $status_code . '. Product ID: ' . $product_id . '. Body: ' . $body\
 );

        $debug_output = '<div style="background-color: #ffffcc; padding: 10px; border: 1px solid #c00;">';
        $debug_output .= '【APIステータスエラー】商品ID ' . $product_id . ' の取得失敗 (Status Code: ' . $status_co\
de . ')<br>';

        $error_obj = json_decode($body);
        if (isset($error_obj->message)) {
            $debug_output .= '詳細メッセージ: ' . esc_html($error_obj->message);
        } else {
            $debug_output .= 'サーバー応答ボディの抜粋: ' . esc_html(substr($body, 0, 100)) . '...';
        }
        $debug_output .= '</div>';
        return $debug_output;
    }

    $product_data = json_decode( $body );

    // JSONデコードの失敗をチェック
    if ( json_last_error() !== JSON_ERROR_NONE ) {
        error_log( 'JSON Decode Error: ' . json_last_error_msg() . '. ID: ' . $product_id . '. Body: ' . $body );
        return '<div style="background-color: #ffcccc; padding: 10px; border: 1px solid red;">【データエラー】ID ' \
. $product_id . ' の取得データの解析に失敗しました。</div>';
    }

    if ( ! is_object( $product_data ) ) {
        return '<p style="color: red;">指定された商品ID ' . $product_id . ' の商品が見つかりません。</p>';
    }

    // ----------------------------------------------------
    // HTMLレンダリング
    // ----------------------------------------------------

    $name = esc_html( $product_data->name );
    $price = number_format( floatval( $product_data->price ) );
    $permalink = esc_url( $product_data->permalink );
    $image_url = ! empty( $product_data->images ) ? esc_url( $product_data->images[0]->src ) : '';
    $stock_status = esc_html( $product_data->stock_status );

    ob_start();
    ?>
    <a href="<?php echo $permalink; ?>" target="_blank" style="text-decoration: none; color: #0073aa;">
    <div class="custom-woo-product product-id-<?php echo $product_id; ?>" style="border: 1px solid #ddd; padding: 1\
5px; margin: 15px 0; background-color:aliceblue;">
        <h3 style="font-size:1.5em;"><?php echo $name; ?></h3>
        <?php if ( $image_url ): ?>
            <div class="product-image" style="margin-bottom: 10px;">
                <img src="<?php echo $image_url; ?>" alt="<?php echo $name; ?>" loading="lazy" style="max-width: 80\
%; max-height: 300px;height: auto;">
            </div>
        <?php endif; ?>
        <div class="product-details">
            <p class="product-price" style="font-weight: bold; font-size: 1.2em;">参考価格: ¥<?php echo $price; ?><\
span style="color:#bbb; font-size:0.8em;">（別途消費税、送料がかかります）</span></p>
            <p class="product-stock <?php echo $stock_status; ?>" style="color: <?php echo ( $stock_status === 'ins\
tock' ? 'green' : '#999' ); ?>;">
                在庫: <?php echo ( $stock_status === 'instock' ? 'あり' : 'なし' ); ?>
            </p>
        </div>
    </div>
    </a>
    <?php
    return ob_get_clean();
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

<?php

/**

* Plugin Name: Shop Item Link

* Description: 別のWooCommerceストアから商品情報を取得し、ショートコードで表示します。(キャッシュ無効化済み)

* Version: 1.0

* Author: Kazuyoshi Furuta

// 直接ファイルにアクセスされた場合の保護

if ( ! defined( 'ABSPATH' ) ) {

exit;

}

// ----------------------------------------------------

// 1. ショートコードの登録

// ----------------------------------------------------

add_shortcode( 'shop', 'shop_item_link_product_shortcode' );

// ----------------------------------------------------

// 2. ショートコードのコールバック関数

// ----------------------------------------------------

function shop_item_link_product_shortcode( $atts ) {

// ショートコード属性 (id属性にカンマ区切りの文字列を想定)

$atts = shortcode_atts( array(

'id' => '', // 商品ID (カンマ区切り文字列)

), $atts, 'woo_product' );

$ids_string = trim( $atts['id'] );

// IDが空の場合はエラー

if ( empty( $ids_string ) ) {

return '<p style="color: red;">[woo_product] エラー: IDを指定してください。</p>';

}

// カンマ区切り文字列を配列に変換し、数値のみを抽出

$product_ids = array_filter( array_map( 'intval', explode( ',', $ids_string ) ) );

if ( empty( $product_ids ) ) {

return '<p style="color: red;">[woo_product] エラー: 有効な商品IDが指定されていません。</p>';

}

// ----------------------------------------------------

// 3. 認証情報とURLの取得 (wp-config.phpから)

// ----------------------------------------------------

$consumer_key = defined( 'WC_EXTERNAL_API_CONSUMER_KEY' ) ? WC_EXTERNAL_API_CONSUMER_KEY : '';

$consumer_secret = defined( 'WC_EXTERNAL_API_CONSUMER_SECRET' ) ? WC_EXTERNAL_API_CONSUMER_SECRET : '';

$site_url = defined( 'WC_EXTERNAL_API_HOSTNAME' ) ? WC_EXTERNAL_API_HOSTNAME : '';

// 認証情報・ホスト名の欠落チェック

if ( empty( $consumer_key ) || empty( $consumer_secret ) || empty( $site_url ) ) {

// ... 致命的エラー出力 (変更なし) ...

$missing = [];

if ( empty($consumer_key) ) $missing[] = 'Consumer Key';

if ( empty($consumer_secret) ) $missing[] = 'Consumer Secret';

if ( empty($site_url) ) $missing[] = 'Hostname';

$error_msg = '【致命的エラー】wp-config.phpで以下の定数が未定義です: ' . implode(', ', $missing);

error_log( $error_msg );

return '<div style="background-color: #ffcccc; padding: 10px; border: 1px solid red;">' . esc_html($error_m\

sg) . '</div>';

// ----------------------------------------------------

// 4. 各IDを処理し、HTML出力を結合

// ----------------------------------------------------

$final_output = '<h2>こちらで注文できます</h2>';

foreach ( $product_ids as $product_id ) {

// APIからデータを取得し、HTMLを生成するメイン処理

$final_output .= shop_item_link_fetch_and_render( $product_id, $site_url, $consumer_key, $consumer_secret )\

;

}

return $final_output;

}

/**

* 個別の商品情報をAPIから取得し、HTMLをレンダリングする関数

* この関数は、ショートコードのループから呼ばれます。

function shop_item_link_fetch_and_render( $product_id, $site_url, $consumer_key, $consumer_secret ) {

// ホスト名末尾のスラッシュを削除し、エンドポイントを構築

$url = rtrim($site_url, '/') . "/wp-json/wc/v3/products/{$product_id}";

$authorization = base64_encode( "{$consumer_key}:{$consumer_secret}" );

$response = wp_remote_get( $url, array(

'headers' => array(

'Authorization' => 'Basic ' . $authorization,

'timeout' => 15,

) );

// ----------------------------------------------------

// APIレスポンスのチェック (デバッグ出力)

// ----------------------------------------------------

if ( is_wp_error( $response ) ) {

$error_message = $response->get_error_message();

error_log( 'API Request WP_Error: ' . $error_message . ' for ID: ' . $product_id );

return '<div style="background-color: #ffcc99; padding: 10px; border: 1px solid orange;">【API通信エラー】I\

D ' . $product_id . '、エラー: ' . esc_html($error_message) . '</div>';

}

$status_code = wp_remote_retrieve_response_code( $response );

$body = wp_remote_retrieve_body( $response );

if ( $status_code < 200 || $status_code >= 300 ) {

// ステータスコードエラー (401:認証失敗, 404:商品見つからずなど)

error_log( 'API Response Code Error: ' . $status_code . '. Product ID: ' . $product_id . '. Body: ' . $body\

);

$debug_output = '<div style="background-color: #ffffcc; padding: 10px; border: 1px solid #c00;">';

$debug_output .= '【APIステータスエラー】商品ID ' . $product_id . ' の取得失敗 (Status Code: ' . $status_co\

de . ')<br>';

$error_obj = json_decode($body);

if (isset($error_obj->message)) {

$debug_output .= '詳細メッセージ: ' . esc_html($error_obj->message);

} else {

$debug_output .= 'サーバー応答ボディの抜粋: ' . esc_html(substr($body, 0, 100)) . '...';

}

$debug_output .= '</div>';

return $debug_output;

}

$product_data = json_decode( $body );

// JSONデコードの失敗をチェック

if ( json_last_error() !== JSON_ERROR_NONE ) {

error_log( 'JSON Decode Error: ' . json_last_error_msg() . '. ID: ' . $product_id . '. Body: ' . $body );

return '<div style="background-color: #ffcccc; padding: 10px; border: 1px solid red;">【データエラー】ID ' \

. $product_id . ' の取得データの解析に失敗しました。</div>';

}

if ( ! is_object( $product_data ) ) {

return '<p style="color: red;">指定された商品ID ' . $product_id . ' の商品が見つかりません。</p>';

}

// ----------------------------------------------------

// HTMLレンダリング

// ----------------------------------------------------

$name = esc_html( $product_data->name );

$price = number_format( floatval( $product_data->price ) );

$permalink = esc_url( $product_data->permalink );

$image_url = ! empty( $product_data->images ) ? esc_url( $product_data->images[0]->src ) : '';

$stock_status = esc_html( $product_data->stock_status );

ob_start();

<a href="<?php echo $permalink; ?>" target="_blank" style="text-decoration: none; color: #0073aa;">

<div class="custom-woo-product product-id-<?php echo $product_id; ?>" style="border: 1px solid #ddd; padding: 1\

5px; margin: 15px 0; background-color:aliceblue;">

<?php if ( $image_url ): ?>

<img src="<?php echo $image_url; ?>" alt="<?php echo $name; ?>" loading="lazy" style="max-width: 80\

%; max-height: 300px;height: auto;">

</div>

<?php endif; ?>

<p class="product-price" style="font-weight: bold; font-size: 1.2em;">参考価格: ¥<?php echo $price; ?><\

span style="color:#bbb; font-size:0.8em;">（別途消費税、送料がかかります）</span></p>

<p class="product-stock <?php echo $stock_status; ?>" style="color: <?php echo ( $stock_status === 'ins\

tock' ? 'green' : '#999' ); ?>;">

在庫: <?php echo ( $stock_status === 'instock' ? 'あり' : 'なし' ); ?>

</p>

</div>

</a>

<?php

return ob_get_clean();

}

HTMLレンダリングブロックは適宜書き換えてください。

編集ポイント

6行目のAuthorは適当に自分の名前に書き換えます。

17行目の第一引数の「shop」が実際に使用するショートコードになります。

46～48行目がwp-config.phpに定義した認証キーとホストネーム情報を読み込むところです。大文字部分を1字たりとも相違なくあちらと揃える必要があります。

66行目でカードよりも前に1回だけ出力したいHTML（この場合は見出し）を定義しています。

151～170行目あたりがカードのHTMLです。面倒くさいのでスタイルシートも直書きしてますが、カードを繰り返したくさん出力するならきちんとCSSファイルで定義するべきでしょう。

また元々Geminiが生成したコードでは取得内容を1時間キャッシュする仕様だったんですが、ウチの場合は必要ないし、むしろ価格や在庫はリアルタイムに反映してほしいので無効化してあります。ところどころにその残骸があるかも。

ともあれ、これで、[shop id="998,999"]などと書くだけで、

こちらで注文できます

TOYOTA車手動光軸調整ダイヤル用空きスロット→タイプDスイッチアダプター

参考価格: ¥1,800（別途消費税、送料がかかります）

在庫: あり

セキュリティカメラAnker Eufy SoloCam S340/4G LTE Cam S340用雨樋／ポールマウント

参考価格: ¥2,273（別途消費税、送料がかかります）

在庫: なし

が出るようになりました。

KUSANAGI + WooCommerceのドハマリポイント覚え書き

2025年10月15日2025年10月15日 furuta コメントをする

WordPress + WooCommerceで自家ECサイトを立ち上げた際、どうしても一部の文言が英語表記のまま日本語化できない問題でハマりました。

WordPressのプラグインは多言語化の仕組みをもっており、多くのプラグインはそれを通して表示する文言を言語ごとに切り替えています。しかしそれがどうも上手く機能しない。WooCommerceの決済や配送設定を日本にあわせてカスタマイズするJapanized for WooCommerceも入れており、どの文言はどちらのリソースで設定されてるかともわからず、ChatGPTにも聞きつつ、色々なところをいじりまくした。

先に結論

うちのWordPressは高速化プラットフォームのKUSANAGI9が導入されています。結論をいうと、その一部である「翻訳アクセラレーター」という機能が原因でした。これをオフにしたら英語だったところがあっさり日本語になりましたとさ。

途中したこと→結果色々カスタマイズできてよかった

以下は結果として原因の根本解決にはなりませんでしたが、結果的に自分で文言を修正したいところがあり（お買い物カゴ→カートなど）、そのための仕組みの理解が深まったので結果オーライかなと思っています。

文言修正方法その１ Loco Translate

まず前述のローカライズファイルで定義されている文言をいじる方法があります。多くのソフトでは.po/.moという拡張子の言語ファイルを使っています。.poファイルに原語（厳密にはどこで使われるか定義するID）と翻訳後のテキストの対応データが入っており、それをコンパイルしたのが.moです。例えばWooCommerceの場合、/wp-content/lanmguage/pluginsにwoocommerce-ja.po/.moがあります。これを直接編集してもいいですが、プラグインの更新などで上書きされてしまうので、Loco Translateというプラグインをインストールして、WordPress上から編集した方がよいです。GUIでプラグインやテーマがもつ言語リソースをリストしてくれて、検索して書き換えることができます。POEditというPC向け編集ツールがありますが、それに近い感覚のUIがWordPress上で使えます。

で、これでみると翻訳率は100%とかになってるのに、公開される画面では日本語にならない。試しに編集してみても反映されない。最新の翻訳定義ファイルを同期すると未翻訳の文言も出てきて、一部はそれで反映もされますが、とにかく英語箇所がめちゃくちゃ残る!

ChatGPTにはKUSANAGIやPHP-fpmのキャッシュの可能性を散々指摘されるのでフラッシュしてみるけどダメ。また最近のWordPressは上記フォルダにある.jsonファイル（たくさんありすぎてどこになにがあるかは追跡不能）を使ってるから.poファイルいじってもダメ、みたいなことも言われたい。

結果として先に書いたKUSANAGIの翻訳アクセラレーターを無効にしたらOKだったわけですが、結果としてこのLOCO Translateはめちゃ重宝してます。翻訳後で気に入らない箇所の修正が手軽に行え、プラグインの更新でリセットされないよう管理もできます。先の「お買い物かご」を「カート」に言い換えたり、文章もなんとなくしっくりこない箇所を直したりといったことに使えます。翻訳のためのプラグインではあるんですが、表記カスタマイズツールとして必須プラグインでしょう。

文言修正方法その１ gettext

それでもそもそも.poファイル（の元の.potファイル）に定義されておらず、PHPコードにハードコーディングされた文字列などがあったりします。そいう時は自分のテーマ（子テーマ）の中のfunctions.phpにgettextというフィルターを使ったコードを書くことで強制的に表示文言を置換することができます。詳しい書き方はこちらなどが参考になると思います。

https://tech.kurojica.com/archives/19876

翻訳アクセラレーターが原因と判明するまで、あらゆるところをせっせとこれで書き換えていましたｗ。でも最終的にはきちんと標準の日本語翻訳が当たって、一部の不満箇所をLoco Translateで修正、で済んだのでgettextを使った置き換えはすべて削除しました。盛大に遠回りしましたが、パフォーマンス的には無駄も多いと思うので排除できて良かったです。まぁ非常手段としてメモしておきます。

まとめ

ということで、もしKUSANAGI環境でWooCommerce（や他のプラグイン）の英語表記が残る問題に直面したら翻訳アクセラレーターを切ってみることをお勧めします。

またLoco Translateは日本語化された箇所のカスタマイズにも超絶便利なので是非活用してみてください。

STL形式よりもglTF 2.0形式

WordPress用プラグイン bPlugins 3D Viewerを選択

こちらで注文できます

Tzパ－プルセーバー＆消棒レスキュー ドアポケットホルダー（新型クラウン用）

ざっくり手順メモ

Fusionで精度を落としたメッシュを作る

Blenderで色設定とファイル変換

WordPress/WooCommerceで活用

a. 投稿／ページ内にインラインで挿入するショートコードを作る場合

まとめ

Geminiにプラグイン書いてもらう

APIにアクセスする認証キーを発行する

curlコマンドで動作チェック

商品IDを調べる

認証キーを安全な場所（wp-config.php）に記述

プラグインのフォルダとファイルを作成

編集ポイント

こちらで注文できます

TOYOTA車手動光軸調整ダイヤル用空きスロット→タイプDスイッチアダプター

セキュリティカメラAnker Eufy SoloCam S340/4G LTE Cam S340用雨樋／ポールマウント

先に結論

途中したこと→結果色々カスタマイズできてよかった

文言修正方法その１ Loco Translate

文言修正方法その１ gettext

まとめ

Tzパ－プルセーバー＆消棒レスキュードアポケットホルダー（新型クラウン用）