Плагин для создания таблиц в WordPress

Разработчики WordPress постоянно работают над тем, чтобы обеспечить для пользователей максимально удобную работу со своим продуктом. Однако некоторые моменты, пользователь, без определенной технической подготовки, не сможет решить самостоятельно. И для того, чтобы ему помочь, существуют специальные расширения – плагины, которые и позволяют решить ряд «бытовых» для сайта или блога проблем. Одной из таких проблем является – создание таблиц в WordPress. А если быть точным то – отсутствие возможности для новичка создать или вставить таблицу в запись или на страницу WordPress без знаний html и css.

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

Wordpress плагин таблиц

TinyMCE Advanced

TinyMCE Advanced - я уже писал об этом отличном плагине, который позволяет расширить стандартные возможности визуального редактора WP, добавить в него новые кнопки форматирования текста и другие интересные «плюшки». Этот плагин несколько видоизменился в визуальном плане, стал более удобен, однако обладает все тем же функционалом.

Так вот, одной из таких «плюшек» - есть возможность быстрой вставки таблицы в запись.

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

Таблица создается элементарно, достаточно просто выбрать необходимое количество столбцов и строчек.

вставка таблицы в запись

В свойствах таблицы можно задать ряд параметров:

  1. Точную высоту и ширину таблицы в пикселях.
  2. Отступы между ячеек и внутри ячеек.
  3. Задать выравнивание.
  4. Толщина линий.
  5. Объединение и разбиение ячеек таблицы.
  6. Индивидуальные размеры для каждой ячейки.

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

Простой пример таблицы:

таблица с помощью плагина

Плагин для создания функциональной таблицы с элементами сортировки - TablePress

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

Кроме того, что плагин позволяет создавать таблицы, он еще и дает возможность импортировать их из Excel (XLSX, XLS) и файлов формата CSV, HTML, JSON.

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

Установка и настройка TablePress

Скачать TablePress.

После установки плагина, в вашей панели инструментов появится пункт:

добавить таблицу

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

Для  создания новой таблицы жмем «Добавить таблицу».

Далее необходимо дать название таблице и задать количество столбцов и строк.

столбцы и строки

Заполняем таблицу:

создание таблицы

В разделе управления таблицей есть ряд полезных кнопок:

  1. Вставка ссылок;
  2. Вставка изображений;
  3. Расширенный редактор;
  4. Добавление, удаление, дублирование строк и столбцов;
  5. Объединение (присоединение) ячеек друг к другу;

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

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

Сохраните таблицу.

Вставить ее в запись или на страницу можно, воспользовавшись кнопкой в редакторе:

tablepress вставка таблицы

Либо с помощью шорткода, на который вы наверняка обратили внимание, когда создавали таблицу:

шорткод таблицы

Его нужно скопировать и вставить в запись.

Вот такая таблица получиться, если не убирать лишние функции:

готовая таблица

При нажатии на стрелочки будет осуществляться сортировка по №, названию и по цене.

Комментарии к “Плагин для создания таблиц в WordPress

    1. Здравствуйте. При создании или редактировании таблицы, в свойствах есть пункт: «Чередующийся цвет строк».

  1. как сделать подсветку столбцов. Чтобы при наведение на ячейку подсвечивалась строка и столбец этой ячейки.

  2. Вот, пытаюсь сделать подобное mafiaworldtour.com/clubs/mafia_club_kiev/members . Пожалуйста, подскажите, с помощью этого плагина реально? Куда нужно лезть чтобы текст был по середине, справа от фото и столбцы разных размеров? Спасибо.

    1. Выравнивание текста по центру задается с помощью text-align:center;
      Для того, чтобы текст обтекал картинку, ей нужно присвоить float:left;
      Ширина столбцов задается так: width:100px; , где 100 — значение в пикселях. Также можно задать процентное значение.
      На данный момент у меня этот плагин не установлен, но если память не изменяет, выравнивание и размер столбцов там задать можно.

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

    1. Про подобные плагины не слышал. Посоветовал бы вам создать топик в соответствующем разделе тут: http://phpforum.su.
      За денюжку, я думаю, там помогут решить вашу задачу.

  4. Извините, я чайник еще. У меня под таблицей номера страниц и переходы назад, вперед идут в столбик. Не могу найти где поменять:(

    1. Скорее всего, у вас в стилях не прописано float:left;, точнее — прописано что-то, что его отменяет. Скиньте ссылку на страницу, посмотрю.

  5. }

    .dataTables_length {
    float: left;
    margin-left: 15%;
    }

    .dataTables_paginate.paging_simple {
    padding: 0;
    float: right;
    margin: 0;
    margin-right: 15%;
    }

    .dataTables_info {
    clear: both;
    float: left;
    margin: 0;
    margin-left: 15%;
    }

    меняйте значения 15% и увидите…

  6. Юрий, а возможно ли сделать так, чтобы некоторые столбцы нельзя было сортировать?

  7. Юрий здравствуйте ! Нужна помощь в написании плагина на WordPress, проконсультируйте если есть возможность, так же если посодействуете в написании — материально отблагодарю.
    Просьба оперативно откликнуться. (напишите на mail)

    1. Здравствуйте, к сожалению, я не силен в PHP. Мои знания ограничиваются корректировкой уже существующего кода.
      Можете найти на Серче людей, которые возьмутся за ваше задание: http://searchengines.guru

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

    1. Добрый. Просто перетащите изображение в нее и все. Должно сработать.
      Или зайдите в html редактор и сами пропишите вставку IMG в нужную ячейку: http://htmlbook.ru/html/img/

  9. Добрый день, по какой причине может не срабатывать код text-align:center; — уже все перепробовала, а текст как стоят слева так и стоит.

  10. Применяйте свойство align не к span, а к td. В Стилях пропишите:
    .tablepress td {
    text-align: center;
    }

    И все будет ок. Правда, как по мне, то с выравниванием по левому оно практичнее, читается легче.

    1. Я не спорю, просто заголовки и когда ячейки объединены, тогда по центру лучше просматривается..)) Я только из-за объединенных ячеек и спрашиваю, все остальное останется по левому

      1. У вас 2 варианта:
        1. Заключать указанные заголовки в <center>…</center>
        2. Присвоить вашему span display:block;
        Например так:
        .tablepress span{
        display:block;
        }

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

      2. Здравствуйте, Анна!
        Как Вы смогли объединить ячейки? Бьюсь над проблемой объединения.

  11. Здравствуйте. Скажите, а если плагин перестанет работать, или его случайно удалить, что будет с таблицами?

    1. Если вы про первый плагин, то ничего не произойдет. Все будет работать, как и раньше. А вот второй — нет.

  12. Добрый день!

    Юрий, у меня в таблице tablepress 5 столбцов.
    5-ый столбец не влазит даже на стационарном компьютере и его можно посмотреть только, нажав на знак «плюс».
    Можно ли как-то настроить чтобы был виден без нажатия на плюсик, т.е. автоматически внизу под ячейками в виде строки был?

    И еще под таблицей tablepress у меня какие-то точки, стрелочки, на которые можно нажать и тогда страница сворачивается. Как убрать эти лишние точки?

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

  13. Здравствуйте, все! Спасибо Юрию за блог!
    Скажите как настроить плагин, чтобы объединить несколько ячеек 1 строки?

  14. Пытаюсь импортировать большой файл (15 МБ). В дальнейшем нужно будет три таких файла всунуть в одну таблицу.
    Сначала выдавала 404 ошибка и 500. Дело было в ограничении по размеру загруженного фала на сервер. Починил.
    Теперь, когда пытаюсь загрузить его (xlsx файл размером 15 МБ), всё время выдаёт ошибку Fatal error: Allowed memory size of 67108864 bytes exhausted (tried to allocate 16649139 bytes) in /home1/newdesig/public_html/mdevice.by/wp-content/plugins/tablepress/libraries/simplexlsx.class.php on line 523
    До этого выдавал ошибку типа ограничения по строкам или столбцам… я вырезал эти php коды и пробовал дальше.

Добавить комментарий

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