Как добавить в WordPress красивые адаптивные таблички? Все способы и плагины…

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

ПОСЛЕДНИЙ ОБЗОР ПЛАГИНОВ ТАБЛИЦ ДЛЯ WORDPRESS:

5 лучших плагинов красивых, бесплатных, адаптивных таблиц для WordPress

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

Какие плагины для создания красивых адаптивных таблиц я выбрал для себя

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

Итак, я решил, что сам буду использовать два варианта:

• TinyMCE Advanced. Это не плагин для создания таблиц, а визуальный редактор, но с его помощью легко создавать и вставлять таблички в посты. Таблички неадаптивные, поэтому его можно использовать только для создания небольших табличек с числами. Дизайн изначально симпатичный и его можно настраивать. Да и сам по себе редактор намного лучше базового визуального редактора в Вордпресс;
• TablePress. Самый популярный и часто обновляемый. Дизайн надо настраивать самому. Чтобы таблицы стали адаптивными, необходимо устанавливать дополнительный плагин Responsive Tables. Не могу сказать, что мне этот плагин очень нравится, но это лучшее решение, меньшее из зол.

Ниже приводятся более подробные результаты моих поисков плагинов, а также описаны другие способы создания таблиц в Вордпрессе.

Обычные адаптивные таблицы для WordPress-сайта

 TablePress. Самый популярный плагин, позволяющий добавлять в Вордпресс красивые таблички, – это TablePress. У него около 3000 отличных отзывов и 500 000 активных установок. Это был самый первый плагин, который я посмотрел, и мне он сначала не понравился, так как он предлагает только один базовый дизайн, который, на мой взгляд, не является красивым. Базовый дизайн таблички видно на рисунке снизу. Кроме того, мне использование этого плагина показалось не очень удобным. Но после того как я пересмотрел много других плагинов, я понял, что этот плагин не так уж и плох по сравнению с другими и, потратив время на его освоение, вы сможете сделать то, что требуется – дизайн можно менять css-кодом, и на сайте разработчика есть подробные инструкции, как это сделать: документация, часто задаваемые вопросы. Эти документы на английском языке, читайте их при помощи переводчика Гугл.

Плагин создает неадаптивные таблички, и чтобы превратить таблички в адаптивные, надо установить дополнительный бесплатный плагин Responsive Tables, который можно скачать только по этой ссылке, на сайте wordpress.org его нет. Я сначала подумал, что он платный, но это просто автор просит перечислить ему донейшн $9, а скачать плагин можно бесплатно. После установки обоих плагинов у вас в админке в левом вертикальном меню появится ссылка TablePress, вам там нужно будет создать новую таблицу и вставить ее код вида table id=1 / в пост. Если вы хотите превратить таблицу в адаптивную, то вам надо добавить дополнительный код (выделен жирным): table id=1 responsive=scroll /. При этом режим адаптивности “scroll” можно поменять на “flip” или “collapse”, как изменится при этом адаптивная табличка, смотрите демо здесь: Responsive Tables.

Если вы хотите зафиксировать ширину столбцов, то Вам надо так поменять код таблицы: table id=1 column_widths=”40px|50px|30px|40px” responsive=scroll /. Если вам надо изменить цвет строки-заголовка, то тогда вам надо вставить следующий CSS-код в специальную форму в настройках таблицы: .tablepress thead th, .tablepress tfoot th { background-color: #ff0000; }. Вставьте вместо #ff0000 свой цвет. Вот базовый дизайн таблицы TablePress:

 Easy Table. 90 000 активных установок. 70 отличных отзывов. Таблички неадаптивные, но при уменьшении ширины браузера появляется полоса прокрутки, что, в принципе, приемлемо. Таблички создаются легко. Дизайн не супер, но в крайнем случае можно использовать, кроме того, можно самостоятельно настраивать внешний вид при помощи CSS, чем я заниматься бы не хотел, хочется брать готовые красивые таблицы. Мне не очень понравилось, что таблички надо создавать в CSV-формате, но в крайнем случае можно пользоваться и этим плагином. Вот как выглядит табличка по умолчанию (в принципе, ничего):

 wpDataTables. Бесплатная версия неадаптивна, платная версия стоит $35 (купить можно здесь: wpDatatables). По последней ссылке есть демо адаптивной таблички, так вот, когда я проверял эту демо-табличку, то адаптивность не сработала, табличка не поместилась на узком экране. Дизайн на меня впечатления не произвел, но понравилось, что можно создавать графики. На сайте wordpress.org всего 10 000 активных установок и 15 хороших отзывов. Не впечатляет, пользоваться не буду! Но позже я обнаружил, что на популярном американском сайте www.wpexplorer.com этот плагин расхвалили как плагин месяца и один из лучших для создания таблиц. Я еще раз проверил демо таблицы на адаптивность – обрезаются все столбцы при сужении экрана(. Дизайн мне не нравится. Проверял опять здесь на сайте CodeCanyon: wpDatatables. На этом сайте плагин продан около 10 000 раз и при этом имеет около 500 хороших отзывов. Может, все-таки я ошибаюсь – адаптивность работает, и таблицы очень красивые?  🙄

 Shortcodes Ultimate. 600 000 активных загрузок. Около 3500 отличных отзывов. Что очень радует, плагин создан нашим соотечественником Владимиром Анохиным. Отличный плагин, если вам требуется вставить на сайт какой-либо так называемый шорткод (владки, буквицу, красивый список, ярлык, кнопку и т.д.). С его помощью можно также вставить и табличку. Предустановленных дизайнов нет, надо настраивать дизайн самостоятельно. Таблички получаются неадаптивные. Вставлять их надо в виде HTML, что неудобно. Я не буду его использовать, так как шаблонов красивых таблиц там нет, и я не нашел, как вставить просто иконку, хотя мне это тоже нужно было. К тому же следующий плагин-редактор лучше, на мой взгляд.

 TinyMCE Advanced. Это не плагин для создания табличек, а продвинутый редактор текстов, который позволяет очень много что сделать. В дополнение ко всему можно вставлять таблички с его помощью. Мне этот инструмент создания табличек очень понравился, так как там все понятно и очевидно, я легко поменял фон и цвет границ и за 1 минуту создал красивую табличку, не покидая свой пост. Одна досада – табличка получилась неадаптивная! Мне очень жаль, так как я готов был остановить свой выбор на этом плагине. И хотя в этом редакторе можно создавать небольшие таблички, придется искать решение для создания больших табличек дальше(… Вот, как выглядит созданная мною табличка за 1 минуту:

 Data Tables Generator by Supsystic. 10 000 активных установок, около 200 хороших отзывов со средним баллом 4.9. Я прочитал хороший отзыв об этом плагине в статье How to Create Responsive Tables in WordPress That Don’t Suck. Таблицы действительно получаются адаптивными, но выглядят не очень хорошо на маленьких экранах. В плагине есть несколько режимов адаптивности: стандартный режим (столбцы идут один под другим на маленьких экранах), режим автоматического скрывания столбцов, режим горизонтальной прокрутки. Более или менее приемлемо выглядит режим горизонтальной прокрутки, остальные режимы смотрятся очень убого. Встроенных шаблонов нет, но дизайн можно настраивать самостоятельно, меняя цвет фона ячеек. В настройках можно поменять язык плагина на русский. В платной версии можно добавить построение графиков и диаграмм. В целом плагин приемлемый, можно пользоваться, но он мне не понравился, пользоваться им неприятно что ли, требуемых задач он не решает. Но тем не менее рекомендовать его к использованию можно.

Плагины, которые превращают обычные таблицы WP-сайта в адаптивные

Да, есть плагины, после установки которых все таблицы на вашем сайте превращаются в адаптивные. Я нашел несколько вариантов:

 Magic Liquidizer Responsive Table. 10 000 активных установок, 30 хороших отзывов со средним баллом 4.6. Этот плагин действительно делает таблицы адаптивными, но делает это очень криво. Вместо того, чтобы расположить один столбец под другим, он из первой строки с заголовками сделал столбец и из всех других строк он сделал столбцы, и разместил их один под другим. Я думаю, что этот плагин непригоден для использования. Я добавил его в свой обзор, так как в статье How to Create Responsive Tables in WordPress That Don’t Suck написано, что он очень хороший, и ничего лучше я не нашел.

 Automatic Responsive Tables. Мало того, что этот плагин работает так же, как и предыдущий, так у него еще всего 1000 активных установок и 5 отзывов. Обновлялся плагин больше года назад. Я добавил его в свой обзор, так как в статье How to Create Responsive Tables in WordPress That Don’t Suck написано, что он очень хороший, и ничего лучше я не нашел. Не знаю, мне такое не подходит.

 Responsive Scrolling Tables. 1000 установок, 8 хороших отзывов, обновлялся более, чем два года назад. Плагин создает горизонтальную полосу прокрутки для таблиц с фиксированной шириной столбцов. На удивление, он сработал очень хорошо, добавил красивую полосу прокрутки. И в статье How to Create Responsive Tables in WordPress That Don’t Suck написано, что он очень хороший. Я сам им пользоваться не буду, т.е. мне не нравится, что он заброшенный и непопулярный, и его надо бы побольше потестировать, но тем не менее его можно рассматривать как вариант.

Список лучших адаптивных табличек с ценами (прайс-листами) для WP-сайта

Таблички с прайс-листами я не тестировал, так как они мне пока были не нужны. Однако в процессе поиска обычных адаптивных таблиц я собрал список плагинов для установки таблиц прайс-листов на сайт WordPress. В мой список попали только плагины с красивыми табличками, большим количеством активных установок и хороших отзывов. Также я старался смотреть, чтобы плагин не был заброшенным, последний раз обновлялся не так уж давно.
 Easy Pricing Tables. Хороший бесплатный плагин для создания красивых табличек с прайс-листами. Я проверил демо таблиц этого плагина, таблички адаптивные и их адаптивные версии смотрятся очень красиво. У него 30 000 активных установок и 76 очень хороших отзывов. Да и таблички на скриншотах красивые! Еще мне понравилось, что в него уже встроена возможность отслеживать как конверсию в Гугл Аналитикс нажатием кнопки в таблице, но эта опция есть только в платной версии за $59.

Вот еще плагины красивых адаптивных таблиц с ценами:

• Pricing Table by Supsystic (бесплатен, 10000 активных установок, около 100 отзывов со средним баллом 4.5);
• Responsive Pricing Table (бесплатен, 10000 активных установок, около 50 отзывов со средним баллом 4.5);
• CSS3 Responsive WordPress Compare Pricing Tables ($19, 10000 продаж, более 1100 отзывов со средним баллом 4.5);
• Pure CSS Responsive Pricing Tables for WordPress ($18, 1000 продаж, более 250 отзывов со средним баллом 4.0);
• Go Pricing – WordPress Responsive Pricing Tables ($25, 8000 продаж, более 1000 отзывов со средним баллом 4.6).

Другие решения по созданию таблиц в WordPress

• можно найти тему WordPress с уже встроенными красивыми табличками. Это самый простой вариант, но тему, чтобы она всем устраивала и в ней были хорошие таблички, надо еще поискать. Если вы знаете красивые и функциональные темы с хорошими табличками, поделитесь, пожалуйста, в комментариях;
• можно верстать таблицы вручную. Мне это решение не очень подходит, но многие авторы пишут, что это очень просто. Не спорю, это просто, но я бы хотел концентрировать свое внимание больше на создании контента для таблицы, чем на создании таблицы. Тем более когда возникают ошибки в коде, то порой очень много времени уходит на их поиск и устранение. Как верстать адаптивные таблички, написано в этих статьях на английском языке:
  • How to Create Responsive Tables in WordPress That Don’t Suck;
  • How to Create Responsive Tables in WordPress.

Какие еще плагины и способы создания адаптивных таблиц вы знаете? Поделитесь, пожалуйста, в комментариях.