実装¶
ユーザーは検索ボックスの埋め込まれたページに次の手順で実装を進めます。
meta タグの埋め込み¶
ユーザーは検索結果を表示するページがインデックスされることを防ぐタグを埋め込みます。
<meta name="robots" content="noindex,nofollow">
リソースファイルの読み込み¶
ユーザーはサイトのサーバーにリソースファイルをアップロードします。
ユーザーは検索ボックスの埋め込まれたページに script タグを埋め込み、参照させます。
例: 属性リソースファイル
<script type="text/javascript" charset="UTF-8" src="js/sitesearch_attr.js"></script>
CSS ファイルの読み込み¶
検索用の CSS (cp.css) は自動で読み込まれます。
検索ボックスの埋め込み¶
ユーザーは検索ボックスを埋め込みます。
次の値に設定してください。
- form 要素の method 属性: get
- input 要素の name 属性: q
例:
<body>
<div id="header">
ここはヘッダー
<form class="" method="get">
<input type="text" name="q" id="q" value="" placeholder="検索キーワード">
<input type="submit" name="" value="検索">
</form>
</div>
<div id="contents">
<div id="main">
</div>
</div>
<div id="footer">
ここはフッター
</div>
</body>
コンポーネントの埋め込み¶
ユーザーは検索を埋め込むページに検索の画面を構成する部品 (コンポーネント) を埋め込みます。
前提
モードは、サイトサーチの契約後に弊社からご連絡いたします。
コンポーネントリファレンス から表示するコンポーネントを選択してください。
ページのコンポーネントを表示したい箇所に空の div 要素として記述してください。
<div [識別子]="[コンポーネント名]"></div>
コンポーネント名は data-[モード] とモードを組み合わせた値となります。
例:
<body>
<div id="header">
ここはヘッダー
<form class="" method="get">
<input type="text" name="q" id="q" value="" placeholder="検索キーワード">
<input type="submit" name="" value="検索">
</form>
</div>
<div id="contents">
<div id="main">
<div data-[モード]="sortselector"></div>
<div data-[モード]="countselector"></div>
<div data-[モード]="lastmodifiedselector"></div>
<div data-[モード]="searchstatus"></div>
<div data-[モード]="pagenator"></div>
<div data-[モード]="searchresults"></div>
<div data-[モード]="pagenator"></div>
</div>
</div>
<div id="footer">
ここはフッター
</div>
</body>
補足
サーチ設定タグの mode パラメータに設定する値と同じにする必要があります。
複数のタグを追加する場合、data-[モード]-1 、data-[モード]-2 のように重複しない値を指定します。
設定タグとタグマネージャーの埋め込み¶
ユーザーは body 要素の最後にサーチ設定タグとタグマネージャーを埋め込みます。
サーチ設定タグ、タグマネージャーの順で記述してください。
サーチ設定タグのパラメータの内容について詳しくは、「設定パラメータリファレンス」を参照してください。
前提
UID は、サイトサーチの契約後に弊社からご連絡いたします。
例:
<body>
<div id="header">
ここはヘッダー
<form class="" method="get">
<input type="text" name="q" id="q" value="" placeholder="検索キーワード">
<input type="submit" name="" value="検索">
</form>
</div>
<div id="contents">
<div id="main">
<div data-[モード]="sortselector"></div>
<div data-[モード]="countselector"></div>
<div data-[モード]="lastmodifiedselector"></div>
<div data-[モード]="searchstatus"></div>
<div data-[モード]="pagenator"></div>
<div data-[モード]="searchresults"></div>
<div data-[モード]="pagenator"></div>
</div>
</div>
<div id="footer">
ここはフッター
</div>
<script type="text/javascript">
// サーチ設定タグ
var popfindConf = popfindConf || {};
popfindConf["data-[モード]"] = {
uid: "[UID]",
mode: "[モード]",
inputId: "q",
// その他の設定パラメータ
};
// タグマネージャー
(function() {
var script = document.createElement("script");
script.setAttribute("src", "https://js.poplink.jp/[タグマネージャーの ID]/poptagmanager.js?ts=" + Date.now());
script.setAttribute("defer", true);
document.head.appendChild(script);
})();
</script>
</body>
注意
タグマネージャーは上記の通りに利用してください。
JavaScript ファイルとして保存して利用するなどした場合、サポート対象外となります。
補足
以下の変数はサーチ内部やリソースファイルで使用されています。
名前の重複にご注意ください。
popfindJSpopfindConfsitesearchから始まるグローバル変数名