KeyShot

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が表示されます）

iframeを介してKeyShotXRを埋め込む

KeyShotXRをレンダリングすると、フォルダーにはinstructions.htmlも含まれます。 ここでは、埋め込みたいページ/投稿のWordpressエディターに直接コピーできるコードのセクションを見つけることができます。 編集する必要があるのはsrcurlだけなので、Webサーバー上の場所を指します。

1. ウェブサーバーにKeyShot XRフォルダをアップロード
2. Instructions.htmlファイルにあるKeyShotXRコードをコピーします
3. WordPressサイトの管理パネルにログインし、KeyShotXRを表示するページ/投稿を選択/作成します。
4. WordPressの投稿/ページ編集画面で（[ビジュアル]タブではなく）[テキスト]タブを選択していることを確認してください。
5. 指示ファイルからエディターにコードを貼り付けます。

• コード内の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>

例

<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コンフィギュレーターを埋め込む

1. Web構成フォルダーをWebサーバーにアップロードします
2. WordPressサイトの管理パネルにログインし、KeyhotXRを表示するページ/投稿を選択/作成します。
3. WordPressの投稿/ページ編集画面で（[ビジュアル]タブではなく）[テキスト]タブを選択していることを確認してください。
4. 以下のコードをこの領域に貼り付けます。 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>