SWELL子テーマのコードサンプル

応募審査のために一時公開している、WordPress有料テーマ「SWELL」の子テーマコードです。過去に制作し、途中で方針転換したWebサイトから、子テーマ部分を抜粋しています。

この子テーマについて

この子テーマでは、表示や動きの異なるカスタムブロックを共通の形式で追加できます。ブロックごとに設定、編集画面、表示処理、CSS、JavaScriptをまとめ、新しい演出パターンを増やしやすい構成にしています。

サイトを編集するWordPressユーザーは、コードを変更せず、ブロックエディターの入力欄や数値設定からカラム数、サイズ、間隔、動きなどを調整できます。既存ブロックに見た目や動きを加えるラッパーブロックにも、同じ仕組みを使っています。

カスタムブロックは、ACFと組み合わせて入力項目を持たせることも、ACFに依存せず単体で動かすこともできます。用途の異なるブロックでも、ファイル構成と読み込み方法がそろうように実装形式を共通化しています。

このほか、ショートコード、スクロール演出、表示調整、スタイルと画像資産の読み込みなど、子テーマで追加した機能を種類ごとに分けています。

技術構成

分類	使用技術
CMS・テーマ	WordPress、SWELL子テーマ
サーバー側	PHP、WordPress API
ブロック	Block API v2／v3、block.json、Gutenberg JavaScript API
エディターUI	InspectorControls、InnerBlocks、ブロック属性
表示	JavaScript、jQuery、CSS、PHPによる動的レンダリング
外部ライブラリ	Masonry 4.2.2、imagesLoaded 5.0.0

JavaScriptのビルド工程は設けず、WordPressが提供するwp.blocks、wp.blockEditor、wp.componentsなどを直接利用しています。

実装構成

• blocks/common/ は、個別機能を持つカスタムブロックです。
• blocks/wrapper/ は、InnerBlocksを内包し、子ブロックへ表示や動きを加えるラッパーブロックです。
• commonブロック3個とwrapperブロック5個を収録しており、すべてPHPによる動的レンダリングを使用します。
• 各ブロックはblock.json、ローダー、PHPのレンダリング処理、エディター用アセット、フロント用アセットを同じ単位にまとめています。
• func-hub/import-custom-blocks.phpがブロックディレクトリを走査し、register_block_type()で登録します。
• features/、shortcode/、style/に、ブロック以外の機能と表示調整を分けています。
• WordPressのWP_Query、ショートコード、投稿メタデータ、nonce検証、SVGアップロード設定を使用しています。

公開範囲

このリポジトリは応募審査向けに作成したコードスナップショットです。元の非公開リポジトリのGit履歴は含みません。

元サイトのデータ、外部画像URL、内部向け文書、AI向け指示、開発環境、ACFブロックの実装例は除外しています。サイト固有の表示名とコンテンツIDは、公開用の表現に置き換えています。

動作確認には、WordPress、正規に入手したSWELL親テーマ、使用する機能に応じたプラグインが必要です。

第三者資産

• SWELL親テーマ本体は、このリポジトリに含まれません。
• style.css はSWELL子テーマのヘッダーを保持しており、ファイルに記載されたGNU General Public Licenseが適用されます。
• Font Awesome FreeのSVG、Masonry、imagesLoadedを含む箇所では、各ファイルに記載された第三者のライセンスと帰属表示が適用されます。

ライセンス

本リポジトリ全体に共通するライセンスは設定していません。各ファイルにライセンス表示がある場合は、その条件が適用されます。その他の本人作成コードについて、利用、複製、改変、再配布等の許諾は行っていません。

応募手続きの終了後は、リポジトリを非公開に戻します。