Разбиваем контент в записях и страницах на колонки при помощи шорткода

Разбиваем контент в записях и страницах на колонки при помощи шорткода

5/5 - (1 голос)

После того, как я опубликовал предыдущий пост о том как работать с шорткодами в WordPress, мне пришло несколько писем от пользователей, которые интересовались, как при помощи все тех же шорткодов разбить контент в отдельной записи или на странице на несколько колонок. Ну что же, в этом посте я расскажу, как это можно сделать. Код будет посложнее, чем в предыдущих примерах, но оно того стоит. Ниже, на примере я продемонстрирую, как можно разбить контент на три колонки прямо в этой записи:

Добавляем шорткод

Добавьте следующий код в файл functions.php вашей темы:

/* Register our shortcodes. */
add_shortcode( 'column', 'column_shortcode' );
add_shortcode( 'clear', 'clear_floats_shortcode' );

/**
 * The column shortcode.
 * @param array $atts an array of shortcode attributes
 * @param string $content the content between the shortcode tags
 * @return string
 */
function column_shortcode( $atts, $content = '' ) {

    /* Extract the shortcode attributes. */
    extract( shortcode_atts( array(
      'width' => '48%',
      'spacing' => '0',
        ), $atts ) );

    /* Parse any nested shortcodes and clean up the formatting. */
    $content = parse_shortcode_content( $content );

    /* Assemble the output. */
    $style = "style='float: left; width: $width; margin-right: $spacing;'";
    $output = "<div $style>$content</div>";

    return $output;
}

/**
 * The float clearing shortcode.
 * @return string
 */
function clear_floats_shortcode() {
    return "<div style='clear: both;'></div>";
}

/**
 * Process the content of a shortcode.
 * Parses any nested shortcodes, then adds paragraphs, then removes
 * the invalid markup wpautop() sometimes adds.
 * @param string $content the content passed by a shortcode
 * @return string
 */
function parse_shortcode_content( $content ) {

    /* Parse nested shortcodes and add formatting. */
    $content = trim( wpautop( do_shortcode( $content ) ) );

    /* Remove '</p>' from the start of the string. */
    if ( substr( $content, 0, 4 ) == '</p>' )
        $content = substr( $content, 4 );

    /* Remove '<p>' from the end of the string. */
    if ( substr( $content, -3, 3 ) == '<p>' )
        $content = substr( $content, 0, -3 );

    /* Remove any instances of '<p></p>'. */
    $content = str_replace( array( '<p></p>' ), '', $content );

    return $content;
}

Использование шорткода

В начале кода регистрируем два шорткода, которые будут разделять содержание записи по столбцам. Самый первый шорткод column непосредственно создает сами столбцы:

add_shortcode( 'column', 'column_shortcode' );

а clear служит для того, чтобы каждый следующий столбец обтекал предыдущий с правой стороны, а не располагался сразу под ним:

add_shortcode( 'clear', 'clear_floats_shortcode' );

Параметру column можно задавать два параметра: ширина столбца и отступ от следующего столбца. Ширину столбца можно указывать как в пикселях, так и в процентах. Параметру spacing, который добавляет каждой колонке отступ с правой стороны, тоже можно задавать параметр как в пикселах, так и в процентах. Если вы решили выбрать в качестве параметра проценты, то не забывайте, что сумма ширин всех колонок и отступов не должны превышать 100%. Таким образом, вы можете задавать любое количество колонок, какое вам необходимо. Хочу обратить внимание на то, что последней колонке в параметрах для spacing нужно указать значение интервала “0″, либо вообще его не использовать, так как по-умолчанию отступ равен “0″. Вы же не хотите, чтобы у самой последней крайней колонки был лишний отступ?

Теперь я приведу пример создания двух колонок одинаковой ширины.

[column width='48%' spacing='4%']
Ваш текст.
[/column]

[column width='48%']

Ваш текст.
[/column]

[clear]

Добавив этот шорткод, получим текст, разделенный на две колонки.

Разделяем текст на три колонки

Для разделения на три колонки используйте следующий шорткод:

[column width='30.66%' spacing='4%']
Здесь ваш текст.
[/column]

[column width='30.66%' spacing='4%']
Здесь ваш текст.
[/column]

[column width='30.66%']
Здесь ваш текст.
[/column]

[clear]

В результате получим три колонки:

Надеюсь, такой оригинальный способ разбивки на колонки найдет свое достойное применения в ваших проектах.

Разбиваем контент в записях и страницах на колонки при помощи шорткода: 13 комментариев

  1. Это не с кодекса перевод? Уж больно знакомо…
    Это не претензия, наоборот молодец, полезные вещи…

    1. Restner, перевод с кодекса не дословный, а позаимствована идея и развита в статью

  2. Я как понял шорткоды служат только для разбивки текста?

    Мне нужно на главной странице сделать записи чтобы радом две стояли, а сейчас одна снизу другая….

    вот сайт vseznauka_ru

    Хочу сделать как здесь : topsensation_ru

    1. Тарас, на приведенном примере записи разбиты на колонки не при помощи шорткода, а при помощи обычной html-разметки страницы в шаблоне.

  3. А может есть визуальный редактор с кнопкой колонок?
    Кто знает, есть ли такой?

  4. Ничего не получается… Убилась уже… Все делаю, как написано в статье, в результате при просмотре выводится вместе с моим текстом – текст [column width=’48%’ spacing=’4%’], на колонки при этом не бьется…
    Даже пробовала вставлять перед своим текстом код регистрации функции))
    При этом колонки получаются! Но код регистрации тоже отображается в тексте… Ну что я делаю не так??!!

  5. Установила плагин, полезная штука, спасибо!!! Но… то ли у меня руки кривые, то ли еще что, но получается так: если вставляю шорткод, как полагается – он отображается текстом внутри контента. Если вставляю два шорткода, первый отображается в тексте, а вот второй (и все последующие) работает….
    Попробовала на разных темах, то же самое. Может, движок переустановить?
    А выкрутилась пока так: перед шорткодом колонок вставила любой шорткод и покрасила его текст в цвет фона ))) Работает, конечно, но это же не айс…

  6. Нашла, в чем проблема!!! Удалила плагин SEOPressor (все-равно он у меня с русскими словами не работает…), и все получилось! Может, кому полезна будет эта информация))

  7. Сделал как написан, работает, но одно НО: при неполно открытом окне один столбец заезжает на другой.
    anpcom_ru

    Как это исправить, помогите, если можете. На этом сайте текст при сдвиге не двигается вообще. Как это сделать?

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *