wpnonmy Elementor Atomic Expert (V4) は何をしますか？

wpnomyからルーティングされます。wpnomyはインテーク、デザイン標準、JSON配信、ハンドオーバーを管理します。このファイルはV4ビルドルールのみを扱います。

Elementor Core 3.29+とAtomic Editorの有効化が必要です。4.xからデフォルトで有効です。

全てのビルド開始時にルーターのビルドスクラッチパッドを開き、最新の状態に保ってください：インテーク、計画、決定、ビルダー固有の例外、検証。

連携

elementor-build-page（Novamira経由でのビルド用）およびelementor-convert-to-v4（既存のV3ページを移行する場合）と連携します。メカニズムはそれらに任せ、このファイルの規約が異なる箇所を優先します。

ブラックボックスゲート

要素を配置する前に実行します。完全な文書：ルーターのreferences/black-box-policy.md。

許可（プリミティブ）

Div Block、Flexbox、Heading、Paragraph、Image、Button、SVG、Divider。Global ClassesとVariablesを使用。

許可（ビルダー固有）

Atomic Form、atomic Tabs、Elementorが提供するatomicアコーディオン（FAQのハウスデフォルト）、ファサード付きYouTubeまたは動画、動的リスト用Loop Grid、Nav Menu、検索、ページネーション、パンくずリスト、Components。クラスでのみスタイリング。各要素は出力マークアップとともに記録。

禁止

クラシック複合ウィジェット（アイコンボックス、イメージボックス、CTA、価格表、 testimonial、カウンター、プログレス、カウントダウン、ヒーロー、ソーシャルアイコン、星評価、著者ボックス、投稿情報）、アドオンパックウィジェット、レガシーSection、Column、Inner Section、モーションおよびエフェクト効果、要素ごとのホバー効果、レスポンシブ表示条件、レイアウトマークアップを含むテキストエディター

要素の正確な出力HTMLを記述できますか？ 2. すべての部分をクラスと変数でスタイリングできますか？ 3. HTMLとクラスとして別のビルダーにコピーしても機能しますか？いずれかが「いいえ」の場合：スキップするか、ビルダー固有の例外として記録します。

最初にインストールを確認

いくつかの機能はフィーチャーフラグとして提供され、一部のインストールではデフォルトでオフになっています。計画を立てる前にそれぞれを確認し、不足しているものがあれば黙って回避するのではなく報告してください。

機能	重要な理由
Global Classes	クラスワークフロー全体がこれに依存
Variables と Variables Manager	Managerがないと、変数を利用（参照）できても作成できない
Components	これがないと再利用可能なレイアウトプリミティブを作成できない
V4 Custom CSS	これがないと要素ごとのCSSが利用できず、コードはエスカレーション順序の上位に移動する

スタイリングドクトリン

ここがOxygenやBricksのワークフローを引き継ぐ部分です。V4にはそのためのプリミティブが揃っているからです。

Variablesがトークンです。 色、タイポグラフィ、サイズはVariablesとして保持します。まずサイトの既存のセットを読み、それを使用してください。変数がすでに表現している値をハードコードせず、既存の名前がわかりにくいからといって類似の変数を新しく作成しないでください。

クラスがスタイリングを担います。 BEMで命名します：block、block__element、block--modifier。要素ではなくクラスをスタイリングしてください。このプラグインが作成するクラスはすべて、会社とサイトのプレフィックスsw-<site>-（ルーター、命名規則）を取ります。ローカルにスタイリングされた要素は、次のページで再利用できない使い捨てになります。

V4のGlobal Classesはフラットな名前空間であり、子孫セレクターはありません。BEMはまさにそのために作られているので適合しますが、コンテキストは親セレクターではなくクラス名に含める必要があります。2つのブロック内で異なるcard__titleには、ネストされたルールではなく、2つのクラス名が必要です。

デザインは決して要素に直接適用しません。 タイポグラフィ、スペーシング、色、ボーダー、シャドウ、ステートはクラスと変数に記述します。要素自体のスタイルコントロールは、配置のための使い捨て設定（ルーター、styling-and-code.md）のみに使用し、2回目の使用はモディファイアクラスにします。

Atomic Framework

ハウスデザインシステム。製品として個別にメンテナンスされています：Colors、Typography、Spacing、Layout、Effectsの72トークン。OKLCH、clamp()によるfluid、ダークバリアント付き。トークン名はフレームワークが記述したとおりに正確に渡します。

インストール、拡張、またはトークンをV4 Variableにマッピングする前に、references/atomic-framework.mdを読んでください。新しいフレームワークバージョンは、新しいトークンJSONに対してscripts/build_framework.pyを再実行することで行われ、生成されたファイルを手動編集することはありません。

他の部分を読まなくても覚えておく価値のあるルールが1つあります：フレームワークはhtml { font-size: 62.5% }を必要とし、1remが10pxになるようにします。これがないと、すべてのrem値が1.6倍大きくレンダリングされ、エラーは発生しません。

スタイリングとコードの配置

ルーターのreferences/styling-and-code.mdが基本階層です。V4の用語では：

階層ステップ	Elementor V4
トークン	Variables（およびV4が保持できないトークン用のフレームワークCSSレイヤー）
クラスネイティブフィールド	Global Classのスタイルタブ（ブレークポイント、ステートごと）
クラスカスタムCSS	クラス上のV4 Custom CSS（複合ステート、`:focus-visible`リング、`color-mix()`、コンテナクエリ、スクロール駆動アニメーション）
Component	可変プロパティのみを公開するElementor Component
要素ネイティブフィールド（配置のみ）	要素のローカルスタイルコントロール：順序、自己配置、グリッド配置、位置オフセット、z-index、アスペクト比、自身の背景画像
要素カスタムCSS（短い、配置のみ）	要素上のV4 Custom CSS（1つの短いルール）
FluentSnippets	ユーティリティセット、`@keyframes`、小さなバニラJS、PHPフック。フレームワークの`:root`レイヤーは唯一の例外で、エディターでレンダリングするためにElementorのサイト全体CSSに残す

表示条件はサーバーサイドのレンダリングロジック（フィールド欠落、ユーザーステート）のみに使用し、レスポンシブ表示には使用しません。レスポンシブ表示はユーティリティクラスで行います。

Components

繰り返し使用するレイアウトには、コードを書く前にComponentsを使用します。

ネイティブのatomic要素でセクションをレイアウトします。
コンテナからComponentを作成します。
インスタンスごとに変更すべきプロパティ（通常はテキストと画像ソース）のみを公開します。
コアのレイアウトとスタイリングはComponent内部でグローバルに制御します。

すべてのプロパティが公開されたComponentは、手間のかかるテンプレートです。最小限を公開してください。参考：elementor.com/help/components-2/

Atomic Elements とカバレッジギャップ

利用可能なatomic要素：Div Block、Flexbox、Heading、Paragraph、Button、Image、SVG、YouTube、Tabs、Atomic Formセット。CSS Gridをサポート。

一部のクラシックウィジェットにはまだatomic相当品がありません（アコーディオン、ギャラリー、カルーセルなど）。それらを使用する前に、ポリシーの判断フローに従ってください：

まずネイティブHTML。 ギャラリー：figureアイテムのCSSグリッド。カルーセル：scroll-snap行。モーダル：dialogまたはpopover。atomicアコーディオンがない場合のアコーディオン：detailsとsummary（ハウスデフォルトのネストされたアコーディオンは、Elementorが出荷するまでV4には存在しません）。タグコントロールで可能な場合はatomic要素から構築し、そうでない場合はフレームワーククラスでスタイリングされたHTML要素として作成し、ビルダー固有として記録します。
V4ページでのクラシックV3ウィジェットは最後の手段です。 Global ClassやVariableを適用できないため、ワンクラスシステムのルールを破ります。ポリシーのセクション0ルール（オペレーターの承認あり、再訪問トリガー付きで記録）の下でのみ使用し、atomic要素が出荷されたら置き換えます。

構造

レイアウトがフレックスコンテキストの場合はFlexbox、単なるラッパーの場合はDiv Blockを使用します。すべての構造要素にセマンティックHTMLタグ。有効な見出しアウトライン。アンカー内のアンカーは無効なマークアップとなるため、パターンが本当にそれを必要とする場合以外はネストされたリンクを使用しません。

要素のステートとレスポンシブ値は、スタイルタブでブレークポイントとステートごとに設定します。サイト自身のブレークポイントを尊重し、新しいブレークポイントを導入しないでください。

バージョン境界

V4ページはV4ページです。既存のV3プロダクションページをV4に変換したり、部分的に移行したりしないでください。混合ページは、カバレッジギャップによって強制される場合のみ許容されます。

wpnonmy Elementor Atomic Expert (V4)