WordPressのオリジナルテーマは「パス」が一番重要
静的サイトのコーディングに慣れていると、 最初にWordPressのオリジナルテーマを触ったときに、少し難しく感じる部分があります。 ですが、実際には「パスの考え方」さえ理解できれば、 静的サイトとそこまで大きく変わるわけではありません。 今回は、静的サイトとWordPressオリジナルテーマの違いについて、 実務目線でわかりやすく整理してみます。
目次
静的サイトは階層が浅い
通常のHTMLコーディングでは、
index.html を基準にファイルを作成していきます。
例えば以下のような構造です。
project
├── index.html
├── about.html
├── css
├── js
└── imagesこの場合、画像パスはそのまま書けます。
<img src="./images/sample.jpg" alt="">階層がシンプルなため、
パスがズレにくいのが特徴です。
WordPressはテーマ階層が深くなる
一方、WordPressのオリジナルテーマでは、
テーマファイルを WordPress の中へ配置して作業します。
構造としては以下のようになります。
wp-content
└── themes
└── original-theme
├── index.php
├── style.css
├── images
└── functions.phpつまり、
「WordPressの中のテーマフォルダの中で作業する」形になります。
そのため、静的サイトよりも階層が深くなります。
一番つまずきやすいのが「パス」
WordPress初心者の方が最初につまずきやすいのが、
画像やCSSのパスです。
静的サイトと同じ感覚で書くと、
画像が表示されないことがあります。
例えば以下のようなコードです。
<img src="./images/sample.jpg" alt="">静的サイトでは問題ありませんが、
WordPressではページ階層やURL構造が変わるため、
うまく読み込めないケースがあります。
例えば、テーマ名がoriginal-themeの場合は、
以下のように書くことで画像を表示できます。
<img src="/wp-content/themes/original-theme/images/sample.jpg" alt="">このコードは、
/wp-content/themes/テーマ名/images/画像名という構造になっています。
つまり、
- wp-content
- themes
- 自作テーマ
- images
という階層を直接指定している形です。
WordPressにはパス用の関数が用意されている
そこでWordPressでは、
パスを正しく取得するための関数が
あらかじめ用意されています。
よく使う関数
<img src="<?php echo get_theme_file_uri(); ?>/images/sample.jpg" alt="">この関数を使うことで、
- 現在使用しているテーマ
- WordPressの設置場所
- URL構造
などを自動で判定し、
正しいパスへ変換してくれます。
つまり重要なのはここ
「パスを自動で合わせてくれる関数を使う」
ということです。
静的サイトの知識はそのまま活かせる
そのため、
静的コーディングができる方は、
WordPressオリジナルテーマにも十分対応できます。
最初は、
- 階層が深い
- PHPが混ざる
- WordPress独自関数がある
このあたりで難しく感じます。
ですが実務では、
まず「パス」を理解することが非常に重要です。
ここを理解すると、
WordPressオリジナルテーマの構造もかなり見えやすくなります。
まとめ
WordPressオリジナルテーマと静的サイトの大きな違いは、
「テーマ階層が深くなること」です。
そして、その影響で
「パス管理が重要になる」という特徴があります。
ただし、WordPressには
パス用の便利な関数が用意されています。
そのため、
そこを理解できれば、
静的サイトの知識をそのまま活かして制作することができます。
実務でも非常に重要な部分なので、
これからWordPressを学ぶ方は、
まず「パスの考え方」を理解するのがおすすめです。
