WordPressでブロック子テーマを作成する方法

公開: 2023-07-14

次のシナリオを想像してください。Web サイトで使用するほぼ完璧なテーマを見つけました。 適切にデザインされており、必要なレイアウトが含まれていますが、カラー パレットを変更し、クライアントによる一部の領域の変更を制限したいと考えています。 残念ながら、お使いのテーマではデフォルトの色を削除したり、ブロックをロックしたりすることができません。

テーマのファイルを直接編集することもできますが、テーマの更新を実行すると、変更内容はすべて失われます。 コード スニペット プラグインを使用して小さなカスタム CSS を追加することもできますが、ログイン ユーザーが使用できるスタイル オプションは変更されません。

それで、何ができるでしょうか？ グローバル スタイルの利用可能なオプションを変更するにはどうすればよいですか? そのためには、ブロックの子テーマが必要です。

WordPressの子テーマとは何ですか?

WordPress 開発者向けドキュメントによると、次のようになります。

子テーマは親テーマの外観とそのすべての機能を継承しますが、テーマの任意の部分を変更するために使用できます。 このようにして、カスタマイズは親テーマのファイルとは別に保持されます。 子テーマを使用すると、サイトに加えたカスタマイズに影響を与えることなく親テーマをアップグレードできます。

したがって、WordPress で子テーマを使用するには、親テーマもインストールする必要があります。 子テーマは親テーマからすべてを継承し、いくつかのバリエーションが追加されます。

子テーマの作成方法

サイトのスタイルをカスタマイズするためのコード オプションをご希望ですか? 他の WordPress テーマをオーバーライドするのと同様、コードをオーバーライドするには子テーマを使用するのが最善の方法です。 テーマが更新されても、子テーマのコードは残ります。

この記事では、優れた WordPress 子テーマを構成する主要なコンポーネントについて説明し、詳細な読み物リソースを提供します。

1. ブロック子テーマを使用する場合

多くの場合、子テーマは優れた解決策になります。 ただし、CSS コードを少しだけ追加したい場合は、子テーマ全体を作成するのはやりすぎになる可能性があります。 ほんの少しのカスタマイズを追加するには、コード スニペットのようなプラグインを検討してください。

クライアントサイトのカスタマイズ

クライアント向けにサイトを構築する場合、追加のカスタマイズを提供したい場合があります。

ユーザーが新しいブロックを挿入したり、既存のブロックを移動したり、ブロックを削除したりできるようにしたい場合は、ブロック ロックを実装するとよいでしょう。 この入門チュートリアルでは、ブロックをロックする方法などを学ぶことができます。

テーマのバリエーションを作成する

クライアントがテーマ レイアウトのどの領域を変更できるかを定義することに加えて、カラー パレット オプションを変更して、テーマまたは WordPress にデフォルトで付属しているものを省略し、独自のオプションを追加することもできます。 テーマで使用できるグラデーションとダブルトーンのオプションを定義することもできます。

2. 適切な WordPress テーマを選択する

すべてのテーマが同じように作成されるわけではありません。 親テーマの選択には、テーマの設計に表示される内容に加えて、更新の頻度、サポートの品質、ドキュメント、テーマ開発者の評判などの追加の要素が関係します。 詳細については、WordPress テーマを使用して Web サイトを構築する方法をご覧ください。

3. テスト環境を作成する

ここまでで、親テーマを選択し、ブランド資産を収集し、オーバーライドする設定を決定しました。 次に、テスト環境をセットアップする必要があります。

GoDaddy のマネージド WordPress ホスティング プロバイダーのようなマネージド WordPress ホスティング プロバイダーを使用している場合は、ワンクリック ステージング サイトを開発環境として使用できます。 ホスティングに cPanel や VPS などを使用している場合は、別の WordPress インストールをセットアップし、既存のサイトを新しいインストールにクローンまたはコピーできます。

子テーマを既存のサイトに適用しない場合、または最初から構築したい場合は、MAMP や ServerPress の DesktopServer などのツールを使用して、コンピューター上にローカルの WordPress 開発環境を作成できます。

4. テーマディレクトリを作成します。

まず、親テーマをインストールする必要があります。 次に、FTP クライアントを使用して開発環境に接続し、WordPress ファイルがある場所に移動します。

次のフォルダーを探しています。

 /wp-コンテンツ/テーマ/

ここで、インストールされているすべての WordPress テーマを見つけることができます。 各テーマには、テーマのすべてのファイルが含まれる独自のフォルダーまたはディレクトリがあります。 子テーマを保持する新しいディレクトリをリストに追加します。 最終的には次のようになります。

 /wp-content/テーマ/あなたの子テーマ/

5. テーマファイルを作成する

この例では、Twenty Twenty Two テーマを使用していると仮定します。 子テーマが参照できるようにするには、そのテーマをインストールする必要があります。

新しい子テーマ ディレクトリ フォルダー内に、2 つの新しいファイルを作成します。

 スタイル.css
テーマ.json

これらのファイルは両方とも特定の目的を果たします。 style.cssファイルは、名前、作成者、タグ、親テーマ ID などのテーマに関する情報を WordPress に提供するために使用されます。

theme.jsonファイルは、グローバル スタイルなどの多くの設定を定義するために使用されます。 開発者ハンドブックで theme.json について詳しく学習してください。

以前のクラシック テーマでは、子テーマにfunction.phpファイルが必要でした。 子テーマをブロックする場合は、これらの手順は必要ありません。

スタイル.css

style.cssファイルには何が含まれますか? 開発者向けドキュメントには次のように書かれています。

スタイルシートには、ファイルの先頭に以下の必須ヘッダー コメントが含まれている必要があります。 これにより、テーマが特定の親を持つ子テーマであるという事実など、テーマに関する基本情報が WordPress に伝えられます。

ヘッダー情報を含むstyle.cssファイルにボイラープレートを含める必要があります。 テンプレート名:上に構築している親テーマのフォルダー (ディレクトリ) 名に対応します。 Text Domain : の名前は WordPress 子テーマに固有です。

以下は、Twenty Twenty Two を使用した子テーマの例です。

 /*
テーマ名：Twenty Twenty Two Child
テーマURI: https://example.com/
作者: 君の名は。
著者URI: https://example.com/
説明: Twenty Twenty Two 子テーマ
少なくとも次のものが必要です: 5.8
最大 5.9 までテスト済み
PHP が必要: 5.6
バージョン: 0.1
ライセンス: GNU General Public License v2 以降
ライセンス URI: http://www.gnu.org/licenses/gpl-2.0.html
テキストドメイン: Twentytwentytwo-child
テンプレート: 2022
タグ: カスタムカラー、カスタムメニュー、カスタムロゴ、エディタースタイル、アイキャッチ画像、フルサイト編集、ブロックパターン

Twenty Twenty-Two 子 WordPress テーマ、(C) 2021 WordPress.org
Twenty Twenty-Two Child は、GNU GPL の条件に基づいて配布されています。
*/

テーマ.json

theme.json の詳細については、開発者ドキュメントを参照してください。 Twenty Twenty Two のテーマ.json ファイルを見てみましょう。

 {
 「バージョン」: 2、
 "設定"： {}、
 「スタイル」: {}、
 "カスタムテンプレート": {},
 "テンプレートパーツ": {}
}

これらのそれぞれには、さらに使用できるスタイルがあります。 たとえば、スタイルの領域で、Twenty Twenty Two は次を使用します。

 {
 "設定"： {
 "AppearanceTools": true、
 "色"： {
 「デュオトーン」: [
 {
 「色」: [
 "#000000",
 「#ffffff」
 ]、
 "スラッグ": "前景と背景",
 "name": "前景と背景"
}

theme.json ファイルの作成にサポートが必要ですか? テーマ.json ファイルの多くの選択肢を作成するガイドについては、themegen.app を確認してください。

6. ブロックの子テーマをカスタマイズする

theme.json ファイルを簡単に作成してテーマに追加することもできますが、他にもいくつかの選択が必要です。 子テーマ、さらにはブロックテーマも WordPress の新しい領域です。 この投稿の時点では、サイト編集者には明らかにベータ版のラベルが付いています。 テンプレート パーツなどの子テーマで何が機能し、何がまだ機能しないのかを確認するために、もう一度参照してください。

さらに、グローバル スタイルとtheme.jsonがまだサポートしていない設定が見つかる場合があります。 ボックスシャドウ付きのグループ ブロック境界線など、追加の CSS を追加する場合は、それをstyle.cssファイルに追加するとよいでしょう。

 .has-primary-border-color {
 ボックスシャドウ: .1rem .1rem .05rem #647BAF ;
}

7. 子テーマをテストする

現在の開発環境でサイトが適切に見えると感じたら、実際のサイトにアップロードする前にテストを行ってください。

  • モバイル ビューポートなど、さまざまなブラウザ サイズでテストします。
  • 別のブラウザでテストするか、BrowserStack などのツールを使用します
  • アクセシビリティ基準を見直します。 WebAim を始めましょう

8. ブロックの子テーマをアップロードする準備をします

ステージング サイトで開発している場合、ファイルは必要な場所に正確に存在します。 ホスティング オプションにアクセスして、ステージング サイトをプッシュして稼働させることができます。 ローカル開発環境でファイルを作成している場合は、 style.cssファイルとtheme.jsonファイルを 1 つの zip ファイルとしてまとめて圧縮し、サイトにアップロードします。

ブロック子テーマの作成の要約

  1. ブロックの子テーマが必要かどうかを決定する
  2. 親テーマを選択する
  3. テスト環境を構成する
  4. テーマディレクトリを作成する
  5. テーマファイルを作成する
  6. ブロックの子テーマをカスタマイズする
  7. 子テーマをテストする
  8. それらをライブサイトにアップロードします

WordPress のクラシック テーマと同様に、ブロック テーマにも、親テーマが更新を受け取ったときに上書きされないカスタマイズを保存する場所が必要です。 ブロック子テーマを作成すると、サイト上の他のユーザーが使用できるオプションを追加、ロック、省略できるようになります。