ページの一部分を共通化したい
ご覧いただきありがとうございます。
鈴木です。
私の講座ではワードプレスの使い方よりも
テンプレートを利用した作成方法をお伝えする事が多いのですが
一つ一つページを更新する時にフッターやヘッダー
もしくはサイドメニューでのページやブログの更新状況をのせたい場合
全ページ修正をしなければならなくなります。
そんな面倒な事は到底したくありませんよね。
そんな皆様のためにいくつかやり方はありますが
一番簡単でＳＥＯ的にも障害の少ないやり方をご紹介します。
JavaScriptを使う方法
最近スマホでもよく使われるようになってきた「JavaScript」を使う方法をお伝えします。
まず始めに部分化したい場所をhtmlでをそのまま抜き出します。
footer部分を抜き出し、共通化すると仮定して
まずは<footer>から<／footer>の間の中身だけをコピーします。
そして新しく作ったhtmlにそのままペースト
<html><head><body>などは必要ありません。
ファイル名をfooter.htmlとして保存します。
これで抜き出し完了です。
他の部分を共通化したい場合には同じように抜き出して
わかりやすい名前を付けて保存しておきましょう。
保存場所
任意の名前を付けた抜き出しhtmlは
index.htmlすなわちページのデータと同じ階層に保存します。
挿入したいhtmlを編集
index.htmlを例にとってみます。
まずは<head>内にjQueryを読み込む記述を書きます。
ーーーーーーーーーーーーーーーーーーーーー
<script src=“js/jquery.min.js“></script>
ーーーーーーーーーーーーーーーーーーーーー
続いてloadメソッドで読み込む記述
ーーーーーーーーーーーーーーーーーーーーー
<script type=”text/javascript”>
$(function(){
$(“#footermenu”).load(“footer.html”);
})
</script>
ーーーーーーーーーーーーーーーーーーーーー
そして挿入したい部分に以下の記述を書きます。
ーーーーーーーーーーーーーーーーーーーーー
<div id=”footer”>
</div>
ーーーーーーーーーーーーーーーーーーーーー
以上で挿入されます。
注意する事
ここで注意しておかなければ行けない点をあげます。
それは「JavaScript」の実行順。
こだわった作りのサイトですと
様々なエフェクトをつけたりプルダウンメニューをつけたり
「JavaScript」を使用している事があります。
実行所順によってはページが読み込まれる前にjQueryが実行されてしまい
うまく機能しないという事もあるようです。
うまく機能しない時の対策方法
一概にはいえませんがもしそうなってしまった場合には
パーツ側のhtmlに他の「JavaScript」を記述すると大丈夫です。
そうすれば実行序順でせっかくのかっこいいエフェクトやプルダウンメニューが
機能しなくなってしまったという事はありません。
まとめとして
やはりワードプレスや他のCMS機能にはなかなか手軽さが勝てませんが
どうしても自信でカスタムしたい方にはテンプレートから少しづつ
編集していただく事が一番だと思います。
そして共通化をしたい部分を最初から決めて
なるべく早い段階から以上のような取り組みをなさってください。
以上
コメント