静的サイトのコーディングに慣れていると、 最初にWordPressのオリジナルテーマを触ったときに、少し難しく感じる部分があります。 ですが、実際には「パスの考え方」さえ理解できれば、 静的サイトとそこまで大きく変わるわけではありません。 今回は、静的サイトとWordPressオリジナルテーマの違いについて、 実務目線でわかりやすく整理してみます。
読者WordPressのオリジナルテーマは「パス」が一番重要は、最初にどこを理解するとよいですか？
木村WordPress標準機能、プラグインの機能、テーマ側の処理を分けて考えると、どこを変更すべきか判断しやすくなります。
読者実際に試すときは、手順だけでなく確認方法も知っておいた方がよいでしょうか？
木村はい。この記事では、作業の目的から実装後の確認までを順番に整理します。自分の環境と照らし合わせながら読み進めてください。
静的サイトは階層が浅い
通常のHTMLコーディングでは、
index.html を基準にファイルを作成していきます。
例えば以下のような構造です。
project
├── index.html
├── about.html
├── css
├── js
└── imagesこの場合、画像パスはそのまま書けます。
<img src="./images/sample.jpg" alt="">階層がシンプルなため、
パスがズレにくいのが特徴です。
静的サイトは階層が浅いで押さえたいポイント
静的サイトは階層が浅いは、コードや設定だけを切り離して覚えるより、何を変えるための処理なのかを確認してから試すと理解しやすくなります。変更前の状態を控え、作業を一つずつ反映すると、問題が起きた場所も特定しやすくなります。
静的サイトは階層が浅いの確認方法
ローカル環境で変更し、未ログイン状態と管理者状態の両方で表示を確認します。PHPを変更した場合は、エラーログ、権限、エスケープ処理も合わせて確認してください。
WordPressはテーマ階層が深くなる
一方、WordPressのオリジナルテーマでは、
テーマファイルを WordPress の中へ配置して作業します。
構造としては以下のようになります。
wp-content
└── themes
└── original-theme
├── index.php
├── style.css
├── images
└── functions.phpつまり、
「WordPressの中のテーマフォルダの中で作業する」形になります。
そのため、静的サイトよりも階層が深くなります。
WordPressはテーマ階層が深くなるで押さえたいポイント
WordPressはテーマ階層が深くなるは、コードや設定だけを切り離して覚えるより、何を変えるための処理なのかを確認してから試すと理解しやすくなります。変更前の状態を控え、作業を一つずつ反映すると、問題が起きた場所も特定しやすくなります。
WordPressはテーマ階層が深くなるの確認方法
ローカル環境で変更し、未ログイン状態と管理者状態の両方で表示を確認します。PHPを変更した場合は、エラーログ、権限、エスケープ処理も合わせて確認してください。
一番つまずきやすいのが「パス」
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
という階層を直接指定している形です。
一番つまずきやすいのが「パス」で押さえたいポイント
一番つまずきやすいのが「パス」は、コードや設定だけを切り離して覚えるより、何を変えるための処理なのかを確認してから試すと理解しやすくなります。変更前の状態を控え、作業を一つずつ反映すると、問題が起きた場所も特定しやすくなります。
一番つまずきやすいのが「パス」の確認方法
ローカル環境で変更し、未ログイン状態と管理者状態の両方で表示を確認します。PHPを変更した場合は、エラーログ、権限、エスケープ処理も合わせて確認してください。
WordPressにはパス用の関数が用意されている
WordPressにはパス用の関数が用意されているでは、WordPressのオリジナルテーマは「パス」が一番重要を理解・実装するために必要な考え方と、作業時に確認したい点を整理します。最初に役割を把握してから、記事内の手順へ進みましょう。
そこでWordPressでは、
パスを正しく取得するための関数が
あらかじめ用意されています。
よく使う関数
<img src="<?php echo get_theme_file_uri(); ?>/images/sample.jpg" alt="">この関数を使うことで、
- 現在使用しているテーマ
- WordPressの設置場所
- URL構造
などを自動で判定し、
正しいパスへ変換してくれます。
つまり重要なのはここ
「パスを自動で合わせてくれる関数を使う」
ということです。
静的サイトの知識はそのまま活かせる
そのため、
静的コーディングができる方は、
WordPressオリジナルテーマにも十分対応できます。
最初は、
- 階層が深い
- PHPが混ざる
- WordPress独自関数がある
このあたりで難しく感じます。
ですが実務では、
まず「パス」を理解することが非常に重要です。
ここを理解すると、
WordPressオリジナルテーマの構造もかなり見えやすくなります。
静的サイトの知識はそのまま活かせるで押さえたいポイント
静的サイトの知識はそのまま活かせるは、コードや設定だけを切り離して覚えるより、何を変えるための処理なのかを確認してから試すと理解しやすくなります。変更前の状態を控え、作業を一つずつ反映すると、問題が起きた場所も特定しやすくなります。
静的サイトの知識はそのまま活かせるの確認方法
ローカル環境で変更し、未ログイン状態と管理者状態の両方で表示を確認します。PHPを変更した場合は、エラーログ、権限、エスケープ処理も合わせて確認してください。
まとめ
- WordPressオリジナルテーマと静的サイトの大きな違いは、 「テーマ階層が深くなること」です。
- そして、その影響で 「パス管理が重要になる」という特徴があります。
- ただし、WordPressには パス用の便利な関数が用意されています。
- そのため、 そこを理解できれば、 静的サイトの知識をそのまま活かして制作することができます。
- 実務でも非常に重要な部分なので、 これからWordPressを学ぶ方は、 まず「パスの考え方」を理解するのがおすすめです。
静的サイトと同じ相対パスを書いて画像が出ず、まさにこの記事の内容でつまずいていました。get_theme_file_uri()へ直したところ解決しました。
解決してよかったです。テーマ内の画像はget_theme_file_uri()などの関数を使うと、設置先のURLが変わってもパスを保ちやすくなります。