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 の実例。

<li><a href="29-99couseitiran.html">● 奈良県のコース一覧</a></li>
<li><a href="29-001murousyasin.php"><span style="color:red">▶</span> 室生周回コース<br /> 写真</a></li>
<li><a href="../../01kaidou/1-2z_taketaima.html"><span style="color:blue">★</span> 竹内・当麻寺<br /> 二上山の写真</a></li>
<li><a href="../27oosaka/27-06takenoutitg.html"><span style="color:green">▶</span> 竹内峠の写真</a></li>
<li><a href="../27oosaka/27-0142dondurubou.html"><span style="color:green">▶</span> 屯鶴峯の写真</a></li>
<li><a href="../../01kaidou/7-2yamatoimai.html"><span style="color:blue">★</span> 今井町の写真</a></li>
<li><a href="../../01kaidou/7-2tosakaidou.html"><span style="color:blue">★</span> 町屋の雛めぐり<br /> 高取城跡の写真</a></li>
<li><a href="29-01imotg.php"><span style="color:red">▶</span> 芋ヶ峠</a></li>
<li><a href="29-035couse.php"><span style="color:red">▶</span> 29-035 奈良散歩<br /> コース写真</a></li>
<li><a href="29-02nantositidaiji.php"><span style="color:red">▶</span> 南都七大寺の写真</a></li>
<li><a href="29-03syoutokutaisikon.php"><span style="color:red">▶</span> 聖徳太子建立<br /> 七大寺の写真</a></li>
<li><a href="29-032couse.php"><span style="color:red">▶</span> 29-032 大和郡山城<br /> 周遊コース写真</a></li>
<li><a href="29-014couse.php"><span style="color:red">▶</span> 談山神社~津風呂湖<br /> 宇陀松山写真</a></li>
<li><a href="29-014tanzanjnjya.php"><span style="color:red">▶</span> 談山神社の写真</a></li>
<li><a href="29-0251couse.php"><span style="color:red">▶</span> 29-0251 柿山・柿畑<br /> を巡るコースの写真</a></li>
<li><a href="29-016couse1.php"><span style="color:red">▶</span> 天川村一周の<br /> コース写真</a></li>
<li><a><span style="color:green;"> ------------------------------</span></a></li>
<li><a href="../29-00nara.html">● 奈良県の自転車コースへ</a></li>
<li><a href="../../21jitensyako-su.html" target="_top">● 自転車コースへ</a></li>
<li><a><span style="color:green;"> ------------------------------</span></a></li>

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

<h2>関連ページ</h2>
			
	<?php
	include_once("sidebar_nara01.php"); // 奈良県関連ページ-01
	?>
 

以上。
(2017.03.14)

 

 

スポンサー リンク

 

             

 

コメントを残す

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください