WordPress:让AI帮你写自定义区块(附免费手风琴实例)

我想在我的WordPress网站上放一个手风琴组件。我试过的每一个"免费"插件,最后都是带设置页面的推销弹窗。所以我让AI给我写了一个:25行代码,不用插件,不用JavaScript,拿去用吧。

更新,2026年7月:这篇文章在草稿箱里躺了一年多,一直承诺"代码见下文",结果下面根本没有代码。现在补上了。抱歉。

最终成果

这是一个实时演示。它就是下一节里的那段代码,用你贴进WordPress同样的方式贴进了这个页面。点点看这些面板:

它能零JavaScript就实现展开收起,是因为浏览器内置的<details>元素替我们做了折叠这件事。所有浏览器早就支持它很多年了。

代码

<style>
.ll-acc { border: 1px solid rgba(128,128,128,.5); border-radius: 10px; overflow: hidden; }
.ll-acc details + details { border-top: 1px solid rgba(128,128,128,.5); }
.ll-acc summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; cursor: pointer; font-weight: 600; list-style: none; }
.ll-acc summary::-webkit-details-marker { display: none; }
.ll-acc summary::after { content: "+"; font-size: 1.3em; font-weight: 400; line-height: 1; }
.ll-acc details[open] > summary { background: rgba(128,128,128,.12); }
.ll-acc details[open] > summary::after { content: "–"; }
.ll-acc .ll-acc-body { padding: 12px 18px 16px; }
</style>

<div class="ll-acc">
  <details>
    <summary>Question one goes here</summary>
    <div class="ll-acc-body">Answer one goes here. Text, links, pictures, whatever you want.</div>
  </details>
  <details>
    <summary>Question two goes here</summary>
    <div class="ll-acc-body">Answer two. Add more panels by copying one whole details block.</div>
  </details>
  <details>
    <summary>Question three goes here</summary>
    <div class="ll-acc-body">Answer three. Delete panels the same way.</div>
  </details>
</div>

你大概会想改的地方:

• 文字。把占位用的问题和答案直接在区块里换掉。答案部分能放正常的HTML,所以链接和图片都没问题。
• 面板数量。复制一整块<details>...</details>就能加一个面板;删掉一块就能去掉一个。
• 默认展开。把某个面板的开始标签改成<details open>,它加载时就会是展开状态。
• 颜色。这里的灰色是故意选的中性色,在浅色和深色主题下看起来都还行。想用自己品牌的颜色,把rgba(...)的值换掉就行。

把它放到你的页面上

这些安装步骤是我提出要求时AI自己写的(提示词见下文)。我在一个全新安装的WordPress上照做了一遍,结果全对——老实说,这也是我最不敢相信的一点。

1. 登录WordPress,打开你想放手风琴的页面或文章,点编辑。
2. 在想放置的位置点+,搜索一个叫自定义HTML的区块。
3. 把整段代码贴进去,<style>部分和<div>部分都要贴。
4. 点区块的预览切换(或者整页的预览),确认看到的是渲染效果而不是原始代码。
5. 点更新或发布。去正式页面上点点你的新面板,然后为自己省下的插件费用美滋滋一下。

写出这段代码的提示词

简单交代一下背景。我实在找不到一个免费又不烦人的手风琴插件,而为了实质上就是25行HTML去付订阅费,我说什么也不干。自己动手写这几行,正是AI真正擅长的那种小型、自成一体的活儿。整个流程是这样的:

任何一个会写代码的AI都行:

• 在本地跑一个(免费、私密):我用的是我自己本地部署的DeepSeek 70B。如果你的电脑够给力,这是我的搭建指南:本地运行DeepSeek:4步指南。
• 或者用一个免费的在线AI:ChatGPT的免费版就能顺利处理这条提示词。

提示词在这里。要求列表才是重点;笼统地说一句"帮我做个手风琴",换来的往往是一堆脆弱的JavaScript。

Write me an accordion I can paste into a WordPress "Custom HTML" block.

Requirements:
- Plain HTML and CSS only. No JavaScript, no external files, no plugin.
- Use <details> and <summary> so the browser handles opening and closing.
- Scope every CSS rule under one class so it can't restyle the rest of my theme.
- Neutral colors that look fine on a light theme or a dark theme.
- Three panels with placeholder questions and answers.
- Keep it under 40 lines.

Then explain, step by step, exactly how I install it on a WordPress page.
Assume I have never edited HTML before.

(提示词保持英文原样,但把这份要求列表翻译成中文再提交,同样能顺利得到结果。)

这篇标题里"让AI帮你做"的关键,就在最后一段:写代码的同一个AI,会按你要求的技能水平,把安装说明书也一并写出来。哪一步没看懂,把那一步贴回去,说"把第三步讲得像是我完全没碰过HTML"。它会不厌其烦地一直讲下去。光这一点就已经比大多数插件的文档强。

有个习惯值得学一下:在代码碰到你正式网站之前,先贴进桌面上一个叫test.html的文件,双击打开。它会直接在浏览器里打开,不需要服务器。把每个面板都点一遍。有哪里不对劲,拿去给AI看,说清楚哪里不对。等它表现正常了,再放进WordPress。整个测试环节就这么多,上面那个区块也是这样验证出来的。

踩过的坑

• 要用自定义HTML区块,不要用段落区块。把代码贴进普通文本区块,WordPress会好心地把它转义掉,访客看到的就成了原始代码而不是手风琴。
• 一个页面放两个手风琴没问题。<style>那块会重复出现,难看但无害。要是觉得碍眼,可以把CSS只放一次在"外观 → 自定义 → 附加CSS"里,区块里就只贴<div>部分。
• 有些主题会自己画summary箭头。这段代码用两种方式隐藏了默认标记,但顽固的主题还是可能在我这个+/–符号旁边再画一个自己的图标。要是看到重影,可以问AI:"我的主题会给summary元素加自己的箭头,把它隐藏掉。"
• 想要一次只展开一个面板?在每个<details>标签里加上name="faq"。现代浏览器会自动收起其他面板;老一点的浏览器会直接忽略这个属性,不会出问题。
• 别把AI输出的代码不经测试就直接贴到正式网站。上面说的临时文件测试只要两分钟。要求不用JavaScript,也顺带缩小了出问题的范围,这也是我把它列为硬性要求的一半原因。