3.2.24: 评论富文本工具条（B/I/颜色/表情移入）+ kses 放行 span+style + 后台设置页标签左列竖排重排

inc/options-framework/css/optionsframework.css

@@ -359,3 +359,112 @@
   line-height: 1.5;
   margin-top: 3px;
 }
+
+/* ══════════════════════════════════════════════════════════════
+   3.2.24 设置页布局重排
+   用户反馈："主题设置的样式不好看，把标签页按钮放左侧、上下排列，
+   功能项放在右侧，重新设置好看一点。"
+
+   实现：≥960px 时把 nav-tab-wrapper 浮到左侧成一列竖排导航，
+   内容区（含保存提示条）整体右移；窄屏回退 WP 默认的横向标签，
+   不在手机后台做特殊布局。切标签的 JS（options-custom.js）不动，
+   它只认 .nav-tab / .nav-tab-active / .group 这几个类。
+   ══════════════════════════════════════════════════════════════ */
+
+@media screen and (min-width: 960px) {
+
+  #optionsframework-wrap {
+    max-width: 1180px;
+  }
+
+  /* 浮动布局的收尾：否则 wrap 高度塌到标签列或面板较短的那个 */
+  #optionsframework-wrap::after {
+    display: table;
+    clear: both;
+    content: "";
+  }
+
+  /* ── 左侧标签列 ── */
+  #optionsframework-wrap h2.nav-tab-wrapper {
+    float: left;
+    box-sizing: border-box;
+    width: 190px;
+    margin: 0 20px 20px 0;
+    padding: 8px;
+    border: 1px solid #dcdcde;
+    border-radius: 6px;
+    background: #fff;
+    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
+  }
+
+  #optionsframework-wrap .nav-tab-wrapper .nav-tab {
+    float: none;
+    display: block;
+    width: 100%;
+    box-sizing: border-box;
+    margin: 0 0 2px;
+    padding: 9px 12px;
+    border: 0;
+    border-left: 3px solid transparent;
+    border-radius: 4px;
+    background: none;
+    color: #50575e;
+    line-height: 1.5;
+    cursor: pointer;
+  }
+
+  #optionsframework-wrap .nav-tab-wrapper .nav-tab:last-child {
+    margin-bottom: 0;
+  }
+
+  #optionsframework-wrap .nav-tab-wrapper .nav-tab:hover {
+    border-left-color: transparent;
+    background: #f0f0f1;
+    color: #1d2327;
+  }
+
+  #optionsframework-wrap .nav-tab-wrapper .nav-tab-active,
+  #optionsframework-wrap .nav-tab-wrapper .nav-tab-active:hover {
+    border-left-color: #00a2ff;
+    background: #e8f5ff;
+    color: #0089db;
+    font-weight: 600;
+  }
+
+  /* ── 右侧内容区：面板 + 保存提示条都要让开左侧一列 ── */
+  #optionsframework-wrap > #optionsframework-metabox,
+  #optionsframework-wrap > .notice,
+  #optionsframework-wrap > .updated,
+  #optionsframework-wrap > .error {
+    margin-left: 210px;
+  }
+
+  #optionsframework-metabox #optionsframework {
+    border-radius: 6px;
+  }
+}
+
+/* ── 区块内部（宽窄屏都生效）────────────────────────────────
+   1. 分组标题：原来 `#optionsframework h3` 是给面板顶部那条用的
+      灰底横条，选择器太宽把每个分组标题也罩了进去，整页一排灰条。
+      这里把分组标题单独重排：去灰底、加重字重、压淡下边线。 */
+#optionsframework .group > h3 {
+  margin: 0;
+  padding: 15px 18px 13px;
+  border-bottom: 1px solid #f0f0f1;
+  background: none;
+  font-size: 15px;
+  font-weight: 600;
+  color: #1d2327;
+}
+
+/* 2. 区块间距与分隔：原来 10px 的内边距太挤，项与项之间没有分界 */
+#optionsframework .section {
+  padding: 16px 18px 8px;
+  border-bottom: 1px solid #f6f7f7;
+}
+
+/* 3. 提交栏：与分组标题同一套留白 */
+#optionsframework-submit {
+  padding: 12px 18px;
+}

inc/theme-comments.php

@@ -43,6 +43,42 @@ if (!defined('ABSPATH')) {
     exit;
 }
 
+/**
+ * 3.2.24 富文本工具条：给访客评论放行 <span style="color:…">
+ *
+ * 工具条插入的三种标签里，<strong>/<em> 本来就在 WP 评论的
+ * kses 白名单（$allowedtags）里，不用管；<span style="color:…">
+ * 不在 —— 访客提交时会被 wp_filter_kses 整个剥掉，颜色功能就白做了。
+ *
+ * 这里把 span（带 style / class 属性）追加进 kses 白名单。安全性：
+ * 1. kses 对 style 属性的内容会再过一遍 safecss_filter_attr()，
+ *    那是一份固定白名单（color、font-weight、text-align…），
+ *    expression()/url()/behavior() 这些危险属性一律剥掉；
+ * 2. 工具条前端只生成 color 一个声明，白名单只是兜底；
+ * 3. 有 unfiltered_html 权限的用户（管理员）本来就不走 kses，不受影响。
+ *
+ * ⚠️ 不按 context 区分：wp_filter_kses 实际传进来的 context 串
+ * 在 WP 各版本间不稳定，写死 'pre_comment_user' 之类的会静默失效
+ * （失效 = 标签被剥 = 功能没了但没有任何报错）。span+style 放行到
+ * 任何 kses 场景都是安全的（style 内容有 safecss_filter_attr 挡着），
+ * 所以对除 'strip' 外的所有 context 一律追加。
+ */
+function yang_kses_allow_span($tags, $context)
+{
+    if ($context === 'strip') {
+        return $tags;
+    }
+    if (!is_array($tags)) {
+        $tags = array();
+    }
+    $tags['span'] = array(
+        'style' => true,
+        'class' => true,
+    );
+    return $tags;
+}
+add_filter('wp_kses_allowed_html', 'yang_kses_allow_span', 10, 2);
+
 /**
  * wpDiscuz 是否在接管评论
  *
@@ -652,6 +688,8 @@ function yang_comment_scripts()
             'tooLong'     => __('评论内容太长了。', 'kratos'),
             'loading'     => __('加载中…', 'kratos'),
             'noMore'      => __('没有更多评论了', 'kratos'),
+            'boldPlaceholder' => __('加粗文字', 'kratos'),
+            'colorPlaceholder' => __('彩色文字', 'kratos'),
         ),
     ));
 }