htmlにphpを埋め込む＆phpをインクルードさせる

 

includeさせるファイルがbootstrap5でつくっており、埋め込み先がbootstrap3の場合は、表示されるけども、各種フォントなどが軒並み小さく表示された。テニスのプレミア店の告知テストでそうなったので、その時はphpでは埋め込まなかった

 

 

 

https://www.sejuku.net/blog/30680

 

 

↑上記の方法でhtmlにphpを動かすには下記を.htaccessに記述しないと動かない。

 

可能にするには、
「.htmlでもphpとして実行してね」という記述が必要です。

以下の記述を.htaccessにします。

AddType application/x-httpd-php .html .htm

 

https://blog.trippyboy.com/2011/apache/%E6%8B%A1%E5%BC%B5%E5%AD%90%E3%80%8C-html%E3%80%8D%E3%81%AB%E3%81%A6php%E3%82%92%E5%AE%9F%E8%A1%8C%E3%81%99%E3%82%8B%E3%81%9F%E3%82%81%E3%81%AE-htaccess/

 

 

htmlファイル上にphpを埋め込んで動かす方法

 

 

 

phpをhtmlにインクルードさせる

new-chance/building/

https://qiita.com/non0311/items/aef6b5f030dfeb517c17

 

https://xn--web-oi9du9bc8tgu2a.com/php-basic-function-include/

HTMLを勉強してホームページを公開してみたものの、運用についてお悩みの方もきっと多いのでは？

例えば、ページを1つ追加しただけなのに、すべてのページにリンクを貼りつけなければならないのが面倒で結局更新しなくなってしまったり、デザインを変えたいけど、すべてのページに反映させるのが面倒で、手を付けないままにしてしまったり。

1つの修正がすべてのページに及んでしまうことの億劫さはホームページを公開した多くの方が一度は頭を抱えてしまう問題だと思います。

そんな問題を解決に導くのは、『1つを変更したら、すべてのページに反映するような状態にする』こと。外部ファイル化して、各ページはそのファイルを読み込んで表示するような仕組みにすることで実現できますので、どうぞ一度お試しください。

すべてのファイルを変更するのはしんどい…解決策は『外部ファイル化』

ページを一つ追加したからサイトのメニューを更新しなきゃ!とは思ったものの、ページ数が多くて大変…。
経験がある方もいらっしゃると思います。そのような場合は、サイトのメニューを外部ファイル化しておくことで手軽に更新できるようになります。

ヘッダーやフッター、サイドバーなど、どのページでも表示させる部分のHTMLコードを外部ファイル化させて、各ページで1つのファイルを使いまわす形にすれば、そのファイルを変更するだけで、その変更内容がすべてのページに反映されます。

外部ファイル化を行う方法はいくつかありますが、『PHP』を使う方法が一般的です。

 

PHPを使って外部ファイルを読み込む際は次のどちらかの関数を使います。

  • include
  • require

PHPは“関数”という『処理をひとまとめに定義したもの』をいくつも用意してくれています。上記のinclude関数、require関数はどちらも外部ファイルを読み込む処理をします。

次のように書くことで、外部ファイルを読み込めるようになります。

<?php include(‘ファイルのパス’); ?>

または

<?php require(‘ファイルのパス’); ?>

 

外部ファイル化してみる

下記のHTMLコードの『<!– ここから外部ファイル化する –>』から『<!– ここまで外部ファイル化する –>』までを外部ファイル化してみます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>test</title>
  <link rel="stylesheet" href="./css/style.css">
</head>
<body>
  <div id="wrapper">
    <div id="header">
      <h1>これはテストページです。</h1>
    </div>
    <!-- ここから外部ファイル化する -->
    <div id="side">
      <p>ここはサイドです</p>
      <ul>
        <li>メニュー1</li>
        <li>メニュー2</li>
        <li>メニュー3</li>
        <li>メニュー4</li>
        <li>メニュー5</li>
        <li>メニュー6</li>
        <li>メニュー7</li>
        <li>メニュー8</li>
        <li>メニュー9</li>
      </ul>
    </div>
    <!-- ここまで外部ファイル化する -->
    <div id="main">
      <p>ここはメインです</p>
      <p>
        テキストテキストテキストテキスト<br>テキストテキストテキストテキスト<br>テキストテキストテキストテキスト<br>テキストテキストテキストテキスト<br>テキストテキストテキストテキスト<br>テキストテキストテキストテキスト<br>テキストテキストテキストテキスト<br>テキストテキストテキストテキスト<br>テキストテキストテキストテキスト<br>
      </p>
      <p>
        テキストテキストテキストテキスト<br>テキストテキストテキストテキスト<br>テキストテキストテキストテキスト<br>テキストテキストテキストテキスト<br>テキストテキストテキストテキスト<br>テキストテキストテキストテキスト<br>テキストテキストテキストテキスト<br>テキストテキストテキストテキスト<br>テキストテキストテキストテキスト<br>
      </p>
    </div>
    <div id="footer">
      <p>テストページでした。</p>
    </div>
  </div>
</body>
</html>

STEP1. 使いまわしたい箇所を切り取り、別ファイルに保存する

切り取ったHTMLコードを別のファイルとして保存します。この時、拡張子は『php』で読み込むページと同じ階層に保存してください。
今回は『side.php』とします。

    <!-- ここから外部ファイル化する -->
    <div id="side">
      <p>ここはサイドです</p>
      <ul>
        <li>メニュー1</li>
        <li>メニュー2</li>
        <li>メニュー3</li>
        <li>メニュー4</li>
        <li>メニュー5</li>
        <li>メニュー6</li>
        <li>メニュー7</li>
        <li>メニュー8</li>
        <li>メニュー9</li>
      </ul>
    </div>
    <!-- ここまで外部ファイル化する -->

includeさせるphpにはhead情報はinclude先のhtmlに記載があればいらない。wordpressのphpのパーツみたいに考えたらよい。いらない物記載すると表示されなくなるから。

 

STEP2. 切り取った箇所に外部ファイルを読み込む関数を入れ込んで保存する

先ほど切り取った箇所に外部ファイルを読み込むinclude関数を記述し、ファイルを保存します。拡張子は『php』で保存してください。
ファイル名は『index.php』とします。

※13行目に追記しています。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>test</title>
  <link rel="stylesheet" href="./css/style.css">
</head>
<body>
  <div id="wrapper">
    <div id="header">
      <h1>これはテストページです。</h1>
    </div>
<?php include('./side.php'); ?>
    <div id="main">
      <p>ここはメインです</p>
      <p>
        テキストテキストテキストテキスト<br>テキストテキストテキストテキスト<br>テキストテキストテキストテキスト<br>テキストテキストテキストテキスト<br>テキストテキストテキストテキスト<br>テキストテキストテキストテキスト<br>テキストテキストテキストテキスト<br>テキストテキストテキストテキスト<br>テキストテキストテキストテキスト<br>
      </p>
      <p>
        テキストテキストテキストテキスト<br>テキストテキストテキストテキスト<br>テキストテキストテキストテキスト<br>テキストテキストテキストテキスト<br>テキストテキストテキストテキスト<br>テキストテキストテキストテキスト<br>テキストテキストテキストテキスト<br>テキストテキストテキストテキスト<br>テキストテキストテキストテキスト<br>
      </p>
    </div>
    <div id="footer">
      <p>テストページでした。</p>
    </div>
  </div>
</body>
</html>

 

phpをhtmlにインクルードすると、html側の背景色が灰色になることがある。<body>タグにstyelで正しい背景色を指定してあげれば良い。

 

STEP3. ブラウザから『index.php』を閲覧する

PHPが動作するサーバーにアップロードし、ブラウザで閲覧すると、外部化したファイルを読み込んだ状態で表示されます。

 

 

 

 

https://berkiefer.jp/blog/tech/html-include/