Создание таблиц в WordPress с помощью плагинов

Дата публикации:Июль 28, 2014

Таблицы остаются самым практичным способом вывести на экран большие объемы информации посетителям. К сожалению, создание таблиц вручную с помощью HTML и CSS – излишне трудоемкая задача.

К счастью, есть много прекрасных плагинов для WordPress, которые позволяют вам быстро вставить стильные таблицы в вашу область контента. В итоге вам не нужно писать самостоятельно HTML-код.

В данной статье мы покажем вам лучшие плагины для создания таблиц, доступные в WordPress.

Ultimate Tables

Ultimate Tables – бесплатный плагин WordPress, который позволяет вам вставлять таблицы в записи, на страницы, а также в другие произвольные типы записей.

Плагин предлагает шесть разных стилей. Вы можете также определить свой собственный класс или убрать стилизацию таблицы. Таблицы настраиваются на странице параметров. Здесь вы можете задать кол-во строк и столбцов, ввести текст или HTML в ячейки. Строки и столбцы могут быть переупорядочены по номеру.

ultimate-tables-configuration

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

ultimate-tables-example

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

В целом, я был впечатлен Ultimate Tables, однако мне кажется, что есть и лучшие альтернативы, если нужно больше настроек.

TablePress

Ранее известный как WP-Table Reloaded, плагин TablePress – один из лучших плагинов для создания таблиц в WordPress.

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

tablepress-add-new

Столбцы и строки могут перемещаться, добавляться и дублироваться. Ячейки могут выделяться и объединяться в более крупные. Одна из прекрасных особенностей плагина – возможность выбора ячейки и добавления в нее контента с помощью расширенного редактора. Вы можете стилизовать контент, вставлять изображения.

К таблице можно добавить хэдер и футер. Есть опция добавления дополнительных цветов строк и выделения строк при наведении мыши.

tablepress-new-table

TablePress включает в себя функциональность поиска и сортировки, строки таблицы могут быть разбиты по страницам. Произвольные CSS стили могут быть добавлены на странице настроек плагина и затем вызваны в области параметров для отдельных таблиц. Однако вас не разочарует и стандартный дизайн:

tablepress-example

TablePress – одно из лучших табличных решений, доступных пользователям WordPress. Это неплохой вариант для профессионалов, которые обязательно отметят для себя возможность импорта и экспорта данных с помощью CSV, HTML и JSON. Рекомендуем.

Easy Table

Easy Table работает несколько иначе, нежели другие плагины таблиц. Плагин позволяет вам добавлять контент в записи и страницы, используя формат CSV. Поэтому, вместо ввода вашего контента в ячейки, вам нужно разделять столбцы запятыми и добавлять новые ряды в таблицу, располагая контент с новой строки.

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

easy-table-general-options

Плагин Easy Table предлагает подробные инструкции о том, как выжать из него максимум. Столбец с правой стороны экрана в области параметров разъясняет все предлагаемые настройки. В самом низу есть примеры того, как использовать эти параметры для создания таблиц. Также имеется тестовая зона, в которой вы можете попрактиковаться в создании таблиц.

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

easy-table-example

Как только вы поймете, как добавлять таблицы с помощью Easy Table, вы действительно оцените эффективность этого плагина. Я рекомендую проверить его, если вы считаете процесс добавления таблиц через страницы настроек слишком длительным.

Websimon Tables

Websimon Tables – бесплатный плагин для создания таблиц в WordPress, который позволяет вам создавать HTML таблицы в панели администратора.

Новая таблица создается путем задания ее имени, числа строк и столбцов. Также вы можете загрузить таблицу в CSV-формате.

websimon-tables-settings

Плагин обладает большим количеством разных стилевых опций. В нем имеется десять стандартных скинов, которые вы можете выбирать на странице настроек. Также вы можете создавать и свой собственный скин.

Плагин позволяет вам изменять ширину столбцов, отступы, а также края. Дополнительная стилизация, такая как эффекты тени CSS3, границы, футеры, также могут быть заданы.

websimon-tables-example

Websimon Tables – простой, но в то же время функциональный плагин для создания таблиц, который имеет все необходимое, чтобы быстро вставить таблицу на сайт.

FooTable

FooTable – бесплатный плагин для создания таблиц в WordPress. Он не поможет вам добавить новые HTML таблицы. Все, что делает плагин – это улучшает уже существующие HTML-таблицы.

Он сделает ваши HTML таблицы дружественными к мобильным устройствам, сбавив число выводимых столбцов, а также позволив мобильным пользователям раскрывать уменьшенную таблицу для просмотра содержимого столбцов. Также плагин добавляет сортировку, фильтрацию и пагинацию. Три стилевых варианта доступны в плагине, есть возможность задания своих собственных стилей.

footable-settings

FooTable преобразует HTML-таблицы и придает им более профессиональное представление. Демо-область позволяет вам просматривать то, как будут выглядеть ваши таблицы на настольных ПК, планшетах и мобильных телефонах.

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

footable-example

Интересная особенность плагина – он имеет родную поддержку TablePress. Это позволяет вам добавлять таблицы в TablePress и затем делать их адаптивными в FooTable.

League Table

League Table – премиальный плагин для создания таблиц (12$). Он был разработан для создания таблиц лиг, ладдеров, разнообразных таблиц лидеров и т.д. Несмотря на то что плагин называется League Table, т.е. ориентирован на создание таблиц для разных лиг, он вполне может использоваться и для создания любого типа таблиц.

league-table

Мне нравится дизайн таблиц, которые создает плагин League Table. Дизайн достаточно чистый, данные могут быть сортированы по любому столбцу. Таблицы оптимизированы под разные устройства.

league-table-example

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

wpDataTables

wpDataTables (продается за 25$) – самый дорогой табличный плагин в этой статье; однако он, возможно, является самым универсальным плагином.

Плагин позволяет вам создавать таблицы и управлять ими в консоли WordPress. Данные могут вводиться вручную или вставляться через CSV, Excel, MySQL запрос, XML или JSON. Использование запроса MySQL позволит вам выводить таблицы, состоящие из нескольких тысяч строк. Не так много плагинов, которые вообще способны это делать.

wpdatatables-settings

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

По моему мнению, таблицы wpDataTables генерирует просто великолепные. Они оптимизированы под планшеты, смартфоны, прекрасно выглядят на любом устройстве.

wpdatatables-example

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

Я надеюсь, что вам понравился вид предложенных таблиц в WordPress. Если вы знаете другие хорошие плагины, которые помогают создавать HTML таблицы, пожалуйста, поделитесь ими в комментариях!

Источник: elegantthemes.com/blog

Поделиться

15 комментариев

  1. Супер, огромное спасибо, вы мне очень помогли.

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

  3. Спасибо за подробный список плагинов, не думал что их так много есть для создание таблиц. Сам использую TablePress.

  4. Uladzimir says:

    Добрый день, спасибо за великолепный подбор, может подскажите плагин в котором можно сделать выпадающий список в ячейке?

    • Дмитрий Алёшин says:

      Про такую опцию не слышал, наверно в данном случае придется через код прописывать… ul li, если нужен обычный список, ненумерованный. А вот выпадающий — нет, такого не видел.

      • Дмитрий Алёшин says:

        Видел только, что TablePress этого делать НЕ может. Задавали похожий вопрос на форумах WordPress, и там ответили разработчики, что такой опции нет. А это самый мощный плагин из всех…

  5. Uladzimir says:

    Дмитрий, спасибо за оперативный ответ))
    пару дней уже потратил на реализацию этого вопроса на платформе плагина TablePress, добился желаемого результата только с первым столбцом А все как часики) но с другими столбцами караул…
    выложу скрипт на вашем сайте может кому пригодится и быть может доведет до ума мои начинания))
    изменения вносились в фаил view-edit.php с 314 строчки:

    $row_data ) {
    $row = $row_idx + 1;
    $classes = array();
    if ( $row_idx % 2 == 0 ) {
    $classes[] = ‘odd’;
    }
    if ( $head_row_idx == $row_idx ) {
    $classes[] = ‘head-row’;
    } elseif ( $foot_row_idx == $row_idx ) {
    $classes[] = ‘foot-row’;
    }
    if ( 0 === $visibility[‘rows’][ $row_idx ] ) {
    $classes[] = ‘row-hidden’;
    }
    $row_class = ( ! empty( $classes ) ) ? ‘ class=»‘ . implode( ‘ ‘, $classes ) . ‘»‘ : »;
    echo «\t\t\n»;
    echo «\t\t\t{$row}»;
    echo «»;
    $my_array=array(1=>array(‘value’=>’ — ‘,
    ‘name’=>’Россия-Россия’),
    2=>array(‘value’=>’ — ‘,
    ‘name’=>’Россия-Беларусь’),
    3=>array(‘value’=>’ — ‘,
    ‘name’=>’Россия-Украина’),
    4=>array(‘value’=>’ — ‘,
    ‘name’=>’Украина-Россия’),
    5=>array(‘value’=>’ — ‘,
    ‘name’=>’Украина-Украина’),
    6=>array(‘value’=>’ — ‘,
    ‘name’=>’Украина-Беларусь’),
    7=>array(‘value’=>’ — ‘,
    ‘name’=>’Беларусь-Беларусь’),
    8=>array(‘value’=>’ — ‘,
    ‘name’=>’Беларусь-Украина’),
    9=>array(‘value’=>’ — ‘,
    ‘name’=>’Беларусь-Россия’));

    foreach ( $row_data as $col_idx => $cell ) {
    $column = TablePress::number_to_letter( $col_idx + 1 );
    $column_class = »;
    if ( 0 === $visibility[‘columns’][ $col_idx ] ) {
    $column_class = ‘ class=»column-hidden»‘;
    }
    $cell = esc_textarea( $cell ); // sanitize, so that HTML is possible in table cells
    echo «»;
    if ($i==0)
    {
    if (substr_count ($cell,’страна’)>0 or substr_count ($cell,’Страна’)>0)
    {
    $selectede=’true’;
    }
    else
    {
    $selectede=’false’;
    }
    }
    if ($column==’A’ and $i>0 and $selectede==’true’):
    echo «»;
    echo ‘Пусто’;
    foreach ($my_array as $my_value)
    {
    if (strcmp(htmlspecialchars($my_value[‘value’]),$cell)==0)
    echo ».$my_value[‘name’].»;
    else
    echo ».$my_value[‘name’].»;

    }
    echo «{$cell}»;
    else:
    echo «{$cell}»;
    endif;
    $i++;
    }
    echo «{$row}\n»;
    echo «\t\t\n»;
    }
    ?>

  6. Дмитрий Алёшин says:

    Ок, спасибо! Посмотрим, покопаемся всем миром.

  7. Дмитрий says:

    скажите ,можете ли вы назвать с помощью каких средств на вордпресс реализована данная функция с бронированием по времени и таким визуалом?https://karantinum.ru/yantar/

    • Дмитрий says:

      Обычно такая система разрабатывается на заказ под сайт, однако есть готовые плагины, которые несут в себе подобный функционал. Бесплатные плагины доступны по ссылке: https://wordpress.org/plugins/tags/reservation-plugin. Смотрите, их много. Каждый по-своему это реализует.
      Есть также платные плагины, их нужно искать на рынке Themeforest по запросу ‘booking’ или ‘reservation’.

  8. Дмитрий says:

    Спасибо

  9. Дмитрий says:

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

  10. Дмитрий says:

    Есть такая:

    https://wordpress.org/plugins/brs-booking-reservation-system-woocommerce/

    Есть такая:

    https://wordpress.org/plugins/woocommerce-easy-booking-system/

    Какая именно там используется, не знаю.

  11. Юрий says:

    Вечер добрый! Подскажите пожалуйста как сделать адаптивную версию таблицы tablepress

  12. Lico says:

    Ребята как добиться в WordPressTable выделения сеткой каждой ячейки?

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

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