WP-Table Reloaded

WP-Table Reloaded это мощнейший инструмент по созданию и управлению таблицами в блоге. С его помощью создавать и вставлять в записи таблицы можно без малейших усилий. Более того – создавать таблицы можно и в привычном Excel'е, так как плагин поддерживает импорт таблиц из самых популярных форматов csv, xml и html. Несмотря на всю свою функциональность, плагином пользоваться очень легко, тем более, что он полностью переведен на русский язык. Перечислять все достоинства плагина можно долго, но лучше я покажу вам несколько примеров создания таблиц в данном плагине.

Скачиваем плагин по ссылке в конце страницы и устанавливаем его:

1. Распаковываем архив.

2. Копируем папку wp-table-reloaded в /wp-content/plugins/.

3. Заходим в админку блога на вкладку "Плагины" и активируем плагин.

Настроить плагин  вы можете в "Инструментах\WP-Table Reloaded\Настройки плагина". Подавляющему большинству пользователей стоит отключить здесь использование JavaScript-библиотек, так как опции вроде разбития таблиц на страницы, сортировка и фильтрование нужны очень немногим пользователям. Что под этим имеется в виду? Например, таблица результатов российской футбольной Премьер-лиги может выглядеть так:

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

Отключать js-библиотеки в настройках плагина вовсе не обязательно – можно просто при создании или редактировании таблицы убрать галку с опции:

Тогда следующий виджет при редактировании таблицы станет неактивным:

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

Рассмотрю самый простой пример – сравнение двух продуктов. Именно такого вида таблицы наиболее популярны у блоггеров. Для создания таблицы кликайте на ссылку "Добавить новую таблицу":

Откроется страница с первоначальными настройками:

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

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

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

Сохраняем ее, в редактировании записи жмем на кнопку "Вставить таблицу":

Откроется диалоговое окно, в котором можно выбрать вставляемую в запись таблицу. Кнопка эта есть и при отсутствии визуального редактора. Но в любом случае формат шорткода для вставки таблицы достаточно простой – надо вставить [table id=<ID> /], где ID указывает на номер таблицы.

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

После добавления этой таблицы получаем что-то типа:

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

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

Рассмотрим еще один пример. Создание таблицы российской футбольной Премьер-лиги. В отличие от предыдущей таблицы, эта таблица изменяет свое содержимое после каждого сыгранного тура. Вручную сортировать ряды такой таблицы каждую неделю занятие утомительное и поэтому в данном случае плагин WP-Table Reloaded придется очень кстати.

Создаем таблицу из 3 колонок и 17 рядов, заполняем ее текущей информацией и получаем что-то типа:

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

При использовании обычной таблицы вам бы пришлось менять все ее содержимое, но при использовании WP-Table Reloaded достаточно лишь вбить новые данные в таблицу, а потом отсортировать по колонке с очками. Сделать это просто - вбиваем новые данные в таблицу, сохраняем изменения (обязательно, так как сортировка работает лишь с сохраненной таблицей) и сортируем по последнему ряду:

В результате получится отсортированная по очкам таблица:

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

Ответ здесь простой – плагин WP-Table Reloaded очень хорош, но все-таки функциональности Excel'я в нем нет и сортировать таблицу с учетом нескольких колонок и дополнительных параметров он не может. Если вам нужна действительно "правильная" таблица, то лучше воспользоваться соответствующими виджетами от спорт-порталов.

А вот место команды можно показать. Правда, с небольшой хитростью, так как если сортировать таблицу по количеству очков, то место команды придется менять вручную, что, естественно, нам не подходит. Создадим отдельную таблицу в 1 колонку и 17 рядов, в которых и забьем цифры с 1 по 16.

Затем, добавим в сайдбар текстовой виджет со следующим содержимым:

<table style="margin: 0; padding:0;">
   <tr>
      <td style="margin: 0; padding:0;">[table id=3 /]</td>
      <td style="margin: 0; padding:0;">[table id=2 /]</td>
   </tr>
</table>

То есть примерно так:

В чем тут смысл? В том, что в сайдбаре будут выведены сразу две таблицы: первая с местом команды (ID=3), а вторая с самой таблицей РПЛ (ID=2), отсортированной по количеству очков. Обе эти таблицы в виджете взяты в еще одну таблицу, чтобы они стояли рядом друг с другом, а не одна под другой.

Сохраняем виджет и получаем такого вида таблицу:

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

.wp-table-reloaded-id-3 {
    margin-left:3px;
}

Заметьте, что в вашем случае id-3 надо поменять на номер именно вашей таблицы. В итоге получим:

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

Если цвета таблиц по умолчанию вам не подходят, то вы можете отредактировать их в файлах, расположенных в папке css плагина. Можно редактировать цвета отдельных таблиц, подробнее об этом читайте на странице FAQ на сайте автора плагина.

На данных примерах я показал вам немного функционал плагина WP-Table Reloaded, который на самом деле куда больше мной описанного. Особенно, если использовать встроенные в плагин js-библиотеки.

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

Информация о плагине в репозитории wordpress.org не найдена. Или wordpress.org в данный момент недоступен или плагин был временно удален из репозитория (например, из-за найденной критической ошибки в плагине). Попробуйте найти плагин в репозитории вручную.