TECHNOLOGY 2013.04.02

共通部分のHTMLの管理方法

  • Markup

共通部分のHTMLを管理する、インクルードの4つの方法をご紹介します。

JavaScriptを使う(使用頻度高め)

キャンペーンバナーやニュースなどを外部XMLで読み込む時につかう。
JSオフの環境ではみれない。重要な内容(h1要素やリンクなど)はSEO的によくない。

SSI(大規模案件向き)

サーバーで使えるか確認が必要。画像やリンクのパスの記述は絶対指定に。.htaccseeを設置して下記を記述

AddHandler server-parsed .html

htmlでこのようにファイルを読み込む。

templateフォルダにincファイルで作るとわかりやすい。

<!--#include virtual="ファイル名" -->

virtualではなくfileでも記述できるが、
./や絶対パス名は使用できない場合があるので、virtualのほうがいい。

PHP(大規模案件向き)

● 方法1 拡張子をphpにする
● 方法2 htaccessを設置して、拡張子がhtmlのファイルでもphpが動くようにする

相対パスでかかないとサーバーに上げた時にうごかない。

<?php include_once("template/header.inc"); ?>


絶対パスで指定したい時は

<?php include_once($_SERVER['DOCUMENT_ROOT']."template/header.inc"); ?>

Dwのテンプレやライブラリを使う時]

50P未満の小規模。ディレクトリ構成が深くないほうがいい。
テンプレにする場所に更新が入らない場合におすすめ。
SEやクライアントが定義しないまま共通部分を変更すると先祖がえり起きるので注意。
Dwでサイト定義していると、テンプレートファイルを修正すると読み込んでいる静的HTMLやPHPが上書き更新される。
HTML5で使う場合は、文字化けする可能性があるので対策忘れず。
http://design-spice.com/2011/04/16/dreamweavercs5-html5-template/
ローカルナビなどはテンプレのオプション領域にしてもいいですけど、
何個も大量にオプション領域があると管理してるとわけわかんなくなるので、
編集領域にしておいて、ライブラリ機能つかうと便利!

応用編:ロゴはトップページではh1に、下層ページではpにしたい

★Dw★オプション領域をつかう

<!-- TemplateBeginIf cond="logo" -->
<h1>●●●</h1>
<!-- TemplateEndIf --><!-- TemplateBeginIf cond="!logo" -->
<p class="logo"><a href="../index.html">●●●</a></p>
<!-- TemplateEndIf -->

 

★PHP★

HTML側

<?php
$level = 'top';
include_once('ファイル名');
?>


元になるベースファイル

<?php if($level == 'top'){ ?>
<h1>●●●</h1>
<?php }else{ ?>
<p class="logo"><a href="../index.html">●●●</a></p>
<?php } ?>

 

★SSI★PHPも必要になる

<!--#include virtual="ファイル名?level=top" -->


インクルードするファイルはPHPにする

<?php if(isset($_GET['level']) && $_GET['level'] == 'top'){ ?>
<h1>●●●</h1>
<?php }else{ ?>
<p class="logo">●●●</p>
<?php } ?>