Как сделать и вставить таблицы в WordPress. Продолжаем работать с плагином WP-Table Reloaded


Если у Вас нет готовых таблиц в Excel, то можно сделать ее самому с помощью плагина WP-Table Reloaded. Заходим на главную страницу плагина и нажимаем ссылку «Добавить новую таблицу»:

WP-Table Reloaded

Откроется страница «Добавить новую таблицу»:

WP-Table Reloaded

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

WP-Table Reloaded

Теперь нам надо двигать по разделам вниз. Первый раздел «Информация о таблице»:

WP-Table Reloaded

Именно здесь меняется название таблицы и ее описание. Опускаем страницу ниже:

WP-Table Reloaded

Сначала о назначении чекбоксов (квадратиках, они показаны стрелками). Они нам пригодятся при манипуляции данными (это не мой термин, а название следующего раздела). В прямоугольниках пишите названия строк, столбцов, данные таблицы.

Переходим к следующему разделу «Манипуляции данными». Там почти все понятно, но некоторые пояснения я дам.

WP-Table Reloaded

Начнем с левого ряда. Выше всего расположены две кнопки: «Поместить ссылку» и «Поместить изображение». Возьмем первый ряд и поместим в левой ячейке изображение, а в правой – ссылку.

Сначала нажмем кнопку «Поместить изображение». Появится вот такое окно:

WP-Table Reloaded

Кликаем по ячейке  В1, она сразу увеличится в размере и еще у Вас откроется окно:

WP-Table Reloaded

Это окно откроется на вкладке «Медиа библиотека». Если у Вас есть нужные изображения – используйте их. Если нет – откройте вкладку «С компьютера» и с помощью кнопки «Обзор» найдите нужную картинку. Далее делайте все, как при обычном размещении картинок.

Но в таблицу попадет не картинка, а ссылка на нее:

WP-Table Reloaded

Чтобы увидеть саму картинку и как она разместилась в таблице, надо перейти на сайт. Но мы сначала разместим ссылку и внесем еще кое-какие изменения. А потом посмотрим, что получилось. Нажимаем кнопку «Поместить ссылку». Выскакивает окно:

WP-Table Reloaded

Я написал адрес главной страницы моего блога. Нажимаем ОК. Появляется новое окно:

WP-Table Reloaded

В окошке, где написано «текст ссылки» вы должны написать текст самой ссылки (анкор), это именно то, что будет видно читателям Вашего сайта. Я напишу: перейти на сайт novichkoff.ru. После того, как нажмете на ОК, откроется окно с полной ссылкой:

WP-Table Reloaded

Теперь надо нажать ОК и кликнуть в нужной ячейке таблицы, у нас это – ячейка В1.

WP-Table Reloaded

Теперь, прежде чем Вы приступите к другим изменениям в таблице, внесенные нами данные следует сохранить. Нажимать надо на кнопку «Обновить изменения». Если Вы нажмете на кнопку «Сохранить и вернуться», то Ваши изменения будут сохранены, но Вас перебросят к списку таблиц, тогда надо перейти к редактированию этой таблицы.

Несколько слов о том, чем отличаются кнопки «Поместить ряд» и «Добавить ряд». Обе они используются при добавлении новых рядов, но «Поместить ряд» означает, что новый ряд будет помещен ПЕРЕД рядом, который Вы отметили флажком в чекбоксе, т.е. новый ряд будет в середине таблицы. Если же Вы нажмете «Добавить ряд», то новый ряд появится в самом низу, после всех рядов. Это же относится и к столбцам.

И еще несколько слов об обьединении ячеек. Чтобы обьединить ячейки по горизонтали, надо, сначала надо нажать кнопку «Добавить colspan». Появится окно:

WP-Table Reloaded

Нажимаем ОК. Теперь выбираем ячейки, которые мы хотим обьединить, например, А3 и В3. Значит, надо кликнуть по ячейке В3:

WP-Table Reloaded

И еще попробуем обьединить по горизонтали ячейки А2 (с текстом) и В2 (без текста) и посмотрим на сайте, где разместился текст. И сразу же обьединим по вертикали («добавить rowspan»)ячейки В4 и В5, чтобы увидеть, как это все будет выглядеть.

Про другие настройки я рассказывать не буду. Во-первых, Вы сможете разобраться с ними сами. А во-вторых, сегодня 31 декабря, Новый Год на носу, а времени осталось мало.

Перейдем к следующему разделу «Настройки стиля таблицы». Здесь рекомендую отметить галочкой «Подсветка ряда». При наведении курсора на какой-то ряд, он будет выделяться цветом. Если Вы хотите изменить какие-либо цвета, идите на сайт автора, там сказано в FAQ, как это сделать. Но предупрежу – надо знать CSS.

И последний интересующий нас раздел:

WP-Table Reloaded

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

Раздел «Поля определенные пользователем», мы сегодня трогать не будем. Но если Вам нужно сохранить  таблицу на компьютере, то нажмите «Экспортировать таблицу»:

WP-Table Reloaded

Появится новая страница. Нажмите «Экспортировать таблицу»:

WP-Table Reloaded

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

WP-Table Reloaded

Чтобы посмотреть, что мы сделали надо перейти (об этом подробно в предыдущей статье) в адмпанель, выбрать «Редактирование страниц», далее выбрать страницу для экспериментов, отметить визуальном редакторе место в тексте, где будет таблица, нажать кнопку «Вставить таблицу», выбрать Вашу таблицу, нажать «Поместить». Появится ссылка на таблицу:

WP-Table Reloaded

Обновляете страницу и переходите на сайт:

WP-Table Reloaded

Вот наша табличка. Обратите внимание на следующие моменты:

  1. первая графа значительно шире, чем другие. Это потому, что размеры картинки такие. Поэтому и первый столбец (А) шире, чем второй. Другими словами. Ваш WordPress сам понимает какие там размеры и подгоняет под них ширину и длину ячеек, соответственно, столбца и ряда.
  2. длинная ячейка, где написано «2 ряд» — это та самая, где мы обьединяли ячейки по горизонтали. Обратите внимание на то, что она более высокая, чем следующая (из-за имеющегося текста).
  3. 4 и 5 ячейки во втором столбце были обьединены.
  4. обратите внимание, где располагается текст в обьединенных ячейках.

На этом сегодня закончу. Получится, продолжу завтра.

Да. Чуть не забыл. Посмотрите, я навел курсор на третий ряд, видите, он выделился цветом (темно-серым)?

WP-Table Reloaded

Альтернативные цвета рядов у нас не видны, но они есть: белый и светло-серый. Когда сделаете свою таблицу – увидите. Дерзайте!

А теперь о приятном:

ВСЕХ С НОВЫМ ГОДОМ!

Желаю Вам в 2011 году хорошего тИЦ и PR, а тем, кто еще не сделал свой первый сайт – доделать его до конца. А я в Новом году порадую (надеюсь, что порадую) новыми статьями, в том числе и о заработке для начинающих. Уже идет сбор статистики.

Предыдущие статьи:

  1. http://www.novichkoff.ru/kak-sdelat-i-vstavit-tablicy-v-wordpress-nachalo-plagin-wp-table-reloaded.html

Следующие статьи:

  1. http://www.novichkoff.ru/kak-sdelat-i-vstavit-tablicy-v-wordpress-zakanchivaem-razbirat-plagin-wp-table-reloaded.html
  2. http://www.novichkoff.ru/kak-sdelat-i-vstavit-tablicy-v-wordpress-on-line-generatory.html
  3. http://www.novichkoff.ru/kak-sdelat-i-vstavit-tablicy-v-wordpress-on-line-generatory-2.htm

...Сообщите об этой статье своим друзьям:
Благодарю Вас!
А еще Вы можете подписаться на рассылку и первым получать самые свежие статьи.

До встреч в Новом Году!

Автор: Сергей Ваулин

Похожие записи по этой теме:

4 thoughts on “Как сделать и вставить таблицы в WordPress. Продолжаем работать с плагином WP-Table Reloaded

  1. Олег

    У меня этот плагин не работал. Сделал по простому. Правда не так красиво, но зато надежно

    Reply
    1. admin Post author

      Олег, на своих сайтах я тоже часто делаю таблицы вручную. Но этот плагин во-многом облегчает работу

      Reply
  2. Галина Жилкина

    Большое спасибо за очень полезную статью. Я как раз искала как сделать и вставить таблицы в WordPress. Плагин WP-Table Reloaded — это как раз то, что мне необходимо.

    Reply
    1. admin Post author

      Галина, я думаю еще написать статью о создании таблиц с помощью Google Docs. Там есть свои плюсы

      Reply

Оставить комментарий

Your email address will not be published. Required fields are marked *