はじめに
株式会社Soleilというデザイン会社を経営しています。
普段は広告デザインやWeb制作を中心に仕事をしていますが、最近ではWordPressのテーマを自分で開発したり、AIと一緒にプログラムを作ったりもしています。
そんな中で、WordPressを使ったWeb制作について、以前から気になっていたことがありました。
「デザインは毎回違うのに、なんで構造まで毎回作り直してるんだろう？」
もちろん、お客様によって必要な機能やサイトの構成は異なります。
でも、ヘッダーやフッター、投稿一覧、サービス紹介、お問い合わせへの導線など、共通している部分も結構あります。
僕はデザイナーなので、デザインを使い回したいわけではありません。
むしろ、デザインは毎回自由に作りたい。
そこで、WordPressの親テーマ・子テーマという仕組みを、少し違う視点で活用するようになりました。
今回は、その考え方と制作時に意識している5つのポイントをご紹介します。
1. 親テーマには「共通構造」を持たせる
WordPressの親テーマ・子テーマというと、一般的にはこんな使い方をイメージすると思います。
- 既存のテーマを選ぶ
- 子テーマを作成する
- 子テーマでデザインや機能をカスタマイズする
もちろん、これは正しい使い方です。
ただ、複数のWebサイトを制作する立場からすると、もう少し違う使い方もできます。
親テーマを、デザイン済みの完成品ではなく、制作のための共通基盤として考える。
例えば、こんなディレクトリ構成です。
wp-content/themes/
├── variable/
│ ├── style.css
│ ├── theme.json
│ ├── functions.php
│ ├── templates/
│ │ ├── index.html
│ │ ├── page.html
│ │ └── single.html
│ ├── parts/
│ │ ├── header.html
│ │ └── footer.html
│ └── patterns/
│
├── project-a/
│ ├── style.css
│ └── theme.json
│
└── project-b/
├── style.css
└── theme.json
※説明用に簡略化したブロックテーマの構成例です。
親テーマに基本的なテンプレートや共通処理を持たせ、個別のサイトは子テーマで作っていきます。
こうすることで、サイトを新しく制作するたびに、共通部分をゼロから考える必要がなくなります。
大事なのは、何でも親テーマに入れることではなく、複数のサイトで共通して使えるものを見極めることです。
2. 子テーマは「デザインのための領域」にする
親テーマに共通構造を持たせたら、子テーマではサイトごとのデザインを作っていきます。
子テーマを作成するには、まず style.css に以下のような記述をします。
/*
Theme Name: Project A
Template: variable
Version: 1.0.0
*/
Template には、親テーマのディレクトリ名を指定します。
これによって、WordPressはこのテーマが variable の子テーマであることを認識します。
あとは、必要に応じて子テーマ側にファイルを追加していきます。
project-a/
├── style.css
├── theme.json
├── templates/
│ └── front-page.html
├── parts/
│ └── header.html
└── assets/
├── css/
├── js/
└── images/
例えば、子テーマの parts/header.html に独自のヘッダーを用意すれば、親テーマのヘッダーとは異なるデザインを構築できます。
もちろん、CSSだけでデザインを変更しても構いません。
ここで僕が意識しているのは、
親テーマのデザインを変更するのではなく、親テーマの構造を利用してデザインを作る。
ということです。
この違い、デザイナーとしては結構大きいです。
既存のデザインを修正していくのと、共通基盤の上で自由にデザインしていくのとでは、制作時の考え方が変わってきます。
3. theme.jsonでデザインの基礎を管理する
ブロックテーマを使った制作では、theme.json が非常に便利です。
カラーパレットやフォント、余白、コンテンツの幅などを定義できます。
例えば、子テーマの theme.json を以下のように設定します。
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 3,
"settings": {
"layout": {
"contentSize": "800px",
"wideSize": "1200px"
},
"color": {
"palette": [
{
"slug": "primary",
"name": "Primary",
"color": "#3b5eff"
},
{
"slug": "background",
"name": "Background",
"color": "#ffffff"
},
{
"slug": "text",
"name": "Text",
"color": "#222222"
}
]
}
},
"styles": {
"color": {
"background": "var:preset|color|background",
"text": "var:preset|color|text"
},
"typography": {
"fontSize": "16px",
"lineHeight": "1.8"
}
}
}
※ theme.json version 3に対応したWordPressを前提としています。
このように設定することで、サイトの基本的なデザインルールを定義できます。
定義したカラーパレットは、WordPressのブロックエディターでも利用できます。
個人的に面白いと思っているのは、CSSだけで完結させるのではなく、WordPress標準の編集環境とデザインルールを共有できることです。
制作会社がサイトを納品した後、お客様が記事を追加したり、ページを編集したりすることもあります。
そんな時に、制作側が用意したデザインルールを編集環境でも利用できるのは便利です。
デザインする人と、運用する人が同じルールを使える。
これは制作効率だけでなく、運用面でもメリットがあります。
4. ブロックパターンで繰り返す制作を減らす
Webサイトを作っていると、似たような構成のコンテンツを何度も作ることがあります。
例えば、
- お問い合わせへのCTA
- サービス紹介
- 会社概要
- よくある質問
- 画像と文章を組み合わせたセクション
こういったものは、ブロックパターンとして用意しておくと便利です。
例えば、テーマの patterns/cta.php に以下のようなファイルを作成します。
<?php
/**
* Title: お問い合わせCTA
* Slug: variable/contact-cta
* Categories: call-to-action
*/
?>
<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group">
<!-- wp:heading {"textAlign":"center"} -->
<h2 class="wp-block-heading has-text-align-center">
お問い合わせ
</h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">
お気軽にご相談ください。
</p>
<!-- /wp:paragraph -->
<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
<div class="wp-block-buttons">
<!-- wp:button -->
<div class="wp-block-button">
<a class="wp-block-button__link wp-element-button"
href="/contact/">
お問い合わせはこちら
</a>
</div>
<!-- /wp:button -->
</div>
<!-- /wp:buttons -->
</div>
<!-- /wp:group -->
※説明用のサンプルです。リンク先は実際のサイト構成に合わせて変更してください。
このようなパターンを用意しておけば、ブロックエディターから繰り返し利用できます。
もちろん、すべてのサイトで同じCTAを使う必要はありません。
共通のパターンを出発点として、サイトごとにデザインや内容を変更していけばいいわけです。
なお、通常のブロックパターンは、ページに挿入するとそのページのコンテンツになります。
元のパターンを変更しても、すでに挿入した内容が自動的に変更されるわけではありません。
複数のページで内容を同期したい場合は、同期パターンやテンプレートパーツなど、目的に応じて使い分ける必要があります。
ここでも考え方は同じです。
完成品を使い回すのではなく、作り始めるための材料を用意しておく。
デザインの自由を残しながら、繰り返す作業を減らせます。
5. 親テーマの更新と個別サイトの改修を分離する
複数のWordPressサイトを制作・運用していると、制作時だけでなく、公開後の保守も重要になってきます。
例えば、共通して使用しているテンプレートや処理に改善が必要になった場合。
サイトごとに独立したテーマを使っていると、それぞれのテーマを確認し、個別に修正する必要が出てきます。
親テーマに共通部分を集約しておけば、改善する場所を一つにまとめられます。
共通の改善
↓
親テーマを更新
↓
各サイトで動作確認
↓
問題がなければ適用
ただし、親テーマを更新すればすべてのサイトが安全に更新できる、というわけではありません。
子テーマでテンプレートを上書きしていたり、親テーマの処理に依存していたりする場合、更新によって影響を受ける可能性があります。
また、サイトエディターで保存したテンプレートのカスタマイズが、テーマのファイルより優先される場合もあります。
そのため、僕は以下のような考え方を大切にしています。
- 親テーマと子テーマの責務を明確にする
- 個別サイトのデザインは子テーマに持たせる
- 親テーマの変更内容を記録する
- 更新前に影響範囲を確認する
- テスト環境で検証してから本番に適用する
また、サイト固有の業務データや、テーマを変更しても維持すべき機能については、テーマではなくプラグイン側に持たせることも重要です。
親テーマ・子テーマの分離は、保守の作業をなくす仕組みではありません。
保守する場所と、確認すべき範囲を整理するための仕組みだと考えています。
まとめ
今回は、WordPressの親テーマ・子テーマを活用したWeb制作について、5つのポイントをご紹介しました。
- 親テーマには共通構造を持たせる
- 子テーマはデザインのための領域にする
- theme.jsonでデザインの基礎を管理する
- ブロックパターンで繰り返す制作を減らす
- 親テーマの更新と個別サイトの改修を分離する
どれもWordPressに元々備わっている仕組みです。
特別な技術を新しく作る必要はありません。
僕はこれらを組み合わせて、Web制作のための共通基盤を作れないかと考えました。
デザインは毎回ゼロから。構造は二度とゼロから作らない。
この考え方をもとに開発したのが、WordPressテーマ「Variable」です。
Variableは、親テーマを制作の共通基盤として利用し、子テーマで自由にデザインを作っていくことを目指しています。
現在は実際のクライアント案件でも使用しており、WordPressの公式テーマディレクトリでも公開しています。
今後は、実際のテーマ開発や子テーマを使った制作方法、AIと一緒にWordPressを開発する方法などについても書いていこうと思います。
僕自身、デザイナーとしてWeb制作を続けてきた中で、WordPressの仕組みを少し違う視点で捉えることで、制作の自由度を広げられると感じています。
同じように、複数のWebサイトを制作・運用している方の参考になれば嬉しいです。