navやfooterを共通化したサイトを安全に更新する方法
PHPの include などで nav.php や footer.php を共通化すると、1ファイルを直すだけで全ページを更新できます。
これは便利ですが、リンクミスや閉じタグのミスも全ページへ広がります。共通パーツを更新する時は、通常の記事ページよりも少し慎重に確認しましょう。
共通パーツ更新の安全な流れ
変更前に保存し、影響範囲を確認してから、小さく修正し、トップページと下層ページとスマホ表示を確認します。
先に結論
共通化済みの nav や footer を更新する時は、次の順番で進めます。
- 現在の共通ファイルをバックアップする
- どのページに影響するか確認する
- リンク先やパスを確認する
- PCとスマホのメニュー表示を確認する
- トップページと下層ページで表示確認する
- 問題が出たら共通ファイルを元に戻す
1. 変更前に共通ファイルを保存する
共通パーツは1ファイルの影響が大きいため、更新前にサーバー上で動いている現在のファイルを保存します。
nav.phpを保存したfooter.phpを保存した- 関連するCSSやJavaScriptも必要に応じて保存した
- 戻す時にどのファイルをアップロードするか分かる
2. 影響範囲を確認する
共通パーツがどのページから読み込まれているかを把握します。全ページで使っている場合、1つのリンク追加でも全ページに反映されます。
| 共通パーツ | 影響しやすい場所 |
|---|---|
nav.php | メニュー、カテゴリ、言語切り替え、スマホメニュー |
footer.php | フッターリンク、運営情報、問い合わせ導線 |
head-tags.php | CSS、JavaScript、解析タグ、favicon |
| 共通CTA | 問い合わせボタン、関連記事、広告下部 |
3. リンク先とパスを確認する
共通パーツ内のリンクは、トップページでも下層ページでも正しく動く必要があります。階層に依存する相対パスは、ページによって壊れることがあります。
- リンク先はできるだけルート相対パスで書く
/contact.phpのようにサイトのルートから指定する- 画像やアイコンのパスも確認する
- サブディレクトリ公開の場合はルート相対パスの扱いに注意する
- 存在しないURLへリンクしていないか確認する
4. スマホメニューを確認する
ナビを更新した時は、PCだけでなくスマホメニューも確認します。項目が増えると、画面からはみ出したり、押しにくくなったりします。
- スマホ幅でメニューが開く
- 追加したリンクが表示される
- リンク同士が近すぎない
- メニューが画面外にはみ出さない
- メニューを閉じられる
5. 複数ページで表示確認する
共通パーツは、トップページだけで確認すると見落としが出ます。階層の違うページでも確認します。
- トップページを確認する
- 通常の記事ページを確認する
/templates/lolipop/など階層の深いページを確認する- スマホ幅で確認する
- 追加・変更したリンクを実際に押す
AIへ相談する時の文例
AIに共通パーツの更新を頼む時は、共通パーツであることと、全ページへ影響することを明記します。
navやfooterを共通化したサイトを更新します。
このファイルは複数ページでincludeされています。
更新したいファイル：
更新したい内容：
影響するページ：
変えてほしくないリンク：
スマホメニューの有無：
関連するCSSやJavaScript：
バックアップの有無：
確認してほしいこと：
1. リンク切れの可能性
2. 相対パスとルート相対パスの問題
3. スマホ表示への影響
4. 変更後に確認するページ
5. 問題が出た時の戻し方
既存デザインやURLを大きく変えず、最小限の修正案にしてください。共通パーツ更新チェックリスト
- 変更前の共通ファイルを保存した
- 影響するページを把握した
- リンク先とパスを確認した
- スマホメニューを確認した
- トップページで確認した
- 下層ページで確認した
- 追加したリンクを実際に押した
- 問題が出た時に元へ戻せる