国内最高レベルのユーザー体験と開発拡張性を両立した、ブロックエディタ時代の完成形テーマ、それがWordPressテーマ｢SWELL｣です。
- ブロックエディタ（Gutenberg）完全対応
- 表示速度・SEO・アクセシビリティの最適化
- 開発者による高度な拡張性
- 非開発者でも迷わないUI/UX設計
という4点をバランス良く実現しています。
目次
SWELLの技術的な構成面まとめ
SWELLの技術的な特徴をまとめると以下になります。
- 初心者でも即使えるUIの完成度
- 上級者でも自由に改造できる設計の柔軟性
- コードの質・構造・思想のバランスが非常に良い
もう少し詳細を書くと以下の通り。
| 項目 | 解説 |
|---|---|
| 構造設計 | OOP + パーツ分割 + モジュール構成。再利用・オーバーライドが容易。 |
| ブロックエディタ対応 | coreブロック完全対応＋独自ブロック調整あり。エディタ側CSSも美しい。 |
| CSS/JSビルド構成 | src/ → build/ の分離構造。開発と本番の責務を明確に分離。 |
| 表示速度対策 | 非同期読み込み、遅延読み込み、モバイル最適化、キャッシュ対応。 |
| ユーザーUI（管理画面） | カスタマイザーやメタボックスも充実。非エンジニアにも優しい設計。 |
| 子テーマ拡張性 | parts/ で細かく上書き可能。開発者フレンドリーな構成。 |
見た目やUXもいいので、非常にバランスが良いテーマだと思います。
WordPress テーマ「SWELL」のテーマ直下のフォルダ･ファイル
SWELLの基本的なデータを完結にまとめました。
SWELLテーマは非常に整理された構造で、OOP（オブジェクト指向）ベースのモジュール設計＋ビルド体制（src → build）がしっかりしています。
フォルダ
| フォルダ名 | 備考 | 補足 |
|---|---|---|
| assets | 静的アセット（素材）を格納するフォルダ | 画像、フォント、アイコン、動画などの「素材」置き場 |
| build | コンパイル後の成果物。ブラウザが読み込む本番用ファイル群 | 主にCSS/JSの置き場所。 編集は直接せず、src側を修正して再ビルド。 |
| classes | テーマの中核をなすPHPクラスたち | 機能の本体。 OOPで再利用可能な「パーツ部品」 |
| languages | 多言語対応（i18n）用の翻訳ファイル | POEditorなどで作成・編集 |
| lib | テーマの内部ライブラリ・フック・API | WPとの連携や初期設定。 テーマ全体の「制御塔」 |
| parts | テンプレートパーツ | テンプレートパーツ群 |
| src | 開発用ソース。ビルド前のCSS/JSなど | 開発者が主にここを編集 |
| tmp | テンプレートファイルの置き場所 | 特殊なテンプレート |
ファイル
基本的にはWordPressのテンプレートが直下に置かれています。
| 404.php | 404 Not Found ページのテンプレート |
|---|---|
| archive-term.php | カテゴリ・タグなどのターム系アーカイブのテンプレート |
| archive.php | アーカイブページ（一覧ページ）」全体に対応するテンプレート |
| attachment.php | 画像やPDFなど「添付ファイルの個別ページ」を表示するテンプレート |
| author.php | 「著者（Author）」別の投稿一覧ページを表示するテンプレート |
| comments.php | 投稿ページなどにコメント一覧と投稿フォームを表示するテンプレート |
| footer.php | フッター部分のテンプレートファイル |
| functions.php | SWELLテーマのエンジン部分（起動・構造）を司る中枢的なファイル |
| header.php | ヘッダー（ページ最上部）」＋初期構造の出力テンプレート |
| home.php | 投稿ページのトップ（home）」を表示するテンプレート |
| index.php | 他のテンプレートが存在しないときに使用される最終テンプレート |
| licence.txt | SWELLで使われているサードパーティライブラリとそのライセンス情報 |
| page.php | 固定ページを表示するためのテンプレート |
| sass-builder.js | Sass（SCSS）ファイルを CSS にビルド（変換）する Node.js スクリプト |
| screenshot.png | SWELLのアイコン画像 |
| search.php | 検索結果ページ（検索クエリによる投稿一覧）を表示するテンプレート |
| searchform.php | 検索フォーム（検索入力欄＋送信ボタン）を出力するテンプレート |
| sidebar.php | サイドバーを出力するテンプレート |
| single-lp.php | ランディングページ（LP）専用テンプレート |
| single.php | 投稿記事ページを表示するためのテンプレート |
| style.css | WordPress テーマ「SWELL」のテーマ定義ファイル |
WordPress テーマ「SWELL」のテーマ定義ファイルの中身
PHPのバージョンは7.3.0以上にしましょう。
| 項目 | 内容 | 解説 |
|---|---|---|
Theme Name | SWELL | WordPressテーマの名称。管理画面でもこの名前で表示されます。 |
Theme URI | https://swell-theme.com/ | テーマの公式サイト。マニュアルや購入ページなどへのリンク。 |
Description | シンプルなのに高機能… | テーマの概要。管理画面で表示され、他のテーマと区別できます。 |
Version | 2.15.0 | テーマのバージョン。更新の際に重要。 |
Requires at least | 5.6 | WordPressの最低対応バージョン。 |
Requires PHP | 7.3.0 | PHPの最低対応バージョン。エックスサーバーやローカル環境構築時の参考に。 |
Author | LOOS,Inc. | 開発会社。WordPress有料テーマ「SWELL」の開発元。 |
Author URI | https://loos.co.jp/ | 開発者の公式サイト。会社概要など。 |
Text Domain | swell | 翻訳の識別子。__()や_e()関数で使われる。 |
Domain Path | /languages | 翻訳ファイル（.mo/.po）を格納するディレクトリ。 |
License | GPL（GNU General Public License） | ライセンス種別。再配布・改変が許可されるオープンソースライセンス。 |
License URI | http://www.gnu.org/licenses/gpl.html | ライセンスの詳細説明ページへのリンク。 |
SWELLで使われているライブラリ･ライセンス一覧
SWELLにはアイコンがたくさんありますが、基本的にはライブラリを使用しているようです。
| ライブラリ名 | ライセンス形式 | 主な用途・機能内容 |
|---|---|---|
| lazysizes | MIT License | 画像の 遅延読み込み（Lazy Load） を実現。ページの初期読み込みを高速化します。 |
| Luminous | BSD-2 License | 画像のライトボックス表示（拡大表示） 機能に使用。クリックでポップアップ表示される画像に対応。 |
| Rellax | MIT License | スクロールに応じて要素がゆっくり動く パララックス効果 を演出。装飾的な動きに使われます。 |
| Swiper | MIT License | スライダー／カルーセル表示 を実現するライブラリ。トップのスライダーや記事一覧の横スクロールに使用。 |
| Font Awesome 6 Free | CC-BY-4.0 / MIT | アイコンフォント。ボタンやSNSリンク、見出し装飾などに幅広く使用。Web上で定番のアイコンライブラリ。 |
| Phosphor Icons | MIT License | SWELL独自UIで使われる シンプルなSVGアイコン集。軽量で視認性が高い。 |
| Ionicons | MIT License | iOSやモバイルUI風の アイコンフォント。一部のパーツで補助的に使用。 |
| Feather Icons | MIT License | ミニマル・アウトライン型のSVGアイコン。軽量でカスタマイズしやすく、よく使われるスタイル。 |
