Как сделать таблицу адаптивной wordpress
Как вставить таблицу в Вордпресс
Сегодня будет небольшой, но очень полезный урок на тему того, как добавить таблицу в Вордпресс.
Описанный в статье способ реализуется без использования плагина стандартными средствами WordPress и отлично подойдет для добавления на сайт небольшой простой таблички.
Если же у вас существует постоянная необходимость размещать на сайте таблицы, причем довольно сложные и большие, то оптимальнее будет воспользоваться плагином. Но об этом в другой раз.
Раз уж вы продолжаете читать статью, то метод без плагина как раз то, что вам нужно!
Давайте без лишних слов перейдем к рассмотрению вопроса как сделать таблицу в Вордпресс.
Как сделать таблицу в WordPress
Для начала нужно эту самую таблицу создать вне Вордпресс.
Ни для кого не секрет, что удобнее всего работать с таблицами в Microsoft Excel. Именно так я и поступлю в данном примере.
Если вам удобнее, то можете создать таблицу в Microsoft Word, суть это не изменит.
Когда таблица готова, выделяем ее и копируем в буфер обмена (Ctrl-C):
Для добавления таблицы в WordPress переходим в режим визуального редактора:
И вставляем скопированную таблицу (Ctrl-V):
Таблица добавлена! На странице сайта она выглядит следующим образом:
Чтобы сделать текст в ячейках по центру, выделяем поочередно каждую ячейку таблицы и нажимаем кнопку «По центру»:
Теперь давайте сделаем ее адаптивной, т.е. изменяющейся в зависимости от размеров окна, в котором отображается страница сайта с этой таблицей.
Для этого копируем код CSS:
И вставляем его в самый конец файла style.css вашего шаблона WordPress и сохраняем изменения.
Теперь если ширина окна будет менее 600px таблица трансформируется следующим образом:
То есть строки выстроятся в столбцы и встанут друг под друга.
Таким образом сегодня мы разобрались как создать таблицу в Вордпрессе.
Разнообразьте контент своего сайта таблицами, ведь это совсем не сложно!
Создание таблицы в 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, установите и активируйте плагин.
После установки плагина перейдите в меню TablePress в панели слева.
Эта страница – это панель управления для вашего плагина создания таблиц. Тут вы можете управлять таблицами, создавать новые, импортировать и экспортировать данные и даже добавлять дополнительные расширения.
Для создания новой таблицы нажмите на вкладку Новая. Здесь вы можете назвать свою таблицу, создать её описание и задать количество строк и колонок.
Как только вы заполните все необходимые поля, нажмите на голубую кнопку Добавить таблицу.
Далее вы перейдёте на страницу с шорткодом, который вы потом сможете расположить на сайте в том месте, где вам потребуется отобразить таблицу.
В нижней части страницы вам предоставляются разделы для создания оформления ваших таблиц, возможность добавить или изменить CSS классы, разбивка таблицы на страницы, управление настройками сортировки, добавление ссылок и изображений и многое другое.
Как только вы завершили заполнять свою таблицу и оформлять её внешний вид, нажмите кнопку Сохранить изменения и вставьте на необходимую страницу шорткод этой таблицы.
Если вы хотите увидеть, как ваша таблица будет выглядеть на странице перед тем, как вы сохраните изменения и опубликуете их, воспользуйтесь кнопкой Посмотреть. Эта опция не позволит вам увидеть те настройки стилей, которые вы добавили, а внешний вид будет зависеть от вашей текущей темы.
Как добавить таблицу WordPress в запись или на страницу
У вас есть две различные опции для добавления вашей таблицы на сайт WordPress.
Первая опция – это использование шорткода, связанного с вашей таблицей. Просто скопируйте и вставьте шорткод на существующую страницу или в запись и таблица там появится.
Вторая – использование кнопки Вставить таблицу из TablePress на панели инструментов для редактирования страницы/записи.
Всякий раз, когда вы создаёте страницу или запись, просто нажмите кнопку, которую мы упомянули выше, выберите свою таблицу, и она будет автоматически вставляться на вашу страницу.
Как импортировать таблицу в WordPress
Если у вас уже есть таблица с данными на другом ресурсе, как, например, в Excel, то вы можете сделать импорт в TablePress.
Для этого перейдите в TablePress › Импортировать.
Здесь вы можете выбрать, где расположена таблица и источник импорта (по URL, прямая загрузка, файл на вашем сервере или скопировать/вставить свои данные). Вы можете также выбрать создать новую таблицу с вашими данными, заменить данные существующей таблицы или даже добавить к существующей таблице.
После задания опций нажмите кнопку Импорт.
Теперь с импортированными данными вы можете редактировать таблицу так же, как и любую другую. Единственное различие заключается в том, что теперь большинство ваших полей данных уже заполнены. Всё, что вам нужно сделать, это настроить параметры отображения таблицы.
Для добавления таблицы на ваш сайт, следует тому же процессу, что описан выше. Вы можете скопировать и вставить шорткод таблицы в любую запись или страницу, или использовать кнопку в визуальном редакторе.
Как экспортировать таблицу в WordPress
Есть также встроенная функция экспорта данных из таблицы, для этой операции перейдите в TablePress › Экспортировать.
У вас будет возможность выбрать формат, в который вы хотите экспортировать данные, будь то CSV, HTML или JSON. Если вы выберете вариант CSV, вам также нужно будет указать разделитель CSV.
Затем нажмите кнопку Сохранить файл экспорта.
Настройка опций вашего плагина
На последней вкладке вы найдёте параметры таблицы для дальнейшей настройки. Как вы можете видеть, встроенные параметры настройки довольно ограничены. Однако вы можете добавить более широкие возможности настройки через расширения.
Чтобы выполнить реальную настройку, вам нужно ввести собственный 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 не позволяет легко добавлять таблицы к вашим сообщениям или страницам, если вы не знаете HTML — вы можете вставить HTML-код в редакторе сообщений в текстовом режиме, и он будет отображаться нормально, если ваша тема поддерживает соответствующие стили CSS для этого.
Если табличные данные являются важной частью вашего веб-сайта, то я думаю, что вам нужен лучший способ управления ими, и именно в этом вам поможет мой пост. Мы с вами будем смотреть на бесплатный плагин под названием «Tableppress», который позволяет легко добавлять интеллектуальные и хорошо отформатированные таблицы на ваш сайт – посмотрите ниже, где я покажу вам, как его использовать.
Таблицы WordPress
Если вы знакомы с HTML и CSS, создание и внедрение таблицы на вашем веб-сайте не составит большого труда, даже если это может занять много времени и может быть утомительно. Тем не менее, не каждый разработчик с практическим знанием HTML или CSS, и для таких людей это может быть нереальным вариантом.
Но если вы используете сайт WordPress, вы можете создавать таблицы, не затрагивая ни одной строки кода. Однако здесь есть одна загвоздка.
WordPress, несмотря на высокую универсальность и самую популярную систему управления контентом (CMS), не имеет очень распространенной и полезной функции. Он не имеет встроенной функции создания таблицы. Учитывая широкий спектр разнообразных функций, предоставляемых WordPress, определенно удивительно думать, что предложение поддержки таблиц не является встроенной функциональностью WordPress.
TablePress — введение
«TablePress» от Tobias Bathge, является одним из лучших и свободно доступных плагинов для таблиц. Он позволяет вам создавать и управлять таблицами на вашем сайте WordPress, используя удобный интерфейс. Знание HTML не требуется.
Это универсальный плагин таблиц, который не ограничивается таблицами сравнения или ценообразования и может использоваться для отображения практически любых данных, включая формулы, которые будут оцениваться. Он богат функциями и предлагает все, что должен обеспечить стандартный плагин.
Этот плагин имеет более 3500 5-звездочных оценок и более 800 000 активных установок на момент написания этой статьи, TablePress уже зарекомендовал себя как популярный и любимый плагин среди пользователей WordPress.
Особенности TablePress
Установка TablePress на ваш сайт WordPress
Установка плагина проста и включает в себя несколько шагов, описанных ниже.
Появится новое окно, введите «TablePress» в меню поиска в верхнем правом углу окна и нажмите Enter.
Появится список плагинов. Отсюда выберите плагин и нажмите кнопку «Установить сейчас».
После завершения установки нажмите на «Активировать».
Вот и все, теперь вы готовы использовать плагин. Вы можете получить доступ к плагину, нажав на ссылку TablePress в левой боковой панели вашей админки.
Чтобы узнать больше о плагине Tableppress, прокрутите вниз на левой боковой панели и нажмите кнопку «О плагине».
Создание таблиц с использованием TablePress
В этой статье мы с вами собираемся обсудить 2 способа вставки таблиц в WordPress.
Создание таблиц с нуля
TablePress позволяет нам создавать таблицы с нуля, используя удобный и интерактивный интерфейс.
Шаги для создания таблицы перечислены ниже.
Перейдите в панель управления WordPress и нажмите «TablePress» на левой боковой панели.
Чтобы приступить к созданию таблиц, нажмите на вкладку «Добавить новую» в навигации на странице или вы также можете нажать кнопку «Добавить новую таблицу» на левой боковой панели в меню «TablePress».
Затем вы попадете на следующую страницу, где сможете настроить свою таблицу. Здесь вы можете дать имя вашей таблице, ввести описание для вашей таблицы и задать размер для вашей таблицы, заполнив опцию «Количество строк» и «Количество столбцов». Нажмите «Добавить таблицу» после того, как вы закончите.
Нажав на кнопку «Добавить таблицу», вы получите доступ к полному редактору таблиц, где вы можете продолжить добавление содержимого в таблицу. На этой странице вы можете настроить следующее:
В разделе «Информация о таблице» вашей таблице будет присвоен идентификатор и шорткод, который вы будете использовать для добавления своей таблицы в свои сообщения и страницы. Это также покажет имя вашей таблицы и описание.
Ниже вы найдете раздел «Содержимое таблицы», где вы начинаете заполнять ячейки таблицы данными.
Далее вниз по странице вы можете найти «Управление таблицей». Вы можете вставлять ссылки, изображения в ваши ячейки, комбинировать ячейки, расширенный редактор, дублировать/удалять выбранные строки и столбцы, добавлять дополнительные строки/столбцы.
Далее вы найдете раздел «Параметры таблицы», в котором вы можете установить строку заголовка/футера таблицы, чередовать цвета по строкам, отобразить имя и описание таблицы и добавить дополнительные классы CSS для стилей.
Ниже вы найдете еще несколько вариантов использования таблиц данных, включите сортировку, поиск/фильтрацию, разбиение на страницы, горизонтальную прокрутку. Наряду с этим, есть также кнопки, доступные для копирования, экспорта или удаления вашей таблицы.
Как только вы закончите настройку, нажмите «Сохранить изменения», а затем кнопку «Предварительный просмотр» внизу страницы, чтобы получить общее представление о том, как будет выглядеть ваша таблица.
Чтобы вставить таблицу в сообщение или страницу, есть 2 различных способа.
Первый включает копирование шорткода вашей таблицы, перейдите на страницу, где вы хотите отобразить таблицу, и вставьте шорткод.
Второй способ — нажать кнопку «Вставить таблицу из WordPress», добавленную TablePress, на панели инструментов визуального редактора.
Вот и все. Теперь таблица добавлена на ваш сайт WordPress.
Создание таблицы путем импорта
Если у вас уже есть таблицы, созданные в формате Excel или Google Sheet или в других форматах, и вы хотите использовать эту таблицу в своем сообщении/странице, мы можем сразу импортировать ее с помощью плагина TablePress.
Шаги, как это сделать, перечислены ниже:
Экспорт таблицы
TablePress позволяет нам экспортировать таблицы с нашего сайта WordPress. Это полезно, если вы создали другой сайт и хотите добавить существующие таблицы на новый сайт. Таблицы можно экспортировать в форматы CSV, HTML или JSON.
Когда вы закончите, нажмите на кнопку «Загрузить файл экспорта» в нижней части страницы и получите ваши данные.
Опции плагина TablePress
Плагин TablePress также предлагает вкладку «Параметры плагина», которая позволяет вам установить несколько других настроек.
Раздел «Front-End Options» позволяет вам вставить пользовательский CSS, чтобы применить настройки стилей, такие как изменение цвета, фона, выделения ячеек и т. д. к вашим таблицам.
Вы также можете изменить место, где TablePress будет отображаться в меню администратора.
Нажмите «Сохранить изменения», чтобы применить изменения.
Заключительные слова о TablePress
TablePress, без сомнения, является одним из самых функциональных и удобных в использовании плагинов для таблиц на рынке. Он предлагает множество замечательных функций и имеет отличный дизайн прямо из коробки. Он также может быть интегрирован с другими плагинами для дальнейшего расширения его функциональности. Разработчики приложили огромные усилия, чтобы сделать этот плагин отличным ресурсом для сообщества WordPress.
Надеюсь что эта статья была полезна вам.
На этом буду заканчивать — до скорых встреч.