Flector

WP-Table Reloaded

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

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

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

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

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

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

Использование js-библиотеки DataTables

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

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

Отключение js-библиотек

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

Виджет управления опциями js-библиотеки

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

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

Ссылка добавления таблицы

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

Опции добавляемой таблицы

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

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

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

Заполнение таблицы

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

Кнопка "Вставить таблицу"

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

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

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

Готовая таблица сравнения читалок Kindle

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

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

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

WP-Table Reloaded
Автор плагина: Tobias Bäthge
Рассматриваемая версия: 1.9.3 от 11.06.2012
Текущая версия: 1.9.4 от 31.07.2013
Совместимость с версией WordPress: 3.1 и выше
Скачать плагин версии 1.9.4 (всего скачиваний: 708 348)

Понравился пост? Подпишись на обновления по Обновления блога по RSSRSS или Обновления блога на TwitterTwitter !

Создания собственного блога

Первые шаги в заработке в интернете многие начинали с создания собственного блога.

bastiondesign.ru

Комментарии (всего 15 комментариев)

Написать комментарий

(обязательно)

(обязательно, не публикуется)

Для вставки кода используйте кнопку "Код", по умолчанию используется синтаксис подсветки языка "php", вы можете поменять его на любой другой поддерживаемый GeSHi язык, например "javascript", "css", "html4strict", "sql" и тд. Используйте предпросмотр!
 


Подписаться на уведомления без комментирования.