9 лучших плагинов WordPress для представления таблиц
При оформлении записей в WordPress появляется необходимость представить свой контент более организованно, чем абзацы и списки. Когда вы используете много структурированной информации, ее лучше представлять в более визуально убедительном формате таблиц.
Таблицы ценообразования являются предпочтительным форматом, когда компании хотят донести до клиентов понимание различных параметров оценки. Таблицы так же эффективны и для демонстрации других типов информации: расписания, результаты соревнований, сравнительные характеристики. Когда читатели просматривают пост, они останавливаются именно на таблице, пытаясь понять, о чем идет речь.
Таблицы в настоящее время не являются родной функцией WordPress, но в этой статье будут показаны лучшие плагины WordPress, как бесплатные, так и премиум, и мы определим, что лучше всего подходит для ваших конкретных целей.
1. TablePress
TablePress – один из самых популярных плагинов WordPress. Без лишних затруднений можно создавать красивые таблицы и встраивать их в записи и страницы с помощью коротких кодов. Вы можете импортировать и экспортировать данные в форматах Excel, CSV, HTML и JSON.
Другие особенности:
2. Ninja Tables
В отличие от TablePress, Ninja Tables позволяет создавать пользовательские таблицы прямо в своем посте или странице с помощью своего конструктора страниц. У вас есть возможность включать медиа в свои таблицы, изменять цветную тему и настраивать стили таблиц одним щелчком мыши. Таблицы быстро загружаются и реагируют на действия вашего посетителя – это факторы, которые делают ваш сайт более удобным для пользователя. Таблицы Ninja бесплатны, но имеют Pro-дополнение с пожизненными обновлениями за 25 долларов США за один веб-сайт или 59 долларов США за неограниченные веб-сайты
Другие особенности:
3. wpDataTables
wpDataTables доступен как бесплатный, так и платный плагин. Если у вас есть готовая электронная таблица в Excel, CSV, JASON или XML, вы можете загрузить ее на свой сайт WordPress. Плагин позаботится о сортировке данных в таблице. Он также поддерживает несколько столбцов данных, таких как изображения, данные, время и другие.
Другие особенности:
Подборки плагинов WordPress по категориям и функциональному назначению.
4. CSS3 Responsive Web Pricing Tables Grids For WordPress
Если вы хотите создавать таблицы с ценами, которые выделят ваш бизнес, вы не ошибетесь, выбрав плагин CSS3 Responsive Web Pricing Tables Grids For WordPress. За 19 долларов это один из самых доступных плагинов премиум-класса для WordPress. Вы можете выбирать стиль таблиц, цветовую гамму, чтобы добиться желаемого вида таблицы цен. Таблицы создаются с использованием CSS, что делает их легкими и более быстрыми для загрузки.
Другие особенности:
5. Advanced Tables
Если вы хотите редактировать таблицы так же, как в Excel, то плагин Advanced Tables для вас. За 20 долларов вы можете создавать всевозможные таблицы для включения в любую запись или страницу через шорткоды.
Другие особенности:
6. Ultimate Tables
Ultimate Tables – это универсальный бесплатный плагин, создающий гибкие таблицы. Выбирайте из трех вариантов табличных конструкций или создавайте их с нуля, используя встроенный конструктор таблиц. Вы можете включить HTML-код в каждую ячейку для форматирования содержимого.
Другие особенности:
Какой самый простой способ создания прайс-таблиц на WordPress здесь.
7. League Table
League Table позволяет создавать сортируемые таблицы. Ваши посетители могут сортировать таблицы, заказывая определенный столбец в порядке возрастания или убывания. Эти и другие удобные функции всего за 23 доллара. Плагин идеально подходит для представления статистики в любой области, например, для представления таблиц результатов спортивных соревнований.
Другие особенности:
8. Table Maker
Создание простых таблиц для отображения спецификаций продуктов или сравнения деталей не должно стоить дорого, а с помощью Table Maker это все бесплатно! Этот простой плагин позволяет быстро создавать презентабельные таблицы.
Другие особенности:
9. ARPrice
Другие особенности:
Советуем протестировать бесплатные плагины, разобраться в их функциях и возможностях. Если ваши задачи не решаются с помощью бесплатных версий, переходите на премиум, которые значительно расширят ваши возможности.
Как вставить таблицу в WordPress вручную и плагином MCE Table Buttons
Несмотря на всю функциональность и все удобство движка WordPress, кое какие, казалось бы, простые функции в его базовой версии не реализованы. В частности, нет возможности вставить в запись табличку. А возникает в ней необходимость нередко, особенно, когда публикуешь какие-либо сравнения или большие массивы данных. В этом посте я покажу как вставить таблицу в WordPress. Рассмотрим два варианта ручной вставки вручную и плагин MCE Table Buttons.
Как таблицу вставить без плагина?
Способ №1 – HTML код
Для того, чтобы добавить табличку в тело поста достаточно обладать базовыми знаниями в области HTML разметки. Переключаете редактор в HTML формат и в нужном месте вставляете вот такой код:
Теги tr отвечают за строки, а td за столбцы (ячейки в строчках). Сколько нужно строк, столько блоков tr делаете и, соответственно, в них td. Оформление таблицы в данном случае будет соответствовать тем CSS стилям, которые прописаны для вашей темы блога. Иногда, не будет проявляться граница, тогда добавьте рядом с table параметр border=”любая цифра” (любая цифра – это толщина линии), должно получиться так –
.
Способ №2 – текстовый редактор
Открываете текстовый редактор Microsoft Office, OpenOffice или любой другой, лишь бы он позволял создавать таблицы. Ниже на картинке я сделал скрин из MS Word 2007, в других редакторах все делается также просто.
Проходите во вкладку «Вставка» — «Таблица». Определяетесь с количеством строк и столбцов. Заполняете ее информацией, делаете выравнивание текста, выделяете заголовки и прочее. С помощью мыши или клавиатуры полностью выделяете таблицу и жмете сочетание клавиш «Ctrl+C».
Дальше, открываете для редактирования пост, в который собираетесь вставить таблицу. Ставите курсор в нужное место и нажимаете сочетание “ctrl+v”, либо кликаете на мышке правую клавишу и выбираете вставить.
Раньше для добавления данных из Word в WordPress была отдельная кнопка, но сейчас ее нет и редактор нормально воспринимает скопированную оттуда информацию (без всякого мусора) – создается тот же код, который мы делали в предыдущем варианте.
Может проявиться та же болезнь – отсутствие границ, для лечения используйте аналогичный метод – border.
После этого все будет в порядке. На этом ручные способы можно считать завершенными, надеюсь, что у вас получится вставить таблицу в WordPress без особого труда. Ну, а теперь давайте рассмотрим второй вариант, в котором мы будем использовать специализированный плагин.
Плагин для WordPress-таблиц MCE Table Buttons
Как и все функции WordPress, создаваемые плагинами, вставка таблиц с помощью MCE Table Buttons намного проще, чем при работе с кодом и использовании тестовых редакторов. Про код думать не надо совсем, все необходимые настройки, а именно, количество колонок и строк, толщина рамки и ее цвет, полностью заложены в функциях плагина MCE Table Buttons.
Единственный минус, это дополнительная нагрузка при работе плагина, правда это происходит только в тот момент, когда вы создаете таблицу в WordPress. В остальное время плагин MCE Table Buttons не работает.
Через админку WordPress (вкладка «Плагины» — «Добавить новый») ищете плагин в базе. Вводите название «MCE Table Buttons» и жмете на кнопку «Поиск». Далее в сформировавшемся списке нажимаете на слово «Установить».
После активации плагина, в панели инструментов появится дополнительная иконка. Работа по добавлению и редактированию таблиц интуитивно понятна.
После того, как вы вставите таблицу, вам нужно определится с ее параметрами, ставите курсор на нужную табличку и жмете ту же самую кнопку на панели – строки “Свойства таблицы” и “Удалить таблицу” станут активными – настраиваете все как нужно.
На это, уважаемые читатели, я заканчиваю данный пост. Надеюсь, что вы теперь знаете, как вставить в WordPress таблицу без плагина и плагином MCE Table Buttons.
В этой статье мы разберем, как сделать таблицу в WordPress. По умолчанию в WordPress нет инструментов для создания таблиц. Опытные веб-мастера используют html теги для вставки таблиц на страницу, но это неудобный и сложный способ. Намного проще воспользоваться плагином TinyMCE Advanced, это визуальный редактор, в его настройках есть функция, которая отвечает за создание таблицы в WordPress. Если вы дочитаете статью до конца, вы узнаете ответы на вопросы «Как вставить таблицу в WordPress» и «Как добавить таблицу в WordPress».
Плейлист «Как создать сайт на WordPress»
TimeWeb лучший хостинг для WordPress: домен в подарок, 99 рублей в месяц. Попробуйте, 10 дней бесплатно: РЕГИСТРАЦИЯ ОБЗОР ВИДЕО
Таблицы в WordPress важный элемент вывода информации на странице. Довольно часто возникает необходимость показать данные в виде таблицы. И здесь к нам на помощь приходит плагин таблицы для WordPress, который называется TinyMCE Advanced. Сам плагин содержит в себе много различных инструментов, среди которых создание таблиц на страницах сайта.
Для установки плагина перейдите в административную панель «WordPress» ⇒ «Плагины» ⇒ «Добавить новый» и в форме поиска вбейте «TinyMCE Advanced». Затем нажмите установить и активировать.
После установки плагина в визуальном редакторе появится панель под названием «Таблицы», при помощи которой можно создать таблицу любой сложности. Чтобы сделать таблицу, нажмите на панель «Таблицы», затем зайдите в под пункт «Таблица» и выберите количество строк и столбцов (по умолчанию максимально можно выбрать до 10 строк и столбцов, но в процессе редактирования их можно копировать до бесконечности). Я выберу 10 строк и 10 столбцов: Затем на станице появится вот такая сетка: Нажимаете на квадратик и растягиваете таблицу на всю ширину контентной части. Здесь возможны нюансы. Например, ширина контентной части моего блога ровняется 600px. Чтобы таблица корректно отображалась, мне нужно растянуть ее именно до этих размеров. Вам же нужно растягивать ее под размеры вашей контентной части. Во время растягивания видно ширину таблицы в пикселях, так что тут не ошибетесь: Если таблица выходит за пределы статьи, нужно уменьшать шрифт текста др тех пор, пока она не впишется в контентную часть. Либо же сократить число столбцов, но поскольку зачастую столбцы нужны и сокращать их не желательно, мы рекомендуем уменьшать шрифт.
Дальше нам нужно определиться с цветом самой таблицы и цветом границы. Зачастую, их делают одного цвета. Для этого в пункте «Таблицы» нажмите «Свойства таблицы» и «Дополнительно». Затем назначьте цвета таблицы и границы, и нажмите «OK»: У нас получилось вот такая таблица: Цвет первой строки должен отличаться от цвета всей страницы, так как обычно там прописывают важные наименования или заголовки. Чтобы изменить цвет любой строки таблицы, нужно выделить строку, нажать на пункт «Таблицы», затем «Строка», затем «Свойства строки таблицы» и «Дополнительно». Точно так же, как и в случае с общим цветом таблицы, выбираем цвет отдельной строки: Теперь наша таблица выглядит вот так: Я специально сделал яркие цвета, чтобы показать наглядный пример создания таблицы. Обычно, первая строка таблицы цветная, чтобы подчеркнуть заголовки, граница такого же цвета, как и первая строка, а вся остальная таблица бесцветная.
Дальше осталась самая малость, нужно заполнить таблицу данными. Для этого нажимаете на каждую ячейку, вписываете нужный текст (шрифты и размер текста легко подбираются через специальные пункты настроек визуального редактора) и выравниваете текст (рекомендовано выравнивать по центру). В любой текст при необходимости можно вставить ссылку. В общем, с этим проблем возникнуть не должно, все редактируется, как в word документе.
После заполнения всех полей сохранитесь и посмотрите результат вашей работы. Вот такая таблица получилась у меня:
Сегодня будет небольшой, но очень полезный урок на тему того, как добавить таблицу в Вордпресс.
Описанный в статье способ реализуется без использования плагина стандартными средствами WordPress и отлично подойдет для добавления на сайт небольшой простой таблички.
Если же у вас существует постоянная необходимость размещать на сайте таблицы, причем довольно сложные и большие, то оптимальнее будет воспользоваться плагином. Но об этом в другой раз.
Раз уж вы продолжаете читать статью, то метод без плагина как раз то, что вам нужно!
Давайте без лишних слов перейдем к рассмотрению вопроса как сделать таблицу в Вордпресс.
Как сделать таблицу в WordPress
Для начала нужно эту самую таблицу создать вне Вордпресс.
Ни для кого не секрет, что удобнее всего работать с таблицами в Microsoft Excel. Именно так я и поступлю в данном примере.
Если вам удобнее, то можете создать таблицу в Microsoft Word, суть это не изменит.
Когда таблица готова, выделяем ее и копируем в буфер обмена (Ctrl-C):
Для добавления таблицы в WordPress переходим в режим визуального редактора:
И вставляем скопированную таблицу (Ctrl-V):
Таблица добавлена! На странице сайта она выглядит следующим образом:
Чтобы сделать текст в ячейках по центру, выделяем поочередно каждую ячейку таблицы и нажимаем кнопку «По центру»:
Теперь давайте сделаем ее адаптивной, т.е. изменяющейся в зависимости от размеров окна, в котором отображается страница сайта с этой таблицей.
Для этого копируем код CSS:
И вставляем его в самый конец файла style.css вашего шаблона WordPress и сохраняем изменения.
Теперь если ширина окна будет менее 600px таблица трансформируется следующим образом:
То есть строки выстроятся в столбцы и встанут друг под друга.
Таким образом сегодня мы разобрались как создать таблицу в Вордпрессе.
Разнообразьте контент своего сайта таблицами, ведь это совсем не сложно!
Как встроить Google Таблицы в WordPress: код и плагины
Вам нужно встроить Google Таблицы в WordPress? Хотя существует множество полезных плагинов для таблиц WordPress, которые добавляют таблицы на ваш сайт, иногда вам просто нужна полная гибкость Google Sheets, и лучше встроить свою таблицу прямо из Google Sheets.
Это гарантирует, что данные вашей электронной таблицы всегда актуальны, а для больших электронных таблиц ответственность за обработку снимается с сервера вашего сайта WordPress.
Встроить Google Таблицы в WordPress довольно просто – и в этом посте вы узнаете, как именно это сделать. Вам предложено на выбор несколько вариантов, начиная от простейшего решения для встраивания непосредственно из Google Sheets до плагинов Google Sheets WordPress, которые предлагают некоторые интересные возможности, включая импорт данных из Google Sheets в отдельную таблицу на вашем сайте.
Как встроить Google Таблицы в WordPress
Этот метод не требует использования каких-либо плагинов – все, что вам нужно сделать, это создать код для встраивания из интерфейса Google Sheets, а затем добавить его в редактор WordPress.
Предположим, что вы уже создали электронную таблицу, которую хотите встроить. Если нет, сначала сделайте это, а затем вернитесь сюда.
В этом примере представлена электронная таблица со случайными фиктивными финансовыми данными. Теперь встроим ее в WordPress.
1. Создайте код для встраивания Google Таблиц
Сначала будете работать в интерфейсе Google Sheets – обязательно откройте электронную таблицу, которую нужно встроить.
В интерфейсе Google Таблиц откройте меню Файл и выберите Опубликовать в Интернете:
Откроется всплывающий интерфейс. Перейдите на вкладку Встраивание в этом всплывающем окне и выберите, хотите ли вы встроить весь документ или только отдельный лист. Это полезно, если у вас несколько листов, но вы хотите включить только один из них на свой сайт WordPress.
Если вы развернете область Опубликовать содержимое и настройки, вы получите возможность решить, следует ли повторно публиковать электронную таблицу при внесении изменений в существующий документ:
Сделав свой выбор и нажмите Опубликовать:
Как только вы это сделаете, то увидите встроенный код. Держите этот код встраивания под рукой, потому что он вам понадобится на следующем шаге:
2. Добавьте код для встраивания Google Таблиц в WordPress
Затем перейдите в свою панель управления WordPress и создайте новую запись или страницу, на которую вы хотите встроить свою электронную таблицу или отредактировать существующий фрагмент контента.
Если вы используете редактор блоков WordPress, то можете добавить пользовательский блок HTML, а затем вставить в него код внедрения Google Таблиц. Если вы переключитесь на настройку предварительного просмотра, то увидите свое встраивание прямо в редакторе (хотя на бэкэнде это может выглядеть немного странно)
Если выиспользуете классический редактор TinyMCE, то вставьте код встраивания навкладкеТекстредактора (аненавкладкеВизуальный).
Когда вы публикуете / обновляете запись, вы должны увидеть встроенный документ Google Таблиц во внешнем интерфейсе. Как видите, в примере таблица довольно широкая, поэтому во внешнем интерфейсе она выглядит немного неудобной:
С этими параметрами, добавленными во встраиваемый код, таблица выглядит намного лучше:
Лучшие плагины WordPress для Google Таблиц
Хотя описанный выше метод ручного встраивания работает, могут возникнуть ситуации, в которых вы предпочтете использовать плагин Google Sheets WordPress.
Inline Google Spreadsheet Viewer
Плагин предоставляет возможность добавлять собственный CSS, что дает полный контроль над тем, как выглядит ваша электронная таблица.
Цена: плагин бесплатный.
wpDataTables
Если вас интересуют только данные вашей электронной таблицы, но на самом деле вам не нужен интерфейс Google Sheets, wpDataTables может стать хорошим вариантом. Это популярный плагин для таблиц WordPress, который позволяет легко импортировать данные из Google Таблиц в самостоятельную таблицу. Приятно то, что он также дает вам возможность автоматически синхронизировать эту информацию с Google Таблицами.
Таким образом, обновляя исходную электронную таблицу в Google Таблицах, вы можете синхронизировать эти изменения с собственной версией на своем сайте WordPress.
TablePress
Все, что вам нужно сделать, это создать URL-адрес экспорта CSV для Google Sheets и добавить его в TablePress. Для этого перейдите в Файл → Опубликовать в Интернете в интерфейсе Google Таблиц и выберите CSV в разделе Ссылка.
Цена: бесплатный с условно платным расширением.
Visualizer
Цена: Бесплатная версия Visualizer доступна на WordPress.org, а премиум-версия стоит от 59 долларов.
Основные дополнения для Elementor
Если вы используете популярный конструктор страниц Elementor, сторонний плагин Essential Addons для Elementor включает виджет, который позволяет импортировать данные Google Sheets в таблицу в ваших проектах Elementor.
Цена: 39,97 долларов.
Если вам нужен самый простой способ добавить Google Таблицы в WordPress, можете опубликовать свою электронную таблицу в Интернете и добавить код для встраивания в любом месте вашего сайта WordPress.
Или, если вас интересуют только данные Google Sheets (а не сам интерфейс Google Sheets), можете предпочесть плагин Google Sheets WordPress, который импортирует данные из вашей электронной таблицы на сайт WordPress.
В зависимости от того, какой плагин выберете, вы сможете периодически синхронизировать свой сайт с Google Таблицами, поддерживая данные в актуальном состоянии.
Затем на станице появится вот такая сетка: 
Нажимаете на квадратик и растягиваете таблицу на всю ширину контентной части. Здесь возможны нюансы. Например, ширина контентной части моего блога ровняется 600px. Чтобы таблица корректно отображалась, мне нужно растянуть ее именно до этих размеров. Вам же нужно растягивать ее под размеры вашей контентной части. Во время растягивания видно ширину таблицы в пикселях, так что тут не ошибетесь: 
Если таблица выходит за пределы статьи, нужно уменьшать шрифт текста др тех пор, пока она не впишется в контентную часть. Либо же сократить число столбцов, но поскольку зачастую столбцы нужны и сокращать их не желательно, мы рекомендуем уменьшать шрифт.
У нас получилось вот такая таблица: 
Цвет первой строки должен отличаться от цвета всей страницы, так как обычно там прописывают важные наименования или заголовки. Чтобы изменить цвет любой строки таблицы, нужно выделить строку, нажать на пункт «Таблицы», затем «Строка», затем «Свойства строки таблицы» и «Дополнительно». Точно так же, как и в случае с общим цветом таблицы, выбираем цвет отдельной строки: 
Теперь наша таблица выглядит вот так: 
Я специально сделал яркие цвета, чтобы показать наглядный пример создания таблицы. Обычно, первая строка таблицы цветная, чтобы подчеркнуть заголовки, граница такого же цвета, как и первая строка, а вся остальная таблица бесцветная.
