WordPressのブロックテーマのファイル構造を理解して独自テーマを開発しよう!

ブロックテーマは簡単な修正であれば管理画面から操作することができるが、もう少し深くカスタマイズしたいのであれば、テーマのソースコードを見ていくしかありません。

この記事では、コードを修正するためにテーマのnァイル構造がどのようになっているのかについて説明をしていきます。

ファイルとフォルダ

WordPress テーマは、HTML、CSS、PHP など主なファイルで、基本的なテーマの構造は次のようになります。

ブロック テーマが機能するために最低限必要なファイルには必須と書いておきます。

  • parts/
    • footer.html
    • header.html
  • patterns/
    • example.php
  • styles/
    • example.json
  • templates/
    • 404.html
    • archive.html
    • index.html(必須)
    • singular.html
  • README.txt
  • functions.php
  • screenshot.png
  • style.css(必須)
  • theme.json

必須ファイル

WordPress がブロック テーマを認識するために必要なファイルが 2 つあります。

これについては、別の記事で詳しく説明していきます。

  • style.css(メイン スタイルシート): テーマの名前や説明が記述されていて、カスタムCSSを追加するためにも使います。
  • templates/index.html(テンプレート): デフォルトのテンプレートとなるファイル。これがあることでブロックテーマと認識されます。

オプションファイル

ブロックテーマには上記の必須リスト以外に任意のカスタムファイルがあります。

  • README.txt(テーマレビュー: ファイル): テーマに関する情報をユーザーに提供するファイル。公式のWordPressテーマディレクトリに送信するときに必要となります。
  • functions.php(カスタム機能): テーマが初期化された後、ページの読み込みプロセス中にWordPressが自動的に読み込む PHP ファイル。これを使用してカスタムPHPを実行できます。
  • screenshot.png: テーマの 1200×900 のスクリーンショット画像。WordPress管理画面の「外観 > テーマ」と公式のWordPress テーマ ディレクトリでテーマを表示するために使用されます。
  • theme.json(グローバル設定とスタイル): ユーザーインターフェースと統合して、サイトの設定とスタイルを構成するために使用されます。

標準フォルダ

WordPressでは特定の機能用にフォルダーが指定されています。

  • parts(テンプレートパーツ): テンプレートパーツが格納されます。パーツは、トップレベルのテンプレートに含めることができる小さなセクションです。多くの場合、ヘッダー、フッター、サイドバーなどが含まれます。
  • patterns(ブロックパターン): ブロックで構成された再利用可能なパターンが格納されます。WordPress はこのフォルダーに含まれるファイルを自動的に登録します。
  • styles(スタイルのバリエーション): 個別の JSON ファイルに保存されているテーマのグローバル設定とスタイルのバリエーションが格納されます。
  • templates(テンプレート): 大枠の構造ファイルが格納されます。このフォルダに格納されたファイルはテンプレートパーツやブロックパターンでマークアップされページが構成されます。

高度なテーマ構造

このセクションは、テーマでよく見られるファイルについて理解を深めるためのものであり、すべて網羅するものではありません。

完全にオプションであり、テーマごとに異なります。

より高度な開発方法に慣れていない場合は、今のところこのセクションをスキップしてもOKです。

オプションのフォルダ

WordPressテーマでよく見られる 2 つのファルダです。。

  • assets: テーマに必要な追加の CSS、画像/メディア、JavaScript を保存するためにこのフォルダーを使用します。。
  • inc: 追加機能のためにカスタムPHPクラスまたはファイルが保存されることがよくあります。

オプションファイル

このリストは網羅的ではありませんが、テーマ開発で使用される一般的なファイルがいくつか含まれています。(注: 以下のリンクのほとんどは外部のサードパーティ サイトにつながるものであり、WordPress とは提携していません。)

  • .editorconfig: コード エディターの行末や間隔などの書式設定を構成するために使用されます。
  • .gitattributes: Gitバージョン管理システムで属性を構成します。
  • .gitignore: Gitリポジトリにコードをコミットするときに無視するファイルを定義します。
  • CHANGELOG.md: テーマの各リリースにおける重要な変更を人間が判読できる形式で記録します。
  • LICENSE.md: テーマのライセンスを定義します。WordPress テーマ ディレクトリに提出されるすべてのテーマは、GPL v2+ のライセンスに基づいている必要があることに注意してください。
  • package.json: Node 環境内でビルド プロセスと開発依存関係を定義するためによく使用されます。

これらのファイルは完全にオプションの要素なので、すべて理解していなくても大丈夫です。自分のペースで自由に学習してください。


コメント

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です