Lightweight Grid Columns

Описание

Плагин Lightweight Grid Columns очень прост в использовании. Установите и активируйте плагин. Управление колонками доступно через визуальный редактор — просто нажмите отдельную кнопку в редакторе и задайте свои размеры колонкам (см. пример на картинках).

Укажите размеры для экрана стационарного компьютера, планшета и мобильного устройства, добавьте ваш контент, а затем вставьте шорткод на страницу.

Плагин Lightweight Grid Columns работает на основе фреймворка Unsemantic Framework: (http://unsemantic.com/)

Присоединяйтесь к GeneratePress, у нас очень много хороших тем для WordPress! (https://wordpress.org/themes/generatepress)

Плагин позволяет:

  • Задавать ширину колонок для экранов стационарных компьютеров
  • Задавать ширину колонок для экранов планшетов
  • Задавать ширину колонок для экранов мобильных устройств
  • Добавлять классы стилей к колонкам
  • Добавить свои стили для вывода контента
  • Создавать колонки одинаковой высоты

Скриншоты

  • Иконка для вывода контента в колонках находится в панели визуального редактора TinyMCE.
  • Задаете свои размеры колонкам. а встроенный генератор шорткодов делает за вас всю работу, вставляя готовый код на страницу.
  • Колонки получаются простыми и аккуратными!

Установка

Плагин Lightweight Grid Columns можно установить двумя способами.

  1. Перейдите в меню Plugins (Плагины) в раздел Add New (Добавить новый) и задайте в строке поиска название плагина Lightweight Grid Columns.
  2. Скачайте с официального сайта WordPress.org файл плагина с расширением zip, распакуйте архив и закачайте папку с файлами с помощью FTP-клиента на хостинг в папку /wp-content/plugins/.

В большинстве случаев первый способ срабатывает без проблем и он самый простой.

Часто задаваемые вопросы

Как добавить шорткод?
  • Убедитесь, что плагин Lightweight Grid Columns активирован.
  • Во время редактирования записи или страницы, перейдите в режим визуального редактора.
  • Смотрите иконку плагина (см. вкладку «Скриншоты»).
  • Укажите нужную ширину для стационарного компьютера, планшета и мобильного устройства.
  • Если вы добавляете последнюю в ряду колонку, поставьте галочку рядом с опцией «Last» ( «Последний»).
Как быть, если я не могу использовать кнопку в редакторе TinyMCE?

Элементарно! Просто добавьте шорткод в текст контента.

Например, контент можно отображать на стационарных экранах компьютеров по 4 колонки, по 2 на планшетах и по одной на мобильных устройствах.

[lgc_column grid="25" tablet_grid="50" mobile_grid="100"]Some content[/lgc_column]

[lgc_column grid="25" tablet_grid="50" mobile_grid="100"]Some content[/lgc_column]

[lgc_column grid="25" tablet_grid="50" mobile_grid="100"]Some content[/lgc_column]

[lgc_column grid="25" tablet_grid="50" mobile_grid="100" last="true"]Some content[/lgc_column]

Проверьте, стоит ли галочка у опции «Последний» для последней колонки. Если не стоит, поставьте и не забывайте про эту галочку)

Какие значения в процентах можно указывать?

Задействовано непосредственно из (http://unsemantic.com):

При использовании плагина используются классы стилей вида grid-x, где «x» — значение ширины колонки в процентах. Значение ширины может задаваться с шагом в 5% от 5 до 100. (grid-5, grid-10 … grid-95, grid-100). Можно еще поделить страницу на три части, используя классы grid-33 и grid-66, что соответствует ширине 33.3333% и 66.6667% соответственно.

Можно ли использовать другие опции в шорткодах плагина?

Да!

Вы можете:

добавить класс

[lgc_column grid=»25″ tablet_grid=»50″ mobile_grid=»100″ class=»push-25″]Нужный текст[/lgc_column]

добавить стиль

[lgc_column grid=»25″ tablet_grid=»50″ mobile_grid=»100″ style=»padding-left:0px;»]Нужный текст[/lgc_column]

сделать колонки одинаковой высоты

По умолчанию параметр для вывода одинаковых по высоте колонок задан как «true», т.е колонки одинаковой высоты выводятся во всех случаях, пока вы сами в шорткоде не зададите опцию для отключения.

[lgc_column grid="25" tablet_grid="50" mobile_grid="100" equal_heights="true"]Some content[/lgc_column]

Отзывы

11.08.2019
The plugin does exactly what it is designed to do. Does it without all the bloat too. I use the classic editor and absolutely love this plugin:) Seems many are trying to make it over complicated. Just follow the instructions folks... I do no use Gutenburg and will not until it matures. Maybe at that time this plugin would make a great block for Gutenburg. Thank you Tom for sharing it with us!
29.11.2018
Love this plugin works really well. One really small point would be great if the button for columns showed up when editing a Toolset template, some kind of integration with Toolset. Its not a massive thing as you learn the code you can just manually write it but would be a nice little time saving update if it was integrated! 🙂
Посмотреть все 39 отзывов

Участники и разработчики

«Lightweight Grid Columns» — проект с открытым исходным кодом. В развитие плагина внесли свой вклад следующие участники:

Участники

«Lightweight Grid Columns» переведён на 6 языков. Благодарим переводчиков за их работу.

Перевести «Lightweight Grid Columns» на ваш язык.

Заинтересованы в разработке?

Посмотрите код, проверьте SVN репозиторий, или подпишитесь на журнал разработки по RSS.

Журнал изменений

1.0

  • Move custom class value to the parent container
  • Почищен код плагина

0.7

  • Fix weird scroll behavior caused by transitions and matchHeight
  • Загрузка matchHeight только на тех страницах, где используется шорткоды этого плагина.

0.6

  • Исправлена ошибка из-за которой не всегда содержимое выводилось в колонках при наличии шорткода

0.5

  • Move margin-bottom setting to inner element so style attribute can overwrite it
  • Исправлена работа функции lgc_columns_helper чтобы устранить досадную ошибку с тегами <p> и <br /> внутри шорткода.
  • Добавлена функция jQuery matchHeight чтобы выравнивать высоту колонок для лучшей отзывчивости.
  • Значительно сокращащен размер файла стилей

0.4

  • Теперь иконка плагина в визуальном редакторе TinyMCE может отображаться для всех типов записей

0.3

  • Исправлена ошибка, когда иконка плагина не отображалась в редакторе TinyMCE если были активны плагины SiteOrigin Page Builder и Black Studio TinyMCE Widget.
  • Добавлена совместимость с Internet Explorer 7 и 8 версии

0.2

  • Появилась возможность добавлять переносы строк в колонках

0.1

  • Самый первый рабочий вариант плагина