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]

Отзывы

Great plugin would be even better with Toolset support

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! 🙂

Great Columns Plugin! — Mini-Tutorial Here!

Easy to use! 1. Goto Post: Click "TEXT" editor tab and Copy your original One column text/links 2. Click "Visual" editor and scroll down just past your original text/links and add an "Horizontal Line" so there is a safe space to add your new columns Before you go back and delete the original one-column text/links. 3. Click the TinyMice editor to add your new text/links to the Lightweight Grid Columns pop-out editor box. 4.Paste all your code in the pop-out box. Do Not click "last column". 5.Set your columns ie; 25%-Desktop, 50%-Tablets, 100%-small phones which will equal 4 columns on Desktops, 2 columns on Tablets and One column on iphones, androids. 5.Now, go back to VISUAL and delete 2,3 and 4 parts of your column just keeping the code for the first part. 6. Repeat this process by pasting all your code but keeping the 2nd part of the column but delete the 1st, 3rd and 4th. 7. Do again, paste all the code but delete the 1st, 2nd and 4th part. 8. Ok, now on this last one, paste all the original code again and just delete sections 1, 2 and 3 but leave the 4th part AND make sure to check the "last column" tickbox in the TinyMice editor for the plugin when you add all the code again. This defines the 4th column as the last. --I know it sounds confusing but it's really easy and worked great for me. Cheers!

Everytime I turn around it’s GeneratePress

Were you born this cleaver or was it acquired?? You have saved me hundreds of dollars and proved to me that self-built using your foundation is better and cheaper in the long run that buying annual subscriptions to one domain wordpress solutions. I especially have come to love the agility your foundation offers if I am willing to put in the work. One quickly learns "nothing is free" and WordPress needs constant attention and nurturing that you will either pay for (as a developer or client) or learn to support yourself. Tom, thank you and the other unnamed GeneratePress people that have helped deliver an exceptional product. A word of caution: it helps to have a firm foundation in HTML5 and CSS3; a good working knowledge of PHP and JQuery; a good sense of humour and the understanding you will be generally out there on your own. Jeff
Посмотреть все 37 отзывов

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

«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

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