WordPress(ワードプレス)の静的ページで、URLを階層構造にする

先日、WordPressで構築したサイトに、後付けで別途作成した階層構造を持つHTMLコンテンツを追加する機会がありまして、ページで登録して親子関係を持たせることでうまく組み込むことができましたので、簡単にメモ。

意図通りにするにはあらかじめ必要な条件と設定がありますので、以下に簡単にまとめます。

パーマリンクの設定

WordPressはそもそもフォルダという概念がありませんので、元々階層を持つHTMLのリンク構造とうまく整合を取るには、パーマリンク設定をあたかもフォルダがあるかのようなURLが生成されるように調整する必要があります。今回はカスタム構造を選択して以下のように記述しました。

/%category%/%postname%/

こうすることで、生成されるURLが以下のようになります。

http://WPの公開URL/記事が属するカテゴリ/記事のスラッグ名/

運用途中でパーマリンクを変更する場合、他のページのURLも変わってしまいますので、リンクを静的に書いてる部分がある場合は注意が必要です。

HTML側でのURL指定

htmlで静的に階層構造を作成する場合、以下のような構造が普通かと思います。※[]でくくった部分はフォルダとご理解ください。

index.html
[フォルダ名]
index.html
a.html
b.html
c.html

この場合、それぞれが持つURLは以下のようになります。

http://ドメイン/フォルダ名/index.html

http://ドメイン/フォルダ名/c.html

これを、WPとなじませやすいようにあらかじめ以下のように作成します。プログラマの方でこういった作り方をする方よくいらっしゃいますよね。

index.html
[フォルダ名]index.html
[a]index.html
[b]index.html
[c]index.html

こうすることで、生成されるURLが以下のようになりますので、静的ページの段階で正確なリンクチェックも可能になり、かつ、WPに登録する際にURLをそれに併せて変更するなどの手間も軽減できます。

http://ドメイン/フォルダ名/

http://ドメイン/フォルダ名/c/

ページの登録

作成したHTMLはページとしてWP管理画面から登録します。

ページのURLは、デフォルトだと設定したスラッグ名に基づいて以下のように生成されます。

http://ドメイン/ページ名/

これに階層構造を反映させるため、各枝ページの親としてカテゴリのインデックスページを指定します。親ページは登録済みのページを選択する形になりますので、まずカテゴリインデックスを真っ先に登録しておけば後の作業がスムーズかと思います。親を設定すると、URLには上の階層として親ページのスラッグ名が自動的に挿入され、以下のようになります。

http://ドメイン/親ページ名/ページ名/

以上で作業は完了です。

既に存在するサイトをCMS化するという案件は割と多いのではないかと思うのですが静的なページに関しては、ページ機能をうまく使うと案外いいですよ、っていうご報告、でした。

かしこ。