html - 如何将元素包装在 the_content() 中？

Question

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

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

这是由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 网格？

Answer 1

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

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

• 之前<h2>和 <p>
• 除非 <p>前面是 </p>或 </h2>

添加 </div> :

• 经过 </p>除了后面跟着 <p> 的地方

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