このページで
KeyShotXRを作成すると、[アニメーション]の下の[KeyShot Resources]フォルダー、またはKeyShotXRウィザードで選択した場所にファイルが表示されます。
KeyShotXRまたはWebコンフィギュレーターをWordpressWebサイトに表示することは、静的ページのあるWebサイトに表示するのとよく似ています。 KeyShotXRまたはWebコンフィギュレーターをWordpressサイトに含めたい場合は、Wordpressプラグインを使用して埋め込むか例えばグーテンベルクエディタのhtmlブロック内のiframeを介して追加することができます。
前提条件:
場所:KeyShotXRまたはWeb コンフィギュレーターをWordpressサイトに埋め込む前に、オンラインで利用できるようにする必要があります。 KeyShotXRまたはWebコンフィギュレーターフォルダー全体をWebサーバーにアップロードします。 (たとえば、my_keyshotxrフォルダーを/ srv / www / wordpress / xr /にアップロードすると、yourwebsite.com / xr / my_keyshotxr /にKeyShotXRが表示されます)
注意
WebサーバーへのFTP / SFTPアクセスが必要になるか、サイト管理者にアップロードを依頼してください。
iframeを介してKeyShotXRを埋め込む
KeyShotXRをレンダリングすると、フォルダーにはinstructions.htmlも含まれます。 ここでは、埋め込みたいページ/投稿のWordpressエディターに直接コピーできるコードのセクションを見つけることができます。 編集する必要があるのはsrcurlだけなので、Webサーバー上の場所を指します。
- ウェブサーバーにKeyShot XRフォルダをアップロード
- Instructions.htmlファイルにあるKeyShotXRコードをコピーします
- WordPressサイトの管理パネルにログインし、KeyShotXRを表示するページ/投稿を選択/作成します。
- WordPressの投稿/ページ編集画面で([ビジュアル]タブではなく)[テキスト]タブを選択していることを確認してください。
- 指示ファイルからエディターにコードを貼り付けます。

- コード内のhtmlファイルのsrcurlの場所がアップロードの場所と一致していることを確認してください。
- SSLを使用して安全なWebサイトにアップロードする場合は、srcurlでhttpではなくhttpsを使用してください。
詳細
iframeの周りのスタイリングとdivにより、要素がレスポンシブレイアウトで機能することが保証されます。 アスペクト比を失うことなく、コンテナの幅に適応します。
<div style="max-width: 1000px; max-height: 1000px">
<div style="left: 0px; width: 100%; height: 0px; position: relative; padding-bottom: 100%; overflow: hidden;">
<iframe style="position: absolute; top: 0px; left: 0px; height: 100%; width: 1px; min-width: 100%;" src="https://mywebserver.com/my_keyshotxr.html" frameborder="0" scrolling="no" allowfullscreen="allowfullscreen"></iframe>
</div>
</div>
次の値を置き換えます
- 最大高さ/最大幅: KeyShotXRをレンダリングしたサイズを入力します
- パディングボトム: 高さと幅の比率(%)。 この例では、比率が1:1であるため100%であり、16:9の比率は56.25%になります。
- src: Webサーバー上のKeyShotXRの場所を入力します。
例
<div style="max-width: 800px; max-height: 450px">
<div style="position: relative; padding-bottom: 56.25%; height: 0px; overflow: hidden;">
<iframe src="https://media.keyshot.com/web/keyshot9/hovr-xr/hover-xr.html" scrolling="no" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true" style="position: absolute; top: 0px; left: 0px; height: 100%; width: 1px; min-width: 100%; *width: 100%;" frameborder="0"></iframe>
</div>
</div>
<div style="max-width: 800px; max-height: 450px; border:1px solid #ccc;">
<div style="position: relative; padding-bottom: 56.25%; height: 0px; overflow: hidden;">
<iframe src="https://media.keyshot.com/web/keyshot9/assistant-xr/index.html" scrolling="no" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true" style="position: absolute; top: 0px; left: 0px; height: 100%; width: 1px; min-width: 100%; *width: 100%;" frameborder="0"></iframe>
</div>
</div>
iframeを介してWebコンフィギュレーターを埋め込む
- Web構成フォルダーをWebサーバーにアップロードします
- WordPressサイトの管理パネルにログインし、KeyhotXRを表示するページ/投稿を選択/作成します。
- WordPressの投稿/ページ編集画面で([ビジュアル]タブではなく)[テキスト]タブを選択していることを確認してください。
- 以下のコードをこの領域に貼り付けます。 Webコンフィギュレータに一致するように、以下に記載されている値を必ず置き換えてください。
<iframe src="https://mywebserver.com/my_webconfigurator.html" frameborder="0" scrolling="no" style="max-width: 1600px; max-height: 900px; height: 100%; width: 100%;"> </iframe>
次の値を置き換えます。
- 最大高さ/最大幅: レンダリングされたWebコンフィギュレータのサイズを入力します。
- src:Webサーバー上のWebConfiguratorの場所を入力します。