HA Canvas

恐らく世界中で最もミニマルなWordPress向けブロックテーマ

HA Canvasテーマの詳細情報

WordPress向けブロックテーマ【HA Canvas】について現在での詳細情報です。

概要についてはトップページをご覧ください。

利用前に必ず「HA Canvas テーマ利用規約」を確認ください。

HA Canvas テーマの使用方法

本サイトトップページにあるテーマのダウンロードボタンからテーマを入手いただき、お使いいただくサイトの「外観」メニューより、アップロードインストールと有効化を行ってください。

ブロックテーマの編集画面であるサイトエディターから編集を行ったものはWordPress標準の機構により、サイトが接続するデータベース内に本テーマ固有のデータとして保存され、サイト表示時にはそのデータが優先されて表示されますので、テーマディレクトリ内のファイル等を編集する必要はありません。

ブロックテーマは原則として子テーマは必要ありません。自身でプログラムコードやファイルなどを追加したい場合には、子テーマを使用せず、プラグインとして作成することをおすすめします。

自分専用のプラグインを作ろう」を参考に自身独自のプラグインを作る、または「Hima Art My Functions」というプラグインを無料で提供しておりますので、そちらを利用ください。

本テーマは本当に最低限テーマとして動作するものしか搭載していません。テンプレートの追加や編集などはすべてサイトエディターから行ってください。

機能として背景画像を切り替えることができるスタイルバリエーションのみ搭載しています。こちらもサイトエディターの「スタイル」メニューから気に入った背景画像を選んでいただくことで、すぐに背景画像を使ったサイトを作ることができます(背景に使用する画像は軽量なWebP形式の画像を使用しています)。

本テーマの基本フォントは「Noto Sans JP」で、フォントを読み込む容量を削減するため、サブセット化したものにしています。フォントについてもサイトエディター上で自由に追加や変更ができますので、好みのものへ変更するようにしてください。

HA Canvas テーマの規約にもある通り、本テーマは基本的にバージョン 1.0のまま、WordPressの仕様変更によって不具合が発生した時の対処については必要に応じて本サイト内で対応方法を案内します。対応はご自身でお願いします。

また、こちらも規約に掲載している通り、本テーマを使用したことによって生じた不具合や不都合、アクセス数の急激な変化などについては一切責任を負いません。

HA Canvas テーマのファイル構造

テーマをダウンロードいただいて確認されれば分かるかと思いますが、一応本テーマのファイル構造を紹介しておきます。

  • テーマディレクトリ
    • style.css テーマ情報を記述しています(本ファイルに書いたスタイルコードは読み込まれませんのでご注意ください)
    • functions.php テーマに必要なプログラムを書いています
    • assets
      • css
        • 各スタイルバリエーション用のCSSファイルがあります
    • parts
      • comments.html コメント処理用のファイルです
      • footer.html フッターです
      • header-title-h1.html サイトタイトルをH1見出しにしたヘッダーパーツです。デフォルトのテンプレートでは個別ページ以外にこのヘッダーを使用しています
      • header.html 個別ページ用のヘッダーパーツです。デフォルトテンプレートではサイトタイトルは「段落」にしており、ページのタイトルがH1タグになるようにしています。
    • templates
      • 404.html 404ページ用
      • index.html すべてのアーカイブ、ブログ形式でのトップページ用
      • page.html 固定ページ用
      • search.html 検索結果ページ用
      • singel.html 固定ページを除く個別ページ用
    • styles
      • スタイルバリエーション用のjsonファイル
    • theme.json ブロックテーマの設定とスタイルを決定するファイル
    • languages
      • 翻訳ファイル
    • patterns
      • hidden-404.php 404ページの内容
      • hidden-no-results.php 検索結果がない場合の内容
    • readme.txt テーマの概要や注意事項などを書いたテキストファイル

HA Canvas テーマの theme.json の内容

以下がHA Canvas テーマのデフォルトのtheme.jsonファイルの内容です。トップページでも紹介している通り、必要最低限な記述のみを行っています。

{
	"$schema": "https://schemas.wp.org/wp/7.1/theme.json",
	"settings": {
		"appearanceTools": true,
		"color": {
			"background": true,
			"custom": true,
			"customDuotone": true,
			"customGradient": true,
			"defaultDuotone": true,
			"defaultGradients": true,
			"defaultPalette": true,
			"palette": [
				{
					"color": "#555555",
					"name": "HAブラック",
					"slug": "ha-black"
				},
				{
					"color": "#ffffff",
					"name": "HA白",
					"slug": "ha-white"
				},
				{
					"color": "#1a0dab",
					"name": "HAリンク色",
					"slug": "ha-link"
				},
				{
					"color": "#0B0080",
					"name": "HA選択済リンク色",
					"slug": "ha-link-visited"
				},
				{
					"color": "#e3e3e3",
					"name": "HA区切り色",
					"slug": "ha-separate"
				},
				{
					"color": "#757575",
					"name": "HA区切り(暗)色",
					"slug": "ha-separate-dark"
				},
				{
					"color": "#ff0000",
					"name": "HA警告枠線色",
					"slug": "ha-warning-border"
				},
				{
					"color": "#ffede6",
					"name": "HA警告背景色",
					"slug": "ha-warning-content"
				},
				{
					"color": "#ffc533",
					"name": "HA通知枠線色",
					"slug": "ha-notice-border"
				},
				{
					"color": "#fff9e6",
					"name": "HA通知背景色",
					"slug": "ha-notice-content"
				},
				{
					"color": "#67b00b",
					"name": "HAチェック枠線色",
					"slug": "ha-info-border"
				},
				{
					"color": "#f4ffe6",
					"name": "HAチェック背景色",
					"slug": "ha-info-content"
				},
				{
					"color": "#ffffff",
					"name": "ベース",
					"slug": "base"
				},
				{
					"color": "#000000",
					"name": "コントラスト",
					"slug": "contrast"
				},
				{
					"color": "#9DFF20",
					"name": "プライマリ",
					"slug": "primary"
				},
				{
					"color": "#345C00",
					"name": "セカンダリ",
					"slug": "secondary"
				},
				{
					"color": "#F6F6F6",
					"name": "ターシャリ",
					"slug": "tertiary"
				}
			],
			"text": true
		},
		"custom": {
			"theme-info": {
				"current-slug": "ha-default"
			}
		},
		"layout": {
			"contentSize": "800px",
			"wideSize": "1200px"
		},
		"spacing": {
			"defaultSpacingSizes": false,
			"spacingScale": {
				"theme": {
					"steps": 0
				}
			},
			"spacingSizes": [
				{
					"name": "1",
					"size": "clamp(1.5rem, 5vw, 2rem)",
					"slug": "30"
				},
				{
					"name": "2",
					"size": "clamp(1.8rem, 1.8rem + ((1vw - 0.48rem) * 2.885), 3rem)",
					"slug": "40"
				},
				{
					"name": "3",
					"size": "clamp(2.5rem, 8vw, 4.5rem)",
					"slug": "50"
				},
				{
					"name": "4",
					"size": "clamp(3.75rem, 10vw, 7rem)",
					"slug": "60"
				},
				{
					"name": "5",
					"size": "clamp(5rem, 5.25rem + ((1vw - 0.48rem) * 9.096), 8rem)",
					"slug": "70"
				},
				{
					"name": "6",
					"size": "clamp(7rem, 14vw, 11rem)",
					"slug": "80"
				}
			],
			"units": [
				"%",
				"px",
				"em",
				"rem",
				"vh",
				"vw"
			]
		},
		"typography": {
			"defaultFontSizes": false,
			"dropCap": false,
			"fluid": true,
			"fontFamilies": [
				{
					"fontFace": [
						{
							"fontDisplay": "swap",
							"fontFamily": "'Noto Sans JP'",
							"fontStretch": "normal",
							"fontStyle": "normal",
							"fontWeight": "400",
							"src": [
								"file:./assets/fonts/noto-sans-jp/NotoSansJP-HAver.woff2"
							]
						}
					],
					"fontFamily": "Futura, 'Century Gothic', 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif",
					"name": "HAデフォルトフォント",
					"slug": "ha-default-fonts"
				},
				{
					"fontFace": [
						{
							"fontDisplay": "swap",
							"fontFamily": "'OpenRunde'",
							"fontStretch": "normal",
							"fontStyle": "normal",
							"fontWeight": "400",
							"src": [
								"file:./assets/fonts/OpenRunde/OpenRunde.woff2"
							]
						}
					],
					"fontFamily": "OpenRunde, sans-serif",
					"name": "OpenRunde",
					"slug": "open-runde"
				}
			],
			"fontSizes": [
				{
					"fluid": {
						"max": "0.8rem",
						"min": "0.6rem"
					},
					"size": "0.8rem",
					"slug": "small"
				},
				{
					"fluid": {
						"max": "1.0625rem",
						"min": "1.0rem"
					},
					"size": "1.0625rem",
					"slug": "medium"
				},
				{
					"fluid": {
						"max": "1.3rem",
						"min": "1.1rem"
					},
					"size": "1.3rem",
					"slug": "large"
				},
				{
					"fluid": {
						"max": "1.6rem",
						"min": "1.4rem"
					},
					"size": "1.6rem",
					"slug": "x-large"
				},
				{
					"fluid": {
						"max": "2.0rem",
						"min": "1.7rem"
					},
					"size": "2.0rem",
					"slug": "xx-large"
				}
			]
		},
		"useRootPaddingAwareAlignments": true
	},
	"styles": {
		"blocks": {
			"core/group": {
				"variations": {
					"ha-canvas-post-content-card": {
						"border": {
							"color": "var(--wp--preset--color--ha-separate)",
							"radius": {
								"bottomLeft": "4px",
								"bottomRight": "4px",
								"topLeft": "4px",
								"topRight": "4px"
							},
							"style": "solid",
							"width": "1px"
						},
						"color": {
							"background": "var(--wp--preset--color--ha-white)",
							"text": "var(--wp--preset--color--ha-black)"
						},
						"dimensions": {
							"minHeight": "100%"
						},
						"elements": {
							"link": {
								":hover": {
									"color": {
										"text": "var(--wp--preset--color--contrast)"
									}
								},
								"color": {
									"text": "var(--wp--preset--color--ha-black)"
								}
							}
						},
						"spacing": {
							"padding": {
								"bottom": "8px",
								"left": "8px",
								"right": "8px",
								"top": "8px"
							}
						}
					}
				}
			},
			"core/separator": {
				"css": " &:not(.is-style-wide):not(.is-style-dots):not(.alignwide):not(.alignfull){width: 100px}&:not(.is-style-wide):not(.is-style-dots){height: 2px;}"
			},
			"core/site-title": {
				"color": {
					"text": "var(--wp--preset--color--ha-black)"
				},
				"elements": {
					"link": {
						"color": {
							"text": "var(--wp--preset--color--ha-black)"
						}
					}
				}
			}
		},
		"elements": {
			"h2": {
				"css": "& { margin-block-start: 4rem; }",
				"typography": {
					"fontSize": "var(--wp--preset--font-size--x-large)"
				}
			},
			"h3": {
				"css": "& { margin-block-start: 3rem; }",
				"typography": {
					"fontSize": "var(--wp--preset--font-size--large)"
				}
			},
			"h4": {
				"css": "& { margin-block-start: 2.5rem; }",
				"typography": {
					"fontSize": "var(--wp--preset--font-size--medium)"
				}
			},
			"h5": {
				"css": "& { margin-block-start: 2rem; }",
				"typography": {
					"fontSize": "var(--wp--preset--font-size--medium)"
				}
			},
			"h6": {
				"css": "& { margin-block-start: 1.5rem; }",
				"typography": {
					"fontSize": "var(--wp--preset--font-size--medium)",
					"fontWeight": "700"
				}
			}
		},
		"spacing": {
			"padding": {
				"bottom": "0px",
				"left": "20px",
				"right": "20px",
				"top": "0px"
			}
		},
		"typography": {
			"fontFamily": "var(--wp--preset--font-family--ha-default-fonts)",
			"fontSize": "var(--wp--preset--font-size--medium)",
			"fontWeight": "400",
			"lineHeight": "1.6"
		}
	},
	"version": 3
}

HA Canvas テーマに追加しているプログラムコードなど

HA Canvas テーマには以下のプログラムコードをfunctions.php内へ記述しています。

スタイルバリエーション用のCSSファイル読み込み

各スタイルバリエーション選択時に最適化するためのスタイルシートを読み込ませるためのコードです。

function ha_canvas_style_variation_enqueue_style(){
	// theme.json から現在のスラッグを取得(未設定なら ha-default をフォールバックに)
	$theme_info = wp_get_global_settings( array( 'custom', 'theme-info' ) );
	$slug = $theme_info['current-slug'] ?? 'ha-default';

	$rand = rand( 1, 99999999999 );

	// theme.jsonで指定したCSS変数によってスタイルシートを変更してエンキュー
	wp_enqueue_style(
		'ha-canvas-variation-style',
		get_theme_file_uri( "assets/css/{$slug}.css" ),
		array(),
		$rand
	);
}
add_action( 'enqueue_block_assets', 'ha_canvas_style_variation_enqueue_style');

グループブロックにコンテンツカードスタイルを登録

クエリーループなどで表示する各コンテンツをグループ化した際、簡単に背景を白色にするようにするためのコードです。

function ha_canvas_group_card_block_style_init(){
	register_block_style(
		'core/group',
		array(
			'name'  => 'ha-canvas-post-content-card',
			'label' => 'HAC White BG',
		)
	);

}
add_action( 'init', 'ha_canvas_group_card_block_style_init');

function ha_canvas_group_card_block_style_hidden_button(){
	global $pagenow;
	// ボタンを非表示にする属性セレクタCSS
	$custom_css = '
		.block-editor-block-styles__item[aria-label="HAC White BG"]
		{
			display: none !important;
		}
	';

	if ( 'site-editor.php' !== $pagenow ) {
		wp_add_inline_style( 'wp-edit-blocks', $custom_css );
	}
}
add_action( 'enqueue_block_editor_assets','ha_canvas_group_card_block_style_hidden_button');

スタイルバリエーション用のjsonダウンロード

スタイルバリエーションを選択した状態でサイトエディター上の編集を行った際に、スタイルバリエーション用のjsonファイル(スタイルバリエーションとして必要なコードのみを記述したjson)を出力できるようにするためのコードです。

ダウンロードは「外観」の「スタイルバリエーション用jsonファイル出力」メニューが行うことができます。

/***  管理画面にメニューを追加 ***/
function ha_canvas_custom_theme_json_download_menu() {
	$menu_title = __('Output JSON file for style variations','ha-canvas');

	add_theme_page(
		$menu_title,
		$menu_title,
		'edit_theme_options', //テーマ編集が可能な権限を持つユーザーのみに表示
		'ha-canvas-download-theme-json',
		'ha_canvas_custom_theme_json_download_page'
	);
}
add_action('admin_menu', 'ha_canvas_custom_theme_json_download_menu');

/*** DB(wp_posts)から、現在のテーマの生のグローバルスタイル投稿を取得する補助関数 ***/
function ha_canvas_custom_get_raw_global_styles_post_data() {
	$theme_slug = get_stylesheet(); // 現在のアクティブテーマ名
	$post_name = 'wp-global-styles-' . $theme_slug;

	$global_style_post = get_page_by_path($post_name, OBJECT, 'wp_global_styles');

	if (!$global_style_post) {
		$posts = get_posts(array(
			'name' => $post_name,
			'post_type' => 'wp_global_styles',
			'post_status' => 'publish',
			'posts_per_page' => 1,
		));

		if (!empty($posts)) {
			$global_style_post = $posts[0];
		}
	}

	return $global_style_post;
}

/*** ダウンロード処理(スタイルバリエーション専用) ***/
function custom_theme_json_download_handler() {
	if (isset($_GET['page']) && $_GET['page'] === 'ha-canvas-download-theme-json' && isset($_GET['action']) && $_GET['action'] === 'download') {
        
		if (!current_user_can('edit_theme_options')) {
			$error_text = __('You do not have permission to perform this operation.','ha-canvas');
			wp_die( esc_html($error_text) );
		}

		$global_style_post = ha_canvas_custom_get_raw_global_styles_post_data();
        
		$raw_db_data = array();

		if ($global_style_post && !empty($global_style_post->post_content)) {
			$raw_db_data = json_decode($global_style_post->post_content, true);
		}

		if (!is_array($raw_db_data)) {
			$raw_db_data = array();
		}

		// 生データ内のメタ情報から、アクティブなスタイルバリエーション名(スラッグ)を自動特定
		$active_slug = '';

		if (isset($raw_db_data['settings']['custom']['theme-info']['current-slug'])) {
			$active_slug = sanitize_file_name($raw_db_data['settings']['custom']['theme-info']['current-slug']);
		} elseif (isset($raw_db_data['slug'])) {
			$active_slug = sanitize_file_name($raw_db_data['slug']);
		}

		// スタイルバリエーションが特定できない(デフォルト状態の)場合は処理を中断
		if (empty($active_slug) || $active_slug === 'theme') {
			$error_message = __('No style variation is currently selected. To export the base themes `theme.json`, please use the standard WordPress export function.','ha-canvas');

			wp_die( esc_html($error_message) );
		}

		$target_file = $active_slug . '.json';

		// --- コアからスキーマとバージョンを自動取得(動的判定) ---
		$default_version = 3;
		$default_schema  = 'https://schemas.wp.org/trunk/theme.json';

		if (isset($raw_db_data['version'])) {
			$default_version = (int) $raw_db_data['version'];
		}

		if (class_exists('WP_Theme_JSON_Resolver')) {
			$core_theme_json = WP_Theme_JSON_Resolver::get_core_data();

			if (method_exists($core_theme_json, 'get_raw_data')) {
				$core_raw = $core_theme_json->get_raw_data();

				if (isset($core_raw['version'])) {
					$default_version = (int) $core_raw['version'];
				}
			}
		}

		global $wp_version;
		$version_parts = explode('.', $wp_version);
		if (count($version_parts) >= 2) {
			$major_version = $version_parts[0] . '.' . $version_parts[1];
			$default_schema = "https://schemas.wp.org/wp/{$major_version}/theme.json";
		}

		// --- スタイルバリエーション用の構造を再ビルド ---
		$final_output = array(
			'$schema' => $default_schema,
			'version' => $default_version,
			'title'   => ucwords(str_replace(array('-', '_'), ' ', $active_slug)),
		);

		// テーマ内に既存の同名バリエーションファイルがあれば、元のタイトル定義を引き継ぐ
		$variation_file_path = get_stylesheet_directory() . '/styles/' . $target_file;
		if (file_exists($variation_file_path)) {
			$orig_content = json_decode(file_get_contents($variation_file_path), true);
			if (is_array($orig_content) && isset($orig_content['title'])) {
				$final_output['title'] = $orig_content['title'];
			}
		}

		// 必要不可欠な「styles」の移植
		if (isset($raw_db_data['styles'])) {
			$final_output['styles'] = $raw_db_data['styles'];
		}

		// 「settings」と「theme-info」を確実に生成・保持して移植
		$final_output['settings'] = isset($raw_db_data['settings']) ? $raw_db_data['settings'] : array();
		if (!isset($final_output['settings']['custom'])) {
			$final_output['settings']['custom'] = array();
		}
		if (!isset($final_output['settings']['custom']['theme-info'])) {
			$final_output['settings']['custom']['theme-info'] = array();
		}

		$final_output['settings']['custom']['theme-info']['current-slug'] = $active_slug;

		// 余計な内部一時ゴミフラグをクリーンアップ
		unset($final_output['slug']);
		unset($final_output['is_merged']);

		// JSONに整形
		$json_output = json_encode($final_output, JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE);

		// HTTPヘッダーでダウンロードを強制
		header('Content-Type: application/json; charset=utf-8');
		header('Content-Disposition: attachment; filename="' . $target_file . '"');
		header('Pragma: no-cache');
		header('Expires: 0');

		echo $json_output;
		exit;
	}
}
add_action('admin_init', 'custom_theme_json_download_handler');

/*** 管理画面のUI表示 ***/
function ha_canvas_custom_theme_json_download_page() {
	$global_style_post = ha_canvas_custom_get_raw_global_styles_post_data();
    
	$detected_slug = '';
	if ($global_style_post && !empty($global_style_post->post_content)) {
		$raw_db_data = json_decode($global_style_post->post_content, true);
		if (is_array($raw_db_data)) {
			if (isset($raw_db_data['settings']['custom']['theme-info']['current-slug'])) {
				$detected_slug = sanitize_file_name($raw_db_data['settings']['custom']['theme-info']['current-slug']);
			} elseif (isset($raw_db_data['slug'])) {
				$detected_slug = sanitize_file_name($raw_db_data['slug']);
			}
		}
	}
    
	// バリエーションが選択されているか判定
	$is_variation_active = (!empty($detected_slug) && $detected_slug !== 'theme');

	//文字列を変数化
	$text_a = __('[HA CANVAS] Generate and download theme.json for style variations','ha-canvas');
	$text_b = __('This is a feature exclusive to the HA Canvas theme that automatically generates a JSON file dedicated to the style variations selected and customized in the site editor.','ha-canvas');
	$text_c = __('After generating the JSON file, please upload it to the following location.','ha-canvas');
	$text_d = __('Analysis of the current custom configuration','ha-canvas');
	$text_e = __('Detected style name:','ha-canvas');
	$text_f = __('Types to be exported:','ha-canvas');
	$text_g = __('Style Variations (for Overwriting/Updating)','ha-canvas');
	$text_h = __('Confirmed file name:','ha-canvas');
	$text_i = __('Recommended placement:','ha-canvas');
	$text_j = __('Inside the directory','ha-canvas');
	$text_k = __('To maintain synchronization with the standard theme.json settings, the output JSON file includes only the configuration elements required for variation recognition and the style elements specific to this variation.','ha-canvas');
	$text_l = __('Download the latest file','ha-canvas');

	$text_aa = __('Style variation not selected.','ha-canvas');
	$text_ab = __('Currently, I am customizing the theme directly from its default state, rather than editing based on a specific style variation.','ha-canvas');
	$text_ac = __('Please obtain the theme.json file in this state using the following method.','ha-canvas');
	$text_ad = __('Open the Site Editor (Appearance > Editor).','ha-canvas');
	$text_ae = __('Click the three dots (...) in the top-right corner of the screen.','ha-canvas');
	$text_af = __('Click "Export" at the bottom of the menu.','ha-canvas');
	$text_ag = __('The `theme.json` file inside the downloaded ZIP archive is the latest version, incorporating all current changes. Please place it directly in the themes root directory.','ha-canvas');
	$text_ah = __('Download not available because no style variation has been selected.','ha-canvas');
	
?>
<div class="wrap">
	<h1><?php esc_html_e( $text_a ); ?></h1>
	<p><?php esc_html_e( $text_b ); ?></p>
	<p><?php esc_html_e( $text_c ); ?><code>styles/〇〇.json</code></p>
	<div class="card" style="margin-top: 20px; max-width: 600px; padding: 20px;">
		<h2><?php esc_html_e( $text_d ); ?></h2>
            
		<?php if ($is_variation_active) : ?>
			<table class="wp-list-table widefat fixed striped" style="margin: 20px 0;">
				<tbody>
					<tr>
						<td style="width: 180px;"><strong><?php esc_html_e( $text_e); ?></strong></td>
						<td><code><?php echo esc_html($detected_slug); ?></code></td>
					</tr>
					<tr>
						<td><strong><?php esc_html_e( $text_f ); ?></strong></td>
						<td><span class="badge" style="background: #e7f5ec; color: #13783a; padding: 3px 8px; border-radius: 4px; font-weight: bold; font-size: 11px;"><?php esc_html_e( $text_g ); ?></span></td>
					</tr>
					<tr>
						<td><strong><?php esc_html_e( $text_h ); ?></strong></td>
						<td><strong style="color: #d63638; font-size: 15px; font-family: monospace;"><?php echo esc_html($detected_slug); ?>.json</strong></td>
					</tr>
					<tr>
						<td><strong><?php esc_html_e( $text_i ); ?></strong></td>
						<td><code>styles/</code><?php esc_html_e( $text_j); ?></td>
					</tr>
				</tbody>
			</table>

			<p class="description" style="margin-bottom: 25px;"><?php esc_html_e( $text_k ); ?></p>
                
			<form method="get" action="<?php echo esc_url(admin_url('themes.php')); ?>">
				<input type="hidden" name="page" value="ha-canvas-download-theme-json">
				<input type="hidden" name="action" value="download">
				<button type="submit" class="button button-primary button-large" style="width: 100%; text-align: center;"><?php esc_html_e( $text_l ); ?><?php echo esc_html($detected_slug); ?>.json</button>
			</form>

		<?php else : ?>
			<div style="background-color: #fff8f8; border-left: 4px solid #d63638; padding: 15px; margin: 20px 0; border-radius: 0 4px 4px 0;">
				<p style="margin: 0 0 10px 0; font-weight: bold; color: #d63638; font-size: 14px;"><?php esc_html_e( $text_aa ); ?></p>
				<p style="margin: 0; line-height: 1.5; color: #444;"><?php esc_html_e( $text_ab ); ?></p>
			</div>
                
			<p style="font-weight: bold; margin-top: 20px;"><?php esc_html_e( $text_ac ); ?></p>
			<ol style="padding-left: 20px; line-height: 1.6; color: #555;">
				<li><?php esc_html_e( $text_ad ); ?></li>
				<li><?php esc_html_e( $text_ae ); ?></li>
				<li><?php esc_html_e( $text_af ); ?></li>
				<li><?php esc_html_e( $text_ag ); ?></li>
			</ol>

			<button class="button button-large" disabled style="width: 100%; text-align: center; margin-top: 15px;"><?php esc_html_e( $text_ah ); ?></button>
		<?php endif; ?>
	</div>
</div>
<?php
}

独自カラーの文字列を日本語化

HA Canvas テーマで利用できるようになる色をエディターで選択する際、ホーバー時に表示される文字列を日本語にするコードです。

function ha_canvas_translate_theme_json_ja_to_en( $theme_json ) {
	$current_locale = get_user_locale();

	if ( strpos( $current_locale, 'ja' ) !== 0 ) {

		$data = $theme_json->get_data();

		// 翻訳用辞書マップ(日本語 => 英語)
		$translation_map = [
			// カラーパレット
			'HAブラック'        => 'HA Black',
			'HA白'              => 'HA White',
			'HAリンク色'        => 'HA Link',
			'HA選択済リンク色'  => 'HA Selected Link',
			'HA区切り色'        => 'HA Separator',
			'HA区切り(暗)色'  => 'HA Dark Separator',
			'HA警告枠線色'      => 'HA Warning Border',
			'HA警告背景色'      => 'HA Warning BG',
			'HA通知枠線色'      => 'HA Info Border',
			'HA通知背景色'      => 'HA Info BG',
			'HAチェック枠線色'  => 'HA Check Border',
			'HAチェック背景色'  => 'HA Check BG',
			'ベース'            => 'Base',
			'コントラスト'      => 'Contrast',
			'プライマリ'        => 'Primary',
			'セカンダリ'        => 'Secondary',
			'ターシャリ'        => 'Tertiary',

			// フォント名
			'HAデフォルトフォント' => 'HA Default Font',
		];

		// 1. カラーパレットの置換(['theme'] がある場合と直下配列の両対応)
		if ( isset( $data['settings']['color']['palette'] ) && is_array( $data['settings']['color']['palette'] ) ) {
			$palette_list = &$data['settings']['color']['palette'];
			if ( isset( $palette_list['theme'] ) ) {
				$palette_list = &$palette_list['theme'];
			}

			foreach ( $palette_list as &$color ) {
				if ( isset( $color['name'] ) && isset( $translation_map[ $color['name'] ] ) ) {
					$color['name'] = $translation_map[ $color['name'] ];
				}
			}
			unset( $color ); // 参照を解除
		}

		// 2. フォントファミリーの置換(['theme'] がある場合と直下配列の両対応)
		if ( isset( $data['settings']['typography']['fontFamilies'] ) && is_array( $data['settings']['typography']['fontFamilies'] ) ) {
			$font_list = &$data['settings']['typography']['fontFamilies'];
			if ( isset( $font_list['theme'] ) ) {
				$font_list = &$font_list['theme'];
			}

			foreach ( $font_list as &$font ) {
				if ( isset( $font['name'] ) && isset( $translation_map[ $font['name'] ] ) ) {
					$font['name'] = $translation_map[ $font['name'] ];
				}
			}
			unset( $font ); // 参照を解除
		}

		return $theme_json->update_with( $data );
	}

	return $theme_json;
}
add_filter( 'wp_theme_json_data_theme', 'ha_canvas_translate_theme_json_ja_to_en' );