WordPressのオリジナルテーマは「パス」が一番重要

はじめに

概要

静的サイトのコーディングに慣れていると、 最初にWordPressのオリジナルテーマを触ったときに、少し難しく感じる部分があります。 ですが、実際には「パスの考え方」さえ理解できれば、 静的サイトとそこまで大きく変わるわけではありません。 今回は、静的サイトと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を学ぶ方は、 まず「パスの考え方」を理解するのがおすすめです。