共通パーツ読み込み（jQuery）

2023年1月17日 13:40

コレも『読み込み元のページ１つを更新すれば、読み込み先ページの更新をしなくても良い』という更新の効率化と、複数箇所に、同じ修正をおこなう場合に発生する、修正漏れ・修正の確認工程の軽減を目的としている。
ココ＞（ https://dezanari.com/html-include/ ）とは、（勝手に）真っ向から対立させてもらう。HTML 直書きが、最も事故率が高く、非効率であるのは明白。ましてや、ヘッダー・フッターなど、修正が発生すると、サイト全体に、確実に影響する部分は、新規案件・リニュアルであれば、最初からパーツ化するべき。

パーツファイルを丸ごと読み込み

html ファイルを丸ごと差し込む系。考え方が、PHP include と同じ。＞参考）PHP バージョン；https://note.com/itmsj/n/n3b0ac087a83e
外部参考記事）https://www.plusdesign.co.jp/blog/authorf124e/104.html

HTML 側；パーツを入れたい場所に、ターゲットとできる id, class が必要。

<!-- SP Menu -->
<ul class="drawer-menu"><!-- jsincl_menu -->
</ul>
<!-- /SP Menu -->
<!-- PC Menu -->
<div id="menu_wrap" class="Sp_dis"><!-- jsincl_menu -->
</div>
<!-- /PC Menu -->

JS 側

<script><!--
        $('.drawer-menu').load('jsincl_menu-sp.html');//SP メニュー読み込み
        $('#menu_wrap').load('jsincl_menu-pc.html');//PC メニュー読み込み
//--></script>

ページ内に、まとめて

<!-- SP Menu -->
<ul class="drawer-menu"><!-- jsincl_menu -->
</ul>
<!-- /SP Menu -->
<!-- PC Menu -->
<div id="menu_wrap" class="Sp_dis"><!-- jsincl_menu -->
</div>
<!-- /PC Menu -->
<script><!--
$('.drawer-menu').load('jsincl_menu-sp.html');//SP メニュー読み込み
$('#menu_wrap').load('jsincl_menu-pc.html');//PC メニュー読み込み
//--></script>

としても機能する。

別ページに存在するソースを、一部コピーして読み込む

考えられる状況として、
・パターン１
　詳細ページを作成し、そのページタイトルと、前段部分の内容を概要として一覧ページやトップページに読み込む
・パターン２
　ヘッダーからフッターまで１ページ丸ごとをテンプレートとして作成し、内部に共通パーツを設置。必要なページで、適宜テンプレートから読み込む。
※最近気付いたが、トップページと下層ページで、同じヘッダー・フッターを使うのであれば、トップページだけに全部記述とし、他ページは、トップページのヘッダー・フッターを読み込めば、わざわざテンプレートページも要らないのでは？　ということ。。。

HTML 側

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>incl-full For jQuery</title>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=10.0,user-scalable=yes">
<link href="/css/reset.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
<link href="/css/common.css" rel="stylesheet" type="text/css">
</head>
<body><div class="bodywrap">
	<header>
        <div id="header_wrap">
            <!-- ロゴ -->
            <div id="logo"><a href="/"><img src="/images/logo.png" alt="Logo" /></a></div>
    <div class="h1">_x_x_x_ Title _x_x_x_</div>

            <div id="menu_wrap">
                <!--サブメニュー-->
                <div id="sub_nav2">
                    <ul>
                        <li>> <a href="/en/">English</a></li>
                        <li><a href="#">お問合わせ</a></li>
                    </ul>
                </div>
                <!--/サブメニュー-->
            </div>
        </div>
                    <!-- メインメニュー -->
                <nav class="isSp">
                    <div class="sp_nav">
                    <div class="main_nav">
                        <ul class="dmenu">
                            <li class="menu_d csirt"><label for="about" class="lb_about mdlbtn">xxxについて</label>
                                <ul class="open about_sub">

                                </ul>
                            </li>
                            <li class="menu_d"><label for="active" class="lb_active mdlbtn">活 動 内 容</label>
                                <ul class="open act_sub">

                                </ul>
                            </li>
                            <li><a href="/member/">会員</a></li>
                            <li><a href="/admission/">加盟案内</a></li>
                            <li><a href="/contact/">お問合わせ</a></li>
                        </ul>
                    </div>
                    </div>
<div class="menu-next">＞</div>
                </nav>
                <nav2><!-- メインメニュー -->
                    <div class="main_nav">
                        <ul class="dmenu">
                            <li class="menu_d csirt"><label for="about" class="lb_about mdlbtn">About</label>
                                <ul class="open about_sub" data-modalIndex="1">
                                    <li><a href="/outline/">xxxについて</a></li>
                                    <li><a href="/outline/about.html">xxxとは</a></li>
                                    <li><a href="/outline/vision.html">理念</a></li>
                                    <li><a href="/outline/organization.html">運営</a></li>
                                    <li><a href="/outline/history.html">沿革</a></li>
                                    <li><a href="/outline/policy.html">ポリシー</a></li>
                                </ul>
                            </li>
                            <li class="menu_d"><label for="active" class="lb_active mdlbtn">活 動 内 容</label>
                                <ul class="open act_sub" data-modalIndex="2">
                                    <li><a href="/activity/">活動</a></li>
                                    <li><a href="/activity/xxx.html">xxx活動</a></li>
                                    <li><a href="/activity/group.html">グループ</a></li>
                                    <li><a href="/activity/award.html">表彰</a></li>
                                    <li><a href="/activity/support.html">支援</a></li>
                                    <li><a href="/activity/event.html">イベント</a></li>
                                    <li><a href="/activity/doc/">資料</a></li>
                                </ul>
                            </li>
                            <li><a href="/member/">会員</a></li>
                            <li><a href="/info/">案内</a></li>
                            <li><a href="/contact/">お問合わせ</a></li>
                        </ul>
                    </div>
                </nav2>
    </header>
<section class="sec_top">
メインボディ仮
</section>
    <!--SNSー-->
    <section id="sns_wrap">
    	<div id="sns_title">
    		<div class="sns_icon_wrap">
    			<div class="tw_icon"><a href="https://twitter.com/_x_x_x" target="_blank"><i class="fa-brands fa-twitter"></i></a></div>
    			<div class="fb_icon"><a href="https://www.facebook.com/_x_x_x/" target="_blank"><i class="fa-brands fa-facebook-square"></i></a></div>
    			<div class="youtube_icon"><a href="https://www.youtube.com/@_x_x_x" target="_blank"><i class="fa-brands fa-youtube"></i></a></div>
    		</div>
    	</div>
    </section>

    <!--footer-->
    <footer>
        <div id="footer_menu_wrap">
            <div id="footer_list" class="isPc">
                <div class="footer_menu">
                    <ul class="about_sub">
                    	<li><a href="/outline/">xxxについて</a></li>
                    </ul>
                </div>
                <div class="footer_menu">
                    <ul class="act_sub">
                    	<li><a href="/activity/">活動</a></li>
                    </ul>
                </div>
                <div class="footer_menu mem">
                    <p><a href="/member/">会員</a></p>
                    <p><a href="/info/">案内</a></p>
                    <p>外部リンク</p>
                </div>
                <div class="footer_menu cont"><!-- Top コンテンツ　と共有 -->
                    <p class="other_cont"><a href="/content/01.html">Contents01</a></p>
                    <p class="other_cont"><a href="/content/02.html">Contents02</a></p>
                    <p class="other_cont"><a href="/content/03.html">Contents03</a></p>
                    <p class="other_cont"><a href="/content/04.html">Contents04</a></p>
                </div>
            </div>
			<div id="sp_footer" class="isSp">
				<details class="footer_menu">
					<summary id="ft_about_ttl">About</summary>
					<ul class="about_sub">
					</ul>
				</details>
				<details class="footer_menu">
					<summary id="ft_act_ttl">Active</summary>
					<ul class="act_sub">
					</ul>
				</details>
				<details class="footer_menu">
					<summary id="ft_link">Link</summary>
					<ul>
					</ul>
				</details>
			</div>
                <ul class="footer_btm">
                    <li><a href="/logo/">ロゴについて</a></li>
                    <li><a href="/policy.html">プライバシーポリシー</a></li>
                    <li><a href="/contact/">お問い合わせ</a></li>
                    <li><a href="/en/">English</a></li>
                </ul>
        </div>
    </footer>
        <div id="copy">
            <p><small>© iTMSJ Inc. All Rights Reserved.</small></p>
        </div>
</div></body>
</html>

更新がある場合は、上記ファイルを更新するのみ。
header, footer 部分を読み込みたい場合は、

<header>
</header>
～～略～～
<footer>
</footer>

<script><!--
$('header').load('incl-all.htm #header_wrap');//header読み込み
$('footer').load('incl-all.htm footer>#footer_menu_wrap');//footer読み込み
//--></script>

　など、読み込みは適宜。

なお、テンプレページ（上記 incl-all.htm）とした場合は、bodywrap のような、wrap している class や、wrap 箇所がなければ、body に、display:none を付けて、万一、このテンプレページが検索されてしまっても、表示は見えないように対策をしておくほうが良いと思われる。

共通パーツ読み込み（jQuery）

パーツファイルを丸ごと読み込み

別ページに存在するソースを、一部コピーして読み込む

いいなと思ったら応援しよう！