共通パーツ(header,footer等)をjQueryで読み込んで編集を楽にする方法 & 文字化け対策

LINEで送る
Pocket

WordPress等のCMSではなく、htmlで構築され、headerやfooter等、同じパーツを使っているサイトを編集する時、同じものをいちいち編集するのがすごく面倒というか時間が無駄というか。。DreamWeaver等の機能を使ってもよいのですが、簡単なようで久しぶりに見るとどこをどうすればよいか把握に時間がかかったりするので、良い方法が何かあるはず。と思って探していたところ、jQueryのみでシンプルにできる方法があった!のでその覚書を。そしてその方法を使って文字化けが発生していたことに気づいてなかった(クロスブラウザチェックを怠っていた。。)のでその対策方法も書いていきたいと思います。

jQueryを使って、共通パーツを読み込む方法

まずは共通パーツを読み込む方法を簡単に説明すると、普通にhtmlでページを作成したページから、Header, Footer等の共通で読み込むパーツを別のhtmlファイルとして作成し、それをjQueryで読み込む。といった方法です。

そんなわけで、htmlのページが作成されているのを前提に、

1. 共通で読み込みたいパーツ(Header、Footer等)を作成し、任意の場所におきます。

以下はサンプルです。

<!--ここから共通<header>-->
<a href="パス">ロゴとかタイトルとか</a>
<ul>
  <li><a href="パス">メニューとか</a></li>
  <li><a href="パス">メニューとか</a></li>
  <li><a href="パス">メニューとか</a></li>
</ul>
<!--ここまで共通</header>-->

htmlやbodyダグなどは不要です! あとで詳細は書きますが、ここで文字コードを記述すると文字化けする原因になるので、注意です。

2. htmlの元のページにjQueryファイルと、共通パーツ(Header、Footer等)を読み込むための記述をタグ内に、以下のように埋め込みます。

<head>
  <script src="js/jquery.min.js jQueryのパス"></script>
  <script>
    $(function() {
      $("#header01").load("読み込むheaderのhtmlファイルのパス/header01.html");
      $("#footer01").load("読み込むfooterのhtmlファイルのパス/footer01.html");
    });
  </script>
</head>

3. タグ内に、共通で読み込みたいパーツ(Header, Footer等)を以下のように記述します。

<body>
  <div id="wrapper">
    <header id="header01">ここにheader01.htmlの内容が入る</header>

    〜〜

    <footer id="footer01">ここにfooter01.htmlの内容が入る</footer>
  </div><!-- /#wrapper -->
</body>

とりあえずはこれでOKです!!

超簡単。これでそのパーツだけ修正すれば、全ページでHeader, Footer等が自動的に置き換わってくれちゃいます!! もうこれは最初に作るときにこのような作りにしちゃった方が、後々の事を考えたら絶対いいですよね。

ただ、普通にUTF-8でページを作成されてる方はこれでおそらく問題ないと思うのですが、Shift_JIS等で作成されてる方は少し注意点があるので、以下も見てくださいね。

注意点:文字コードの問題(楽天のECサイトにて)

簡単にできたのはいいのですが、実は注意しないといけないのがエンコード(文字コード)の問題です。ま、普通にUTF-8で作成していれば問題ないのですが、楽天のECサイトのように『Shift_JIS』を使わないといけないようなサイトもあります。
楽天のECサイトはエンコードが『Shift_JIS』なので、共通パーツもそうしないとダメだろう。と思い、htmlタグを入れ、エンコードを『Shift_JIS』で作成していました。最初は大丈夫のように見えてたのですが、Firefoxのみで文字化けが起こってしまい、なかなか原因がわからず。。という状態に陥ってしまいました。(2017/8時点:Mac[OS10.11.6, FF ver.54.0.1]、Windows[10, FF ver.54.0.1] 両方)

原因

原因は、楽天内だから、その共通パーツも『Shift_JIS』にしないといけない。と思い、共通パーツを『Shift_JIS』で作成したこと でした。読み込む元のhtmlページの文字コードは『Shif_JIS』なのに、読み込み先のページが、『UTF-8』で読み込まれるjQueryのファイルを必要とするファイルとなるため、楽天内だからといって、共通パーツも『Shift_JIS』で作るのはダメ。ってことなんですね。
要は共通パーツは『UTF-8』にしないと文字化けする! ということです。ですので、わざわざhtmlタグをいれてhtmlファイルとしなくてもOKだったわけです。
今回はFirefoxのみでの現象だったのですが、とりあえず共通パーツは『UTF-8』ということを忘れないようにした方がよさそうです。

まとめ

まさか Firefoxだけで文字化けが起こるなんて思ってなかったので少々はまってしまったのですが、このお陰でjQueryが『UTF-8』で作成されているとわかったことはよかったのかな。と思います。そんなこと今まで考えたことすらありませんでしたので。ま、これはレアケースだと思いますが、とりあえず最初にこの対策をしていれば後々絶対楽なので、少々面倒でも今後はこの方法で作成したいと思います!



関連記事

SyntaxHighlighter Evolved のサムネイル

WordPressで “SyntaxHighlighter” を使って、ソースコードをキレイに書く方法


よくwebデザイナーさんやクリエイターさん、プログラマーさんたちの書いてるwebサイトを見たら、ソースコードを、 …

記事を読む▷


OPG設定_3

WordPressのプラグインなしで、Jetpackと共存してFacebookやTwitter CardのOGPの設定をする!


先日、ようやく気になっていたOGPの設定を、WP-OGPのプラグインを変更して使えるようにしたのですが(詳細は こちら …

記事を読む▷


wordmork.itの画像3

wordmark.it でフォントを選ぶ方法


フォント選びって結構大変ですよね。使用するフォントによって、そのサイトなりデザインの印象が変わってくるので、色選びもそう…

記事を読む▷


no image

テキスト、画像を選択できなくする方法


facebookで『続きを読みたかったらいいねを教えてね!』みたいな記事がよくありますが、必ずそういう記事に限ってコピペ…

記事を読む▷


z-index が効かない時の対処方法


z-index が効かない時がちょくちょくあります。でも、仕事でそういう場合に遭遇すると、その場しのぎで対処法を見つけて…

記事を読む▷


WP Social Bookmarking Lightを好きな場所に設置、移動する方法


WP Social Bookmarking Lightを好きな場所に設置、移動する方法です。 以前、自分で管理している…

記事を読む▷


2017最新版:SNS等の公式ロゴ(アイコン)素材のまとめ(Facebook, Instagram, Youtube, Twitter, Line etc.)


一度サイトを作ってしまうとなかなか更新せず使い回してしまうのが、この『SNSのロゴ(アイコン)』だと思うのですが、サイト…

記事を読む▷


画像やテキストを中央(上下左右真ん中)に配置する方法


普通にtext-align:center;や、margin:0 auto;等でテキストや写真を真ん中に配置したつもりでも…

記事を読む▷


backgroundプロパティの正しいショートハンドの書き方


ABCから始めよう!と言いつつ、ちょっとABCからの内容ではないかもしれませんが、今まで貯めてた "?" の解決法で、今…

記事を読む▷


OGPをWP-OGPのプラグインを改変して設定する!!2015年のOGP最新設定


今度こそ。。。OGPの設定で何時間、というより何日?何ヶ月?かかってるんや。。。という感じなのですが、もう最初の投稿から…

記事を読む▷


Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

参考にさせていただいてるサイト

Error: Feed has an error or is not valid

PAGE TOP