Июл
13

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

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

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.


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

Добавьте следующий код в файл 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]

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

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.

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

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

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

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

[clear]

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

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.

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

VN:F [1.9.16_1159]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.16_1159]
Rating: 0 (from 0 votes)

Понравилась статья? Поделитесь ею в социальных сервисах!

Подпишитесь на обновление блога!

Ваш e-mail:

Понравилась статья? Вы не хотите пропускать новые статьи, посвященные Wordpress? Тогда подпишитесь на RSS или на электронный ящик и получайте новые статьи мгновенно! Также можете следить за мной в Twitter.

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

  • Нет аватара
    Restner 13.09.2011 в 12:22

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

    VA:F [1.9.16_1159]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.16_1159]
    Rating: 0 (from 0 votes)
  • Нет аватара
    Тарас 22.09.2011 в 21:32

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

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

    вот сайт http://vseznauka.ru/

    Хочу сделать как здесь : http://topsensation.ru/

    VA:F [1.9.16_1159]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.16_1159]
    Rating: 0 (from 0 votes)
  • Нет аватара
    Vadimon 23.09.2011 в 14:13

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

    VN:F [1.9.16_1159]
    Rating: 0.0/5 (0 votes cast)
    VN:F [1.9.16_1159]
    Rating: 0 (from 0 votes)
  • Нет аватара
    Vadimon 23.09.2011 в 14:14

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

    VN:F [1.9.16_1159]
    Rating: 0.0/5 (0 votes cast)
    VN:F [1.9.16_1159]
    Rating: 0 (from 0 votes)
  • Нет аватара
    Василиус 05.10.2011 в 14:20

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

    VA:F [1.9.16_1159]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.16_1159]
    Rating: 0 (from 0 votes)
  • Нет аватара
    Александр 07.12.2011 в 17:33

    Благодарю за подробное описание

    VA:F [1.9.16_1159]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.16_1159]
    Rating: 0 (from 0 votes)
  • Нет аватара
    Светлана 04.02.2012 в 19:25

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

    VA:F [1.9.16_1159]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.16_1159]
    Rating: 0 (from 0 votes)
    • Нет аватара
      Vadimon 04.02.2012 в 23:06

      Попробуйте плагин Shortcodes Ultimate: http://wordpressadmin.ru/plugins/shortcodes-ultimate-plugin/. Никаких редактирований кода не надо, плагин имеет возможность разбивать запись на колонки.

      VN:F [1.9.16_1159]
      Rating: 0.0/5 (0 votes cast)
      VN:F [1.9.16_1159]
      Rating: 0 (from 0 votes)
      • Нет аватара
        Светлана 05.02.2012 в 21:17

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

        VA:F [1.9.16_1159]
        Rating: 0.0/5 (0 votes cast)
        VA:F [1.9.16_1159]
        Rating: 0 (from 0 votes)
        • Нет аватара
          Светлана 05.02.2012 в 21:31

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

          VA:F [1.9.16_1159]
          Rating: 0.0/5 (0 votes cast)
          VA:F [1.9.16_1159]
          Rating: 0 (from 0 votes)
  • Нет аватара
    Лена 23.03.2012 в 18:49

    Очень пригодился пост :) Написано очень хорошо и доступно, спасибо!

    VA:F [1.9.16_1159]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.16_1159]
    Rating: 0 (from 0 votes)
  • Нет аватара
    Виталий 29.03.2012 в 15:58

    Спасибо! Очень класный код. Всем советую!

    VA:F [1.9.16_1159]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.16_1159]
    Rating: 0 (from 0 votes)
  • Нет аватара
    Андрей 22.11.2012 в 23:18

    Сделал как написан, работает, но одно НО: при неполно открытом окне один столбец заезжает на другой.
    http://www.anpcom.ru

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

    VA:F [1.9.16_1159]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.16_1159]
    Rating: 0 (from 0 votes)

Оставить комментарий

Вы можете использовать следующие теги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Получать новые комментарии по электронной почте. Вы можете подписаться без комментирования.

Блог про wordpress и все, что с ним связано – возможности системы, секреты и хаки, плагины, шаблоны, оптимизация, seo, безопасность и т.п. Проект для начинающих и продвинутых пользователей.

Если хотите быстро и оперативно получать последние новости и статьи, то рекомендуем подписаться на обновления блога по E-mail:

E-mail:

Последние комментарии

Друзья проекта