【HTML】相対パス・絶対パス・ルートパスのメリット・デメリット + WordPress対応

HTMLを表示させるには､HTML(PHP)ファイルとは別に画像､CSS､JavaScriptなどのファイルを読み込んで表示させています｡
どこにあるファイルなのかを適切に指定するためにパスを書いていきます｡

HTMLを学習する最初に使用するのは相対パスだと思います｡
小規模サイトでは書くの簡単で使いやすいですが､中規模､大規模サイトになって階層が複雑になってくるとファイルの場所がわかりにくくなります｡

POINT

相対パスは小規模な静的サイトを制作するときに使う！

<link href="./css/common.css" rel="stylesheet">

<script src="./js/common.js"></script>

<img src="./img/apple.jpg">

メリット

読み込み元となるファイルから見て､読み込むファイルがどこにあるのかがわかりやすい

サーバー環境などを気にする必要がない

デメリット

サイト構造が大規模や複雑になると､ファイルごとにパスを変更する必要があり管理しにくい

ルートから見てどこにファイルがあるのかわかりにくい

パスの書き間違いをしやすい

ドメインを含め､ファイルまでのすべてのディレクトリを書くのが絶対パスです｡
ローカル環境ではまず使えないので､ほぼゼロからコーディングする人は使わないと思います｡

WordPressなどCMSの管理画面上でしかコーディングや編集をしないという人がよく使っている気がしますが､絶対パスはできるかぎり避けたほうがいいと思います｡

POINT

絶対パスは特別な事情がなければ使わない！

<link href="(ドメイン)/css/common.css" rel="stylesheet">

<script src="(ドメイン)/js/common.js"></script>

<img src="(ドメイン)/img/apple.jpg">

メリット

ルートから見て､読み込むファイルがどこにあるのかがわかりやすい

デメリット

ドメイン､SSL対応などの変更があった場合､すべてのパスを書き換える必要がある

サイト構造が大規模になると､すべてにドメインからのパスを書く必要があり記述量が増える

ドメインを書かずにルートからのファイルの場所で指定します｡
ドメインを書かないだけで以降は絶対パスと同じです｡

POINT

特にサイト構成が複雑な中､大規模サイトでは､できるだけルート絶対パスを使う！

<link href="/css/common.css" rel="stylesheet">

<script src="/js/common.js"></script>

<img src="/img/apple.jpg">

メリット

ルートから見て､読み込むファイルがどこにあるのかがわかりやすい(絶対パスと同じ)

ドメイン､SSL対応などの変更があっても､パスを書き換える必要がない

デメリット

ローカルでのコーディングをするにはサーバー環境をつくる必要がある(XAMPP,MAMPP など)

サイト構造が変更(サブディレクトリなど)となったときはパスを書き換える必要がある

WordPressの場合は､構造が特殊なので単純に相対パスでファイルの位置を追っていくことができません｡
ディレクトリを呼び出すWordPress関数を使うことで指定することができます｡

<link href="<?php echo esc_url( get_template_directory_uri() ); ?>/css/common.css" rel="stylesheet">
↓
<link href="(ドメイン)/wp-content/themes/(テーマ名)/css/common.css" rel="stylesheet">

<script src="<?php echo esc_url( get_template_directory_uri() ); ?>/js/common.js"></script>
↓
<script src="(ドメイン)/wp-content/themes/(テーマ名)/js/common.js"></script>

<img src="<?php echo esc_url( get_template_directory_uri() ); ?>/img/apple.jpg">
↓
<img src="(ドメイン)/wp-content/themes/(テーマ名)/img/apple.jpg">

<a href="<?php echo esc_url( home_url() ); ?>">
↓
<a href="(ドメイン)">

<a href="<?php echo esc_url( home_url( "contact" ) ); ?>">
↓
<a href="(ドメイン)/contact">

POINT

WordPressでは絶対パスを使わず､ファイルのディレクトリを呼び出すことができる関数を使う！

ページへのパスと､ファイルへのパスで使う関数が違うので注意する！

絶対パス･相対パス･ルートパスとWordPressの場合について紹介しました｡
それぞれメリット､デメリットがあるので制作する仕様､環境に合わせて最適なパスを使っていくことが大切です｡