如何在WordPress单篇博客文章页实现此类图文布局

需求对应的布局示意图：

核心需求：博客文本与缩略图各占50%宽度，直至图片结束；图片之后文本占满100%页面宽度，且半宽文本旁需添加样式线条（WordPress自带图文环绕功能无法满足）

以下是几种可行方案：

一、JS/jQuery文本拆分方案（你考虑的思路可落地） #

通过动态计算高度拆分文本容器，实现半宽与全宽的自动切换：

1. 准备两个文本容器：.half-width-text（50%宽度）、.full-width-text（100%宽度，初始隐藏），图片单独放在.thumbnail-container（50%宽度）
2. 监听页面加载/窗口resize事件，计算图片容器的总高度
3. 遍历半宽容器内的内容块（<p>/<div>等），累加高度；当累加高度超过图片高度时，将剩余内容（含拆分的段落）移动到全宽容器并显示
4. 处理段落拆分：若某段文字跨半宽/全宽区域，将段落拆分为两个<p>标签，分别放入对应容器

简化版实现代码：

$(document).ready(function() {
  adjustTextLayout();
  $(window).resize(adjustTextLayout);

  function adjustTextLayout() {
    const imgHeight = $('.thumbnail-container').outerHeight();
    const halfText = $('.half-width-text');
    const fullText = $('.full-width-text');
    let currentHeight = 0;
    let moveContent = false;

    halfText.children().each(function() {
      const elemHeight = $(this).outerHeight();
      if (currentHeight + elemHeight > imgHeight && !moveContent) {
        if ($(this).is('p')) {
          const words = $(this).text().split(' ');
          let tempText = '';
          let tempHeight = currentHeight;
          for (let i = 0; i < words.length; i++) {
            tempText += words[i] + ' ';
            $(this).text(tempText);
            const tempElemHeight = $(this).outerHeight();
            if (tempHeight + tempElemHeight > imgHeight) {
              const remainingText = words.slice(i).join(' ');
              $(this).text(tempText.slice(0, -1));
              $('<p>' + remainingText + '</p>').appendTo(fullText);
              moveContent = true;
              break;
            }
          }
        } else {
          moveContent = true;
        }
      }
      if (moveContent) {
        $(this).appendTo(fullText);
      }
      currentHeight += elemHeight;
    });

    fullText.toggle(fullText.children().length > 0);
  }
});

二、纯CSS方案（更简洁，优先推荐） #

利用CSS Grid实现布局，无需JS：

1. 外层容器设为网格布局，列数2等分：grid-template-columns: 1fr 1fr
2. 图片元素设置grid-row: 1 / span 10（span值根据图片高度调整，确保覆盖需要并排的文本高度）
3. 后续全宽文本设置grid-column: 1 / -1，跨两列占满宽度
4. 通过伪元素给半宽文本添加样式线条

示例代码：

.blog-post-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px; /* 可选，调整文本与图片间距 */
}

.blog-thumbnail {
  grid-row: 1 / span 10; /* 按需调整span值，确保覆盖并排文本高度 */
  object-fit: cover;
  width: 100%;
}

.full-width-text {
  grid-column: 1 / -1;
}

.half-width-text {
  position: relative;
  padding-left: 20px;
}

.half-width-text::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background-color: #2c3e50; /* 自定义线条颜色 */
}

注：若图片高度不确定，可结合少量JS动态计算grid-row的span值，基础场景下设置足够大的span值即可满足需求。

三、WordPress自定义区块方案 #

针对Gutenberg编辑器，自定义专属布局区块：

1. 注册一个包含三个模块的自定义区块：半宽文本区、图片区、全宽文本区
2. 编辑界面让用户分别输入半宽文本、上传图片、输入全宽文本
3. 前端直接按50%+50%、全宽的布局渲染，并内置线条样式
4. 优点是编辑直观，无需后续调整；缺点是需要掌握基础的区块开发（可借助create-guten-block工具快速搭建）

内容的提问来源于stack exchange，提问作者in2d