１ページづつ変更なんか出来ない、ホームページの共通要素

　_{≪くれきん≫}

ホームページの共通要素、メニュウやフッター、更新情報など何千ページもあるサイトで１ページづつ変更してたら死んでしまいます。

ページの拡張子が.PHPであればPHPのincludeが普通に使えますが.htmlの場合は使えません。

そこで登場するのが、JavaScript(ajax)です。　ajaxを使えば外部ファイルをHTMLのページにincludeすることが出来ます。

やり方としては、①JavaScriptを呼び出す。②共通要素だけのページを新たに作る。③呼び出されるJavaScriptファイルを新たに作る。④共通要素を呼び出す。

という方法がありますが、③はファイルが増えて面倒なので各ページに直接記述します。

１、JavaScriptを呼び出す。header部分に下記をコピペして下さい。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

２，共通要素だけのページを新たに作る。
今回はメニュウにします。変更するメニュウの要素をそのままコピペしてファイル名を付けて保存します。今回はmenu.htmlにしました。
header部分にstylesheetへのリンクなど余計な要素は要りません。現在使っているメニュウのIDやclassなどの記述漏れがないように注意して下さい。

<!doctype html>
<html lang="ja">
<head>
<title>Menu</title>
</head>

<body>

    <nav id="mainNav">
      <a class="menu" id="menu"><span>MENU</span></a>
        <ul>
          <li class="active"><a href="https://○○○○.net/index.html">Home</a></li>
          <li><a href="https://○○○○.net/template.html">Template</a></li>
          <li><a href="https://○○○○.net/○○○/ganbou.html">Wish Test</a></li>
          <li><a href="https://○○○○.net/○○○/freehotline.html">Free Hotline</a></li>
          <li><a href="https://○○○○.net/○○○/index.html">Suicidal Desire</a></li>
          <li><a href="https://○○○○.net/contact.html">Contact</a></li>
        </ul>
    </nav>

</body>
</html>

ファイルへのリンクは階層の違うページでも使えるように絶対パスで記述しましょう

３、共通要素を呼び出す。JavaScript(ajax)をページに直接記述します。
下記のJavaScript(ajax)を現在メニュウの要素が記述されている部分と入替ます。

  <script>

    $.ajax( {
      url: 'menu.html',
      dataType : 'html',
      success: function( data ) {
        $( '#sample-text' ).html( data );

      },
    } );
  </script>

  <div id="sample-text"></div>

以上で完成です。　もう既にページ数が多くてそんな変更できないよ！という方は根性で頑張って下さい！　冗談です。

複数のHTML&テキストファイル内を一括置換出来るソフトがあるので検索してみて下さい。

小生はTextSS(高性能でバグがない)を愛用しています。