Top / テンプレート作成 / デザインテンプレートの作成 / STEP03 - コーディングとタグ 〜基本的な変数〜

STEP03 - HTMLコーディングとタグ

設定画面や設定方法などはWIKIPLUSのバージョンにより異なります。

デザインテンプレート(.tpl)はSmartyで作成され、HTML、CSS、Javascriptで記述します。
※Javascript、CSSをhead内で記述する場合はこちら

テンプレート内にWIKIPLUSの変数を挿入することにより、そのエリア内が編集者がコンテンツを挿入できる編集可能領域になります。

コーディングをする前に、WIKIPLUSで作られたサイトのデザインを見てみましょう。

 

template001.jpg

 

上図のデザインは2つの種類の編集エリアがあります。


body(ボディ)エリア
ページに一か所のみ設定されているページの編集エリア。編集ボタンをクリックすると編集ができる領域です。ページのメインコンテンツとなり、ページによって異なる内容が入るエリアです。ページ・プロパティ(パーマリンク、ページ名、概要など)を持ちます。
※テンプレート内にbodyエリアは必ず一か所のみ設定します。bodyエリアの設置は必須です。


pane(ペイン) エリア
ページに複数設定できる共有編集エリア。編集ボタンをクリックすると編集ができる領域です。複数のページで共通の内容を出す場合、bodyエリア以外で編集エリアを追加したい場合に使用します。bodyと違ってページ・プロパティはありませんが、便宜上、個別に名前を付ける必要があります。
※paneの設置は必須ではありません。

 

コーディングはこの2つの種類の編集エリアの構造を意識してコーディングします。

 

基本的なWIKIPLUSタグ

ページのメインコンテンツエリア:bodyタグの設置

メイン編集エリアに設定する箇所には{body}を設定します。(必須)

<div>{body}</div>

※{body}はデザインテンプレート(xxx.design.default.tpl)内に必ず1つだけ設置してください。 
※一つのテンプレートファイルの中に{body}は複数設置することはできません。

メインコンテンツエリアは、WIKIPLUSで、URL毎にコンテンツが差し替えられて描画されます。

 

その他の編集領域:paneタグの設置

ペインエリアに設定する箇所には{pane}を設定します。それぞれのペインは編集領域になるため、英数字で付けた一意な名前を用意します。下記は、_menuという名前のペインです。

【設置例】<div>{pane permalink="_menu"}</div>

※ペインのURLの文字列は任意で設定できますが、アンダスコアから始まる英数字が推奨されています。同名のpermalinkのペインを設置すると同じものが出力されますが、1つのデザイン中で同名のペインを利用することは、推奨されません。

 

トピックパス・パンくず

トピックパスを設定する箇所には変数{$topic_path}を設定します。

【設置例】<div id=“topicpath”>{$topic_path}</div>
※パンくずは自動的に出力されるため、編集はできません。

また、トピックパスはpaneエリアにプラグインとして記述することもできます。
トピックパスの区切り(デリミタ)をカスタマイズしたい場合はプラグインとして記述します。

【設置例】{pane type="inline" content="&topicpath()"} 

詳細については「プラグインのwiki書式 / トピックパスの表示 」をご覧ください。

 

その他の変数について

主な変数については、デザインテンプレートの書式をご覧下さい。

 

デザインテンプレートの作成例

下のHTMLコーディングされているサイトデザインをWIKIPLUS用のTPLファイルに変換します。

サンプルサイト.png

トップページのHTMLコード

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1">
  <link rel="stylesheet" href="css/style_common.css">
  <link rel="stylesheet" href="css/pc_common.css">
  <link rel="stylesheet" media="screen and (max-width: 500px)" href="css/sp_common.css">
  <title>Top-サイト名</title>
</head>

<body>
  <div class="wrap">
    <div class="header">
      <div class="header_left header_logo">
        <h1>
          <a href="Top.htm">
            <img src="image/logo.png" width="123" height="36" title="logo.png" alt="logo.png"></a>
        </h1>
      </div>
      <div class="header_right header_link icon01_02">
        <ul>
          <li>
            <a href="base.html">サブページ</a>
          </li>
          <li>
            <a href="base.html">サブページ</a>
          </li>
        </ul>
      </div>
    </div>
    <div class="nav6">
      <ul>
        <li class="navli1">
          <a href="./Top-サイト名_files/Top-サイト名.htm">トップページ</a>
        </li>
        <li class="navli2">
          <a href="base.html">サブページ</a>
        </li>
        <li class="navli3">
          <a href="base.html">サブページ</a>
        </li>
        <li class="navli4">
          <a href="base.html">サブページ</a>
        </li>
        <li class="navli5">
          <a href="base.html">サブページ</a>
        </li>
        <li class="navli6">
          <a href="base.html">サブページ</a>
        </li>
      </ul>
    </div>
    <div class="topimage">
      <img src="image/top.jpg" width="950" height="260" title="top.jpg" alt="top.jpg"></div>
    <div class="contents">
      <div class="contents_left">
        <div class="main">
          <h2 id="content_1_0">サンプル株式会社のホームページにようこそ</h2>
          <p>
            信頼と実績のサンプル株式会社!
            <br class="spacer">○○○○ のことなら、サンプル株式会社におまかせください!</p>
          <h3>最新情報</h3>
          <div>
            <dl class="news">
              <dt>
                2013/08/22&amp;nbsp;
                <a href="base.html">ニュースページ001</a>
              </dt>
              <dd>ニュースページの概要です。</dd>
            </dl>
          </div>
        </div>
       </div>
      <div class="contents_right">
        <div class="sidebar">
          <ul>
            <li>
              <a href="base.html">サブページ</a>
            </li>
            <li>
              <a href="base.html">サブページ</a>
            </li>
            <li>
              <a href="base.html">サブページ</a>
            </li>
            <li>
              <a href="base.html">サブページ</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="footer">
      <div class="footer_left footer_link icon01_02">
        <ul>
          <li>
            <a href="base.html">サブページ</a>
          </li>
          <li>
            <a href="base.html">サブページ</a>
          </li>
          <li>
            <a href="base.html">サブページ</a>
          </li>
        </ul>
      </div>
      <div class="footer_right copy_right">Copyright © sample all rights reserved.</div>
    </div>
  </div>
</body>
</html>

 

WIKIPLUSで編集エリアに設定する箇所は以下とします。

サンプルサイト2.png
  • ヘッダーリンク
  • トップ画像
  • コンテンツエリア
  • サイドメニュー
  • フッターリンク
 

編集エリアに設定した部分のHTMLをWIKIPLUSのデザインテンプレート(TPL)用に変更します。

ヘッダーリンクエリア

サンプルサイト2-1.png

HTML

<div class="header_right header_link icon01_02">
	<ul>
		<li><a href="base.html">サブページ</a></li>
		<li><a href="base.html">サブページ</a></li>
	</ul>
</div>

TPL

<div class="header_right header_link icon01_02">
{pane permalink="_headerlink" pagename="ヘッダーリンク"}
</div>
 

 

トップ画像

サンプルサイト2-1.png

HTML

<div class="topimage"><img src="image/top.jpg" width="950" height="260" title="top.jpg" alt="top.jpg"> </div>

TPL

<div class="topimage">
{pane permalink="_topimage" pagename="トップ画像" type="inline" width="950"}
</div>

※paneのtype、widthに関しては「STEP04 - コーディングとタグ ~補足~」を参照ください。

 

 

コンテンツエリア

サンプルサイト2-1.png

HTML

<div class="main">
	<h2 id="content_1_0">サンプル株式会社のホームページにようこそ</h2>
	<p>信頼と実績のサンプル株式会社!<br class="spacer">
	○○○○ のことなら、サンプル株式会社におまかせください!</p>
	<h3>最新情報</h3>
	<dl class="news">
		<dt>2013/08/22&amp;nbsp; <a href="base.html">ニュースページ001</a></dt>
		<dd>ニュースページの概要です。</dd>
	</dl>
</div>

TPL

<div class="main">{body width="649"}</div>
 

 

サイドメニュー

サンプルサイト2-1.png

HTML

<div class="sidebar">
	<ul>
		<li><a href="base.html">サブページ</a></li>
		<li><a href="base.html">サブページ</a></li>
		<li><a href="base.html">サブページ</a></li>
		<li><a href="base.html">サブページ</a></li>
	</ul>
</div>

TPL

<div class="sidebar">
{pane permalink="_menu" pagename="サイドメニュー" width="207"}
</div>
 

 

フッターリンク

サンプルサイト2-1.png

HTML

<div class="footer_left footer_link icon01_02">
	<ul>
		<li><a href="base.html">サブページ</a></li>
		<li><a href="base.html">サブページ</a></li>
		<li><a href="base.html">サブページ</a></li>
	</ul>
</div>

TPL

<div class="footer_left footer_link icon01_02">
{pane permalink="_footerlink" pagename="フッターリンク"}
</div>
 

 

トップページのTPLコード

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1" />
<link rel="stylesheet" href="css/style_common.css">
<link rel="stylesheet" href="css/pc_common.css">
<link rel="stylesheet" media="screen and (max-width: 500px)" href="css/sp_common.css">
<title>{$topic_path_val|@last}-{$page_title}</title>
</head>

<body>
<div class="wrap">
  <div class="header">
    <div class="header_left header_logo">
      <h1><img src="image/logo.png" width="123" height="36" alt="logo" /></h1>
    </div>
    <div class="header_right header_link icon01_02"> {pane permalink="_headerlink" pagename="ヘッダーリンク"} </div>
  </div>
  <div class="nav6">
    <ul>
      <li class="navli1"><a href="index.html">トップページ</a></li>
      <li class="navli2"><a href="aaa.html">サブページ</a></li>
      <li class="navli3"><a href="aaa.html">サブページ</a></li>
      <li class="navli4"><a href="aaa.html">サブページ</a></li>
      <li class="navli5"><a href="aaa.html">サブページ</a></li>
      <li class="navli6"><a href="aaa.html">サブページ</a></li>
    </ul>
  </div>
  <div class="topimage">{pane permalink="_topimage" pagename="トップ画像" type="inline" width="950"}</div>
  <div class="contents">
    <div class="contents_left">
      <div class="main"> {body width="649"} </div>
    </div>
    <div class="contents_right">
      <div class="sidebar"> {pane permalink="_menu" pagename="サイドメニュー" width="207"} </div>
    </div>
  </div>
  <div class="footer">
    <div class="footer_left footer_link icon01_02"> {pane permalink="_footerlink" pagename="フッターリンク"}</div>
    <div class="footer_right copy_right">copyright &amp;copy; xxxx all right reserved.</div>
  </div>
</div>
</body>
</html>

変換したファイルは top.design.default.tplとして保存します。

ファイルの命名規則については STEP02 - デザインデータのフォルダ構成 を参照してください。

より詳しい命令や書式については デザインテンプレートの書式 を参照してください。

 

データのダウンロード

上記のtplファイルおよびデザインテンプレート一式のデータは以下からダウンロードできます。

※ダウンロードしたデータは解凍し、FTPソフト等でdocroot以下に設置してください。

WIKIPLUS上での設定

FTPソフト等でデータをアップロードのち、WIKIPLUSの編集画面にアクセスします。

新規追加.jpg

ペインエリアが作られていない場合、編集領域追加アイコンが該当部分に表示されます。 

 左のアイコンが表示された場合、該当箇所にあるアイコンをクリックし、ペインエリアを作成してください。

 

 

編集領域追加アイコンをクリックすると、エディターが開きます。該当箇所の内容を入力します。

以下はヘッダーリンク部分の入力例です。

  • リストを作る。
  • リンクを張る。
  • 公開する。

編集イメージ.jpg
上記の結果、ヘッダーリンク部分が完成しました。

同様に「編集領域追加」アイコンが表示されているペインエリアもアイコンをクリックし、作成します。