BlogWeb制作の小さなテクニック集

headタグ内のjavascriptのリンク(読み込み)を全ページ共通化する方法

たとえば、Webサイトに動きを追加するjsファイルをリンクする際、

サイトの全ページを開いて、head内に追記して、全てをアップロードする

という作業が面倒に感じたことはありませんか?
そんなときには「phpのインクルード」が便利です。

Webページのファイル拡張子が「.html」の場合

もともとページ拡張子がphpの場合は問題ありませんが、「.html」で作っていた場合は、phpが実行できるようにしなければなりません。

htaccessファイルに下記3行を追記して、サーバの一番上の階層(topページと同じ場所)に設置すればphpが使えるようになります。

<FilesMatch "\.html$">
  AddType application/x-httpd-php .html
</FilesMatch>

 

js等のリンクのタグを、外部ファイル化する。

すべての既存ページに、下記のようなJSリンクが書いてあるはずですが、それをすべて削除して、「js.php」などのファイルを作り、その中に移動させます。

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="/Scripts/scroollbar.js"></script>

 

<head>〜</head>内に下記の1文を追記する(インクルード)

<?php include($_SERVER['DOCUMENT_ROOT']."/js.php"); ?>

これは、先ほど作った「js.phpの内容をすべてここに挿入しろ」という文です。
すべてのページに上記のphpコードを入れて下さい。次回からは「js.php」を書き換えるだけでOKです。
 

js.phpの中身は「/」から始まる絶対パスで書きましょう。

src="/Scripts/scroollbar.js"

これは、サーバの一番上から見て「Scriptsフォルダの中」を指しています。
に追記したファイルの階層の位置に関わらず、上からファイルを指定することになるので、書き方が一定になります。
「../」などの、1階層戻った指定が不要になります。

インクルードのメリットは絶大です

弊社では「インクルードが使いたい」という理由のみで、Webページはすべてphpファイルにて作成しています。
Wordpressとの親和性も高いですし、おすすめです。

FAQよく頂くご質問

お客様の疑問にお答えします。

Contactお問合せ

ご不明点はお気軽にお問合せ下さい。