将内容分成两列 - Wordpress

Question

我有一个名为“list-two”的自定义元框（使用Advanced Custom Fields），我想在编辑窗格中使用“更多”标签将文本/内容分成两列。到目前为止，这是我的代码，但只完成了我需要它做的一半：

在我的functions.php文件中：

function split_morecontent() {
global $morecontent;
$morecontent = true;
$copy = preg_split('/<span id="more-\d+"><\/span>/i', get_field('list_two'));
for($c = 0, $csize = count($copy); $c < $csize; $c++) {
    $copy[$c] = apply_filters('list_two', $copy[$c]);
}
return $copy;
}

在我的帖子模板文件中：

<?php
 // split text into array
    $copy = split_morecontent();
 // output first content section in column1
echo '<section class="split">', array_shift($copy), '</section>';
 // output remaining content sections in column2
echo '<section class="split">', implode($copy), '</section>';
?>

运行时输出以下 HTML（注意它实际上并没有将内容分成两个标签）：

<section class="split">
  <ul class="footnote">
     <li>Christopher Gray</li>
     <li>Jean Jullien<!--more--></li>
     <li>Nous Vous</li>
     <li>Liv Bargman</li>
     <li>Luke Drozd</li>
  </ul>
</section>

<section class="split">
     <!-- the last 3 <li> tags from the list above should be displayed within here.-->
</section>

Answer 1

另一种简单的方法是通过 jQuery。这很简单。 使用这个：Columnizer jQuery Plugin

它的工作原理是这样的：

$('.post-content').columnize({ columns: 2 });

在你的循环中，只需将 the_content() 放在 div post-content 中

<div class="post-content">
  <?php the_content() ?>
</div>

希望这对其他人有帮助；）

Answer 2

SitePoint 上有一篇文章似乎可以帮助您。 Check out How to Split WordPress Content Into Two or More Columns。基本上，它会告诉您执行以下操作：

添加到您的functions.php：

// split content at the more tag and return an array
function split_content() {
    global $more;
    $more = true;
    $content = preg_split('/<span id="more-\d+"><\/span>/i', get_the_content('more'));
    for($c = 0, $csize = count($content); $c < $csize; $c++) {
        $content[$c] = apply_filters('the_content', $content[$c]);
    }
    return $content;
}

无论您希望这种划分发生在哪里（我假设大多数主题默认为single.php），您都需要将the_content() 调用替换为新创建的split_content()，如下所示：

<?php
    // original content display
        // the_content();
    // split content into array
        $content = split_content();
    // output first content section in column1
        echo '<div id="column1">', array_shift($content), '</div>';
    // output remaining content sections in column2
        echo '<div id="column2">', implode($content), '</div>';
?>

您现在将内容拆分为两个单独的 div。只需给它们每个宽度并对其应用浮点数，您就可以使用<!--more--> 标签将您的内容分成两列。