新・元地方の中規模印刷会社で苦悩するWebデザイナー改めWebディレクターの日記

自由な20代、窮屈な30代を経て、遂に40代になっちまったWebディレクター&パソコン講師の覚書と思う言(こと)。略称【ちほちゅう】

*

CMSで使うHTML内のリンクは「絶対パス」でも「相対パス」でもなく「サイトルート相対パス」がベスト【WordPress】

   

  • このエントリーをはてなブックマークに追加

WordPressはじめ、CMSってのは便利なやつで、ヘッダーやフッターは一つのファイル(PHP等)に記述するだけで事足りてしまいます。
ただ、その際に使うリンクや画像のURL表記には注意が必要。
というのは、ヘッダーやフッターはディレクトリが配下のページになっても基本的には同じものを使うから。

スポンサーリンク
 

一例としてトップページ(たとえばhttps://aaa.com/index.html等)のヘッダーにイメージ画像を貼っていて、そのHTMLが<img src=”img/head.png”>だったりすると、同じヘッダーをその配下(たとえばhttps://aaa.com/ccc/index.html等)でそのままの記述で使うと画像のリンクが切れて画像が表示されなくなってしまうことは容易に想像できると思います。

まあ、実際はPHPで書かれているのでWordPress関数を使ってこのあたりは対応してしまうことが多いのですが、とは言え、その関数がよくわからないなんてことも結構あるわけです。
あ、あと、WordPressを一般サイトのCMSとして運用している場合、固定ページなどにHTMLソースを書くこともありますからね。

で、そういうときは絶対パスで書いちゃうことが多いのですがそこにも落とし穴があったりするんです。
それは、https対策。

最近は、Googleなんかもhttpsのサイトの方を優先するなんて言っているみたいですが、httpsでのアクセスを意識したサイト構築も重要になっています。
仮に今、対応していなくても将来的に対応できるようにサイトを構築するべきでしょうね。

その際、絶対パスを使っちゃうとhttps化した時にいちいちパスを書き換えなくちゃいけなくなるわけです。
これも面倒。

で、以下がその解答。

そういうときは相対パスで書いちゃったほうがいいです。
え、でもさっきの<img src=”img/head.png”>って相対パスだよね?

正解。

ただ、相対パスにも種類があって、そのときに使う相対パスはサイトルート相対パスってやつを使います。
具体的には<img src=”img/head.png”>ではなく<img src=”/img/head.png”>にすればいいのです。

といったところでそれぞれ説明していきましょう。

まず、一般の相対パスについて

通常よく使われる相対パス表記には以下のような書き方があります。

相対パス表記 対象から見た場所
./ 同じ場所の「index.html」
ccc.html 同じ場所の「ccc.html」
aaa/aaa.html 同じ場所の「aaa」フォルダ内の「aaa.html」
../../bbb/bbb.html 一つ上の階層にある「bbb」フォルダ内の「bbb.html」

まあ、色んな書き方があるわけです。

いずれにしてもパス記述のあるHTMLファイルから見た場所というところになるのがポイントです。

一方、ルート相対パスですが至ってシンプル

上記の表にサイトルートパスを当てはめてみましょう。
前提としてindex.htmlはcccフォルダ内に入っているものとします。

相対パス表記 ルート相対パス表記 対象から見た場所
./ /ccc/index.html 同じ場所の「index.html」
ccc.html /ccc/ccc.html 同じ場所の「ccc.html」
aaa/aaa.html /ccc/aaa/aaa.html 同じ場所の「aaa」フォルダ内の「aaa.html」
../../bbb/bbb.html /bbb/bbb.html 一つ上の階層にある「bbb」フォルダ内の「bbb.html」

前半の方はかえって面倒くさい表記になってしまっていますが、書き方、考え方はシンプルです。
すべて「/」で始まっているところがポイントでしょうか。

この書き方をするとパスの基準が常にルートディレクトリ(HTMLファイルを置いておく一番上のディレクトリ)になります。
ルートディレクトリには一般的にはトップページのHTMLファイルが入っていることが多いので、トップページのHTMLファイルから見た場所と考えると分かりやすいと思います。

つまり、この場合はルートディレクトリの中に「ccc」フォルダや「bbb」フォルダがあるというかたちになります。

この記述を使うと、どこに書かれていようと、その基準はルートディレクトリになるので仮にディレクトリが移動してしまってもリンクが切れないという利点があります。
つまり、トップページのヘッダーに貼っているイメージ画像のリンクを書き換えずにそのまま、その配下で使うことができるようになるんです。

で、どんなときに使えるの?

 

先程も書きましたがWordPressを一般サイトのCMSとして使っている場合に固定ページ等にHTMLを書き込みますが、その際のパス表記はルート相対パスに統一してしまうといいと思います。
また、通常は関数を使うことが多いテーマに関してもルート相対パスにしてしまってもいいんじゃないかと思ってます。
います。

なお、「WordPress」前提で書いてますが「Movable Type」等のその他のCMSでも同様だと思われます。
CMSで使うリンク、画像等のディレクトリ表記で関数が使えない場合はサイトルート相対パス表記にするといいでしょう。

 - CMS, CSS/HTML, 覚え書き , , ,

アドセンス広告メイン

Message

メールアドレスが公開されることはありません。

  関連記事

カーナビの地図更新サービスの無料期間が終わりそうなので地図データをアップデートしてみた(ID取得編)

1年以上前の記事です。内容が古い可能性があります。1. ID取得編 | …

WordPress+Welcartでショッピングサイト構築【インストール編】

1年以上前の記事です。内容が古い可能性があります。ショッピングサイト構築にWor …

「float」で親要素の高さがなくなってしまったときは親要素に「float」【CSS】

1年以上前の記事です。内容が古い可能性があります。HTML・CSSコーディングで …

Facebookの画像をiPhoneの連絡先に使う方法

1年以上前の記事です。内容が古い可能性があります。iPhoneの連絡先には画像( …

カスタムフィールドとカスタム投稿で記事投稿フォームを使いやすく 3 – テンプレート編集の巻 【ワードプレス】 #wp

1年以上前の記事です。内容が古い可能性があります。1. Custom Field …

各種ECサイト(ショッピングサイト)料金比較一覧<改訂版>

1年以上前の記事です。内容が古い可能性があります。以前、ネタにした「各種ECサイ …

Mac OS X 10.5 Leopard(レパード)はOS 9のAppleShareに表示されない

1年以上前の記事です。内容が古い可能性があります。当社にもようやくMac OS …

no image
オンライン決済(電子決済)方法一覧

1年以上前の記事です。内容が古い可能性があります。最近、あちらこちらからオンライ …

no image
営業の喋り方を真似て営業に強くなろう

1年以上前の記事です。内容が古い可能性があります。僕の一番の弱点は「営業力」だと …

熊谷駅、上尾駅等から池袋駅、新宿駅、渋谷駅までの定期券で途中下車できる駅を増やす方法

1年以上前の記事です。内容が古い可能性があります。これ、知っておくと途中下車でき …