如何在 the_content() 中包装元素？答案

【问题标题】：How do I wrap elements inside the_content()?如何在 the_content() 中包装元素？
【发布时间】：2018-06-28 16:07:26
【问题描述】：

我正在使用 WordPress 和 CSS Grid 来构建文章。正文和标题应限制宽度，图像和其他视觉元素可能会增长到全宽。我已经通过指定网格列解决了这个问题。

例如带有grid-column: 5/11 的段落和带有grid-column: 1/15 的图像。这很好用，但我现在正在处理一堆网格行，因为每个段落都变成了一个新的网格行。这使得突出显示内容变得困难，以及在“主要文章”块旁边对齐内容。

这是由 the_content() 生成的；来自 WordPress。

<h2>Headline</h2>
<p>Parahraph</p>
<p>Parahraph</p>
<p>Parahraph</p>

<div id="attachment_0001" class="wp-caption alignnone">
  <img src="#">
  <p class="wp-caption">Caption text</p>
</div>

<p>Parahraph</p>

<form>
   <input>
   <button>
</form>

<p>Parahraph</p>

<img src="#">

<p>Parahraph</p>
<p>Parahraph</p>

但这就是我想要的。注意除了一些元素之外的所有东西都是如何包装的，包括 h2 和 p 标签，而不是每个元素都有一个 div。但也不包括 p 标签标题。

<div>
  <h2>Headline</h2>
  <p>Parahraph</p>
  <p>Parahraph</p>
  <p>Parahraph</p>
</div>

<div id="attachment_0001" class="wp-caption alignnone">
  <img src="#">
  <p class="wp-caption">Caption text</p>
</div>

<div>
  <p>Parahraph</p>
</div>

<form>
   <input>
   <button>
</form>

<div>
  <p>Parahraph</p>
</div>

<img src="#">

<div>
  <p>Parahraph</p>
  <p>Parahraph</p>
</div>

关于如何修改 the_content(); 的任何想法输出所需的标记，或者我可以使用其他解决方案 - 使用 CSS Grid？

【问题讨论】：

我强烈建议您改用一些内容布局编辑器插件（因此仅适用于内容，而不是整个页面）。我通常编写自己的自定义主题，这些主题都是由我为页面内容编写的（并且仅在需要的地方和时间）。目前，至少对我来说，最好的（免费）是 Elementor。无论如何，这些布局将在不久的将来在原生 wordpress 编辑器中开箱即用，届时其 Gutenberg 编辑器将最终发布。

标签： html css wordpress

【解决方案1】：

要么你需要找出某种“规则”/逻辑来插入 div 的位置，要么你应该寻找不同的解决方案。

例如，您可以过滤the_content，并添加<div>：

在<h2> 和<p> 之前
除非<p> 前面有</p> 或</h2>

添加</div>：

在</p> 之后，除非它后面是<p>

然后您需要仔细检查它是否有效，如果 <div> 和 </div> 的数量由于某种原因不匹配，则可能会引发错误。如果它们不匹配，则您的逻辑和异常对于内容可能不够健壮。

【讨论】：