ホームページ・サイトで共通部分（メニュー）を一括管理

ホームページ・サイトで共通部分（メニュー）を読み込ませる

メニューはページが追加されるたびに変わるところで各ページにあります。
したがって、ページが追加されたことによりメニューが変更されると、各ページを書き換えなければいけなくなってしまいます。

ページ数が数ページからせいぜい１０ページぐらいまでなら、ページを追加するごとに書き換えればいいのですが、数十ページ、数百ページにもなってくると、ページを追加するたびに全ページを書き換えるなんてとてもやってられません。

そこで、各ページに共通した形になっている「メニュー」の部分だけを別ファイルにしておいて、それを埋め込む形にしておけば、ページが増えたときでも、その「メニュー」のファイルだけを変更すれば、他の各ページには自動的に反映されるというようにすれば、効率的にホームページ・サイトを運営することができます。

では実際に、その方法についてみていきましょう。

例として、以下のような３カラムからなる聖杯レイアウトのページで、メニューを変更するということで想定してみます。

このページの以下の部分に、各ページに共通するメニューを入れこみたい。

<aside id="menu01">
ココに各ページに共通するメニューを入れ込みたい
</aside>

こうした場合、各ページに共通した形になっている「メニュー」の部分だけを別ファイルにして読み込む方法は、いろいろな方法があります。
そこで、

①JavaScript (Fetch API) を使う方法
②PHP を使う方法
③Web Components (カスタム要素) を使う方法

の３つをご紹介します。
これは、メニュー以外にも、サブメニューなど、ページによらず共通している部分に応用することができます。

JavaScript (Fetch API) を使う方法

この方法は、静的なHTMLサイトで最も一般的に使われる方法で、普通のHTMLサイトにお奨めです。
メリットは、サーバー設定が不要なところで、デメリットはJavaScriptが無効だと表示されない点です。

【手順１】まずは、メニュー部分のファイル（menu01.html）を作成する。

<nav class="main-menu">
<ul>
<li><a href="/">ホーム</a></li>
<li><a href="/service">サービス</a></li>
<li><a href="/contact">お問い合わせ</a></li>
</ul>
</nav>

こんな感じで、実際に埋め込む部分だけを記載して、menu01.htmlで保存すればＯＫです。

【手順２】まずは、メニュー部分のファイル（menu01.html）を作成する。
サイトの読み込みたい場所に <div id="menu01"></div>を設置する。

【手順３】スクリプトの記述
以下のスクリプトを記述する。

fetch('menu01.html')
.then(response => response.text())
.then(data => {
document.getElementById('menu01').innerHTML = data;

PHP を使う方法

レンタルサーバーなどでPHPが利用できる場合、これが最も確実でSEOにも強い方法としてお奨めです。
メリットとしては、動作が安定しておりSEOに強い点があげられ、デメリットとしては、サーバーがPHP対応である必要あるという点です。
【手順１】メニュー部分を menu.php という名前で保存する。

<nav class="main-menu">
<ul>
<li><a href="/">ホーム</a></li>
<li><a href="/service">サービス</a></li>
<li><a href="/contact">お問い合わせ</a></li>
</ul>
</nav>

こんな感じで、普通にテキストファイルやＨＴＭＬファイルを作るときと同じように実際に埋め込む部分だけを記載して、保存する時にUTF-8形式で、拡張子を php として menu.phpで保存すればＯＫです。

【手順２】読み込みたい箇所に設置。
読み込みたい箇所に以下の1行を書く。
<?php include 'menu.php'; ?>
PHPの include は、サーバー側で「別ファイルの中身をそこにコピー＆ペーストする」ような動きをします。

【手順３】読み込む側のファイルも .php にする
index.html の中で include を書いても、サーバーは「これは普通のHTMLだからPHPの命令は無視しよう」と判断してしまい、メニューが表示されません。
読み込む側のファイル名も index.php のように拡張子を変更する必要があります。

※注意
PHPファイルは、ブラウザで直接ファイルを開いても動きません。
HTMLファイルはデスクトップにあるファイルをダブルクリックすればブラウザで表示されますが、PHPは「サーバー」を通さないと動作しないので注意してください。

Web Components (カスタム要素) を使う方法

タグとして扱えるので管理しやすいという利点があります。
古いブラウザ（IEなど）では非対応ですが、2020年頃には主要ブラウザすべてで標準サポートが完了していて、Edge、Chrome、Safari をはじめとする主要なモダンブラウザでは問題なく使えます。

【手順１】JavaScriptファイルを作成する (menu.js)を作成します。
JavaScript（menu.js）

// カスタム要素「side-menu」の定義
class SideMenu extends HTMLElement {
connectedCallback() {
// 表示したいHTML構造をここに書く
this.innerHTML = `
<nav class="main-menu">
<ul>
<li><a href="/">ホーム</a></li>
<li><a href="/service">サービス</a></li>
<li><a href="/contact">お問い合わせ</a></li>
</ul>
</nav>
`;
}
}
// ブラウザに「<side-menu> というタグを使います」と登録する
customElements.define('side-menu', SideMenu);

普通のテキストエディタに上記のように記載し、保存するときにファイル名をmenu.jsとすればＯＫです。

※注意点
Web Components を使う際、menu.js を読み込むときに defer 属性（<script src="..." defer>）をつけるのがコツになります。
これにより、HTMLの解析が終わったタイミングで実行されるため、「タグを置いたのに中身が出ない」というトラブルを防ぐことができます。

【手順２】HTML側での実装をします。
提示したHTML構造に、作成した menu.js を読み込み、<aside id="menu"> の中に自作タグを配置します。
HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サイトタイトル</title>
<script src="menu.js" defer></script>

※HTML側では <script src="menu.js"></script> を読み込み、<side-menu></side-menu> と書くだけで表示されます。

sitemap.xmlの作成

sitemap.xml（XMLサイトマップ）とは、検索エンジンのクローラー（ボット）に対して、ウェブサイト内のページ構成や最終更新日などの情報を伝えるための専用ファイルになります。

WordPressを使っているなら、「XML Sitemaps」や「Yoast SEO」などのプラグインを導入するだけで問題なく作成できます。

もしホームページ・サイトが500ページ以下のものであれば、ＵＲＬを打ち込むだけで自動的にsitemap.xmlを出してくれる『オンラインの自動作成ツール』の利用がお奨めです。

100〜500ページ規模であれば、オンラインの自動作成ツールが最適です。500ページまでなら「完全無料」で使えるものが多く、操作もURLを入れるだけで数分で終わります。

特におすすめの、信頼性が高く使いやすいサイトを2つご紹介します。
sitemap.xml Editor（最大1,000ページ）
URL: https://www.sitemapxml.jp/

国内で最も有名な無料ツールの一つです。日本語なので設定が分かりやすく、最大1,000ページまで対応しているため、500ページ規模のサイトなら余裕を持って作成できます。
除外したいフォルダの指定など、細かい設定が可能です。
PCにインストール不要で、ブラウザ上で完結できます。
作成後、その場でファイルをダウンロードできます。

XML-Sitemaps.com（最大500ページ）
https://www.xml-sitemaps.com/

特徴: 除外したいフォルダの指定など、細かい設定が可能です。
PCにインストール不要で、ブラウザ上で完結できます。
作成後、その場でファイルをダウンロードできます。
常に動作が安定している。
無料版の上限がちょうど500ページ（それ以上は有料）。
作成完了後に「View Sitemap Details」からファイルをダウンロード可能。