跑马灯公告带手势点击图标的html代码，在AeroCore主题的html组件方式添加中遇到的后台首页自定义设置数据丢失问题

菜心哥

这是一个可用于Wordpress（以下简称WP）和Discuz（以下简称DZ）两个站点都可用的公告代码，在WP使用过程中遇到一个问题：AeroCore主题后台首页自定义的设置数据丢失，我是采用自定义html组件方式添加的，保存后到前端看是没有问题，公告代码都能跑起来，然后返回后台一看，傻眼了

另一个文章页自定义倒是没问题

还好有前一天的备份，通过恢复备份数据后，数据找回。
经过AI排查不是代码本身有Bug，而是代码中一个多余的 </script> 标签破坏了AeroCore主题的自定义HTML组件保存机制。
这个代码末尾有一个多余的闭合标签：

1. </script>  <!-- 这个标签不应该存在，因为前面根本没有 <script> 开始标签 -->

複製代碼

原因分析
1.AeroCore主题的自定义HTML组件在保存时，会通过JavaScript将您的HTML代码序列化并存储到数据库
2.当遇到 </script> 标签时，浏览器的HTML解析器会认为脚本块结束，可能导致：

• 主题后台的保存JS逻辑被意外截断
• 数据序列化过程出错
• 数据库写入失败或写入不完整数据
  

结果是：之前保存的自定义设置被清空或损坏，回退到默认值
解决方案
删除最后一行的 </script>，修正后又经过多次测试后不存在上面的问题了，完整代码如下：

1. <div class="ter" style="opacity: 1;">
   
2.     <marquee id="scrollText" onmouseover="scrollText.stop();" onmouseout="scrollText.start();" scrollamount="8" direction="left">
   
3.         <span style="float:left">
   
4.             <img src="https://www.lucaixing.com/bbs/static/image/common/ann_icon.gif" style="position:relative;top:6px" alt="公告">
   
5.             &nbsp;
   
6.         </span>
   
7.         <samp style="float:left;margin-top:3px;">
   
8.             <a style="text-decoration:none" target="_blank">
   
9.                 <font-size:18px; color="#0000CC">欢迎光临老菜心网站！需要用车的老板可以申请加入本站微信群</font>
   
10.             </a>
    
11.         </samp>
    
12.         <a href="https://www.lucaixing.com/bbs/plugin.php?id=fn_weixinqun" target="_blank" rel="nofollow" class="hand-click-link" style="text-decoration:none;">
    
13.             <span class="hand-icon">
    
14.                 <svg class="hand-click-svg" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-label="点击手势向右" width="14" height="14">
    
15.                     <path d="M7 10.5V7.5C7 6.5 7.5 5.5 8.5 5.5C9.5 5.5 10 6.5 10 7.5V9" stroke="currentColor" fill="none" />
    
16.                     <path d="M10 9V6C10 5 10.5 4 11.5 4C12.5 4 13 5 13 6V8.5" stroke="currentColor" fill="none" />
    
17.                     <path d="M13 8.5V5.5C13 4.5 13.5 3.5 14.5 3.5C15.5 3.5 16 4.5 16 5.5V9" stroke="currentColor" fill="none" />
    
18.                     <path d="M16 9.5L18 11L19.5 13" stroke="currentColor" stroke-width="1.6" fill="none" />
    
19.                     <path d="M7 11.5C7 9 9 7.5 11 7.5C13 7.5 15 9 15.5 11.5V15C15.5 18 13 20 10 20C7 20 5 18 5 15V13C5 12 6 11 7 11.5Z" stroke="currentColor" fill="rgba(204,0,0,0.05)" stroke-width="1.5" />
    
20.                     <circle cx="20" cy="13" r="1.2" fill="#CC0000" stroke="none" opacity="0.8" />
    
21.                     <circle cx="21" cy="13.8" r="0.8" fill="#CC0000" stroke="none" opacity="0.5" />
    
22.                     <path d="M21.5 13.5L23 13M21.5 14L22.5 14.5" stroke="#CC0000" stroke-width="1" fill="none" opacity="0.7" />
    
23.                 </svg>
    
24.             </span>
    
25.             <span class="click-text"><font style="color:#CC0000 !important; font-size:16px;"> 点我+菜心哥+微信群</span>
    
26.         </a>
    
27.     </marquee>
    
28. </div>

複製代碼

有兴趣就来老菜心博客站体验：老菜心博客
如果觉得上面的手势图标不好看就用下面这个：

1. <div class="ter" style="opacity: 1;">
   
2.     <marquee id="scrollText" onmouseover="scrollText.stop();" onmouseout="scrollText.start();" scrollamount="8" direction="left">
   
3.         <span style="float:left">
   
4.             <img src="https://www.lucaixing.com/bbs/static/image/common/ann_icon.gif" style="position:relative;top:6px" alt="公告">
   
5.             &nbsp;
   
6.         </span>
   
7.         <samp style="float:left;margin-top:3px;">
   
8.             <a style="text-decoration:none" target="_blank">
   
9.                 <font-size:18px; color="#0000CC">欢迎光临老菜心网站！需要用车的老板可以申请加入本站微信群</font>
   
10.             </a>
    
11.         </samp>
    
12.         <a href="https://www.lucaixing.com/bbs/plugin.php?id=fn_weixinqun" target="_blank" rel="nofollow" class="hand-click-link" style="text-decoration:none;">
    
13.             <!-- 简单明亮的右手指符号（带颜色，可适配系统） -->
    
14.             <span class="simple-hand-icon">👉</span>
    
15.             </span>
    
16.             <span class="click-text"><font style="color:#CC0000 !important; font-size:16px;"> 点我+菜心哥+微信群</span>
    
17.         </a>
    
18.     </marquee>
    
19. </div>

複製代碼

最终又做了美化修改

1. <div align=left>
   
2.       <img src="https://www.lucaixing.com/bbs/static/image/common/ann_icon.gif"
   
3. <div align=left><b>公告：祝大家马到成功，马上发财！</b></div>
   
4. <div class="ter" style="opacity: 1;">
   
5. <marquee id="scrollText" onmouseover="scrollText.stop();" onmouseout="scrollText.start();" scrollamount="8" direction="left">
   
6.         </span>
   
7.   &nbsp;
   
8.         <samp style="float:left;margin-top:3px;">
   
9.             <a style="text-decoration:none" target="_blank">
   
10.                 <font-size:18px; color="#0000CC">欢迎光临老菜心网站！需要用车的老板可以申请加入本站微信群</font>
    
11.             </a>
    
12.         </samp>
    
13.         <a href="https://www.lucaixing.com/bbs/plugin.php?id=fn_weixinqun" target="_blank" rel="nofollow" class="hand-click-link" style="text-decoration:none;">
    
14.             <!-- 简单明亮的右手指符号（带颜色，可适配系统） -->
    
15.             <span class="simple-hand-icon">👉</span>
    
16.             </span>
    
17.             <span class="click-text"><font style="color:#CC0000 !important; font-size:16px;"> 点我+菜心哥+微信群</span>
    
18.         </a>
    
19.     </marquee>
    
20. </div>

複製代碼