Split content into multiple columns using more tag?

admin管理员组

文章数量:1122832

First of, this is pretty much an exact duplicate of: Split columns into three+ divs?

But the given solution does not work (returns blank). I'm guessing it collides with qTranslate which adds some really weird comments to the html, but i'm not sure.

I found a great code snippet that simply splits the content into pieces by the more tag. The problem is it seems to only split into two columns. It ignores the rest of the more tags. I am not actually dividing the content into columns, but rather into horisontal sections (with a divider inbetween).

The current code:

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;
}

The suggested solution in the linked thread does not work, and i have searched for other solutions but haven't found anything working.

It is important that the content is returned in an array of "columns". Like $content[0] is column 1, $content[1] is column2 etc.

Any ideas?

First of, this is pretty much an exact duplicate of: Split columns into three+ divs?

But the given solution does not work (returns blank). I'm guessing it collides with qTranslate which adds some really weird comments to the html, but i'm not sure.

I found a great code snippet that simply splits the content into pieces by the more tag. The problem is it seems to only split into two columns. It ignores the rest of the more tags. I am not actually dividing the content into columns, but rather into horisontal sections (with a divider inbetween).

The current code:

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;
}

The suggested solution in the linked thread does not work, and i have searched for other solutions but haven't found anything working.

It is important that the content is returned in an array of "columns". Like $content[0] is column 1, $content[1] is column2 etc.

Any ideas?

• content
• columns
• customization
• split

Share Improve this question edited Apr 13, 2017 at 12:37 CommunityBot 1 asked Oct 29, 2012 at 15:20 qwertyqwerty 66555 gold badges1313 silver badges2323 bronze badges 3

• If you were the one who down-voted the shortcodes, you should explain why that won't work. That would probably include an explanation of why you need the "columns" in an array. Hacking a core feature to do something it's not intended to isn't always the greatest solution, but it's hard to think of anything better without knowing what your actual goal is rather than just how you think you want to solve it. – mrwweb Commented Oct 29, 2012 at 18:34
• I didn't downvote it. I would prefer to have it as an array, that way i have more control over where i want to display it on the page, and how i want to wrap the specific segment/colummn. Shortcodes is probably not the best option for me though, because it has to be as simple as possible for the end user; they shouldn't have to edit any code. It's too easy to mess it up. – qwerty Commented Oct 30, 2012 at 8:06
• Note that in modern WP this can be done trivially using a column block or CSS – Tom J Nowell ♦ Commented Sep 1, 2021 at 12:11

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Why not just create a few shortcodes for what you need?

you can create columns for all kind of uses,,

add this to your themes function.php file..

<?php
function yourtheme_one_third( $atts, $content = null ) {
   return '<div class="one_third">' . do_shortcode($content) . '</div>';
}
add_shortcode('one_third', 'yourtheme_one_third');

function yourtheme_one_third_last( $atts, $content = null ) {
   return '<div class="one_third last">' . do_shortcode($content) . '</div><div class="clearboth"></div>';
}
add_shortcode('one_third_last', 'yourtheme_one_third_last');

function yourtheme_two_third( $atts, $content = null ) {
   return '<div class="two_third">' . do_shortcode($content) . '</div>';
}
add_shortcode('two_third', 'yourtheme_two_third');

function yourtheme_two_third_last( $atts, $content = null ) {
   return '<div class="two_third last">' . do_shortcode($content) . '</div><div class="clearboth"></div>';
}
add_shortcode('two_third_last', 'yourtheme_two_third_last');

function yourtheme_one_half( $atts, $content = null ) {
   return '<div class="one_half">' . do_shortcode($content) . '</div>';
}
add_shortcode('one_half', 'yourtheme_one_half');

function yourtheme_one_half_last( $atts, $content = null ) {
   return '<div class="one_half last">' . do_shortcode($content) . '</div><div class="clearboth"></div>';
}
add_shortcode('one_half_last', 'yourtheme_one_half_last');

function yourtheme_one_fourth( $atts, $content = null ) {
   return '<div class="one_fourth">' . do_shortcode($content) . '</div>';
}
add_shortcode('one_fourth', 'yourtheme_one_fourth');

function yourtheme_one_fourth_last( $atts, $content = null ) {
   return '<div class="one_fourth last">' . do_shortcode($content) . '</div><div class="clearboth"></div>';
}
add_shortcode('one_fourth_last', 'yourtheme_one_fourth_last');

function yourtheme_three_fourth( $atts, $content = null ) {
   return '<div class="three_fourth">' . do_shortcode($content) . '</div>';
}
add_shortcode('three_fourth', 'yourtheme_three_fourth');

function yourtheme_three_fourth_last( $atts, $content = null ) {
   return '<div class="three_fourth last">' . do_shortcode($content) . '</div><div class="clearboth"></div>';
}
add_shortcode('three_fourth_last', 'yourtheme_three_fourth_last');

function yourtheme_one_fifth( $atts, $content = null ) {
   return '<div class="one_fifth">' . do_shortcode($content) . '</div>';
}
add_shortcode('one_fifth', 'yourtheme_one_fifth');

function yourtheme_one_fifth_last( $atts, $content = null ) {
   return '<div class="one_fifth last">' . do_shortcode($content) . '</div><div class="clearboth"></div>';
}
add_shortcode('one_fifth_last', 'yourtheme_one_fifth_last');

function yourtheme_two_fifth( $atts, $content = null ) {
   return '<div class="two_fifth">' . do_shortcode($content) . '</div>';
}
add_shortcode('two_fifth', 'yourtheme_two_fifth');

function yourtheme_two_fifth_last( $atts, $content = null ) {
   return '<div class="two_fifth last">' . do_shortcode($content) . '</div><div class="clearboth"></div>';
}
add_shortcode('two_fifth_last', 'yourtheme_two_fifth_last');

function yourtheme_three_fifth( $atts, $content = null ) {
   return '<div class="three_fifth">' . do_shortcode($content) . '</div>';
}
add_shortcode('three_fifth', 'yourtheme_three_fifth');

function yourtheme_three_fifth_last( $atts, $content = null ) {
   return '<div class="three_fifth last">' . do_shortcode($content) . '</div><div class="clearboth"></div>';
}
add_shortcode('three_fifth_last', 'yourtheme_three_fifth_last');

function yourtheme_four_fifth( $atts, $content = null ) {
   return '<div class="four_fifth">' . do_shortcode($content) . '</div>';
}
add_shortcode('four_fifth', 'yourtheme_four_fifth');

function yourtheme_four_fifth_last( $atts, $content = null ) {
   return '<div class="four_fifth last">' . do_shortcode($content) . '</div><div class="clearboth"></div>';
}
add_shortcode('four_fifth_last', 'yourtheme_four_fifth_last');

function yourtheme_one_sixth( $atts, $content = null ) {
   return '<div class="one_sixth">' . do_shortcode($content) . '</div>';
}
add_shortcode('one_sixth', 'yourtheme_one_sixth');

function yourtheme_one_sixth_last( $atts, $content = null ) {
   return '<div class="one_sixth last">' . do_shortcode($content) . '</div><div class="clearboth"></div>';
}
add_shortcode('one_sixth_last', 'yourtheme_one_sixth_last');

function yourtheme_five_sixth( $atts, $content = null ) {
   return '<div class="five_sixth">' . do_shortcode($content) . '</div>';
}
add_shortcode('five_sixth', 'yourtheme_five_sixth');

function yourtheme_five_sixth_last( $atts, $content = null ) {
   return '<div class="five_sixth last">' . do_shortcode($content) . '</div><div class="clearboth"></div>';
}
add_shortcode('five_sixth_last', 'yourtheme_five_sixth_last');
?>

Then add some css to your themes style.css file

.one_half{ width:48%; }
.one_third{ width:30.66%; }
.two_third{ width:65.33%; }
.one_fourth{ width:22%; }
.three_fourth{ width:74%; }
.one_fifth{ width:16.8%; }
.two_fifth{ width:37.6%; }
.three_fifth{ width:58.4%; }
.four_fifth{ width:67.2%; }
.one_sixth{ width:13.33%; }
.five_sixth{ width:82.67%; }
.one_half,.one_third,.two_third,.three_fourth,.one_fourth,.one_fifth,.two_fifth,.three_fifth,.four_fifth,.one_sixth,.five_sixth{ position:relative; margin-right:4%; float:left; }
.last{ margin-right:0 !important; clear:right; }
.clearboth {clear:both;display:block;font-size:0;height:0;line-height:0;width:100%;}

then when writing a post use your new shortcodes to create areas for specific text etc..

[one_third]text here[/one_third]
[one_third_last]text here[/one_third_last]
[two_third]text here[/two_third]
[two_third_last]text here[/two_third_last]
[one_half]text here[/one_half]
[one_half_last]text here[/one_half_last]
etc...etc....

change all the function names to suit your theme, and edit any css to match your theme settings etc..

full source here http://tutorials.mysitemyway.com/adding-column-layout-shortcodes-to-a-wordpress-theme/

Marty

本文标签： Split content into multiple columns using more tag