WEBEER – Web制作の覚えがき –

【WordPress】テーマを作るときのディレクトリ構造

WordPress
WordPress 更新日:2020.08.17 公開日:2020.08.13

ワードプレスのテーマを作る時のディレクトリ構造で結構悩んだので、今使っているディレクトリ構造をメモしておく。

はじめてWP使う人の参考になれば嬉しいです。

WPテーマのディレクトリ構造

Thema Root
├ assets
│  ├ css
│  ├ fonts
│  ├ image
│  ├ js
│  └ scss
├ inc
│  ├ custom_functions.php
│  ├ customizer.php
│  ├ utility.php
│  ├ shortcode.php
│  └ widget.php
├ template-parts
│  ├ json-ld.php
│  └ post-archive.php
├ script
│  ├ deploy.sh
│  └ exclude.txt
├ single.php
├ page.php
├ archive.php
:
├ index.php
└ style.css

ワードプレスに必要なファイルは適宜増やすとしてわたしはこんな感じで作っている。

共通化できる部分は共通化する

共通化できる部分は共通化するのがテッパンだが、それはテーマを跨いだ時も同じこと。デザインに関わる部分や使いまわせそうなデザインの部分はファイルを分けておくのがポイント。

ショートコードはどのテーマでも同じにしておくと楽だし、cssも使いまわせる部分は極力分けておくと時間短縮になる。

assetsフォルダ

assetsの中にはデザインに関するものを入れてある。

assets
├ css
├ fonts
├ image
├ js
└ scss

最初に静的なHTMLでデザインを作ると思うが、そこから丸ごと移動するイメージだ。

scssファイルに関しては、アップロードにFTPを使っているならばFTPソフトの設定で除外できる。rcyncでデプロイしているならばexcludeで除外すればよい。

もしS3にアップするならばassetsを丸ごとアップする。

incフォルダ

incの中には動的な処理をするファイルを入れてある。

inc
├ custom_functions.php  //functionsの拡張
├ customizer.php
├ utility.php //値を返す関数
├ shortcode.php
└ widget.php

functionsとcustom_functionsの違いは使いまわせるかどうかで分けている。

functionsの方にはサポートの有効化のようにどのテーマでも共通の設定と、各ファイルのインポートを記述している。

custom_functionsにはそのテーマ特有の設定を記述している。cssファイルとjsファイルの読み込みや、カスタムフィールドの追加など。もしカスタムフィールドの設定が増えてきたらファイルを別にするイメージだ。

utilityにはグローバル変数や値を返す関数を書いている。例えばアイキャッチが設定されてない時に返す画像を変えたい時とか。

template-partsフォルダ

template-partsには表示(出力)の共通パーツを入れてある。

template-parts
├ json-ld.php
└ post-archive.php

post-archiveは一覧ページの共通部分で、json-ldは構造化データをまとめて記述してある。

同じ役割の記載をひとつのファイルにまとめておくと管理が楽なのである。

scriptフォルダ

scriptにはデプロイに使うファイルが入れてある。

script
├ deploy.sh
└ exclude.txt

今はテーマフォルダの中身だけアップしているのでテーマフォルダ内に設置しているがrootに配置してもいいと思う。

ファイル

index.phpとstyle.cssは消さないこと。

終わりに

WordPressのテーマをはじめて作る時にディレクトリをどう分けるか悩んで今はこういう感じに落ち着いています。

こればかりは作る人の癖もあると思うのでここで紹介した構造が正解というわけではないが、第一歩として参考になれば幸いです。