WordPressテーマは、ウェブサイトの外観と機能を形成する上で重要な役割を担っています。コンテンツの表示方法を定義するテーマには、洗練されたサイトを作成するためのデザインオプションが多数あります。今日では従来の「クラシックテーマ」から、長い年月を経て大きく進化を遂げています。
クラシックテーマはPHPテンプレートに依存し、カスタマイズするにはある程度のコーディング経験が求められます。柔軟性には優れますが、ウェブ開発初心者には敷居が高いという課題があります。これを受けてWordPress 5.9でリリースされたのが「ブロックテーマ」です。
クラシックテーマとブロックテーマ
クラシックテーマは、従来のWordPressテーマであり、PHPで記述されたテンプレートファイル、スタイリングにCSS、機能の追加にはJavaScriptを使用して、サイト全体のルック＆フィールを定義します。高度にカスタマイズ可能なクラシックテーマは、長年にわたりWordPressサイトの中心的存在でした。
対するブロックテーマは、フルサイト編集（FSE）をサポートするために導入された新たなWordPressテーマです。クラシックテーマとは異なり、ヘッダー、フッター、コンテンツエリアを含むサイトのすべての部分をブロックで構築するため、WordPressエディター内で視覚的かつ直感的にデザインを編集することができます。
クラシックテーマとブロックテーマの主な違いは以下のとおりです。
- カスタマイズ─クラシックテーマではPHPとある程度のコーディングスキルが求められ、ブロックテーマはビジュアルエディターで簡単にカスタマイズ可能。
- 柔軟性─クラシックテーマは開発者にとっては柔軟性が高く、ブロックテーマは使いやすさとアクセシビリティがより重視されている。
- 編集方法─クラシックテーマはテーマファイルとWordPressカスタマイザーを使って編集し、ブロックテーマはブロックエディターで編集する。
開発するテーマの種類を選択する
クラシックテーマとブロックテーマのどちらを選択するかは、要件とスキルレベルによって決まります。最大限の柔軟性を求める開発者であれば、クラシックテーマを開発する方が快適かもしれません。ユーザーフレンドリーで視覚的なアプローチでテーマを構築するなら、ブロックテーマが適しています。
どちらのテーマにも長所があり、様々なタイプのユーザーやプロジェクトに適しています。これからご紹介する基本的な違いを理解することで、どちらのテーマがサイトの要件に適しているか、容易に判断できるはずです。
以下、クラシックテーマとブロックテーマそれぞれの概要をご説明し、それぞれ効果的に構築、カスタマイズする方法を見ていきます。
WordPressテーマの構造
クラシックテーマ、またはブロックテーマのいずれであっても、テーマの構造を理解することで、WordPressサイトのカスタマイズが捗ります。
各テーマの構造をご紹介する前に、すべてのWordPressテーマは、WordPressのwp-content/themesディレクトリに保存され、各テーマは独自のフォルダに格納されることは覚えておいてください。
クラシックテーマの構造
クラシックテーマは、サイトの外観と機能を構築するファイルとディレクトリで構成されています。主なファイルは以下の2つになります。
style.css─テーマの視覚的なスタイルを定義するメインのスタイルシート。メタデータ（名前、作者、バージョンなど）が先頭に来て、テーマのスタイルを設定するCSSルールが続く。index.php─トップページのコンテンツ表示に使われるメインのテンプレートファイル。他のテンプレートファイルが見つからない場合の予備として機能する。
これら2つに加えて、以下のファイルがモジュール設計を可能にし、サイトのさまざまな部分を簡単にカスタマイズおよび維持できるようにします。必須ではありませんが、標準的なファイルです。
header.php─サイトタイトル、ロゴ、ナビゲーションメニューを含む、テーマのヘッダーセクションが格納される。各ページの上部に含まれ、サイト全体で統一したヘッダーを提供。footer.php─テーマのフッターセクションが格納され、通常は著作権情報やフッターナビゲーションも含まれる。各ページの下部に含まれ、サイト全体で統一したフッターを提供。functions.php─テーマにカスタム機能を追加するために使用され、メニューを登録したり、スタイルやスクリプトをキューに入れたり、投稿サムネイルやカスタム背景のようなテーマサポート機能を追加する。基本的にはカスタマイズと機能拡張のためのコントロールセンターとして機能する。page.php、single.php、archive.phpなど─固定ページ、投稿、アーカイブなど、さまざまなタイプのコンテンツの構造を定義する。
ブロックテーマの構造
ブロックテーマは、ブロックとフルサイト編集を考慮して特別に設計されたファイルとディレクトリで構成されています。主なファイルとフォルダは以下のとおりです。
theme.json─テーマの設定、スタイル、カスタマイズを構成するための主要ファイル。ブロック全体のスタイルと設定を定義し、テーマの外観と動作を一元管理できる。カスタムPHPコードなしで色、タイポグラフィ、余白などを簡単に設定可能。style.css─ほとんどのスタイリングはtheme.json内で処理されるが、クラシックテーマと同じようにテーマ名、作者、バージョン、説明などのメタデータを宣言するために使用される。templates/─トップページ用のindex.html、投稿用のsingle.html、固定ページ用のpage.htmlなど、サイトのさまざまな部分のレイアウトを定義するHTMLファイルが格納される。各ファイルはブロックを使って構築される。parts/─ヘッダーやフッターなど、テンプレートの再利用可能なセクションが格納される。これらのセクションは複数のテンプレートに使用することができ、サイト全体の一貫性を保つことができる。
また、必須ではありませんが、高度なテーマを作成する際にはパターンも重要になります。パターンは固定ページや投稿に挿入できる定義済みのブロックレイアウトで、複雑なデザインを素早く作成するのに役立ちます。
ブロックテーマを使用する場合、テーマ構造を自分で作成する必要はありません。Create Block Themeプラグインを使用すると、セットアップのプロセスを効率化できます。
例えば「新しい空のテーマを作成する」を選択して詳細を入力すると、wp-content/themesディレクトリにテーマフォルダが生成され、WordPress管理画面 の「外観」＞「テーマ」にテーマが表示されます。style.cssのメタディスクリプション設定でテーマの詳細を追加可能です。
WordPressテーマのテンプレート階層
テンプレート階層は、異なるタイプのコンテンツを表示するために使用するテンプレートファイルを指定するものです。この階層はクラシックテーマもブロックテーマも同じようになりますが、ファイルタイプが異なり、クラシックテーマはPHPファイル、ブロックテーマはHTMLファイルを使用します。
テンプレート階層は、使用するテンプレートファイルを決定する特定の順序に従います。特定のテンプレートファイルが見つからない場合は、次の階層に移動します。
例えば、単一のブログ投稿を表示する必要がある場合は、まずsingle-{post-type}.phpやsingle-{post-type}.htmlのような投稿タイプに固有のテンプレートを探します。該当するファイルが存在しない場合は、一般的なsingle.phpまたはsingle.htmlを探し、いずれも見つからない場合は、さらに一般的なテンプレートであるindex.phpまたはindex.htmlにフォールバックします。
他のタイプのコンテンツも同様です。静的ページの場合は、そのページに割り当てられたカスタムテンプレートがないかをチェックし、見つからない場合はページのスラッグ（page-about.phpやpage-about.htmlなど）やID（page-42.phpやpage-42.htmlなど）に基づいてテンプレートを探します。これが存在しない場合は一般的なpage.phpまたはpage.html、これも見つからない場合はindex.phpまたはindex.htmlにフォールバックします。
テンプレートの作成方法
WordPressでテンプレートを作成すると、さまざまなタイプのコンテンツの表示方法を制御することができます。クラシックテーマであっても、ブロックテーマであっても、必要なファイルを設定し要件に応じて構成していきます。
以下、それぞれのテーマのページテンプレートを作成する方法をご紹介します。
クラシックテーマのページテンプレートを作成する
クラシックテーマの場合は、PHPを使ってページテンプレートを作成します。
- テンプレートファイルの作成：テキストエディターを使ってテーマのディレクトリにPHPファイルを作成し、
page.phpという名前で保存する。 - テンプレートコードの追加：ページテンプレートの構造とコンテンツを定義するために必要なPHPコードを書く（通常ページコンテンツを表示するためのテンプレートタグが含まれる）。
- ヘッダーとフッターの追加：
get_header()とget_footer()を追加してテンプレートにヘッダーとフッターを追加する。これによりサイト全体でレイアウトを統一することができる。
page.phpは以下のようになります。
<?php
get_header(); ?>
<main>
<h1><?php the_title(); ?></h1>
<div><?php the_content(); ?></div>
</main>
<?php get_footer(); ?>上の例では、ヘッダーとフッターが設置され、ページタイトルとコンテンツが表示されます。
ブロックテーマのページテンプレートを作成する
ブロックテーマの場合は、サイトエディターまたはtemplateディレクトリにpage.htmlファイルを作成することから始めます。
このファイルを作成したら、サイトエディター（WordPress管理画面の「外観」＞「エディター」）に移動してレイアウトを調整していきます。
ブロックエディターでブロックを追加したり並び替えたりして、ページレイアウトをデザインします。ページタイトル、アイキャッチ画像、コンテンツ用のブロックを追加可能です。デザインの好みに応じて、各ブロックを編集していきます。
レイアウトが完成したらテンプレートを保存します。これでテーマのディレクトリに対応するHTMLファイルが自動生成されます。
WordPressテーマのスタイリング方法
WordPressテーマのスタイリングは、サイトの見た目を定義する重要な作業になります。それぞれ異なるアプローチで高度なスタイリングが可能です。
クラシックテーマのスタイリング
クラシックテーマでは、通常CSSを使用して処理します。
クラシックテーマの主要なスタイルシートはstyle.cssファイルです。このファイルには、テーマの外観を定義するすべてのCSSルールが含まれており、テーマ名、作者、バージョン、説明などのメタデータを宣言する場所でもあります。
CSSが適切に読み込まれるようにするには、wp_enqueue_style()を使用して、functions.phpファイルにスタイルシートをエンキューする必要があります。
function my_theme_enqueue_styles() {
wp_enqueue_style('my-theme-style', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles');このステップは、WordPressの適切な標準を維持しながら、スタイルが正しく適用されるようにするために非常に重要です。
style.cssファイルに直接カスタムCSSを追加したり、テーマのさまざまな部分用に別のCSSファイルを作成したりすることもできます。カスタムCSSは、<style>を使用して個々のテンプレートファイル内に埋め込むこともできますが、あまり一般的ではなく、孤立した特定のスタイルにのみ推奨されます。
より高度なスタイリングには、SASSやLESSのようなCSSプリプロセッサを使用します。より保守的でモジュール化されたCSSを書くことができるため、テーマのスタイルの管理と拡張が簡素化されます。
ブロックテーマのスタイリング
ブロックテーマのスタイリングには、主にtheme.jsonファイルとブロックエディターを使用します。
theme.jsonファイルは、テーマ全体のスタイルと設定を構成する中心的な場所になります。このファイル内で色、タイポグラフィ、余白などのスタイルを構造化されたJSON形式で定義し、テーマの外観と動作を一元管理します。theme.jsonで定義されたグローバルスタイルはサイト全体に適用され、統一されたルック＆フィールを実現できます。
theme.jsonに加えて、ブロックエディターを使用して独自のスタイルをブロックに直接適用することもできます。ブロックエディターでは、変更をリアルタイムで確認でき、コードを書くことなく視覚的にデザインを調整可能です。コーディングなしで視覚的に作業を行いたい方に理想的です。
ほとんどのスタイリングはtheme.jsonファイルで処理されますが、CSSを使用してより細かな制御を行うことも。カスタムCSSは、style.cssファイルに追加するか、ブロックエディターを使って個々のブロック内に直接追加することができます。
theme.jsonファイルの例には、カラーパレット、タイポグラフィ、ブロックスタイルの設定が含まれており、テーマのデザインを簡単に管理、カスタマイズできます。
{
"version": 2,
"settings": {
"color": {
"palette": [
{
"name": "Primary",
"slug": "primary",
"color": "#0073aa"
},
{
"name": "Secondary",
"slug": "secondary",
"color": "#005177"
}
]
},
"typography": {
"fontSizes": [
{
"name": "Small",
"slug": "small",
"size": "12px"
},
{
"name": "Normal",
"slug": "normal",
"size": "16px"
}
]
}
},
"styles": {
"color": {
"background": "#ffffff",
"text": "#333333"
},
"typography": {
"fontFamily": "Arial, sans-serif"
}
}
}WordPressテーマのカスタマイズ方法
WordPressテーマをカスタマイズすることで、特定の要件や好みに合わせてサイトの外観や機能を調整できます。クラシックテーマとブロックテーマのいずれも様々なカスタマイズが可能ですが、例によってアプローチが異なります。
クラシックテーマのカスタマイズ
クラシックテーマでは、以下のような方法でカスタマイズが可能です。
- テーマカスタマイザー：コードを書いたり編集したりすることなく、テーマの外観を変更できる直感的なインターフェース。WordPress管理画面の「外観」＞「カスタマイズ」からアクセスでき、サイトの基本情報、色、メニュー、ウィジェットなどのメニューがある。変更は保存する前にリアルタイムでプレビューすることも可能。
- カスタムCSS：より細かなスタイル調整を行う場合は、テーマカスタマイザーの「追加CSS」セクションにカスタムCSSを追加する。テーマファイルを編集する必要がないため、ちょっとした微調整に便利。
- 子テーマ：大規模な修正が必要な場合は、子テーマを作成する。子テーマは親テーマの機能を継承し、新たなスタイルや機能を上書きしたり追加したりすることができる。また親テーマが更新されても編集した内容が保持される。
- テーマファイル：上級者は
header.php、footer.php、functions.phpなどのテーマファイルを直接編集して変更を加えることができる（PHPとWordPressのテンプレート階層を熟知している場合のみ）。 - プラグイン：テーマのカスタマイズ機能を拡張するプラグインを使用する。例えば、Elementorのようなページビルダープラグインを使用すると、コーディングなしで複雑なレイアウトを構築できる。
ブロックテーマのカスタマイズ
フルサイト編集に重点を置いたブロックテーマでは、より視覚的かつ直感的にカスタマイズを行うことができます。
- サイトエディター：ブロックテーマをカスタマイズするための主要ツールであり、「外観」＞「エディター」からアクセス可能。ヘッダー、フッター、テンプレート、個々のブロックなど、サイトのあらゆる面を視覚的なインターフェースで変更できる。変更は即座に適用されるため、変更がサイトのデザインにどのように反映されるかを簡単に確認できる。
- グローバルスタイル：
theme.jsonファイルを使用して定義。サイト全体の色、タイポグラフィ、余白などをカスタマイズし、サイト全体の一貫性を確保する。サイトエディターで設定を視覚的に微調整することも可能。 - 再利用可能なブロックとパターン：一貫性を維持し、デザインプロセスを合理化するのに役立つ。再利用可能なブロックは保存して任意の投稿や固定ページに挿入でき、パターンは要件に応じてカスタマイズできる定義済みのレイアウトを提供。
- カスタムテンプレート：サイトエディター内で直接さまざまなタイプのコンテンツ用カスタムテンプレートを作成できる。コードを書かずに特定の固定ページや投稿タイプのレイアウトやデザインを調整可能。
- プラグイン：クラシックテーマ同様、プラグインでカスタマイズを拡張することもできる。追加のブロック、パターン、カスタマイズ機能を提供するプラグインは多数存在する。
まとめ
WordPressテーマをカスタマイズすることで、より洗練され機能的なサイトを構築することができます。クラシックテーマは、テーマカスタマイザー、カスタムCSS、子テーマ、または直接ファイルを編集することで柔軟に構築可能です。より視覚的で直感的な方法がお好みなら、サイトエディターとtheme.jsonファイルで構築するブロックテーマがおすすめです。
自分でコードを書くか、あるいは視覚的に構築するかは、要件やスキルレベルによって決まりますが、いずれにしても高度なカスタマイズが可能です。
理想のクラシックテーマ、またはブロックテーマを完成させたら、サイトのダウンやDDoS攻撃などの問題に悩まされない、堅牢なホスティングでサイトを稼働しましょう。Kinstaのようなプレミアムホスティングサービスへの投資を検討してみてください。
Kinstaでは、完全にコンテナ化されたアーキテクチャを採用した高性能WordPress専用マネージドホスティングを提供しており、Google Cloud Platformのプレミアムティアネットワークのみを利用しています。その性能をぜひ一度お試しください。
コメントを残す