Таблица цен на WordPress своими руками за 15 минут

Нередко у разработчиков возникает необходимость сделать таблицу цен на сайте под управлением WordPress. Такая задача чаще всего возникает в процессе создания посадочной страницы или лендинга в простонародье. Представим, что этот сайт создает молодой разработчик или начинающий бизнесмен, который, по разным на то причинам, не готов заказывать сайт — и делает все сам. Ему нужна таблица цен… Что предпримет наш мастер?

Установит плагин или сверстает таблицу?

Скорее всего, он пойдёт в Google, введёт запрос: «плагин таблица цен wordpress», получит в выдаче несколько обзоров популярных плагинов, среди которых будут часто фигурировать WP Table Manager, Go Pricing или другие похожие. Наш разработчик все таки выберет один из них по своему усмотрению, установит, настроит на сколько это возможно, и будет ему счастье. А будет ли?

Основные недостатки плагина:

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

А что, если я предложу написать таблицы вручную? Нужно потратить для этого от 15 минут до пары часов, в зависимости от существующих навыков и желания. Многие сразу подумают, что им придется изменять сам шаблон сайта, перелопатить много внутреннего кода и т.д. Это устрашает. Особенно, когда опыта еще не так много или нет времени разбираться. Но, не так страшен черт, как его малюют. Все намного проще.

Таблица цен своими руками

Предлагаю написать таблицу в стоковом редакторе страницы, используя только HTML + CSS. Верстать будем вместе на примере одного нашего лендинга по сдаче квартир посуточно в Светлогорске, Беларусь. Постараюсь растолковать все доступно и просто. Поехали.

Итак, сначала создаём новую запись или страницу (зависит от структуры вашего сайта) и открываем не визуальный редактор, а текст (см. кликабельный скриншот).

HTML редактор записи
HTML редактор записи

В редакторе мы напишем простой html код таблицы. По просьбе заказчика, таблица цен должна состоять из 3 блоков, в каждом из которых по 4 строки. В строках будут вводиться наименование товаров или пакетов услуг, значения цен,  иконка ключа и кнопка под которой спрятаны условия бронирования квартиры. Ниже представляю готовый код:

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

Пользуясь комбинациями клавиш Ctrl+C и Ctrl+V, можно сделать любое количество блоков и строк. Заданы несколько классов для блоков и элементов списка. К этим классам мы будем обращаться в таблице стилей. Все азы html/css расписывать не буду, ибо для этого нужна не одна статья. Гуглите ребята:)

Стилизация блока

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

Здесь мы задали оптимальные отступы и ширину блоков. Вот что получилось на данном этапе:

Голая таблица цен
Голая таблица цен

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

Результат

В результате всех манипуляций в стилях мы получаем легкую и адаптивную таблицу цен. При наведении блок плавно увеличивается, меняет цвет фона и текста на противоположный. Такой эффект даёт возможность преподнести информацию пользователю прямо «пред его ясные очи» :)

Таблица цен html + css
Таблица цен html + css

Вывод

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

Читайте также: Как создать страницу «Ошибка 404» на WordPress

На сегодня все, но я не прощаюсь. Если что-то не понятно расписал или у вас не получилось это реализовать, пишите в комментарии ‒ разберёмся вместе.

Таблица цен на WordPress своими руками за 15 минут
Рейтинг: 5 Оценок: 2
comments powered by HyperComments
Иван Медведев

Автор: Иван Медведев

Основатель веб-студии "MEDIOL". Все началось в далеком 2008 году с увлечения сайтами. Довольно быстро это увлечение переросло в хобби. Сегодня профессионально разрабатываю и продвигаю сайты любой сложности. Я занимаюсь любимым делом и делаю это с удовольствием!