ロゴSVGの生成
ロゴSVGの生成機能を使用すると、テーマビルダーからカスタムのロゴSVGを生成し、WordPressサイトに直接埋め込むことができます。この際、自動的に名前空間を考慮したサニタイズ処理が施されます。
概要
この機能は、サイトのブランディングの方向性やデザインの好みに基づいて、スケーラブルなベクターグラフィック（SVG）のロゴを生成します。生成されたSVGは、視覚的な完全性を保ちながら、WordPressでの使用に安全であることを保証するために自動的にサニタイズされます。
パラメータ
| パラメータ | 型 | 必須 | 説明 |
|---|---|---|---|
site_name | string | はい | ロゴを生成するサイト名 |
style | string | はい | デザインのスタイル（例：「モダン」、「クラシック」、「ミニマル」、「遊び心のある」） |
colors | array | いいえ | ロゴに使用する色の16進数コードの配列（例：["#678233", "#ffffff"]） |
width | number | いいえ | SVGの幅（ピクセル）。（デフォルト：200） |
height | number | いいえ | SVGの高さ（ピクセル）。（デフォルト：200） |
include_text | boolean | いいえ | サイト名をロゴのテキストとして含めるかどうか（デフォルト：true） |
出力形式
この機能は、以下の構造を持つSVG文字列を返します。
{
"svg": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 200 200\">...</svg>",
"width": 200,
"height": 200,
"colors_used": ["#678233", "#ffffff"],
"sanitised": true
}
SVGのサニタイズ処理について
生成されたSVGは、以下の目的で自動的に名前空間を考慮したサニタイズ処理を受けます。
- 安全でない属性の削除 — イベントハンドラ、スクリプト、および潜在的に危険な属性を削除します。
- 名前空間の維持 — 正しいレンダリングのために、SVGの名前空間（xmlns, xlink）を維持します。
- 構造の検証 — SVGがW3C標準に準拠していることを保証します。
- エンティティのエンコード — テキストコンテンツ内の特殊文字を適切にエスケープします。
- 外部参照の削除 — 外部スタイルシートや画像参照を削除します。
これにより、追加のサニタイズを行うことなく、SVGをWordPressに直接埋め込むことが安全になります。
使用例
プロンプト:
青と白の色を使って、「CloudSync」という名前のテックスタートアップ向けのモダンなロゴを生成してください。
結果: この機能は、以下の特徴を持つSVGロゴを作成します。
- サイト名「CloudSync」を取り入れています。
- 指定された青と白の配色を使用しています。
- モダンなデザイン原則に従っています。
- 自動的にサニタイズされ、すぐに使用できます。
テーマビルダーとの連携
テーマビルダーのデザイン方向性の選択を使用する場合、ロゴSVGの生成機能は以下の処理を行います。
- デザインの方向性とカラーパレットを分析します。
- 好みに合ったカスタムSVGロゴを生成します。
- ロゴをサイトのヘッダー/ブランディングエリアに自動的に埋め込みます。
- SVGをWordPressのメディアライブラリにカスタムロゴとして保存します。
ベストプラクティス
- 明確なスタイル指定を行う — 望むデザインスタイル（モダン、クラシック、遊び心など）を説明します。
- 色を指定する — 一貫性を保つために、ブランドカラーを含めます。
- レンダリングをテストする — 異なる画面サイズでロゴが正しく表示されるか確認します。
- さらにカスタマイズする — WordPressのロゴカスタマイズツールを使用して、サイズや配置を調整します。
制限事項
- SVGロゴは静的なグラフィックとして生成されます（アニメーションは不可）。
- 要素が多数含まれる複雑なロゴは、手動での調整が必要な場合があります。
- カスタムフォントはサポートされていません。テキストにはシステムフォントが使用されます。
- サイズが極端に大きい、または小さい場合、品質に影響が出る可能性があります。
関連機能
- Validate Palette Contrast — アクセシビリティのために色のコントラストをチェックし ます。
- Create Menu — サイトのナビゲーションメニューを作成します。