Как создавать расширенные HTML-таблицы в WordPress без программирования

WordPress остается самой популярной в мире платформой CMS с долей 43% во всей сети. Несмотря на то, что это, несомненно, одна из наиболее привлекательных функций, WordPress не обязательно является лучшей платформой, когда речь идет о создании HTML-таблиц без кодирования.

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

Gutenberg: редактор WordPress по умолчанию с табличным блоком

Во время конференции Europe WordCamp, состоявшейся в июле 2017 года, основатель WordPress Мэтт Мулленвег объявил, что редактор блоков Gutenberg станет будущим редактором WordPress. К радости многих пользователей WordPress, новый редактор пообещал включить встроенный блок таблиц.

Однако, когда Гутенберг вышел с WordPress 5.0, редактор подвергся критике за проблемы с отзывчивостью и оптимизацией на разных устройствах. Тем не менее, как и было обещано, редактор поставляется со встроенным блоком таблиц, что позволяет пользователям создавать таблицы на своем веб-сайте без необходимости кодирования.

Хотя блок таблиц Gutenberg является довольно удобным вариантом для создания HTML-таблиц в WordPress, он намного отставал от того, чтобы стать эффективным решением для построения таблиц. Он не будет предлагать самый привлекательный внешний вид, его нельзя использовать повторно, и он плохо справляется с большими базами данных.

Гутенберг — не что иное, как простой конструктор таблиц. Вы не можете использовать Gutenberg для расширенных функций таблиц HTML, таких как сортировка таблиц, фильтрация или стилизация. В общем, редактор блоков Gutenberg далек от того, чтобы стать чем-то вроде продвинутого конструктора таблиц.

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

Ninja Tables: расширенный плагин для HTML-таблиц WordPress

Еще до того, как Gutenberg был анонсирован, наши разработчики из WPManageNinja неустанно работали над созданием надежного плагина для таблиц WordPress, который позволил бы пользователям создавать таблицы без каких-либо хлопот.

27 февраля 2018 года мы выпустили таблицы Ninja в магазине плагинов WordPress, и всего за несколько месяцев Ninja Tabes достигли более 30000 активных установок! Невероятная поддержка и признательность наших пользователей также побудили нас выпустить более 45 обновлений плагинов менее чем за 2,5 года с момента первого выпуска, что сделало Ninja Tables плагином для таблиц WordPress номер один в этом процессе!

Благодаря своим динамическим функциям и удобному интерфейсу Ninja Tables теперь используется более чем 70 тысячами веб-сайтов и компаний.

Ninja Tables — это плагин для визуализации данных, который позволяет вам создавать широкий спектр таблиц для демонстрации на вашем веб-сайте. Быстрота отклика, функции, возможности настройки и сторонние интеграции делают его лучшим выбором, когда дело доходит до переноса сложных расширенных HTML-таблиц на ваш сайт WordPress.

Теперь давайте углубимся в самые продвинутые функции построения HTML-таблиц и настройки Ninja Tables.

• Пользовательский интерфейс
• Редактор таблиц
• Интеграции

Пользовательский интерфейс

После активации Ninja Tables можно найти на боковой панели панели инструментов WordPress. Как и большинство плагинов WordPress, Ninja Table предлагает пользовательский интерфейс с несколькими функциями. Давайте узнаем больше об этом!

• Все вкладки
• Инструменты и настройки
• Справка и документация

Главная/Все столы

Ninja Tables Home имеет привлекательный интерфейс со свежими предложениями. Он предоставляет вам две кнопки: одну для создания и одну для импорта.

Кнопка « Создать свою первую таблицу » приведет вас к ручному конструктору таблиц WordPress, а также вы можете « Импортировать из CSV».

Если вы решите создать таблицу с нуля, она попросит вас указать заголовок и описание во всплывающем окне. Вы также можете заметить несколько других вкладок, предлагающих различные функции импорта и интеграции. Однако бесплатная версия Ninja Tables позволит вам импортировать только через CSV или JSON и интегрировать с WP Fluent Forms.

Указав заголовок и описание , нажмите кнопку « Добавить », чтобы получить доступ к конструктору таблиц. Если он вам не нужен, вы можете пропустить поле описания.

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

В любом случае вы окажетесь в редакторе таблиц. Обратите внимание, что созданные вами таблицы можно использовать повторно , и они появятся в главном окне. Ninja Tables идентифицирует столы с помощью шорткодов. Чтобы использовать таблицу в сообщении или на странице вашего веб-сайта, вам нужно всего лишь скопировать и вставить шорткод таблицы на свою страницу или сообщение.

Инструменты и настройки

Помимо вкладки « Главная », в Ninja Table также есть вкладка « Инструменты и настройки », которая позволяет пользователям импортировать, изменять общий внешний вид , устанавливать разрешения пользователя и изменять глобальные настройки.

Инструмент импорта подходит, если вы уже использовали любой другой популярный плагин для таблиц и перешли на Ninja Table. Ninja Table имеет функцию импорта таблиц одним щелчком мыши для TablePress, Ultimate Tables и Data Tables Generator от Supsystic. Вы также можете импортировать файлы CSV на этой вкладке.

Далее, вкладка Global Appearance позволяет вам изменять стили таблиц. Столы Ninja могут импровизировать ваши столы, используя три разных стиля пользовательского интерфейса стола. Вы также можете настроить каждый стиль в соответствии со своими предпочтениями и выбрать, разрешать ли посетителям искать и фильтровать ваши таблицы. Однако правила внешнего вида также могут быть изменены для каждой таблицы отдельно.

К сожалению, вы не можете установить разрешение для разных внутренних пользователей, если у вас нет профессиональной версии Ninja Tables. На оставшейся вкладке можно выбрать, как будут обрабатываться ошибки Javascript , а также очистить кэш таблиц .

Справка и документация

Широкий спектр функций Ninja Tables требует надежной документации, и наша команда подготовила все, что вам нужно знать о Ninja Tables.

Наш интерфейс справки и документации предлагает хорошо документированное руководство пользователя для более глубокого понимания возможностей Ninja Tables. И если вы все еще сталкиваетесь с какими-либо проблемами, вы всегда можете связаться с нами, отправив заявку в службу поддержки!

Теперь, когда вы узнали о пользовательском интерфейсе, вам наверняка захочется создать таблицу! Так что вернитесь в Дом и начните создавать его!

Редактор таблиц

Редактор таблиц — одна из самых интересных вещей в Ninja Tables. Он дополняется некоторыми из самых продвинутых функций конструктора HTML-таблиц, а также настройками. Нажав кнопку « Добавить » или «Импорт», вы попадете в хорошо продуманный редактор таблиц Ninja Tables.

Пользовательский интерфейс построителя таблиц Ninja Tables состоит из разделов, показанных выше. Каждый раздел конструктора таблиц имеет несколько функций настройки для создания и оформления красивых HTML-таблиц WordPress.

Вы можете изменить заголовок и описание таблицы, а также установить заголовок таблицы , нажав кнопку « Изменить » вверху. Кроме того, пользовательский интерфейс построителя таблиц Ninja Tables также позволяет вам просматривать свою таблицу в любое время.

• Строки таблицы
• Конфигурация
• Дизайн
• Редактирование интерфейса
• Пользовательские CSS
• Импорт Экспорт

Давайте обсудим функции конструктора таблиц одну за другой.

Строки таблицы

Строки таблицы — один из фундаментальных аспектов любого конструктора HTML-таблиц в WordPress. Как говорится, вы можете начать работу, нажав кнопку « Добавить столбец »!

Кнопка откроет окно создания столбца, которое предоставляет некоторые из самых продвинутых функций таблицы HTML в WordPress. Ninja Tables — это не просто простой конструктор таблиц со средними возможностями создания столбцов; это намного больше.

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

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

А если вам все еще нужен больший контроль над столбцами таблицы, вы можете разблокировать Дополнительные настройки , Условные настройки и Значение преобразования , доступные на других вкладках настройки столбцов. Ознакомьтесь с документацией Ninja Tables для получения дополнительной информации о том, как они работают.

После добавления столбцов таблицы в редакторе появится кнопка « Добавить данные ». Это позволяет вам легко добавлять данные на ваш сайт. Вы можете настроить столбцы отдельно, щелкнув значок шестеренки рядом с заголовком столбца, и редактировать, дублировать или удалять данные в любое время!

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

Конфигурация стола

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

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

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

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

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

Конфигурация кнопок позволяет включить кнопку «Печать» или «Импорт CSV» (функция Pro). Языковые настройки полезны, если вы хотите использовать другой язык для панели поиска таблицы, заполнителя поиска или заголовка раскрывающегося списка поиска.

Дизайн стола

Ninja Tables Table Design — это невероятный визуальный кастомайзер. Он имеет три библиотеки стилей с девятью функциями настройки стилей, что дает вам максимальный визуальный контроль над вашими HTML-таблицами в WordPress.

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

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

А если вы не можете определиться с настройкой цвета, Ninja Table поставляется с тринадцатью предопределенными цветовыми схемами для ваших столов! Однако для этой невероятной функции требуется премиум-версия.

На оставшейся вкладке дизайна таблицы представлены различные функции настройки, такие как нумерация страниц, положение панели поиска, метод сортировки, и вы можете указать дополнительный класс CSS для дизайна таблицы.

Редактирование внешнего интерфейса

Редактирование внешнего интерфейса — еще одна показательная причина, по которой Ninja Tables — это больше, чем плагин для таблиц. Это позволяет вам включить редактирование для вашего внешнего пользователя. Например, если вам нужно, чтобы ваши пользователи заполняли данные таблицы, вы можете облегчить редактирование внешнего интерфейса. Однако функция редактирования внешнего интерфейса доступна только в премиум-версии.

Пользовательский CSS/JS

Пользовательский CSS позволяет вам контролировать внешний вид HTML в WordPress, а в случае плагина дает вам контроль над вашими таблицами. Хотя статья предназначена для непрограммистов, знание CSS и Javascript может дать вам полный контроль над внешним видом таблиц Ninja.

Импорт Экспорт

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

Интеграции

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

• Интеграция с Fluent Forms
• Сообщения WP
• WooCommerce
• Google Таблицы
• Графики ниндзя

Свободная интеграция форм

Как владелец веб-сайта, вы, вероятно, используете плагин формы на своем веб-сайте. Что, если вы хотите перенести записи формы в таблицу? Ninja Tables использует ваши записи формы для создания и отображения таблицы, не требуя от вас ничего, кроме настройки таблицы.

WP Fluent Forms — лучший в мире плагин контактной формы на данный момент, и если вы использовали плагин для сбора данных от своей аудитории, вы можете перенести их в свои таблицы WordPress, не прилагая особых усилий.

Интеграция WP Posts

Ninja Tables не просто переносит записи из контактной формы в таблицы. Он также может организовать все ваши сообщения, продукты, страницы и многое другое в таблицу за несколько кликов. Если вы хотите классифицировать свои сообщения или продукты, интеграция Ninja Tables с WP Posts может значительно минимизировать вашу работу.

Интеграция с WooCommerce

WooCommerce — самый популярный плагин для магазина WordPress. Однако огромное количество людей, использующих WooCommerce, также означает, что многие из них предлагают одинаковый пользовательский интерфейс. Ninja Tables с интеграцией WooCommerce — это легендарный плагин, который может предложить разнообразие на вашем сайте и эффективность на вашем бэкэнде. Это увеличивает коэффициент конверсии, обеспечивая самое простое управление магазином WooCommerce! Ninja Tables — это именно то, что вам нужно для управления вашим магазином WooCommerce.

Интеграция с Google Таблицами

Невероятно, что Ninja Tables спрятала под рукавами! Это то, о чем ты думаешь, верно?

Возможно, Google Sheets — один из лучших вариантов интеграции, который может предложить любой плагин WordPress. Google Sheet — самая популярная онлайн-таблица с самыми простыми функциями. Веб-приложение обладает первоклассными функциями и, что более важно, доступно с любого устройства!

Ninja Tables может подключаться к любым таблицам Google и отображать их данные на вашем веб-сайте по мере обновления таблицы. Так что, если вам нужно обновлять свои таблицы на ходу, интеграция Ninja Tables с таблицами Google — это абсолютный мастер-класс!

Интеграция с графиками ниндзя

Таблицы работают с данными. Мы зависим от таблиц WordPress, потому что они показывают нам статистические данные. Однако иногда нам нужно проявить немного творчества и найти графические способы их отображения. Интеграция Ninja Charts — идеальное решение для визуального представления табличных данных. Хотите посмотреть, что вы можете с ним сделать? Посмотрите видео!

Подведение итогов

С Ninja Tables трудности создания расширенных HTML-таблиц в WordPress наконец-то подошли к концу! Это универсальное решение для всех пользователей WordPress, которым нужно отображать красивые таблицы данных, отказываясь от HTML-кодов.

Так что создавайте таблицы, увеличивайте вовлеченность, повышайте конверсию и делайте больше, чем просто создание таблиц, используя Ninja Tables.

Это все на сегодня. Желаю тебе всего самого лучшего.

Соавтор: Нусрат Фариха

Нусрат — креативный автор контента в WPManageNinja, который любит работать над разнообразными темами. А когда она не пишет, она, наверное, читает свои любимые книги!