Как сделать таблицу адаптивной wordpress

Как вставить таблицу в Вордпресс

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

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

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

Раз уж вы продолжаете читать статью, то метод без плагина как раз то, что вам нужно!

Давайте без лишних слов перейдем к рассмотрению вопроса как сделать таблицу в Вордпресс.

Как сделать таблицу в WordPress

Для начала нужно эту самую таблицу создать вне Вордпресс.

Ни для кого не секрет, что удобнее всего работать с таблицами в Microsoft Excel. Именно так я и поступлю в данном примере.

Если вам удобнее, то можете создать таблицу в Microsoft Word, суть это не изменит.

Когда таблица готова, выделяем ее и копируем в буфер обмена (Ctrl-C):

kak vstavit tablicu v wordpress 1

Для добавления таблицы в WordPress переходим в режим визуального редактора:

kak vstavit tablicu v wordpress 2

И вставляем скопированную таблицу (Ctrl-V):

kak vstavit tablicu v wordpress 3

Таблица добавлена! На странице сайта она выглядит следующим образом:

kak vstavit tablicu v wordpress 5

Чтобы сделать текст в ячейках по центру, выделяем поочередно каждую ячейку таблицы и нажимаем кнопку «По центру»:

kak vstavit tablicu v wordpress 4

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

Для этого копируем код CSS:

И вставляем его в самый конец файла style.css вашего шаблона WordPress и сохраняем изменения.

Теперь если ширина окна будет менее 600px таблица трансформируется следующим образом:

kak vstavit tablicu v wordpress 6

То есть строки выстроятся в столбцы и встанут друг под друга.

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

Разнообразьте контент своего сайта таблицами, ведь это совсем не сложно!

Источник

Создание таблицы в WordPress

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

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

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

Создание таблицы в WordPress с TablePress

TablePress – невероятно популярный плагин WordPress и не зря. На данный момент у него более 500,000 установок и рейтинг популярности в 5 звёзд. Подобного успеха очень непросто достичь.

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

Что такое TablePress?

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

Достоинства и недостатки TablePress

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

Достоинства TablePress

Недостатки TablePress

Как создавать и добавлять таблицы в WordPress

Первым шагом создания таблицы в WordPress будет установка плагина TablePress. Для этого перейдите в Плагины › Добавить новый в админ консоли WordPress. Найдите TablePress, установите и активируйте плагин.

plugin wp tablepress

После установки плагина перейдите в меню TablePress в панели слева.

plugin tablepress nastrojki

Эта страница – это панель управления для вашего плагина создания таблиц. Тут вы можете управлять таблицами, создавать новые, импортировать и экспортировать данные и даже добавлять дополнительные расширения.

Для создания новой таблицы нажмите на вкладку Новая. Здесь вы можете назвать свою таблицу, создать её описание и задать количество строк и колонок.

dobavit novuju tablicu tablepress

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

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

shortkod dlja tablici tablepress

napolnenije tablici tablepress

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

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

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

Как добавить таблицу WordPress в запись или на страницу

У вас есть две различные опции для добавления вашей таблицы на сайт WordPress.

Первая опция – это использование шорткода, связанного с вашей таблицей. Просто скопируйте и вставьте шорткод на существующую страницу или в запись и таблица там появится.

dobavit shortkod tablici

Вторая – использование кнопки Вставить таблицу из TablePress на панели инструментов для редактирования страницы/записи.

dobavit tablicu iz tulbar menu

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

Как импортировать таблицу в WordPress

Если у вас уже есть таблица с данными на другом ресурсе, как, например, в Excel, то вы можете сделать импорт в TablePress.

Для этого перейдите в TablePress › Импортировать.

import tablici tablepress

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

После задания опций нажмите кнопку Импорт.

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

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

Как экспортировать таблицу в WordPress

Есть также встроенная функция экспорта данных из таблицы, для этой операции перейдите в TablePress › Экспортировать.

export tablici tablepress

У вас будет возможность выбрать формат, в который вы хотите экспортировать данные, будь то CSV, HTML или JSON. Если вы выберете вариант CSV, вам также нужно будет указать разделитель CSV.

Затем нажмите кнопку Сохранить файл экспорта.

Настройка опций вашего плагина

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

nastrojki opcij tablepress

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

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

Помимо TablePress есть также широкий выбор как бесплатных, так и платных плагинов WordPress. Ниже мы выделим пять наших фаворитов.

1. Плагин Ultimate Tables

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

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

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

2. Плагин wpDataTables

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

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

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

3. Плагин JTRT Responsive Tables

JTRT Responsive Tables – это уникальный плагин для создания таблиц. Он позволяет вам создавать простые адаптивные таблицы HTML5 без знаний HTML или CSS.

Если у вас уже есть файл CSV, то вы можете конвертировать его в HTML за несколько кликов. С редактором WYSIWYG вы можете легко настраивать и делать такие операции как: добавление ссылок и картинок, включение сортировок в таблице, фильтрация или разбивка на страницы.

4. Плагин WP Table Manager

Плагин WP Table Manager предоставляет вам возможность работы с таблицами в WordPress как с электронными таблицами Excel. Если вы пользуетесь для создания таблиц Excel, то этот плагин позволит вам чувствовать себя в полном комфорте.

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

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

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

5. Плагин League Table

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

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

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

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

Заключительные мысли

TablePress – один из лучших плагинов WordPress для создания таблиц среди аналогов. Надеемся, теперь у вас сформировалось лучшее понимание процесса создания таблицы в WordPress с помощью плагина. А, если TablePress не подходит вам, можете рассмотреть некоторые другие плагины, упомянутых выше.

У вас есть вопросы о том, как настроить работу TablePress на вашем сайте WordPress? Пожалуйста, поделитесь своим опытом или вопросами в комментариях ниже.

Автор

Елена имеет профессиональное техническое образование в области информационных технологий и опыт программирования на разных языках под разные платформы и системы. Более 10 лет посвятила сфере веб, работая с разными CMS, такими как: Drupal, Joomla, Magento и конечно же наиболее популярной в наши дни системой управления контентом – WordPress. Её статьи всегда технически выверены и точны, будь то обзор для WordPress или инструкции по настройке вашего VPS сервера.

Источник

Полное руководство: как добавить таблицы в WordPress

Доброго здравия, уважаемые посетители моего блога!

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

wordpress tables

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

К сожалению, из коробки WordPress не позволяет легко добавлять таблицы к вашим сообщениям или страницам, если вы не знаете HTML — вы можете вставить HTML-код в редакторе сообщений в текстовом режиме, и он будет отображаться нормально, если ваша тема поддерживает соответствующие стили CSS для этого.

Если табличные данные являются важной частью вашего веб-сайта, то я думаю, что вам нужен лучший способ управления ими, и именно в этом вам поможет мой пост. Мы с вами будем смотреть на бесплатный плагин под названием «Tableppress», который позволяет легко добавлять интеллектуальные и хорошо отформатированные таблицы на ваш сайт – посмотрите ниже, где я покажу вам, как его использовать.

tablepress1

Таблицы WordPress

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

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

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

TablePress — введение

«TablePress» от Tobias Bathge, является одним из лучших и свободно доступных плагинов для таблиц. Он позволяет вам создавать и управлять таблицами на вашем сайте WordPress, используя удобный интерфейс. Знание HTML не требуется.

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

Этот плагин имеет более 3500 5-звездочных оценок и более 800 000 активных установок на момент написания этой статьи, TablePress уже зарекомендовал себя как популярный и любимый плагин среди пользователей WordPress.

tablepress2

Особенности TablePress

Установка TablePress на ваш сайт WordPress

Установка плагина проста и включает в себя несколько шагов, описанных ниже.

tablepress3

Появится новое окно, введите «TablePress» в меню поиска в верхнем правом углу окна и нажмите Enter.

tablepress4

Появится список плагинов. Отсюда выберите плагин и нажмите кнопку «Установить сейчас».

tablepress5

После завершения установки нажмите на «Активировать».

tablepress6

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

Чтобы узнать больше о плагине Tableppress, прокрутите вниз на левой боковой панели и нажмите кнопку «О плагине».

tablepress7

Создание таблиц с использованием TablePress

В этой статье мы с вами собираемся обсудить 2 способа вставки таблиц в WordPress.

Создание таблиц с нуля

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

Шаги для создания таблицы перечислены ниже.

Перейдите в панель управления WordPress и нажмите «TablePress» на левой боковой панели.

tablepress8

Чтобы приступить к созданию таблиц, нажмите на вкладку «Добавить новую» в навигации на странице или вы также можете нажать кнопку «Добавить новую таблицу» на левой боковой панели в меню «TablePress».

tablepress9

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

tablepress10

Нажав на кнопку «Добавить таблицу», вы получите доступ к полному редактору таблиц, где вы можете продолжить добавление содержимого в таблицу. На этой странице вы можете настроить следующее:

В разделе «Информация о таблице» вашей таблице будет присвоен идентификатор и шорткод, который вы будете использовать для добавления своей таблицы в свои сообщения и страницы. Это также покажет имя вашей таблицы и описание.

Ниже вы найдете раздел «Содержимое таблицы», где вы начинаете заполнять ячейки таблицы данными.

tablepress11

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

tablepress12

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

tablepress13

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

tablepress14

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

tablepress15

Чтобы вставить таблицу в сообщение или страницу, есть 2 различных способа.

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

tablepress16

Второй способ — нажать кнопку «Вставить таблицу из WordPress», добавленную TablePress, на панели инструментов визуального редактора.

tablepress17

Вот и все. Теперь таблица добавлена на ваш сайт WordPress.

Создание таблицы путем импорта

Если у вас уже есть таблицы, созданные в формате Excel или Google Sheet или в других форматах, и вы хотите использовать эту таблицу в своем сообщении/странице, мы можем сразу импортировать ее с помощью плагина TablePress.

Шаги, как это сделать, перечислены ниже:

tablepress18

Экспорт таблицы

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

tablepress19

Когда вы закончите, нажмите на кнопку «Загрузить файл экспорта» в нижней части страницы и получите ваши данные.

Опции плагина TablePress

Плагин TablePress также предлагает вкладку «Параметры плагина», которая позволяет вам установить несколько других настроек.

tablepress20

Раздел «Front-End Options» позволяет вам вставить пользовательский CSS, чтобы применить настройки стилей, такие как изменение цвета, фона, выделения ячеек и т. д. к вашим таблицам.

Вы также можете изменить место, где TablePress будет отображаться в меню администратора.

Нажмите «Сохранить изменения», чтобы применить изменения.

Заключительные слова о TablePress

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

Надеюсь что эта статья была полезна вам.

На этом буду заканчивать — до скорых встреч.

Источник