WordPress — Рисуем таблицы без всякой Камасутры
Автор: Алексей F8 | Опубликовано: 16 апреля 2011 | Рубрика: WordPress. Начало. | 39 комментариев
Так получилось, что между уроками образуются досадные интервалы. Увы... Чем больше совершенствуешься в своем деле, тем больше желающих заказать твои услуги, а значит свободного времени становится все меньше... Это поправимо, но не сразу. Впрочем отвлекся, сегодня расскажу о том, как рисовать таблицы в WordPress. Штатных средств в WordPress для этого нет. Сказать по совести, их и не надо. Для чего блоггеру, на которого ориентирована эта система управления, публиковать таблицы? Нет, ну если сильно приспичит, то есть в визуальном редакторе режим HTML. Открывай и пиши таблицу тэгами. 
Но! Товарищ! Это же не наш метод! Не надо усложнять! Все уже придумано до нас)) Разрешите представить плагин WP-Table Reloaded. Если он у вас уже установлен и активирован, сразу приступим к работе с ним. Если нет, то поскольку устанавливать плагины вы уже умеете... Как не умеете? Как не рассказывал?! А... точно.
Устанавливаем плагин WP-Table Reloaded
Обращаем свой взор на левое вертикальное меню и находим пункт «Плагины». Если вы не видите подпунктов, кликайте треугольничек справа от названия пункта и он раскроется.
Чтобы установить новый плагин (посмотреть их список можно кликнув подпункт «Плагины») кликните «Добавить новый». Откроется добавлялка на вкладке «Поиск». Это то, что нам нужно! Если ваш хостинг не поддерживает исходящие HTTP соединения, то фокус не удастся, но у моих клиентов такой проблемы не возникает. В конце концов их включение решаемый вопрос. В поле «Поиск» вставляем WP-Table Reloaded и жмем кнопку «Поиск плагинов». В списке результатов находим «WP-Table Reloaded» и жмем «Установить» (это ссылка такая под ним). Впрочем вместо ссылки «Установить» может стоять надпись «Установлен». Это значит, что плагин (да! да!) уже установлен и может даже активирован.
Итак, вы установили плагин, активировали его (во время установке будет предложено) и ждете, что что-то изменится.
Правильно ждете! Товарищи!
Работаем с WP-Table Reloaded
Смотрим на левое вертикальное меню в подпункты пункта «Инструменты», а там... Подсказываю. Чтобы увидеть подпункты этого пункта надо кликнуть треугольничек справа!
Ах вы и так это знали? Дальше не рассказывать?))) ОК. Кто все и САМ знает пусть дальше не читает))) А то потом «Спасибо» говорить придется)))))
Продолжаем. Смотрим, значит, подпункты пункта «Инструменты», а там новый подпункт WP-Table Reloaded! Кликаем по нему!
Обратите внимание! Все на русском!
Даже вот это горизонтальное меню!
Вроде все очевидно, но сразу возникает вопрос: С чего начать?
Начните с пункта «О Плагине».
Что касается создания таблицы, тут особенных вопросов не возникнет, если будете внимательно читать все то, что написано на страницах плагина.
Для тренировки созадим пример таблицы. Допустим у нас есть некая статистика увольнений сотрудников по отделам за прошлый, позапрошлый и текущий год.
Отдела всего четыре: Промышленного шпионажа, Тактического вычесывания, Агрессивного сбыта и, допустим, Контроля качества.
Значит у таблицы будет 4 колонки (название отдела, 2009, 2010, 2011) и 5 рядов (шапка и 4 отдела).
Кликаем «Добавить новую таблицу» и в открывшейся странице вносим название таблицы, описание, количество рядов и количество колонок.
Жмем кнопку «Добавить таблицу».
Заполняем таблицу. Жмем «Сохранить и вернуться».
Таблица создана. В дальнейшем ее можно редактировать и настраивать (я, например, в настройках выключил JavaScript).
Осталось добавить таблицу в текст нашей записи или страницы.
Делается это через визуальный редактор как в режиме HTML так и в Визуальном.
Ставим курсор в то место, куда нужно вставить таблицу.
В визуальном режиме жмем кнопку «Вставить таблицу» 
(в режиме HTML жмем кнопку «таблица»).
Если в визуальном редакторе такой кнопки нет — включите дополнительную панель (кнопка 
).
В отрывшемся всплывающем окошке выберите название нужной таблицы и кликните напротив него ссылочку «Поместить».
| Отделы | 2009 | 2010 | 2011 |
|---|---|---|---|
| Промышленного шпионажа | 10 | 30 | 1 |
| Тактического вычесывания | 15 | 4 | 3 |
| Агрессивного сбыта | 11 | 10 | 5 |
| Контроля качества | 8 | 52 | 4 |
Таблица вставлена. Не удивляйтесь, что в редакторе вместо нее какой-то коротких код с цифрой. Если нажмете в правой колонке кнопку «Посмотреть» вы увидите, что таблица все-таки появилась.
Прямо как у меня.
На этом урок окончен. Потренируйтесь. Уверен, все у вас получится))
А с вами был Лексиум!
Побольше практики!
Костя
А если бы ее (таблицу) еще и по центу можно было выровнять было бы вобще замечательно, не подскажите как?
Алексей F8
Способов не мало. Первое, что приходит в голову:
1. Можно заключить таблицу в тэги «center». Не по фэн-шую, но должно сработать.
2. Можно через стили задать таблицам в контейнере контента margin:10px auto; Или сначала auto, а потом пиксели.
3. Если дизайн не «резиновый» можно через те-же стили задать таблицам ширину и марджины жестко.
Жанна
Вот спасибо, пригодилось! Подписываюсь на вас
Алексей F8
Пользуйтесь на здоровья. Для того и писалось)
Elenka
Таблица получилась...круто)
Алексей F8
Хороший плагин. Сам пользую.
александр
Большое спасибо за обзор плагина, очень пригодился, работать удобно!!!
Алексей F8
Пожалуйста. Обожаю этот плагин))
Максим
Я делаю так — сделать таблицу в Ворд, потом сохранить как Веб-страницу, открыть сохраненный файл с помощью текстового редактора, копирую содержимое, открываю HTML редактор записи Вордпресс, вставляю, обязательно предпросмотр.
Вот как у меня выходит; informationsunami.ru/?p=602#more-602
Алексей F8
До генератора таблиц именно так и приходилось делать.
По сути это верстка.
Александр
Почему показывает ироглифы когда в визуальном редакторе нажимаю на иконку таблицы чтоб добавить даблицу в открывающемся окне место нормального текста показывает Ироглофи
Алексей F8
Надо видеть эти иероглифы. Возможно у вас кодировка не UTF-8, какой-нибудь плагин конфликтует или шаблон темы с косяками.
Александр
Кодировки wordpress или плагина и как меня кодировку?
Александр
Очень прошу подскажите пожалуйсто!
как скрыть заголовок страницы в wordpress?
есть страница, называется к примеру 111. она же выводится как пункт меню. например — главная, дополнительно, 111 и т.д.
при заходе на любую из этих страниц отображается её заголовок. вопрос, как этот заголовок убрать или изменить?
Алексей F8
Это от темы зависит. Скрыть заголовок можно сотней способов. Я обычно делаю несколько родительских страниц (с короткими заголовками), а все остальные — как подстраницы. В меню их прячу либо вломившись в код, либо с помомощью CSS.
Виктория
Подскажите: при создание таблиц в редакторе ни каких проблем, пишу в коде, но при достижении определенного объема при просмотре страницы — страница отображается пустой
Алексей F8
Трудно сказать. Причин может быть масса: начиная с особенностей темы и плагинов конкретного сайта, заканчивая странностями вывода страницы в самом движке. Как вариант решения — присмотреться к плагину, о котором тут идет речь.
Виктория
Выходные прошли не зря. С помощь пл-а wp-table-reloaded все получилось. Кстати пришлось скомбинировать: в самом пл-е не все можно сделать, как хотелось — фото, ссылки, титры. Сначала все делалось в визуальном редакторе WP, а потом код из HTML копировался в поле таблицы — получилось с первого раза. Может кому пригодится! Все работает — вставлять можно любые таблицы и их может быть сколько хочешь на одной странице...
Алексей F8
Спасибо. Этот совет пригодится многим читателям!
Александр Лыков
Пользовался этим плагином долгое время. В описании я писал нужный текст и он появлялся под таблицей.
Теперь этот текст с описания не отображаеться. Не могу понять в чем причина. А текст мне очень нуженю
Подскажите как можно исправить этот косяк.
P.S.: прописка текста под таблицей в ручную, не подходит. Так как когда я пишу в описаниях то текст появляется под всеми таблицами с одинаковым названием.
Александр Лыков
Все нашел сам.
Там под табличкой есть Настройки стиля таблицы и ставим галочку возле Описание таблицы: The Table Description shall be written the table. и тут моно выбрать что бы это описание было или над табличкой или под табличкой.
Вот такая история. Рад если кому то эта история поможет.
Алексей F8
Спасибо за информацию. Вполне возможно она кому-нибудь пригодится. Такие неочевидные моменты отнимают не мало времени, а решение оказывается простым, всего-то поставить галочку. Главное знать где)
Николай
Искал таблицу, что бы сделать расписание(см. test на карте сайта) Вроде неплохо получается, только столбцы разной ширины. Как задать одинаковую ширину? вроде выравняешь, потом добавляешь запись или ссылку и опять «едет».
И почему альтернативный цвет ряда только второй? мне например нужен 3-й, а еще лучше каждый. Там 2 зала — розовый и зеленый. Вот и подложку хотелось бы сделать соответствующую.
и последнее. Можно ли включить шрифты (Ж,К,Ч и цвета)
Заранее спасибо! (столько пожеланий! может мне другой плагин нужен?)
Алексей F8
1. Ряды — это сложно. Все известные мне варианты завязаны на программирование. Да и зачем каждый ряд красить в разный цвет? Это же расписание, а не коврик))
2. Выровнять ВСЕ столбцы можно через CSS. Достаточно задать ширину для тэгов td конкретной таблицы.
3. Для выделения шрифта (Ж,К,Ч) достаточно обрамить содержимое ячейки в соответствующий тег.
Плагин не универсален, но вполне удобен. Другие варианты создания таблиц более трудоемки.
Оксана
При открытии сайта, где на главной странице 2 таблицы выходит это соощение.То есть на 11 и 12 таблице. Что это может быть. Может быть в настройках плагина что-то поменять?
Data tables warning table id 12 no 1 Cannot reinitialize Data Table.
To retrieve the Data tables object for this table, please either no arguments to the dataTable function. Or set bretrieve to true Alternatively. To destroy the old table and create a new one, set b destroy to true (note that a lot of changes to the configuration can be made through the Api which is usually much faster
Онлайн-перевод Таблицы данных, предупреждающие стол id 12 no1, не Могут повторно калибровать Таблицу данных.
Чтобы восстановить объект Таблиц данных для этого стола, не нравьтесь ни один никакому аргументы функции dataTable. Или набор bretrieve к истинному Альтернативно. Чтобы разломать старый стол и создать новый, b набора разрушают к истинному (отметьте, что много изменений конфигурации может быть произведено через Api, который обычно намного быстрее
Алексей F8
Первый вопрос, а что было сделано перед тем, как появилось это сообщение? Вы данные в табличку не из «Ворда» (экселя и т.п.) вставляли?
Оксана
@ Алексей F8:Ни от куда не вставляла, заполняла прямо на сайте. Может она слишком длинная. Это не первая таблица, которую я сделала на сайте. И что означает начало перевода этого сообщения :/"Таблицы данных, предупреждающие стол id 12 № 1, не Могут повторно калибровать Таблицу данных"./На главной странице похожие таблицы, только во второй дополнения. То есть, я скопировала первую и дополнила ее.Может из-за этого.
Алексей F8
Возможно.
Попробуйте выгрузить первую в CSV, создать новую, залить в нее выгрузку, а уже потом дополнять.
Виктор
Спасибо, помогло! А то замучился рисовать
Николай
Алексей F8 пишет:
Со шрифтами все получилось! Спасибо. А вот выровнять столбцы не получается, таблица вообще в CSS не открывается. Вот это «2. Можно через стили задать таблицам в контейнере контента margin:10px auto; Или сначала auto, а потом пиксели.
3. Если дизайн не «резиновый» можно через те-же стили задать таблицам ширину и марджины жестко.» — где настраеивается
Николай
И вот это:=Выровнять ВСЕ столбцы можно через CSS. Достаточно задать ширину для тэгов td конкретной таблицы=
Поясните пожалуйста где это настраивается?
Алексей F8
Стили элементов таблиц можно задавать в файле стилей темы.
Николай
Здравствуйте!
Спасибо за подсказку.
Видимо прописать я должен это:
и вставить где-то здесь
2
3
padding: 4px 10px;
}
Подскажите пожалуйста !
С Уважением, Николай
Алексей F8
У каждой таблицы (созданной плагином) есть собственный класс. С ним и нужно работать.
Для выравнивания ячеек больше подойдет width. padding полезен, но для другого.)
Alexandra
Здравствуйте, так и не поняла как выделить жирным шрифтом текст внутри таблицы, напишите поподробнее пожалуйста как это делается, я не очень дружу с html и еще только начинаю знакомиться с wp. Спасибо!
Алексей F8
С HTML'ом НУЖНО дружить.)) Кто-ж за руль садится не зная правил?))
Чтобы выделить текст жирным нужно заключить его в соответствующий тэг (в нашем случае это либо strong, либо b).
Курсив делается тэгом i.
С удовольствием дал бы вам персональный урок по основам верстки, но индивидуальные занятия удовольствие дорогое)) В проекте есть небольшой бесплатный курс. Там и расскажу доступным языком.
Александра
ох, какой Вы милейший, спасибо, попробую разобраться, обещаю вскоре научиться HTMLу и на права сдать))))
Макс
Алексей F8 — доброго здоровья! Не подскажите каким образом можно поменять цвет линий таблицы (или скрыть их) в данном плагине?
Алексей F8
Я это делаю так:
1. В настройках плагина отключаю javascript
2. Создаю отдельный стиль в CSS для этой конкретной таблицы
Т.е. все сводится к банальной верстке.