Drip 'n' Snip

ドリップン・スニップ

あなたの生活役立つWEB情報イッパイお届け
スポンサーリンク

静的なwebサイトなら、WordPressを使わずにphpのincludeでテンプレートエンジン化しちゃおう

2018/06/25

Pocket

今回はweb制作の話です。

こんにちは、基本的にWordpressでweb制作をしている僕です。

しかし、時にはWordpressの機能が何一つ必要ない、というお仕事もありますよね。
お問い合わせフォームも、ブログ機能も必要ない!という場合。
それでも僕は、ランディングページでないのなら、メニューや共通のヘッダ、フッタが使えると便利なので、Wordpressを使ってどんな静的なサイトも作っていました。

そんな時、ふと気づいたのです。
それって、普通にPHPのinclude関数でいいんじゃないの?と。

phpのinclude関数とは

そもそも、HTMLで書かれたwebページのファイルの拡張子は.htmlですが、PHPが使えるwebサーバーであればその拡張子を.phpにしても動きます。

.phpという拡張子を持ったファイルの中で、で囲んだ部分を記述すると、その囲まれた部分はphpを記述できるようになります。
逆に、囲まれていない部分は普通にhtmlを記述する事が出来ます。
ここまでが前提。

そして、wordpress等で便利なヘッダ・フッタ・メニュー等の仕組みは、それぞれを別のファイルにしておいて呼び出すことによって使いまわせる、という点が便利なのです。

そこで、PHPに用意されている、別の.phpファイルを呼び出すことが出来るinclude関数を利用すれば、Wordpressのようにヘッダ・フッタ・メニューやサイドバーをそれぞれ別ファイルとして記述して、それぞれのページ毎に結合して利用することが出来るようになります。

%e5%90%8d%e7%a7%b0%e6%9c%aa%e8%a8%ad%e5%ae%9a%e3%82%bf%e3%82%99%e3%82%a4%e3%82%a2%e3%82%af%e3%82%99%e3%83%a9%e3%83%a0
こんなイメージですね。

header.phpには共通のヘッダの部分、menu.phpには共通のメニューの部分…という風に、共通部分を別のPHPファイルに切り分けて作ります。
そして、index.phpやsubpage.php等のそれぞれのページで呼び出して、そのページに固有の部分だけを書くようにするのです。

具体的には、

<?php include("header.php"); ?>

のようにして呼び出すphpファイルを指定します。
そしてメインの記述を終えたら、サイドバーとフッタを同じようにして呼び出します。

<?php include("sidebar.php"); ?>
<?php include("footer.php"); ?>

こうしておけば、メニューに変更が入った場合や、サイドバーの内容など、1箇所変更するだけで全てのページに適用されます。
静的なHTMLだけで作ると辛かった共通部分への変更問題が、これだけで解決出来てしまいます。

まとめ

・静的なページだけで良いWEBサイトを作る際に、HTMLだけを使うのでなく、PHPを使ってinclude関数を使用すればテンプレートエンジンのように共通部分を切り出すことが出来る。
・上手くいけば、Wordpress等のテンプレートエンジンのインストールや更新・データベースの確保等の手間を省略出来る
・サーバーがPHPを利用できることさえ確認しておけば何も難しいことはない!

静的なHTMLサイトを作る際には是非お試しください。

                           

  関連記事

あのTinypngが自動でかかる!Compress JPEG & PNG imagesが便利すぎ

こんにちは、楽をするためにはどんな努力でも惜しまないタイプの僕ですが、努力が報わ ...

Sketchのプラグイン「Looper」でオリジナルの幾何学模様がかんたんに作れる!

Sketchで模様が簡単に作れる!Looperで模様マスターになろう!

マインドマップ、みんなで描くなら「coggle」

マインドマップは手書きが本流。でもせっかくならパソコン・スマートフォンを活かしてマインドマップを描こう!第一弾!

【動画あり】esa.io!Markdownが使えて、共有が出来る!日本が産んだゆるふわwebサービス

こんにちは、僕です。 これまでもQuiverやConfluenceなど、Mark ...

【iOS11新機能】「アプリの使い方教えて」に答えるiOS11の画面録画機能

iOS11に追加された隠れた新機能「画面収録」で「iPhone教えて」を華麗に切り抜けよう!

-WEB開発, ノウハウ