WordPress 在移动端添加一个“显示/隐藏目录”的按钮

很好的问题 👍。
在 WordPress 主题中想要 **在移动端添加一个“显示/隐藏目录”的按钮**（一般用于显示文章的目录 TOC，例如使用 `Table of Contents` 插件或主题自带目录），可以通过简单的 **HTML + CSS + JS** 来实现响应式控制。

我来一步步教你：

---

## 🧩 一、实现目标

当页面在移动端访问时：

- 页面顶部或侧边出现一个「目录」按钮（例如“☰ 目录”）。
- 点击按钮后，显示或隐藏文章的目录内容。
- 在桌面端目录仍然固定显示。

---

## 🧱 二、HTML 结构示例

假设你的目录是通过插件（如 `Easy Table of Contents`、`LuckyWP TOC` 等）生成的，
目录 HTML 一般长这样：

```html

```

我们只需在它前面加一个按钮：

```html
☰ 目录
```

建议把这段放在 `single.php`（或主题的 `content-single.php`）中目录输出的前面。

---

## 🎨 三、CSS 控制样式（移动端隐藏/显示）

```css
/* 默认按钮隐藏（桌面端） */
#toc-toggle-btn {
display: none;
position: fixed;
bottom: 20px;
right: 20px;
z-index: 999;
padding: 10px 14px;
background-color: #0073aa;
color: #fff;
border: none;
border-radius: 8px;
font-size: 16px;
cursor: pointer;
}

/* 移动端样式 */
@media (max-width: 768px) {
#toc-toggle-btn {
display: block;
}

#toc-container {
display: none;
position: fixed;
top: 60px;
left: 0;
right: 0;
background: #fff;
z-index: 998;
border-top: 1px solid #eee;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
padding: 15px;
}

#toc-container.active {
display: block;
}
}
```

---

## ⚙️ 四、JS 控制显示/隐藏逻辑

可以直接写在主题的 `footer.php` 里（`` 前），或者放到主题 JS 文件里：

```html

```

---

## 🧠 五、可选优化

1. **点击目录外部区域关闭目录**

```js
document.addEventListener('click', (e) => {
if (tocContainer.classList.contains('active') &&
!tocContainer.contains(e.target) &&
e.target !== tocBtn) {
tocContainer.classList.remove('active');
}
});
```

2. **滑动动画** 可加上：

```css
#toc-container {
transition: all 0.3s ease;
}
```

3. **与插件兼容** 如果你使用 `Easy Table of Contents` 插件，可以用以下选择器：

```js
const tocContainer = document.querySelector('#ez-toc-container');
```

---

## 📱 效果

在桌面端：

- 目录正常显示（无需按钮）

在移动端：

- 页面右下角出现一个「☰ 目录」按钮
- 点击按钮 → 弹出目录层
- 再次点击 → 收起

---