Coluna sua postagem usando shortcode

Todos nós usamos colunas quando se trata de formatar o conteúdo de um artigo, então aqui está uma solução rápida usando shortcode em sua postagem para criar colunas.

Aqui está um exemplo do conteúdo da sua postagem:

[row]
    [span size="4"]
        Here is the column 1
    [/span]
    [span size="4"]
        Here is the column 2
    [/span]
    [span size="4"]
        Here is the column 3
    [/span]
[/row]

O que irá gerar isso:

<div class="row">
    <div class="span-4">
        Here is the column 1
    </div>
    <div class="span-4">
        Here is the column 2
    </div>
    <div class="span-4">
        Here is the column 3
    </div>
</div>

Não deve ser complicado para ninguém implementá-lo, e ainda é melhor do que usar um modelo dedicado.

Para fazer funcionar, adicione o seguinte código em seu functions.php e adicione alguma classe em seu css (span-1, span-2, span-3, span-4, etc.).

/* COLUMNIZER */
add_shortcode( 'span', 'sc_columnizer_span' );
add_shortcode( 'row',  'sc_columnizer_row' );

function sc_columnizer_row( $atts, $content='' ) {
    return '<div class="row">' . do_shortcode( $content ) . '</div>';
}

function sc_columnizer_span( $atts, $content='' ) {

    //Extract attributes and set default value if not set
    extract( shortcode_atts( array(
        'size'    => '1'
    ), $atts ) );

    return '<div class="span-' . $size . '">' . do_shortcode( $content ) . '</div>';
}

Aqui está um exemplo de CSS que você pode usar:

// Columns
.span-1,.span-2,.span-3,.span-4,.span-5,.span-6,.span-7,.span-8,.span-9,.span-10,.span-11,.span-12 {
    float:left;
    margin: 0 1.04167%;
    min-height: 1px;
}

.span-1 { width: 6.25%; }
.span-2 { width: 14.58333%; }
.span-3 { width: 22.91667%; }
.span-4 { width: 31.25%; }
.span-5 { width: 39.58333%; }
.span-6 { width: 47.91667%; }
.span-7 { width: 56.25%; }
.span-8 { width: 64.58333%; }
.span-9 { width: 72.91667%; }
.span-10 { width: 81.25%; }
.span-11 { width: 89.58333%; }
.span-12 { width: 97.91667%; }