Abira

動作環境

Abiraは完全なブロックテーマです。クラシックウィジェット、クラシックメニュー、カスタマイザーの色・フォント設定には対応していません。すべてサイトエディターから管理します。

インストール

1. WordPress管理画面で 外観 > テーマ > 新規追加 を開く
2. 「Abira」を検索するか、テーマのアップロード から abira.zip を選択
3. 有効化 をクリック
4. 外観 > エディター からテンプレート・パターン・グローバルスタイルのカスタマイズを開始

クイックスタート

Abiraには、フロントページと投稿一覧ページがどう連携するかを示す設定例が最初から用意されています。

1. 設定 > 表示設定 を開く
2. ホームページの表示 を「固定ページ」に設定
3. ホームページ に、Front Pageテンプレート(templates/front-page.html)を使うページを指定
4. 投稿ページ に別のページを指定。このページは自動的に templates/home.html を使い、最新記事一覧を表示

投稿ページを設定しない場合、ホームページは templates/home.html にフォールバックし、投稿一覧を直接表示します。

フロントページの表示内容

templates/front-page.html は、上から順に以下を表示します。

1. ヘッダー
2. Front Page Hero パターン(abira/front-page-hero) — イラストと短いテキスト。ページ自体にコンテンツが無くても表示される
3. ページ自身のコンテンツ(post-content) — ブロックエディターで書いた内容
4. 「Latest Posts」見出し + 最新3件の投稿を3カラムグリッドで表示(固定表示の投稿は除外)
5. フッター

つまりフロントページのコンテンツを空のままにしても、完成された状態のホームページになります。もちろん投稿グリッドの上に自分のブロックを追加することもできます。

テーマ構造

abira/
├── style.css                 テーマヘッダー + ベースCSSリセット、レイアウト、カードスタイル
├── theme.json                 グローバル設定・スタイル(v3)
├── functions.php              テーマ初期化、エンキュー、ブロックスタイル登録
├── readme.txt                 WordPress.org用readme(変更履歴、クレジット、ライセンス)
├── screenshot.png             外観 > テーマ画面に表示されるスクリーンショット
├── accessibility.txt          アクセシビリティ声明
│
├── templates/                 ページ全体のブロックテンプレート
│   ├── index.html
│   ├── front-page.html
│   ├── home.html
│   ├── single.html
│   ├── page.html
│   ├── page-no-title.html     カスタムテンプレート: Page (No Title)
│   ├── archive.html
│   ├── search.html
│   ├── 404.html
│   └── blank.html             カスタムテンプレート: Blank
│
├── parts/                     テンプレートパーツ(ヘッダー、フッター)
│
├── patterns/                  PHPで登録されたブロックパターン
│   ├── front-page-hero.php
│   ├── query-loop.php
│   ├── query-loop-card.php
│   ├── query-pagination.php
│   ├── query-no-results.php
│   ├── single-post-header.php
│   ├── single-post-navigation.php
│   ├── single-comments.php
│   ├── single-author-bio.php
│   ├── search-content.php
│   ├── page-comments.php
│   └── 404-content.php
│
├── styles/                    グローバルスタイルバリエーション
│   ├── primary.json
│   ├── nordic.json
│   └── dusty-rose.json
│
├── assets/css/
│   ├── editor-style.css       エディター専用の見た目調整CSS
│   ├── block-style.css        core/navigation用CSS
│   └── block-styles.css       カスタムブロックスタイルCSS(ボタンOutline、
│                               セパレーターWavy)+ 投稿カードレイアウトCSS
│
└── languages/                 .pot/.po/.mo 翻訳ファイル

テンプレート

すべてのテンプレート・テンプレートパーツは 外観 > エディター > テンプレート から編集できます。編集内容は上書き設定として保存され、子テーマと同じようにテーマ本体のファイルより優先されます。

パターン

Abiraのパターンは、標準的なWordPressパターンヘッダー形式を使って patterns/ 以下にPHPファイルとして登録されています。

<?php
/**
 * Title: Pattern Name
 * Slug: abira/pattern-slug
 * Categories: abira
 */
?>
<!-- block markup -->

すべてのパターンはパターン挿入時に Abira カテゴリーに表示され、デフォルトで使われているテンプレート以外の、任意のページや投稿にも挿入できます。

主なパターン

• abira/front-page-hero — インラインSVGイラスト(ミニマルなブラウザウィンドウのスケッチ)と短いキャプション。フロントページテンプレートの先頭で使用。別のイラストにしたい場合は patterns/front-page-hero.php のSVGを直接編集
• abira/query-loop-card — クエリループ用のカードレイアウト。front-page.html と archive.html で使用。アイキャッチ画像は固定の16:9コンテナに収められ、画像が無い投稿でもスペースが確保されるため、グリッド内のカードが揃って見える。抜粋は5行でクランプ
• abira/query-loop — よりシンプルなリスト行レイアウトのクエリループ。home.html で使用

スタイルバリエーション

外観 > エディター > スタイル > スタイルを閲覧 から、theme.json を編集せずにカラーパレット全体を切り替えられます。

各バリエーションは styles/ 以下のJSONファイルで、settings.color.palette(と関連するスタイル参照)のみを上書きします。レイアウト・余白・タイポグラフィはすべてのバリエーションで共通です。

カラー・フォント・余白のカスタマイズ

Abiraのデザイントークンはすべて theme.json の settings 以下に定義されており、コードを触らずに 外観 > エディター > スタイル から視覚的に編集できます。

• カラー — settings.color.palette。Base、Contrast、Accent、Accent Light、Subtle、Mutedの6色。パレットの一貫性を保つため、カスタムカラーは意図的に無効("custom": false)。完全に独自のパレットにしたい場合はスタイルバリエーションを切り替えるか、theme.json を直接編集
• フォント — settings.typography.fontFamilies。System Sans(デフォルト)、System Serif、System Monoの3種のシステムフォントスタック。Webフォントは読み込みません
• フォントサイズ — settings.typography.fontSizes。SmallからXX-Largeまで5段階の可変サイズ
• 余白 — settings.spacing.spacingSizes。XS(0.5rem)からXXL(6rem)まで6段階。var:preset|spacing|* としてパターン・テンプレート全体で使用
• レイアウト幅 — settings.layout.contentSize(800px)とwideSize(1200px)。大きなモニターでコンテンツ幅を広げたい場合はここを増やす

ブロックスタイル

Abiraは functions.php の register_block_style() で、2つの追加ブロックスタイルを登録しています。

• Button → Outline — 透明背景+ボーダーのボタン。ホバー/フォーカス時に塗りつぶされる
• Separator → Wavy — core標準のdefault・dotsに加わる波線スタイル

どちらもエディターのブロックツールバーから選択でき、CSSは assets/css/block-styles.css にあります。

アクセシビリティ

Abiraは、WCAG 2.2 AAを基準として構築されています。

• 全体を通したセマンティックHTML5(<header>、<main>、<footer>、適切な見出しレベル)
• すべてのページ上部に表示される、目に見えるスキップリンク
• アクセントカラーを使った、すべてのインタラクティブ要素(リンク・ボタン)の可視フォーカスアウトライン
• prefers-reduced-motion 対応 — ユーザーがこの設定を有効にしている場合、アニメーションとスムーススクロールを無効化
• render_block フィルター(functions.php 内の abira_fix_nav_list_structure())により、ナビゲーション・ページリストブロック内の <ul> が正しい子要素のみを持つよう保証(WordPressコアは <li> 以外の要素を直接出力してしまうことがあるため)
• NVDAで検証済み

詳細は accessibility.txt のアクセシビリティ声明全文をご覧ください。

親テーマとして使う

Abiraは、子ブロックテーマの親として機能します。

your-child-theme/
├── style.css
└── theme.json

最小限の style.css ヘッダー:

/*
Theme Name: Your Child Theme
Template:   abira
*/

子テーマの theme.json はAbiraのものとディープマージされます。必要な部分(カラー、レイアウト幅、追加パターンなど)だけを上書きすれば、それ以外はすべてAbiraの設定が引き継がれます。子テーマ内に同じパスのファイル(例: templates/front-page.html)を置けば、テンプレートやテンプレートパーツを個別に上書きすることも可能です。

翻訳

テーマ内のすべての文字列は abira テキストドメインで翻訳用にラップされており(__()、_x() など)、スターター.potファイル入りのlanguages/フォルダも同梱しています。新しい言語を追加する手順:

1. Poedit、Loco Translate、wp i18n などのツールで、languages/abira.pot から .po/.mo のペアを生成
2. ロケールコードを使ってファイル名を付ける(例: abira-ja.po / abira-ja.mo)
3. languages/ に配置

FAQ