Руководство

Как создать сайт для недвижимости на WordPress

Сайт недвижимости решает четыре задачи: показать объекты, помочь покупателю сузить выбор, ответить на вопросы, которые возникают по объявлению, и собрать заявку. Это руководство закрывает все четыре, начиная с чистой установки WordPress и заканчивая страницей объявлений с фильтрами для покупателя. В теме нет ленты MLS или IDX и нет CRM, поэтому руководство подойдёт агенту, небольшому брокерскому агентству или разработчику, который публикует собственные объекты.

Шаг 1: Подготовка WordPress к работе

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

  • Название сайта и слоган. Откройте «Настройки», затем «Общие». Название агентства указывают в заголовке, а слоган объясняет, что вы продаёте и где, например семейные дома в одном районе. Результаты поиска и ссылки при публикации цитируют обе строки.
  • Постоянные ссылки. Настройки, затем Постоянные ссылки, затем «Название записи». Тогда у каждого объекта будет понятный адрес, что важно, потому что ссылки на объекты пересылают партнёрам, родителям и друзьям.
  • Часовой пояс. Снова на экране «Общие». По нему проставляется время каждого запроса, и по этой отметке видно, кто из покупателей спросил первым.

В объявлениях много фотографий: у каждого объекта есть галерея, и низкий лимит памяти PHP обычно становится причиной, по которой импорт останавливается на середине загрузки медиафайлов. Спросите у хостинг-провайдера, каков лимит сейчас. Требования к версиям и порядок резервного копирования одинаковы для всех сайтов на Canvas, поэтому они описаны в руководстве по импорту.

Версии, резервные копии и запас ресурсов хостинга

Заявка, которая день остаётся непрочитанной, может стоить вам покупателя. WordPress передаёт свою почту вашему серверу, если вы не настроите иначе, и многие хостинги тихо её отбрасывают, поэтому подключите сервис доставки писем или плагин SMTP до публикации любого объявления.

Шаг 2: Установите Canvas и запустите мастер настройки

Загрузите zip-архив темы из панели управления (Внешний вид, Темы, Добавить новую, Загрузить тему), и мастер настройки запустится сразу после активации. Когда мастер попросит, вставьте лицензионный ключ: именно он позволяет загрузить пакет Real Estate. На шаге с демо найдите Real Estate. В дизайне не используется сторонний плагин, поэтому на шаге с плагинами установка не нужна, и мастер переведёт вас дальше.

В конце мастер также задаёт название сайта. Если вы импортировали сайт целиком, этот шаг заполняется за вас, а любой шаг можно пропустить и вернуться к нему позже из меню Canvas.

Каталог демо мастера настройки, на каждой карточке которого указано, сколько контента добавит демо перед импортом
Выбор демо. Карточка показывает, что добавит демо Real Estate до импорта.

Мастер настройки шаг за шагом

Сколько стоит лицензия и сколько сайтов она покрывает

Шаг 3: Импорт демо для недвижимости

Перед импортом изучите живое превью так, как это сделал бы покупатель: выполните поиск, отфильтруйте по цене, откройте объект. Это и есть само демо Real Estate, работающее на теме, которую вы собираетесь установить.

Какой объём выбрать

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

Что вы получаете

  • 9 страниц: три варианта главной страницы, страница с объявлениями, услуги, застройщики, о нас, контакты и блог
  • 10 объектов недвижимости, каждый как запись типа содержимого Properties с ценой, спальнями, ванными комнатами, площадью, галереей и картой.
  • Типы недвижимости: виллы, квартиры, офисы, загородные дома, коммерческая и жилая недвижимость, а также локации, по которым распределяется каждый объект
  • 5 записей блога, поэтому раздел новостей рынка не будет пустым с первого дня
  • 10 форм: четыре поиска по недвижимости, контактная форма, две формы быстрого запроса стоимости, форма бронирования и форма подписки
  • Шапка, подвал, верхняя панель, боковая панель и четыре варианта первого экрана — все они редактируемые записи
Страница списка демо Canvas Real Estate: над первым экраном полоса поиска по объектам, а ниже сетка карточек объектов.
Страница списка после импорта. Панель поиска над сеткой реальных объектов недвижимости.

Передумали насчёт дизайна? Откройте Canvas, затем «Импорт демо»: этот импорт откатится вместе со всеми записями объектов недвижимости, а прежние настройки вернутся.

Как работает импорт демо: все подробности

Шаг 4: Замените демо-текст и изображения

Откройте главную страницу, которую вы сохраняете, в разделе «Страницы». Редактор показывает её внутри настоящих шапки, полосы поиска и подвала, поэтому страница, которую вы редактируете, совпадает со страницей, на которую попадает покупатель.

Выберите один из трёх дизайнов главной страницы

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

Сначала текст, затем фотографии

Просто замените текст в любом заголовке или абзаце. Затем займитесь изображениями: выберите нужное, замените его из медиатеки и подбирайте фото экстерьера с пропорциями, близкими к демо, чтобы главный экран не смещался. Цвета, ссылки и размеры настраиваются на панели, которая открывается справа для каждого блока.

Замените демо-текст тем, что может сказать только вы: улицы, на которых вы реально работаете, сколько лет вы на них работаете, что входит в ваше вознаграждение. Покупатель, выбирающий между двумя агентами, читает внимательно и ищет детали. Если раздел вам не подходит, удалите его и вставьте на его место паттерн: в Canvas есть 183 паттерна и 314 блоков, а паттерн приходит как обычные блоки, которые можно переставлять так же, как любые другие.

Редактор блоков WordPress с открытой страницей Canvas: шапка, главный блок и подвал выводятся вокруг содержимого
Редактирование в контексте. Шапка и подвал обрамляют страницу, пока вы над ней работаете.

Шаг 5: Внесите объекты недвижимости в виде записей

Именно от этого шага зависит, можно ли будет поддерживать сайт. Объект недвижимости в демо «Недвижимость» — это не страница, которую вы верстаете. Это запись в типе контента «Объекты», которая отображается в админке, как записи блога, и от которой зависят все карточки, все строки списков и страница самого объекта.

Что хранит одна запись

  • Цена и период оплаты, записанные так, как их принято озвучивать: $1.2m с Leasehold или $799 с ежемесячной оплатой.
  • Цена и площадь в виде обычных чисел рядом с ними. Именно с этими значениями сравниваются диапазоны поиска, поэтому запись с пустыми полями не попадает в фильтр по цене или площади, но по-прежнему отображается в поиске без фильтров.
  • Бейдж, например «Продаётся», «Долгосрочная аренда» или «Горячее предложение». Это поле записи, поэтому никому не нужно перерисовывать графику.
  • Спальни, ванные, площадь и расположение, то, что покупатель первым делом ищет в карточке.
  • Галерея, ссылка на видео и встраиваемая карта, а также полоса статистики, список характеристик и список удобств, который вы пишете по одному пункту в строке.
  • Агент, указанный в объявлении, с именем, должностью и фотографией.

Каждый объект заносите дважды

Укажите для каждой записи тип недвижимости и местоположение. Эти две таксономии лежат в основе выпадающих списков поиска и фильтров блока списка объектов, поэтому объект, не отнесённый ни к одной из них, никто не найдёт. Демо начинается с вилл, квартир, офисов, участков, коммерческой и жилой недвижимости и четырёх локаций; переименуйте их под свои районы и добавляйте новые.

Пройдите один раз все 10 демо-записей. Измените первую, чтобы изучить поля, затем удалите остальные и добавьте свои. Первые несколько занимают время; дальше это ввод данных, и о верстке страницы объекта больше не придётся думать.

Страница объекта недвижимости из демо Canvas Real Estate на телефоне: название объекта, его тип, кнопки галереи и видео, а также цена с периодом оплаты.
Одна запись, на телефоне. Название, тип, галерея, видео и цена берутся из полей записи.

Страница объекта собрана из блоков, каждый из которых выводит одну часть карточки: баннер Hero, полосу с показателями, таблицу характеристик, список удобств, встроенную карту, встроенное видео и ряд похожих объектов. Переставляйте их или удаляйте ненужные.

Шаг 7: Принимайте запросы через форму

Объявление, на которое никто не может ответить, остаётся брошюрой. В демо уже настроены формы запросов, и каждая из них представляет собой отдельную запись формы, которую вы размещаете на любой странице блоком Form Embed.

Три, которые приходят вместе с демо

  • Контактная форма, на странице контактов для общих запросов.
  • Две короткие формы запроса, тёмная и светлая, для короткого запроса оценки, который вы размещаете рядом с объектом.
  • Форма резервирования, для записи на просмотр или запроса на бронь конкретного объекта.

Настройте их один раз

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

Каждая заявка также сохраняется на вашем сайте в разделе «Отправки» в админке WordPress, чтобы переполненная почта никогда не привела к потере заявки. Задайте срок хранения, и старые записи будут удаляться или обезличиваться по расписанию, что определяет, как долго имя и номер покупателя остаются в базе. CRM должна работать вне темы: действие вебхука формы передаёт каждую заявку в вашу CRM, а Canvas не претендует на роль CRM.

Шаг 8: Настройте шапку, контактные данные и подвал

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

Шапка

Разбейте шапку на зоны: логотип слева, навигация посередине, а справа разместите Header Button для главного действия, которое вы хотите предложить посетителям, например заказ оценки, и рядом Header Icon Link с вашим номером телефона. Демо-шапка прозрачна поверх фонового фото главного экрана и становится сплошной при прокрутке страницы. Оба режима настраиваются в записи, а страница может переопределить общую шапку сайта.

Над ним находится верхняя панель, а боковая панель ждёт за ним. Верхняя панель является отдельной записью, поэтому именно там удобно указать открытый показ на этих выходных.

Подвал и детали

Адрес офиса и номер телефона находятся в блоке Footer Contacts. Найдите каждую копию номера телефона из демо и замените её: на странице контактов, в подвале и в настройках уведомлений каждой формы. Лид, который позвонит по номеру из демо, так и не дойдёт до вас.

Создайте шапку без плагина, шаг за шагом

Два демо для недвижимости: сравнение

Шаг 9: проверьте и опубликуйте

Перед тем как сайт увидит первый покупатель, пройдите эти проверки. Ни одна из них не займёт много времени.

  • Проведите собственный поиск. Выберите местоположение, тип и диапазон цен, по которым точно есть совпадения, затем другой диапазон, по которому их нет, и убедитесь, что оба варианта работают.
  • Откройте три страницы объектов и сверьте цену, количество спален, санузлов и площадь с вашими документами.
  • Отправьте настоящую тестовую заявку с телефона через мобильную сеть, а затем проверьте, пришло ли письмо и сохранилась ли запись.
  • Посмотрите на телефоне. Просмотр объектов происходит на диване, в поезде и на тротуаре у дома.
  • Опишите фотографии. Альтернативный текст зачитывают программы для чтения с экрана, и это один из главных способов, которым поисковая система понимает, как выглядит комната.
  • Проверьте экран SEO. Заголовки, описания, карточки для соцсетей и структурированные данные по 16 типам schema берутся из самих объявлений, поэтому конкретное объявление даёт конкретный результат в поиске.
  • Выберите нужные переключатели производительности. В Canvas доступно 35 оптимизаций; каждую из них можно снова отключить, и каждая не даёт странице загружать то, что ей не нужно.

Затем опубликуйте сайт. Дальше он представляет собой набор карточек объектов: вы обновляете их по мере поступления объектов в продажу и перевода в статус «под предложение», а не перестраиваете проект заново.

Источники

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

Вопросы

Частые вопросы

Полный FAQ ответит на остальные вопросы, а документация подробно описывает каждую настройку.

Подтягивает ли это объявления из ленты MLS или IDX?

Нет, и CRM тоже не входит. В Canvas нет интеграции с MLS или IDX и воронки заявок: тема выводит объекты, которые вы публикуете на своём сайте, и сохраняет обращения, которые приходят с этих объектов. Синдицированная лента, воронка заявок и планировщик просмотров относятся к плагинам, а формы демо Real Estate могут отправлять данные на вебхук, чтобы заявка попадала в инструмент, которым вы уже пользуетесь. Если сайту прежде всего нужна лента от местной ассоциации риелторов, подойдёт специализированный плагин для объявлений.

Как добавить объект недвижимости?

Откройте раздел «Объекты», затем «Добавить новый», так же как при написании записи. Заголовок — это название объекта, избранное изображение — фото для карточки, а поля под редактором содержат цену и период оплаты, метку, местоположение, количество спален, ванных комнат и площадь, галерею, полосу статистики, список характеристик, список удобств, агента, указанного в объявлении, ссылку на видео и встраиваемую карту. Отнесите объект к типу недвижимости и местоположению, и он появится в списке, в поиске и на собственной странице.

Действительно ли поиск по недвижимости фильтрует мои собственные объявления?

Да, поиск по недвижимости в демо Real Estate фильтрует объявления, которые вы публикуете на своём сайте, и ничего не загружается из других источников. Поиск — это Canvas Form в режиме поиска, направленная на страницу Listing, а блок Listing на этой странице считывает критерии и сужает запрос: покупка или аренда, местоположение, тип объекта, количество спален, количество санузлов, диапазон цен и диапазон площади. Критерии передаются в адресе, поэтому отфильтрованный список можно открыть по ссылке, добавить в закладки и поделиться им.

Куда попадают заявки?

В таблицу на вашем сайте, которая выводится в админке WordPress, и на email-адрес, указанный в форме. Контактная форма, форма быстрого запроса стоимости и форма бронирования в демо настроены на оба варианта, поэтому обращение не потеряется, даже если почтовый ящик переполнен. Каждая из них также содержит невидимое поле-ловушку (honeypot), которое отсекает большую часть спама, не беспокоя людей.

Демо содержит 10 объектов. А если у меня их двести?

Добавьте все двести как записи объектов недвижимости: в демо 10 объектов — это лишь пример, а не ограничение. Блок списка задаёт, сколько объектов выводится на странице, из какого типа недвижимости брать записи и порядок сортировки. Выпадающие списки локаций и типов недвижимости в поиске считывают значения в реальном времени, поэтому локация, добавленная в следующем месяце, появится в поиске без правки формы.

Создайте свой следующий сайт с Canvas

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