3-3.theme.json 設定スタイルガイド

// // テーマスタイル設定一覧ショートコード [theme_style_guide]
function wp_test_display_theme_settings_table() {
  if ( ! is_user_logged_in() ) return '';

  $settings = wp_get_global_settings();
  $html = '<div class="theme-settings-table-wrapper flex-wrap gap-step-1-5">';

  // 基本セクションの定義：H2タイトル
  $sections = array(
    'color'      => array( 'label' => 'カラー設定', 'key' => 'palette' ),
    'typography' => array( 'label' => 'フォント設定', 'key' => 'typography' ),
    'spacing'    => array( 'label' => 'スペース設定', 'key' => 'spacingSizes' ),
  );

  foreach ( $sections as $section_id => $data ) {
    $html .= sprintf( '<section><h2 class="post-header-icon pb-step-1">%s</h2>', esc_html( $data['label'] ) );

    if ( $section_id === 'color' ) {
      $html .= '<table class="wp-block-table table-base table-json-settings">';
      $html .= '<thead><tr><th>名前</th><th>スラッグ</th><th>値 / プレビュー</th></tr></thead><tbody>';
      $palette = $settings['color']['palette']['theme'] ?? array();
      foreach ( $palette as $item ) {
        $html .= sprintf(
          '<tr><td>%s</td><td class="monospace font-size-step-1">%s</td><td><span style="display:inline-block; width:1em; height:1em; background:%s; border:1px solid #ccc; vertical-align:middle; margin-right:0.3em;"></span>%s</td></tr>',
          esc_html( $item['name'] ), esc_html( $item['slug'] ), esc_html( $item['color'] ), esc_html( $item['color'] )
        );
      }
      $html .= '</tbody></table>';

    } elseif ( $section_id === 'typography' ) {
      // --- h3：フォントファミリー ---
      $html .= '<h3 class="post-header-icon pb-step-0">フォントファミリー</h3>';
      $html .= '<table class="wp-block-table table-base table-json-settings mb-step-2" style="max-width:400px">';
      $html .= '<thead><tr><th>名前</th><th>スラッグ</th><th>読み込み / プレビュー</th></tr></thead><tbody>';
      $families = $settings['typography']['fontFamilies']['theme'] ?? array();
      foreach ( $families as $item ) {
        $html .= sprintf(
          '<tr><td>%s</td><td class="monospace font-size-step-1">%s</td><td style="font-family:%s">%s</td></tr>',
          esc_html( $item['name'] ), esc_html( $item['slug'] ), esc_attr( $item['fontFamily'] ), esc_html( $item['fontFamily'] )
        );
      }
      $html .= '</tbody></table>';

      // --- h3：フォントサイズ ---
      $html .= '<h3 class="post-header-icon pb-step-0">フォントサイズ</h3>';
      $html .= '<table class="wp-block-table table-base table-json-settings">';
      $html .= '<thead><tr><th>名前</th><th>スラッグ</th><th>値</th></tr></thead><tbody>';
      $sizes = $settings['typography']['fontSizes']['theme'] ?? array();
      foreach ( $sizes as $item ) {
        $html .= sprintf(
          '<tr><td>%s</td><td class="monospace font-size-step-1">%s</td><td>%s</td></tr>',
          esc_html( $item['name'] ), esc_html( $item['slug'] ), esc_html( $item['size'] )
        );
      }
      $html .= '</tbody></table>';

    } elseif ( $section_id === 'spacing' ) {
      $html .= '<table class="wp-block-table table-base table-json-settings">';
      $html .= '<thead><tr><th>名前</th><th>スラッグ</th><th>値</th></tr></thead><tbody>';
      $spacings = $settings['spacing']['spacingSizes']['theme'] ?? array();
      foreach ( $spacings as $item ) {
        $html .= sprintf(
          '<tr><td>%s</td><td class="monospace font-size-step-1">%s</td><td>%s</td></tr>',
          esc_html( $item['name'] ), esc_html( $item['slug'] ), esc_html( $item['size'] )
        );
      }
      $html .= '</tbody></table>';
    }

    $html .= '</section>';
  }

  $html .= '</div>';
  return $html;
}
add_shortcode( 'theme_style_guide', 'wp_test_display_theme_settings_table' );