WordPress教程：不改变文章排版 一键控制跨行内容的显示和隐藏

在使用 WordPress 构建内容丰富的文章时，许多人可能需要展示多语言内容或多样化信息（例如拼音、译文等）。为了提升用户体验，你可能希望默认显示原文，并让用户通过按钮控制拼音和译文的显示与隐藏。本文将为你详细介绍如何通过 WordPress 短代码实现这个功能，并提供全局和独立的显示控制，排版不变，操作简单，SEO友好。

当然除了古文/经文阅读（注音+原文+译文）这个特定场景以外，其他类似场景，比如需要在不改变文章排版的情况下跨行批量隐藏某些特定内容，也同样可以借助该教程实现。

功能简介

实现以下功能：

1. 默认显示原文：拼音和译文默认隐藏，原文始终保持显示。
2. 独立控制：用户可以通过独立按钮控制每行拼音和译文的显示或隐藏。
3. 全局控制：提供全局按钮，一键显示或隐藏整篇文章的拼音或译文。
4. 不改变排版：拼音和译文在显示/隐藏时，排版完全保持一致。

教程步骤

第一步：在主题中添加短代码功能

1. 打开你的主题目录中的 functions.php 文件。
2. 将以下代码复制并粘贴到文件中：

第二步：在文章中插入短代码

进入 WordPress 编辑器，在需要的文章中使用以下格式的短代码：

第三步：优化样式

为按钮和内容添加样式，确保页面美观。在 style.css 中加入以下代码：

自己目前在用的v1.1版本

你可以用前面教程里的代码，更详细。也可以用下面压缩包中的代码。

最终效果

1. 默认展示：原文正常显示，拼音和译文默认隐藏。
2. 单独控制：每行拼音和译文旁都有独立按钮，点击可显示或隐藏该段内容。
3. 全局控制：页面顶部新增全局按钮，一键控制整篇文章拼音或译文的显示和隐藏。

总结与扩展

本教程展示了如何通过简单的短代码和 CSS/JS 组合，实现 WordPress 中的内容显示控制。这一功能不仅适用于拼音和译文，还可以扩展至其他多样化内容，如注释、解释文本等。通过细致的控制，用户可以根据需求自由探索文章内容，从而提升交互性和用户体验。

如果本教程对你有帮助，请分享给更多需要的朋友！如果你有其他想法或需求，欢迎留言讨论！