Spearly CMSで管理しているコンテンツを、埋め込みタグを用いてWordPressへ埋め込む方法について説明します。
WordPressの編集画面を開く
まず、埋め込みを行いたい投稿、または固定ページの編集画面を開きます。
この例では、「商品のご紹介」という記事にコンテンツを埋め込みます。
編集画面はこのように表示されます。（環境によって多少の差異がある可能性があります。）
WordPressのカスタムHTMLにSpearly CMSの共通スクリプトタグと埋め込みタグを設置する
カスタムHTMLにSpearly CMSの埋め込みタグを設置することで、ページ表示時にコンテンツも表示されます。
カスタムHTMLの入力画面を開く
次に、「ブロックを追加」ボタンをクリックし、HTMLと入力します。その後、カスタムHTMLをクリックします。
すると、以下のようなHTMLを入力する画面になります。
埋め込みタグのための共通スクリプトタグを確認する
埋め込みタグを利用するために必要な共通スクリプトタグを確認しましょう。
共通スクリプトタグは、対象のコンテンツタイプの埋め込み方法の「共通のスクリプトタグの設置」から確認できます。
埋め込みタグをカスタムHTMLに記述する
Spearly CMSのコンテンツを表示するために、カスタムHTMLブロックに共通スクリプトタグと埋め込みタグを記述します。
埋め込みタグについては、共通スクリプトタグと同様に「埋め込み方法」をご覧ください。
<!--- 埋め込み例 --->
<!--- 共通スクリプトタグ --->
<script src="https://static.spearly.com/js/cms.js" defer></script>
<script>...</script>
<!--- 描画したい埋め込みタグ --->
<div cms-item cms-content-type="ab-sample" cms-content="c-asdf">
<h1>{%= ab-sample_title %}</h1>
<div>{%= ab-sample_description %}</div>
</div>上記を参考に、カスタムHTMLブロックに共通スクリプトタグと埋め込みタグを記述します。
これで必要な作業は以上です。プレビューをクリックして、先程入力したコンテンツが表示されているか、確認しましょう。
