AumCreate 公式ガイド

AumCreate は WordPress のテーマです。単体で完結したサイトを描画します。ロゴとメニューを 備えたサイトヘッダー、ブログ一覧、アーカイブ、検索結果、個別投稿、固定ページ、 著者プロフィール、そしてコメント。さらに Aumframe ビジュアルエディターを認識し、 あなたのデザインが URL を引き受ける箇所では自ら後ろに下がります。

1. テーマがページを描画する仕組み

WordPress はすべての URL に対してテンプレートファイルを選びます。AumCreate は テンプレート階層が問い合わせるケースごとに一つずつ用意しており、それらのテンプレートが 投稿内容・テーマ設定・カラーパレットからページを組み立てます。

その上に、三つの仕組みが重なります。

• サイトヘッダーとフッターは AumCreate が描画します。Aumframe が有効で Site shell が 公開されている場合は Aumframe の外枠が両方を置き換え、テーマは自前のものを一切 出力しません。
• Aumframe が有効で、そのデザインの一つが現在の URL に一致する場合、そのデザインが その URL におけるテーマのテンプレート出力を完全に置き換えます。テーマは aumframe_is_taking_over() でこれを検出し、自前のテンプレートが本来必要とする スタイルシートとスクリプトを読み込みません。
• WooCommerce、AumNexCart、AumReserva はそれぞれ実行時に検出されます。いずれかが 存在しない場合もテーマはそのまま描画し、テーマのどの部分もそれらの導入を前提と していません。

テーマは post-thumbnails、title-tag、automatic-feed-links、html5、 responsive-embeds、align-wide のサポートを宣言し、WooCommerce が有効なときは 商品ギャラリー機能もサポートします。メニュー位置は Primary Menu の一つを登録します。

2. インストール

テーマをインストールして有効化します。動作するサイトを得るのに、これ以上の設定は不要です。

ただし、先に設定しておく価値のある項目が二つあります。サイトヘッダーがこの両方を 参照するためです。

1. Appearance → Menus —— Primary Menu の位置にメニューを割り当てます。
2. AumCreate → Theme Settings → General —— 横長ロゴをアップロードします。

ロゴがない場合、サイトヘッダーは代わりにサイトタイトルを表示します。メニューが 割り当てられていない場合、ヘッダーはロゴのみを表示します。

3. テーマ設定画面

テーマはトップレベルのメニュー項目 AumCreate を一つ追加し、その下に Theme Settings という子項目が一つだけあります。テーマで設定できることは すべてこの一画面にまとまっており、タブで分かれています。

タブごとに独立して保存されます。各項目の説明は、その項目の下に表示されます。

4. サイトアイデンティティとサイトヘッダー

サイトヘッダーは、二つの設定と一つの WordPress メニュー位置から組み立てられます。

4.1 ロゴ

General Settings には四つのロゴ枠があります。横長ロゴと正方形ロゴ、それぞれに ダークモード用の別バリエーションです。サイトヘッダーは横長の組を使い、正方形の組は 横に長いロゴが収まらない場所で使われます。

両方のバリエーションがページに書き出され、現在のパレットに合う方が表示されます。 ライト用だけを設定するのも妥当です。その場合そのロゴが両方のパレットで表示されますが、 明暗どちらの地色でも読めるマークであれば、それが正しい選択です。

4.2 Primary Menu

ヘッダーは Primary Menu の位置に割り当てられたメニューを、一階層だけ描画します。 サブメニューの項目はサイトヘッダーには描画されません。

その位置にメニューが割り当てられていない場合、ヘッダーは固定ページの一覧に フォールバックせず、ロゴのみを描画します。

4.3 フッター

テーマのフッターはサイト名と現在の年を表示します。意図的に簡素にしてあります。 デザインされたフッターが必要なサイトは、Aumframe の Site shell から得ることになり、 それがこのフッターを置き換えます。

5. 色とライト／ダークパレット

5.1 二つのパレット

Color Settings には、ライトモード用のパレットとダークモード用のパレットが 一つずつあります。各パレットは七つの値を設定します。ブランドカラー、セカンダリカラー、 ページ背景、カード背景、境界線の色、控えめなテキストの色、スクロールバーの色です。

5.2 自動算出されるテキストカラー

テキストカラーはこの七つに含まれていません。テーマは各背景の相対輝度から、その上に 載せる文字色を算出します。白との対比と、ほぼ黒との対比を比べ、高い方を採用します。 したがって背景を変えれば、その上の文字も一緒に動きます。白文字が必要なほど暗い ブランドカラーには自動的に白文字が当たり、同期を保つための二つめの設定は要りません。

5.3 テーマモード

General Settings の Theme Mode は三つの値を取ります。

• Light Mode —— サイトは常にライトパレットで描画されます。
• Dark Mode —— サイトは常にダークパレットで描画されます。
• Follow System —— パレットは訪問者の OS 設定に従います。

5.4 フロントエンドの切り替え

Front-end theme toggle は、訪問者が自分でパレットを切り替えられるコントロールを 追加します。この設定は Theme Mode とは独立しています。ダークを既定にしたうえで 切り替えも提供できますし、ライトを既定にして切り替えを一切置かないこともできます。

5.5 カスタムカラートークン

Custom Global Colors は名前付きの色を受け付けます。それぞれにライト用の値と ダーク用の値があります。各色はスラッグにちなんだ名前の CSS カスタムプロパティになり、 任意のカスタム CSS からも、Aumframe で作ったデザインからも参照できます。

6. タイポグラフィ

タイポグラフィは Layout Settings タブにあり、三つの書体を設定します。見出し用、 本文用、等幅用です。それぞれシステムフォントスタックか Google フォントを選べます。

四つめのコントロール Fallback Stack は、CSS のフォントスタックで選んだファミリーの 後に続くものを決めます。これにより、ウェブフォントの読み込み中や読み込みに失敗した 場合でも、近い形の書体で表示されます。

Custom Font CSS は、他の場所でホストされているフォント向けに @font-face や @import のルールを受け付けます。テーマは生成するスタイルシートの中で、フォントの @import を他のどのルールよりも前に出力します。ブラウザはルールの後に現れた @import を破棄し、しかもその際に何も報告しないためです。

7. レイアウト、フローティングコントロール、投稿サイドバー

7.1 コンテンツ幅と画像の形

Content Width はコンテンツ列の最大幅を設定します。Image Orientation は一覧の カバー画像について 4:3 と 3:4 のどちらの縦横比にするかを選びます。これはファイルを 切り抜くのではなく、CSS の aspect-ratio として適用されます。

7.2 フローティング列

三つのコントロールが、ビューポート隅の同じ固定列を共有します。トップへ戻るボタン、 ライト／ダーク切り替え、ソーシャルサイドバーです。Back to Top Button と Social Sidebar は、それぞれ自分の分だけをオンオフします。

この列は wp_footer に接続されています。テーマのフッターも Aumframe のキャンバスも これを呼ぶため、デザインに引き受けられたページも含め、すべてのページに表示されます。

7.3 ソーシャルリンク

Social Links は任意の数の項目を受け付けます。各項目はアイコン画像、背景色、 ホバー色、そして三つの挙動のいずれか（リンク、ホバーで表示するテキストのポップアップ、 ホバーで表示する画像のポップアップ）を持ちます。画像ポップアップを選ぶ理由は、 たいてい QR コードです。

7.4 投稿サイドバーのモジュール

Post Sidebar Modules は、個別投稿の横にどのモジュールをどの順で表示するかを決めます。

• Table of Contents —— 投稿内の見出しから生成されます。
• Post Navigation (Prev / Next) —— 前後の投稿へのリンクです。
• Related Posts —— カテゴリーまたはタグを共有する投稿です。
• Tags —— その投稿のタグです。

各モジュールに個別のスイッチがあり、リストの並び順がそのまま描画順になります。

8. 記事テンプレート

すべての投稿には、エディターのサイドバーに Article Template のボックスがあり、 三つの選択肢を持ちます。

8.1 Text

既定値です。投稿はタイトルの背面にアイキャッチ画像を置いたヒーローとして描画され、 その後に本文とサイドバーのモジュールが続きます。

8.2 Gallery

ボックスに画像ピッカーが加わります。そこで選んだ画像は本文の上にギャラリーとして 描画され、アイキャッチ画像が設定されていない場合は、その最初の一枚が一覧における その投稿のカバーになります。

8.3 Video

ボックスに動画ピッカーが加わり、投稿はヒーロー画像の代わりに動画を置いて描画されます。

動画には固有のサムネイルがないため、ボックスがその生成を引き受けます。ブラウザが 選択した動画を読み込み、ある一コマまで進め、そのコマをキャンバスに描き、結果を その投稿のアイキャッチ画像としてアップロードします。処理はブラウザ内で完結するので、 サーバー側の動画ツールは一切関与しません。

8.4 一覧でのカバー

投稿が一覧に現れるとき、そのカバーは次の順で解決されます。アイキャッチ画像、 ギャラリーの一枚目、動画のポスター、そして General Settings の Default Post Thumbnail です。いずれも無く既定も設定されていない投稿は、 壊れた画像ではなく、画像のないカードとして描画されます。

9. 一覧

投稿の一覧を描画するテンプレートは三つあり、いずれも同じカードを使います。カバー画像、 タイトル、日付、コメント数、取得できる場合は閲覧数とインタラクション数、 そして切り詰めた抜粋です。

9.1 ブログ一覧

投稿ページはカードをグリッドで描画します。列数はコンテンツ幅が許す限り増え、 スマートフォンでは一列になります。

9.2 アーカイブ

カテゴリー、タグ、日付、投稿タイプのアーカイブには、ブログ一覧にはない三つが加わります。

• 並び順（Newest、Recently updated、Most commented、Title A–Z、 Random）、昇降の向き、そしてそのアーカイブ内に限定した検索欄を備えたフィルターバー。
• カテゴリー、最近の投稿、タグクラウドを、それぞれ折りたためるパネルに収めたサイドバー。
• ページを再読み込みしないページング。フィルターやページを変えると次の分を取得し、 カードをその場で差し替えます。

9.3 検索結果

検索結果は同じカードを同じサイドバーの横に描画します。General Settings の Search Types が、投稿と固定ページに加えてどのコンテンツタイプを検索するかを決めます。

10. 著者プロフィールページ

著者の URL は、その著者の投稿を並べただけのリストではなく、プロフィールページを 描画します。ページには著者のアバター、自己紹介、参加日、所在地、ウェブサイト、 そして一組のタブが並びます。

• Recent Posts —— その著者が公開した投稿。
• Liked Posts と Favorited Posts —— その著者が印を付けたもの。 インタラクション機能が利用できる場合に表示されます。
• Following と Followers —— その著者と他のユーザーとのつながり。
• Orders と Downloads —— WooCommerce が有効なときに加わり、そのプロフィールの 持ち主本人にだけ表示されます。

ログイン中の著者が自分のプロフィールを見ているときは、自己紹介、所在地、ウェブサイト、 誕生日をその場で編集でき、同じ画面からアバターも変更できます。

11. コメント

コメントはスレッド表示で、AJAX で読み込まれます。一ページ目は投稿と一緒に届き、 ページャーはページを再読み込みせずにリストをその場で差し替えます。返信フォームは、 返信先のコメントの下に開きます。

コメント一覧と返信フォームは、投稿の識別子を <body> の data-post-id 属性から 読み取ります。この属性は、個別表示のたびにテーマが書き出します。

12. メンバーシップとソーシャル機能

12.1 登録とログインページ

Anyone can register は WordPress の同名の設定と対応し、常に同期します。 したがってここでオンにすると、Settings → General の方もオンになります。

テーマは WordPress のログイン画面を、あなたのロゴと画像のカルーセルを備えた画面に 置き換えます。Login Page Carousel がその画像を保持し、Default Avatar は アバターを未設定のアカウントに使われるアバターを決めます。

12.2 ソーシャル機能の全体スイッチ

Global Social Features Switch は、サイト全体の閲覧数・いいね・お気に入りを 制御します。カード上のカウンター、個別投稿上のボタン、著者プロフィールの Liked と Favorited のタブが対象です。

これらの数値は Aumframe が保存し提供します。スイッチがオンで Aumframe が無い場合、 テーマはゼロの列ではなく、カウンターを一切描画しません。「何も数えていない」を 意味するゼロは、数値ではないからです。

13. パフォーマンスのスイッチ

Performance タブには八つのスイッチがあり、それぞれバイト数やリクエストを消費する WordPress の挙動に対応します。八つとも既定はオフで、それぞれ何を取り除くかを明示します。

• Disable Emoji Scripts —— 絵文字用の JavaScript と CSS、およそ 10 kB を取り除きます。 現代のブラウザはこれらが無くても絵文字を描画します。
• Disable Embed Scripts —— 他サイトがあなたのサイトを埋め込むための oEmbed ホスト スクリプトを取り除きます。
• Limit Post Revisions —— 投稿ごとのリビジョンを最大五件に保ちます。
• Reduce Heartbeat Frequency —— 管理画面の Heartbeat API を 15 秒ごとから 60 秒ごとに遅くします。
• Lazy-Load Iframes —— iframe に loading="lazy" を付けます。
• Disable XML-RPC —— XML-RPC エンドポイントを遮断します。XML-RPC 経由で接続する ものを一切使っていない場合にだけ、オンのままにしてください。
• Defer Non-Critical JS —— 解析を止める必要のないスクリプトに defer を付けます。
• Remove Version Query Strings —— ローカルの CSS と JS の URL から ?ver= を 取り除き、クエリ文字列付き URL を保存しないキャッシュでも保存されるようにします。

14. WooCommerce

WooCommerce タブは WooCommerce が有効な間だけ表示され、七つの設定を持ちます。 ショップページのコンテンツ幅、デスクトップ／タブレット／スマートフォンそれぞれの幅に おける一行あたりの商品数、一ページあたりの商品数、読み込み方式（Pagination または Load More Button）、そして商品ページに表示する関連商品の数です。

テーマは WooCommerce の商品ギャラリーのズーム、ライトボックス、スライダーのサポートも 宣言します。さらにサイトがダークモードで描画されるときは WooCommerce 自身の ダークコントロール用スタイルを読み込み、ブロックチェックアウトの入力欄が パレットに従うようにします。

15. テーマを拡張するプラグイン

これらが一つも入っていなくても、テーマは動作します。それぞれが加えるのは能力であって、 テーマを動かすための条件ではありません。そしてテーマはそれらのどれにも言及しません。 管理画面のどこにも通知もチェックリストもインストーラーもありません。テーマ単体で 動いているサイトは完成したサイトであり、テーマが「足りない」と報告すべきものは 何も無いからです。

唯一プラグインの要件を持つのはテンプレートキットです。その中身がそれらを使って 作られているためです。その要件はキットに属し、キットをインストールするキットマネージャーが それを読み取り、サイトに何が足りないかを伝えます。

• Aumframe —— ビジュアルデザイン。ページレイアウト、Site shell として描かれる サイトヘッダーとフッター、コンテンツに結び付いたテンプレート。閲覧数・いいね・ お気に入りのカウント、およびキットマネージャーが読むテンプレートキット形式も このプラグインが持ちます。
• AumViso —— 検索エンジン向けメタデータ、構造化データ、そして FAQ・ガイド・ 用語集のコンテンツタイプ。
• WooCommerce —— ショップ。テーマの WooCommerce タブと、著者プロフィールの Orders・Downloads タブは、これと一緒に現れます。
• AumNexCart —— チェックアウトの代わりに問い合わせを置いた商品カタログ。
• AumReserva —— 予約。

いずれも実行時に検出されます。テーマはどれに対しても依存を宣言しておらず、 一つ取り除けば、サイトはテーマ単体が描画する状態に戻ります。

テーマが一つだけ表示するメッセージがありますが、これは推奨ではありません。Aumframe が インストールされていて、かつサイト上のデザインが必要とするより古い場合、設定画面が インストール済みのバージョンと必要なバージョンを示します。既に存在するデザインが、 更新されるまで描画を止めてしまうためです。

16. 設定リファレンス

テーマ設定画面のすべての項目を、タブごとに、書き込まれるオプションキーとあわせて 示します。すべて一つの WordPress オプション aumcreate_settings に格納されます。

16.1 General Settings

16.2 Color Settings

16.3 Layout Settings

16.4 User Settings

16.5 Performance

16.6 WooCommerce

17. トラブルシューティング

サイトにヘッダーが無い。 Appearance → Menus で Primary Menu の位置に メニューを割り当て、General Settings で横長ロゴをアップロードしてください。 どちらも無い場合、ヘッダーはサイトタイトルだけを描画します。

あるページがテーマのテンプレートとまったく違って見える。 Aumframe のデザインが その URL に一致し、テンプレート出力を置き換えています。どの URL を引き受けるかは、 そのデザインのルールが決めます。

カードに閲覧数・いいね・お気に入りの数が出ない。 これらの数値は Aumframe から 来ます。プラグインが無い場合、テーマはゼロではなく、カウンターを描画しません。

翻訳済みのサイトなのに、日付やカウンターが英語で表示される。 テーマが同梱している 翻訳は簡体字中国語の一つだけです。WordPress はあるロケールから別のロケールへ フォールバックしないため、それ以外のロケールに設定されたサイトでは、テーマ自身の 文字列は英語で表示されます。

Typography で選んだフォントが一向に現れない。 Google フォントのリクエストは、 訪問者の所在地によっては遅くなったり遮断されたりします。その間に何を表示するかは Fallback Stack が決め、Custom Font CSS は他の場所でホストされたフォントを 指すルールを受け付けます。