コンテンツにスキップ
Wink

Ghost

Ghostの組み込みCode Injection機能を使うと、出版物のグローバルな<head>や</body>にスクリプトを追加できます。すべてのGhostプランでコードインジェクションがサポートされているため、Winkコンポーネントを任意のページや投稿に簡単に埋め込めます。

Winkスクリプトをサイト全体に読み込む

Section titled “Winkスクリプトをサイト全体に読み込む”
  1. Ghost管理パネルで、Settings → Code Injectionに移動します。
  2. Site Headerボックスにスタイルシートを追加します: 
    <link rel="stylesheet" href="https://elements.wink.travel/styles.css">
  3. Site Footerボックスにスクリプトとアプリケーションローダーを追加します（YOUR_CLIENT_IDは置き換えてください）: 
    <script src="https://elements.wink.travel/elements.js" type="module" defer></script>
    <wink-app-loader client-id="YOUR_CLIENT_ID"></wink-app-loader>
  4. Saveをクリックします。

投稿やページにコンポーネントを追加する

Section titled “投稿やページにコンポーネントを追加する”

GhostのエディターはHTMLカードをサポートしており、コンテンツ内の任意の場所に生のHTMLを挿入できます。

  1. Ghostエディターで投稿またはページを開きます。
  2. /を入力してカードピッカーを開き、HTMLを選択します。
  3. コンポーネントのHTMLを貼り付けます。例: 
    <wink-content-loader
      layout="HOTEL"
      id="YOUR_LAYOUT_ID"
    ></wink-content-loader>
  4. カードの外をクリックしてプレビューし、公開します。

ページごとのコードインジェクション

Section titled “ページごとのコードインジェクション”

特定のページのみにコンポーネントを表示したい場合、Ghostはページごとのコードインジェクションもサポートしています:

  1. 投稿またはページの設定（エディターの歯車アイコン）を開きます。
  2. Code Injectionまでスクロールします。
  3. Footerフィールドにコンポーネントタグを追加します（グローバルなapp-loaderはサイト全体のフッターにのみ必要です）。
  4. 保存します。

利用可能なコンポーネント

Section titled “利用可能なコンポーネント”
コンポーネントHTMLタグ用途
Content loader<wink-content-loader>ホテルカード、グリッド、地図の表示
Lookup<wink-lookup>目的地検索バー
Search button<wink-search-button>旅程ピッカーを開くボタン
Account button<wink-account-button>サインイン / ユーザーメニュー
Itinerary button<wink-itinerary-button>現在の旅程を表示
Itinerary picker<wink-itinerary-picker>旅程フォーム全体
Shopping cart<wink-shopping-cart-button>カート概要ボタン

完全な属性リファレンスはWeb Componentsをご覧ください。

さらに読む

Section titled “さらに読む”