Разбиваем контент в записях и страницах на колонки при помощи шорткода
После того, как я опубликовал предыдущий пост о том как работать с шорткодами в 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 комментариев
Это не с кодекса перевод? Уж больно знакомо…
Это не претензия, наоборот молодец, полезные вещи…
Restner, перевод с кодекса не дословный, а позаимствована идея и развита в статью
Я как понял шорткоды служат только для разбивки текста?
Мне нужно на главной странице сделать записи чтобы радом две стояли, а сейчас одна снизу другая….
вот сайт vseznauka_ru
Хочу сделать как здесь : topsensation_ru
Тарас, на приведенном примере записи разбиты на колонки не при помощи шорткода, а при помощи обычной html-разметки страницы в шаблоне.
А может есть визуальный редактор с кнопкой колонок?
Кто знает, есть ли такой?
Благодарю за подробное описание
Ничего не получается… Убилась уже… Все делаю, как написано в статье, в результате при просмотре выводится вместе с моим текстом – текст [column width=’48%’ spacing=’4%’], на колонки при этом не бьется…
Даже пробовала вставлять перед своим текстом код регистрации функции))
При этом колонки получаются! Но код регистрации тоже отображается в тексте… Ну что я делаю не так??!!
Попробуйте плагин Shortcodes Ultimate: https://wordpressadmin.ru/plugins/shortcodes-ultimate-plugin/. Никаких редактирований кода не надо, плагин имеет возможность разбивать запись на колонки.
Установила плагин, полезная штука, спасибо!!! Но… то ли у меня руки кривые, то ли еще что, но получается так: если вставляю шорткод, как полагается – он отображается текстом внутри контента. Если вставляю два шорткода, первый отображается в тексте, а вот второй (и все последующие) работает….
Попробовала на разных темах, то же самое. Может, движок переустановить?
А выкрутилась пока так: перед шорткодом колонок вставила любой шорткод и покрасила его текст в цвет фона ))) Работает, конечно, но это же не айс…
Нашла, в чем проблема!!! Удалила плагин SEOPressor (все-равно он у меня с русскими словами не работает…), и все получилось! Может, кому полезна будет эта информация))
Очень пригодился пост 🙂 Написано очень хорошо и доступно, спасибо!
Спасибо! Очень классный код. Всем советую!
Сделал как написан, работает, но одно НО: при неполно открытом окне один столбец заезжает на другой.
anpcom_ru
Как это исправить, помогите, если можете. На этом сайте текст при сдвиге не двигается вообще. Как это сделать?