HTMLの共通部分を外部化してメンテナンス性を高める

HTMLの書き方
ホームページの同じ場所に同じ情報を表示する方法
HTMLでのサブルーチン化 / コンポーネント化の方法
HTMLのソースコードを部品化・共通化する方法
 

   図-1        図-2       図-3

 

 

 

 

 

 

 

.
.
今回、サイドバーに表示している『関連記事が共通するページ』(図-1)が多くなったので、外部化してメンテナンス性を高めることにした。

スポンサー リンク

 
 

方法はいくつかあるようだが、共通するコードを php 化し本体から、この php を呼び出すことにした。

php 化(kanrenkiji.php の内容)する。

<ul>
<li><a href=”メニュー1.html“>メニュー1</a></li>
<li><a href=”メニュー2.html“>メニュー2</a></li>
<li><a href=”メニュー3.html“>メニュー3</a></li>
</ul>
 

本体から php を呼び出す。

<?php
include_once(“kanrenkiji.php“); // パスを記述
?>
 

HTMLの共通部分を外部化

 

問題点(図-2):includeを使ってHTMLファイルを丸ごと読み込むと、上部に空白ができてしまう。

 

HTMLの共通部分を外部化

 

おそらく、UTF-8のボム付になってるのが原因だと思われるので、PHPを使う場合はボムなしにするとうまく行く。(図-3)

 

EmEditorの場合、『名前を付けて保存』で最下部に『エンコード』が表示されるので、【UTF-8(BOM無し)】を選択して保存する。

php の実例。

本体側実例。(本体側も、xxx.html から xxx.php で保存)

 

以上。
(2017.03.14)

 

スポンサー リンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です