直書き貼り付け方式では、ボタンのHTML及びCSSコードを、ホストページ(貼り付け先のページ)に直に貼り付けます。ウェブページとボタンを統合的にデザインしたい方にお勧めの方式です。
以下に直書き貼り付け方式で、ボタンを貼り付ける例を説明します。この例では、貼り付けるボタンのKeyを my-poll 、テンプレートの名前を tpl-direct と仮定いたします。
ホストページに直接貼り付けるHTMLコードの準備を行います。
iine/templates/tpl-direct/html/tpl.html をテキストエディタで開いてください。テキスト全体に文字列の置換を行うので、置換機能を持ったエディタを使用してください。(ウインドウズのメモ帳には置換機能があります。) ファイルの内容は編集しますが、元のファイルを上書きしてはいけないので、作業を行う前に別のファイル名に保存しておくことをお勧めします。
最初にファイル内のHTMLコードを、以下のように、<div class="aiin-css %css-ctar%">と</div>で囲みます。
<div class="aiin-css %css-ctar%">
.....................
.....................
.....................
</div>
次に、以下のプレースホルダを置換します。
| HTMLファイル内では、プレースホルダ( %url-tpl% )はあまり使われません。もしファイル内で使われていなかったら、置換の作業はスキップできます。 |
ファイル内にあるすべての %css-ctar% を aiin-css-(テンプレートの名前) で置換します。このチュートリアルでは、貼り付けるボタンのテンプレートの名前は tpl-direct ですので、%css-ctar% を aiin-css-tpl-direct で置換します。
ファイルの中で、%url-tpl% のプレースホルダが使われていたら、%url-tpl% を tpl-directのテンプレートフォルダを指すURLで置換します。URLは以下のような形になります。
http://.....(iineフォルダまでのURL)...../iine/templates/tpl-direct/
これでHTMLコードの準備ができました。後のステップで、このHTMLコードをホストページに挿入します。
iine/templates/tpl-direct/css/tpl.css をテキストエディタで開いてください。テキスト全体に文字列の置換を行うので、置換機能を持ったエディタを使用してください。(ウインドウズのメモ帳には置換機能があります。) ファイルの内容は編集しますが、元のファイルを上書きしてはいけないので、作業を行う前に別のファイル名に保存しておくことをお勧めします。
最初にファイル内のCSSコードを、以下のように、<style>と</style>で囲みます。
<style>
............
............
............
</style>
次に、以下のプレースホルダを置換します。
ファイル内にあるすべての %css-ctar% を aiin-css-(テンプレートの名前) で置換します。このチュートリアルでは、貼り付けるボタンのテンプレートの名前は tpl-direct ですので、%css-ctar% を aiin-css-tpl-direct で置換します。
ファイルの中で、%url-tpl% のプレースホルダが使われていたら、%url-tpl% を tpl-directのテンプレートフォルダを指すURLで置換します。URLは以下のような形になります。
http://.....(iineフォルダまでのURL)...../iine/templates/tpl-direct/
これでCSSコードの準備ができました。後のステップで、このCSSコードをホストページに挿入します。
まず最初に二行貼り付け方式でホストページにボタンを貼り付けてください。(Keyは my-poll 、テンプレートは tpl-direct を選択)
二行貼り付けで貼り付けた後のHTMLは、以下のような状態になっています。
<head>
<script src="................../iine/cn/cn.php"></script>
</head>
<div class="ajax-iine" data-pid="my-poll" data-tid="tpl-direct"></div>
この時点で、ボタンがきちんと表示されていることを確認してください。
ホストページのdivタグの間に、「1. HTMLコードの準備」で作ったHTMLコードを挿入します。
<div class="ajax-iine" data-pid="my-poll" data-tid="tpl-direct">
(...ここに「1. HTMLコードの準備」で作ったHTMLコードを貼り付ける...)
</div>
ホストページのscriptタグの下に、「2. CSSコードの準備」で作ったCSSコードを挿入します。
<script src="................../iine/cn/cn.php"></script>
(...ここに「2. CSSコードの準備」で作ったCSSコードを貼り付ける...)
iine/templates/tpl-direct/config.inc.php をテキストエディタで開いて、以下のように、$cfg["load-resource"]に０を設定してください。
$cfg["load-resource"] = 0;
これでテンプレート側からHTMLコードとCSSコードがロードされなくなり、ホストページに貼り付けたHTMLコードとCSSコードが有効になります。
これでボタンの直書き貼り付けが完了いたしました。