Question

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

在我的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

在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。只需给它们一个宽度并为它们应用浮动，然后使用标记将内容分成两列。

Answer 2

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

它的工作原理如下：

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

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

中

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

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

将内容拆分为两列 - Wordpress

2 个答案: