Print Invoice & Delivery Notes for WooCommerceの文字化け対策

WordPress + WooCommerce環境で、注文/発送完了メールに自動的に領収書や納品書PDFを添付する表記プラグインPrint Invoice & Delivery Notes for WooCommerceですが、Edgeでは表示できるものの、AcrobatやiOS/macOSの「プレビュー」では文字化けしてしまいます。

Acrobatではこうしたエラーも。

■Step1. 全化けに対処

どうもフォントの埋込みに失敗しているっぽい。このプラグインには「WooCommerce」→「Print Invoices & Delivery Notes」→「Settings」→「Font Setting」にフォントをアップロードする項目があります。

これをいつどうやって設定したか覚えていませんが、こうなっていました。

NotoSansJP_v5.ttfと同_boldがアップされている状態。これを改めて「Download Noto Sans JP→」リンクからGoogle Fontsにとんでダウンロード。解凍すると以下のファイル群が出てきます。

_v5がついておらず、-Regularがついています。ファイルサイズも1/3くらい。v5をどこから拾ってきたアップしたのか覚えていませんが、とりあえずv5を一度削除(Remove)して、RegularとBoldをアップロード。

これで、大半の文字化けが治りました。

Step2.「領収書」見出しとショップ名の文字化け対策

しかし、まだ完璧とはいかず、先頭部分になにやら「NO GLYPH」のような表示が残ります。

HTMLプレビューでは上が「領収書」、二段目が店名のようです。これがPDF時点ではこうなってしまいます。

生成されたPDFをpdfontsコマンドで覗いてみると、

先程の、2フォントに加え、Interという欧文フォントが内部で使用されていることがわかりました。しかし、プラグインの設定画面にはこの第三のフォントを上書きする欄がありません。

そこでClaudeさんに相談して提案されたのが、HTMLプレビュー時点の「領収書」タイトルと店名のスタイルシートを上書きする方法。開発者モードでそれぞれのクラスを調べると、.wcdn-titleと.wcdn-shop-nameでした。これをちょちょいと上書きしてここのNotoSansJPを使用するように書き換えるPHPコードをfunctions.phpに書いたら、見事最後の文字化けも解消しました。

将来的にはプラグイン自体が修正されて、第三フォントの上書き設定項目が追加されるかも知れませんが、やってることは既存の2フォントへのフォールバックで、きちんと極太ウェイト(600)にもなっているので、フィルターを消し忘れても実害はないかなと思います。

Home Assistantでスマートプラグの消費電力値をリアルタイムで取得する(M5 StackによるBluetoothプロキシを導入)

そういえば記事にしてなかった気がしますが、最近Home Assistantを導入しています。これは各種IoTホームデバイスを一元管理できるオープンソースのWebプラットフォームです(スマホアプリもある)。例えば、我が家にはSwitchBot、Sesame、NatureRemoなどのスマート家電制御アイテムが混在しており、他にも3Dプリンターやセキュリティカメラ、家電などIoTデバイスが無数にあります。通常はそれぞれに用意された専用アプリを使って操作したり状況を読み取ったりするわけですが、Home Assistantを使えばそれを一元管理し、統合ダッシュボード上で操作・監視できるというわけです。同様のシステムのHome Bridgeがありましたが、それの令和版といったところでしょうか。

我が家ではあまり活用できてなかったMac miniサーバーのDockerコンテナ版を動かしています。専用サーバー製品Home Assistant Greenのようなワンボードマイコンを使った専用デバイスもあります。

■今回のミッション

今回のミッションは3Dプリンターやレーザー加工機、フィラメントドライヤーなどがひしめく一角の電力消費を正確に把握したい。可能ならばヤバい時にアラートを出したい、というものです。我が家は慢性的なコンセント不足で、タコ足配線が常態化しています。これらの機器も別々のコンセントから取れるといいのですが他にもPCやらサーバーやらNASやらなんやらで全く余裕がなく単一のコンセントに、X1-Carbon、AMS、AMS HT、SANLU AMS Heater、XTOOL F2、レーザープリンター、テスコムコンベクションオーブンなどがぶらさがっています。これら全てを同時に使うことは希ですが、うっかり1,500Wを超えてしまうとよろしくないので、肌感覚としてどれくらいに消費電力なのかを監視したり、あわよくば1,500Wに近づいたらアラートを出すみたいなこと実現したいと考えました。

SwithBotスマートプラグをHAに統合してみたが…

今回使用したのはこれ。おそらく日本でいちばん普及しているスマートプラグです。

SwitchBotデバイスはほとんどHAにも対応しているので、登録自体はすんなり完了。オンオフ制御はもちろん、消費電力や電圧、電流量もきちんと読み取りできます。しかし、この数値の更新がリアルタイムではなかった…

どうもこれはSwitchBotクラウドを経由した同期だから更新間隔が5分とか結構空いてしまうと判明。これだけでもおおよその勘をを鍛えるには良いですがアラートのソースとして使うには少し不安。あと、SwitchBotアプリで消費電力を確認するには、ダッシュボードで当該デバイスを選択タップするんですが、その右上に電源ボタンがあるのが恐すぎ問題w

造形中の消費電力をチェックしようとしてうっかり電源を落としてしまう、なんて笑えません。

どうもHAのSwitchBotコネクターにBluetooth経由のアダプターが存在することに気付きました。Geminiさんによるとこっちならばクラウド(WAN)を経由しないのでほぼリアルタイムで数値の更新が望めるとのこと。

macOS + Docker環境ではBluetoothデバイスを認識できない…

しかし実際にSwitchBot Bluetoothコネクターでセッテイングをしようとしてもデバイスが発見できない。どうもmacOSホストのDockerだとMac内蔵のBleutoothデバイスを仮想化してDockerコンテナから使用することができないとか。そういえばSesameなどのMatterデバイスの登録も成功してないのはこれか…

回避策としては、

  1. USB BluetoothアダプターをつないでDockerにバイパスする
  2. ESP32デバイスでBluetooth->Wi-Fiプロキシを建てる
  3. 他社のローカル通信でリアルタイム更新ができるスマートプラグに買い換える

などが挙がりました。その中で興味がわいたのは2です。ESP32はWi-Fi/Bluetoothも使えるワンボードマイコンです。ラズパイをもっと簡素化したようなものと捉えてもらえば良いでしょう。これを使って、こいつがやりとりしたBluetooth信号をWi-Fiに載せてHAサーバーに中継できる模様。しかも単一のHAサーバーに手足のように複数のデバイスを統合できるので、他階のBluetooth電波が届かない場所にあるスマートデバイスもHAに直接参加させられる可能性があります(例えば玄関のSesameなど)。

とりあえずこれを1セット用意して実験してみることに。ESP32互換ボードはたくさんありますが、とりあえずシェル(ケース)がついていてUSB-C給電仕様で、きちんと国内企業が技適を通しているもの、ということで、こちらのM5Stack ATOM Liteをチョイス。

想像より小さくてテンション上がります。SDカードよりちょっと小さいフットプリント。天面と左側面にボタン。

背面は4ピンと5ピンのピンヘッダー、USB端子と同じ面にも4ピンのカプラー、色々な制御に使えそうです。

今回は全く使わないんですが、ラズパイが高くなってしまった今、どんな遊び方ができるのかまた探っていきたいです。

■セットアップ

接続しようとしているMacにUSBケーブルでM5stackを接続(通電してランプが点灯します)。

ESPHome公式のこの自動セットアップページを開きます(ChromeかEdge必須。Safariは非対応)。「I want to create a:」というラジオボタンで「Bluetooth proxy」を選択。下にセットアップする機材の選択肢がでるので、「Generic ESP32」を選択して「Connect」

このようなダイアログが出るので、M5stackを選択。

「Install esphome.bluetooth-proxy」を選択

確認ダイアログで「Install」を選択

そのままファームウェアを書き込んでくれます。すご!

インストールが終わるとWi-Fi設定に進む。「Network」に近所に飛んでるSSIDがリストされるので自宅のものを選択肢、パスワードを入力して「Connect」

自宅Wi-Fiにつながると成功メッセージとともに「Add to Home Assistant」の項目が出現するので選択

おまえんとこのHAのURLを入れろ、と言われるので入力してSave

HAダッシュボードの統合画面が開き、「ESPHomeを設定しますか?」と聞かれるのでOK

しかしここでハマる。IPアドレスとポート番号を入力するダイアログが出るも一瞬で消えてしまう。何度やっても同じ。手動でESPHomeの追加をすると、こうなるけど、前の画面に戻っても降られたIPアドレスが不明。

ログ画面でIPアドレスを調べて手入力。あとで変わっても困るので、ルーター側でそのIPアドレスをM5Stackに固定で割り振る様にしておきました。

これで接続成功こんな感じで発見でしたSwitchbotのBluetooth電波がずらっと出ます。

宅内にスマートプラグ(Plug Mini(JP)は複数ありますが、続く()内の4桁英数字がMACアドレス末尾4桁なので、SwitchBotアプリで目的のプラグのMACアドレス(Wi-FiもBluetoothも下四桁は同じ)で照合。

これで無事クラウド経由とは別のBluetoothデバイスとして追加されたので、ダッシュボードのグラフのソースを切り替え。

Bluetooth経由であれば1fpsかそれ以上の更新頻度で数値が切り替わっていきます。下の動画はレーザープリンターでラベル用紙1枚印刷した瞬間のものです。

なんでもかんでもBluetooth経由にしてリアルタイム通信する必要はないので、当面はこのクラフト機器のプラグだけ登録しましたが、これは楽しいですね。

ミッションコンプリート!

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

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パ-プルセーバー&消棒レスキュー ドアポケットホルダー(新型クラウン用)

Tzパ-プルセーバー&消棒レスキュー ドアポケットホルダー(新型クラウン用)

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

在庫: なし

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

ざっくり手順メモ

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のままアップロードして、別の無償プラグインを使うこともできます。

サーバーダウン時にCloudFlare側でメンテナンス中表示を出す

先日、VPSサーバーをレンタルしているConoHaでストレージ障害が出てサーバーがダウンしました。障害としては「ストレージのパフォーマンスが落ちる」というものでしたが、Kernelがエラーを吐いており、ログも保存できないレベルだったので緊急シャットダウンしてイメージコピーを開始。しかしその後で公式から先の障害が発生しているとのアナウンス。ストレージの性能が落ちてるので延々イメージ作成が終わらないしコントロールパネルから中断もできないという状態。最初からアナウンスを目にしていれば下手にシャットダウン/イメージバックアップを取らず、遅いまま運用していた方がマシだったんですが手遅れ。サーバーを落とした状態のまま再起動もままならないという状態で丸一日近くハマっておりました。

今はショップもあるのでなんらかの方法で「障害メンテナンス中」であることを告知したいなとあがいてみました。

CloudflareのDNS経由だったことが幸い

Cloudflare(クラウドフレア)は世界的なCDN(Content Delivery Network)サービスです。世界的に分散したキャッシュサーバーに画像などをキャッシュして、世界各地からのアクセスに対して高速化を図ります。しかも無料プランでも相当なことができる有り難いサービスです。キャッシングだけでなくCloudflare Tunnelというサービスで自宅などのIPアドレスを隠蔽したままサーバー公開ができたりするので、元々利用していました。本記事ではアカウント作成や基本設定などについては割愛します。do-gugan.comのDNSレコードはCloudflare管理下にあった前提となります。

DNSはCloudflareでホストされているのでこちらのAレコードやCNAMEレコードを編集して一次的に自宅のWebサーバーに振り分けて「メンテナンス中」ページを出そうかと思ってGemi兄に相談したところ、Cloudflare Workers(以下Workers)という機能を使えば自宅Webサーバーを使わずともCloudflare完結で簡単なHTMLページの表示ができるということなのでチャレンジしてみました。今後サーバーが落ちたらこの記事を自分で参照することはできませんが(笑)、誰かの役に立てばとメモを残しておきます。

Cloudflare Workersを設定する

Workersは本来WebアプリをCloudflare上にホスティングしてもらうサービスです。今回はここにペラ1枚のメンテナンス中お知らせページhtmlを作成し、対象ドメインの任意のURL(ワイルドカード指定可)アクセスをWorker上のURLに振り向ける、というものです。

Workerページの作成

ダッシュボードにログイン後、「コンピュート」セクションにある「Workers & Pages」に行き、「アプリケーションを作成する」を選択します。

次にページ作成手段の選択が出るので、「Hello Worldを開始する」を選びます。意外ですがような最低限の空ページを作る感じです。

こんな画面になるので、「morning-dust-158e」のように適当な名前がついているので、自分のわかりやすい名前に変えます(かえなくてもOK)。この画面では下のファイル内容は編集できないので、一旦そのまま「デプロイ」をクリックして先に進みます。

すると作成したWorkerの詳細ページに遷移するので、右上の「コードを編集する」をクリックしてエディター画面に行きます。

エディター画面はこんな感じ。ソースを書き換え、右のプレビューペインのリロードボタン(赤丸)をクリックするとレンダリングされたページが表示されます。

今回、左に入っている内容を全て消し、Geminiが生成した以下のようなコードに置き換えます(詳細の文言は適当に書き換えてください)。

コードを書き換えた状態

この状態で「デプロイ」をして公開ページを更新します。これで代替表示ページは完成です。

ルート設定

特定のURLアクセスをこのWorkerページにリダイレクトする設定は、全然違う画面から行います。一旦アカウントトップに戻り、ドメイン名ウィジェットから目的のドメインをクリック。左サイドバーから「Workerルート」を選び、「ルートを追加」をクリックします。

するとこんなダイアログが出ます。項目は2つだけ。

ルート

例えば、「do-gugan.com」ドメインの全てのアクセスをリダイレクトする場合は「do-gugan.com/*」とします。

「shop.do-gugan.com」というホストのみならば「shop.do-gugan.com/*」、このブログのみなら「do-gugan.com/~furuta/*」という感じで、適宜ワイルドカード(*)を組み合わせて指定します。

Worker

プルダウンでさっき作ったWorker名が出てくるので選ぶだけです。

あとは「保存」すると反映されると思います。されない場合は、DNSレコード設定で、プロキシが有効(オレンジ雲)になっているか確認します。ここがオフ(グレー雲)だとCloudflareは素通しというか生のIPアドレスを返してしまうので、Workerなどの全ての機能が反映されません。

メンテナンスが終わってリダイレクトを無効にしたい時は「Workerルート」のトップページに行って、対象のWorkerルートの横の脇にある削除ボタンで消します。

まとめ

サーバーがダウンしている時、振り分け用のサブサーバーがない時、CloudflareでDNSをホストしていれば簡単に代理ページを表示できました。

Cloudflareは無料で画像やJavaScript、CSSなどの静的ファイルをキャッシュして高速化してくれたり、SSL証明書管理が自動化されたり、自宅サーバーのIPアドレスを隠蔽して公開できたり、80/443番以外しか公開できない自宅プロバイダのWebサーバーを別ホスト名で公開できたりと自宅鯖公開勢に嬉しい機能盛りだくさんなので是非検討してみてください。

以下、サービス名がだいぶ代わってしまいましたが、過去記事です。

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

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

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

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

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という2つの文字列が生成されるので、どこかにコピペしてメモっておきます(再表示できません)。

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

商品IDを調べる

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

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

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

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

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

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

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という名前で以下のコードをコピペして保存します。

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スイッチアダプター

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

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

在庫: あり

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

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

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

在庫: なし

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