WordPressにSketchfabの3Dモデルを埋め込む方法（埋め込みコードとoEmbed登録）

Sketchfabは、3Dモデルをアップロードしてブラウザ上で回転・拡大しながら見せられるサービスです。製品の立体模型や作品のポートフォリオをWordPressの記事に載せたいときに使えます。この記事では、SketchfabのモデルをWordPressに表示する2つの方法と、表示オプションの指定、うまく表示されないときの確認点を説明します。

方法は2つ

自分でサーバーにインストールしたWordPressでは、2026年10月時点で、Sketchfabは標準の埋め込み対応サービス（YouTubeやVimeoのように、URLを貼るだけでプレーヤーになるサービス）に含まれていません。そのため、何もしないままURLを貼っても、期待どおりに表示されないことがあります。WordPress.comで運営しているサイトでは、URLを貼るだけで表示できるとSketchfabのヘルプで案内されています。

準備：モデルの公開設定を確認する

埋め込むモデルは、Sketchfab上で公開（Public）にしておきます。非公開やパスワード付きのモデルも埋め込めますが、選べる公開設定や埋め込みのオプションはプランによって異なります。プランごとの機能は変わることがあるため、Sketchfabの料金ページで確認してください。

他の人が公開しているモデルを載せる場合は、作者のクレジットを消さずに表示し、商用サイトで使う前にモデルのライセンス表示も確認します。

方法1：埋め込みコードを「カスタムHTML」ブロックに貼る

1. Sketchfabでモデルのページを開き、ビューアーの下にある「Embed」（</> のアイコン）を押します。
2. 開いた画面で、見た目や読み込み方などの表示オプションを選びます（項目は次の章で説明します）。
3. 表示されたHTMLコードをコピーします。
4. WordPressの投稿編集画面で「＋」から「カスタムHTML」ブロックを追加し、コードを貼り付けます。
5. ブロックの「プレビュー」に切り替えて表示を確かめ、保存します。

コピーされるコードは、おおむね次のような形です（MODEL_UID はモデルごとのID）。実際にはこの後に作者名などのクレジット行が続きます。

<div class="sketchfab-embed-wrapper">
  <iframe title="モデル名" frameborder="0" allowfullscreen mozallowfullscreen="true" webkitallowfullscreen="true" allow="autoplay; fullscreen; xr-spatial-tracking" xr-spatial-tracking execution-while-out-of-viewport execution-while-not-rendered web-share width="640" height="480" src="https://sketchfab.com/models/MODEL_UID/embed"></iframe>
</div>

モデルのIDは、モデルページのURL（https://sketchfab.com/3d-models/モデル名-MODEL_UID）の末尾にある英数字です。

「カスタムHTML」ブロックのiframeがそのまま保存されるのは、unfiltered_html 権限を持つユーザー（通常のサイトでは管理者と編集者、マルチサイトではネットワーク管理者）だけです。投稿者権限のユーザーが貼るとiframeが取り除かれるため、その場合は方法2を使います。

表示オプションを指定する

Embed画面のオプションは、iframeの src のURLにパラメーターとして付きます。コピーした後で、直接書き足すこともできます。

<iframe src="https://sketchfab.com/models/MODEL_UID/embed?autostart=1&autospin=0.5&scrollwheel=0" ...></iframe>

Sketchfabのヘルプで案内されている主なパラメーターは次のとおりです。

使えるオプションはプランによって異なり、プランを下げると一部のオプションが無効になります（例：透明な背景）。全項目はSketchfabのヘルプの「Interface and Options」で確認してください。

記事に何個もモデルを並べる場合は、autostart=0 にしておくとページが重くなりにくくなります。3Dモデルは画像より通信量が大きく、スマートフォンでは読み込みに時間がかかることがあるためです。

スマートフォンで幅を合わせる

コピーしたコードは幅と高さが固定です。画面幅に合わせて縦横比を保ったまま縮めたいときは、iframeから width と height を外し、「外観」→「カスタマイズ」→「追加CSS」（ブロックテーマでは「外観」→「エディター」→「スタイル」の「追加CSS」）に次のCSSを追加します。

.sketchfab-embed-wrapper iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

方法2：URLを貼るだけで表示されるようにする（oEmbed登録）

Sketchfabは、URLから埋め込み用のHTMLを返す仕組み（oEmbed）を https://sketchfab.com/oembed で提供しています。WordPressの wp_oembed_add_provider() でこのエンドポイントを登録すると、YouTubeと同じようにURLを単独の行に貼るだけでモデルが表示されるようになります。

次のコードを、独自のプラグイン（wp-content/plugins/ に置くファイル）か、子テーマの functions.php に追加します。

<?php
/**
 * Plugin Name: Sketchfab oEmbed
 */

add_action( 'init', function () {
	wp_oembed_add_provider(
		'#https?://(www\.)?sketchfab\.com/(3d-models|models)/.*#i',
		'https://sketchfab.com/oembed',
		true
	);
} );

3番目の引数 true は、1番目の値を正規表現として扱う指定です。モデルページのURL（/3d-models/…）と、IDだけのURL（/models/MODEL_UID）の両方を対象にしています。

登録後の使い方は次のとおりです。

1. Sketchfabのモデルページのアドレスバーから、URLをコピーします。
2. 投稿編集画面で新しい段落にURLだけを貼り付けます。埋め込みブロックに変わり、エディター上にビューアーが表示されます。
3. 保存して、公開ページで表示を確かめます。

この方法では、埋め込み用のHTMLをWordPressがSketchfabから取得して表示するため、投稿者権限のユーザーでもモデルを載せられます。表示サイズは16:9で、テーマのコンテンツ幅に合わせて調整されます。

登録せずにURLを貼るとどうなるか

WordPressは登録されていないサービスのURLでも、ページ内のoEmbed情報を探して埋め込もうとすることがあります。その場合、安全のためにiframeへ sandbox="allow-scripts" という制限が付きます。Sketchfabは、iframeに sandbox を付ける場合は allow-scripts に加えて allow-same-origin などの許可も必要だと案内しているため、この制限付きの状態ではビューアーが正しく動かないことがあります。URL貼り付けで使うなら、上のコードで登録しておきます。

登録前に一度URLを貼って失敗した投稿は、その結果がしばらくキャッシュされます。登録後は、埋め込みブロックを削除してURLを貼り直し、投稿を保存し直してください。

Viewer APIで動きを制御する場合

ボタンでカメラを切り替えるなど、ページ側のJavaScriptからビューアーを操作したいときは、SketchfabのViewer APIを使います。モデルの表示だけなら、APIキーは必要ありません。最小の例は次のとおりです。

<iframe id="sketchfab-viewer" title="3D model" src="" allow="autoplay; fullscreen; xr-spatial-tracking" allowfullscreen style="width:100%;aspect-ratio:16/9;border:0;"></iframe>
<script src="https://static.sketchfab.com/api/sketchfab-viewer-1.12.1.js"></script>
<script>
  var iframe = document.getElementById('sketchfab-viewer');
  var client = new Sketchfab('1.12.1', iframe);
  client.init('MODEL_UID', {
    success: function (api) {
      api.start();
      api.addEventListener('viewerready', function () {
        console.log('viewer ready');
      });
    },
    error: function () {
      console.log('viewer error');
    }
  });
</script>

<script> を含むため、「カスタムHTML」ブロックで保存できるのは unfiltered_html 権限を持つユーザーだけです。複数のページで使う場合は、テーマやプラグインで wp_enqueue_script() を使って読み込むほうが管理しやすくなります。使える関数やイベントは、SketchfabのViewer APIのドキュメントで確認してください。

うまく表示されないときの確認ポイント

• URLが文字やリンクのまま表示される：方法2の登録をしているか、URLが単独の行にあり、リンクが付いていないかを確認します。
• 「埋め込めませんでした」という趣旨のメッセージが出る：モデルが公開されているか、URLが正しいかを確認します。
• 貼ったiframeが保存後に消える：投稿者権限など unfiltered_html を持たないユーザーで保存していないか確認します。方法2なら権限に関係なく表示できます。
• ビューアーは出るが操作できない・真っ黒になる：セキュリティ系プラグインやテーマがiframeに sandbox を付けていないか確認します。また、ブラウザやパソコンがWebGLに対応しているかも確認します。
• 変更が反映されない：キャッシュ系プラグインのキャッシュを削除し、ブラウザを再読み込みします。

まとめ

• Sketchfabは、2026年10月時点で自分で設置したWordPressの標準埋め込み対応サービスに含まれていないため、埋め込みコードを貼るか、oEmbedを登録して使います。
• 埋め込みコードは「Embed」画面でオプションを選んでコピーし、「カスタムHTML」ブロックに貼ります。iframeを保存できるのは管理者と編集者です。
• wp_oembed_add_provider() でSketchfabのoEmbedを登録すると、URLを貼るだけで表示でき、投稿者権限のユーザーも使えます。
• autostart・autospin・scrollwheel などのパラメーターで表示を調整し、モデルを多く並べるときは自動読み込みを避けてページを軽く保ちます。

• WordPressでoEmbedの埋め込みが表示されないときの対処法
• WordPressで動画を投稿に埋め込む方法（YouTube・Vimeo・動画ファイル／標準機能）