ウェブデザイナーのためのテンプレート作成教室

seezoo more ユーザーズガイド

viewファイルの作成

そのままでもテンプレートとして機能しますが、エリアやブロックを設置して編集できるように、PHPコードを追加します。

ヘッダー部分の埋め込み

ページ編集の際に、<title>タグの中身などはseezoo moreの設定から書き出し、また編集用のCSS/JavaScriptファイルもロードします。例えば、<head>タグの中を以下のように変更します:

<head>
  <meta http-equiv="Content-Type" contnet="text/html; charset=UTF-8" />
  <meta http-equiv="Content-Style-Type" contnet="text/html; charset=UTF-8" />
  <meta http-equiv="Content-Script-Type" contnet="text/html; charset=UTF-8" />
  <title>Test title</title>
  <link rel="stylesheet" type="css" target="_blank" href="http://example.com/css/defult.css" />
   ...
</head>

テンプレート化後は以下のようになります:

<head>
  <?php echo $this->load->view('header_required');?>
  <link rel="stylesheet" type="css" target="_blank" href="http://example.com/css/defult.css" />
  ...
</head>

フッター部分埋め込み

システムで使用するJavaScriptライブラリなどをロードするため</body>直前にビューをロードします。具体的には以下の通りです

  ...
</body>
</html>

テンプレート化後は以下のようになります:

  ...
   <?php echo $this->load->view('footer_required');?>
</body>
</html>

パスの変換

画像ファイルやCSS、JavaScriptファイルなどの読み込みパスがこのままではずれてしまうので、絶対パスに変換することで、リンク切れをなくします

<head>
<?php echo $this->load->view('header_required');?>
  ...
  <link rel="stylesheet" type="text/css" href="http://example.com/str/templates/original/css/style.css" />
  <script type="text/javascript" src="http://example.com/str/templates/original/common.js"></script>
</head>
<body>
  ...
  <img src="http://example.com/str/templates/original/images/main.jpg" alt="メイン画像" />
<?php echo $this->load->view('footer_required');?>
</body>

以下のようにパス変換を行います:

<head>
<?php echo $this->load->view('header_required');?>
  ...
  <link rel="stylesheet" type="text/css" href="<php echo $template_path;?>style.css" />
  <script type="text/javascript" src="<php echo $template_path;?>common.js"></script>
</head>
<body>
  ...
  <img src="<php echo $template_path;?>images/main.jpg" alt="メイン画像" />
<?php echo $this->load->view('footer_required');?>
</body>

$template_path」という変数にテンプレートディレクトリまでのパスが入っているので、単純に読み込みパスの頭に出力させていくだけです。

エリア設定

seezooの編集モードによりブロックを追加できるエリアを設定します。

設定できる場所は任意ですが、設置するエリア名が重複しないように気をつけてください。

...
<div id="content">
  <h4>見出し</h4>
  <p>ここが本文です。</p>

</div>

<div id="submenu">
  <ul>
    <li><a target="_blank" href="http://exsample.com/menu1">リンク1</a></li>
    <li><a target="_blank" href="http://exsample.com/menu2">リンク2</a></li>
    <li><a target="_blank" href="http://exsample.com/menu3">リンク3</a></li>
    <li><a target="_blank" href="http://exsample.com/menu4">リンク4</a></li>
  </ul>

</div>
...

以下のようにエリア設定を行います:

...
<div id="content">
  <?php echo $this->load->area('content');?>
</div>

<dv id="submenu">
  <?php echo $this->load->area('submenu');?>
</div>
...

コンテンツを挿入したい部分に「<?php echo $this->load->area('submenu');?>」と記述していくだけです。

ページの先頭に戻る