Как создать сайт недвижимости с помощью Toolset Real Estate и OceanWP

Сайт недвижимости должен быть таким же стабильным и надежным, как дома, которые вы продаете.

Но создать надежный веб-сайт по недвижимости, который понравится пользователям, иногда может быть так же сложно, как построить дома, которые вы продаете, — если вы используете неправильный набор инструментов.

К счастью, доказано, что объединение Toolset Real Estate с OceanWP дает вам профессиональный веб-сайт по недвижимости со всеми функциями, которые вам могут понадобиться.

В этом руководстве мы покажем вам, как создать следующие функции:

• Пользовательские типы сообщений для разных свойств и агентов
• Пользовательские поля для добавления информации, такой как количество ванных комнат.
• Таксономии для разделения вашей собственности на основе характеристик (отдельные дома, бунгало и т. д.)
• Шаблоны для отображения ваших свойств с той же структурой
• Ползунок для отображения изображений ваших свойств
• Пост-отношения, чтобы связать агентов по недвижимости с недвижимостью, за которую они отвечают.
• Поиск, чтобы пользователи могли легко найти лучшую недвижимость для них
• Карты, чтобы показать расположение свойств и результатов поиска
• Интерфейсная форма, чтобы пользователи могли отправлять свои собственные списки недвижимости

Если вы хотите выполнить эти шаги по мере их прочтения, вы можете использовать свой собственный бесплатный тестовый веб-сайт по недвижимости , созданный Toolset и OceanWP.

Почему мы используем Toolset Real Estate и OceanWP

Toolset Real Estate является частью Toolset, который предоставляет вам все функции, необходимые для создания различных типов профессиональных веб-сайтов.

В частности, с Toolset Real Estate вам не понадобится какой-либо другой плагин для добавления функций, необходимых веб-сайту по недвижимости. Это означает, что вам не нужно беспокоиться о совместимости плагинов или о том, что огромное количество плагинов замедлит работу вашего сайта.

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

Вместе Toolset Real Estate и OceanWP прекрасно работают вместе, что означает, что вы можете создавать надежные веб-сайты, которые отлично выглядят без каких-либо проблем.

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

Что вам нужно для начала

При создании пользовательского сайта недвижимости с помощью Toolset вам потребуются следующие плагины Toolset:

• Типы наборов инструментов — для настройки пользовательских типов записей, полей и таксономий для свойств и агентов.
• Блоки набора инструментов — для разработки внешнего интерфейса вашего сайта (шаблоны, поиск свойств и т. д.).
• Карты набора инструментов — для добавления функций, которые позволяют искать и отображать недвижимость на картах.
• Формы набора инструментов — для предоставления агентам возможности управлять свойствами через настраиваемые интерфейсные формы.
• Доступ к набору инструментов — для управления тем, к каким частям сайта могут получить доступ посетители, клиенты и агенты.

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

1. Создайте свой собственный тип записи

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

2. Теперь нам нужно назвать тип нашего сообщения и сохранить его в том месте, где мы хотим, чтобы оно отображалось в меню администратора.

3. Нажмите Сохранить тип сообщения.

И это все. Пользовательский тип сообщений для ваших домов готов.

2. Создайте свои настраиваемые поля

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

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

1. На панели инструментов набора инструментов нажмите « Добавить настраиваемые поля » рядом с настраиваемым типом записи «Дома», который мы создали.

2. Появится окно « Добавить новое поле », в котором мы можем выбрать, какой тип настраиваемых полей нам нужен. Например, пользовательское поле «Год постройки» будет числом.

3. Для каждого поля вам нужно будет установить такие параметры, как обязательность ввода информации.

4. После того, как вы заполнили все предпочтительные параметры для поля, нажмите « Добавить новое поле », чтобы перейти к следующему в группе. После того, как вы добавили все поля для группы полей, нажмите «Сохранить группу полей».

Теперь каждый раз, когда вы редактируете пост «Дом», вы будете видеть эти поля для заполнения.

3. Создайте свои собственные таксономии

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

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

1. На панели инструментов набора инструментов щелкните Добавить пользовательскую таксономию в строке Houses .
2. Введите следующее в поля
   1. Имя во множественном числе: Типы свойств
   2. Имя в единственном числе: Характеристика свойства
   3. Slug: характеристика свойства
3. Выберите, хотите ли вы, чтобы таксономия была иерархической или плоской. Для целей этого мы будем держать его плоским.
4. Выберите, с каким типом записей вы хотите связать таксономию — в данном случае это будут «Дома».
5. Щелкните Сохранить таксономию.

Теперь, когда мы редактируем или создаем тип записи «Дома», мы можем создавать и выбирать таксономии «Тип собственности», чтобы атрибутировать тип записи.

4. Создайте шаблон для отображения свойств

Теперь у нас есть основные компоненты, необходимые для демонстрации наших свойств, но остается важная часть процесса — как мы отобразим их во внешнем интерфейсе?

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

Чтобы создать наш шаблон для отдельных «домов», мы будем использовать блоки набора инструментов с редактором блоков WordPress.

С помощью блоков набора инструментов вы можете создавать шаблоны для настраиваемых типов сообщений с настраиваемыми полями и таксономиями. Без HTML, без CSS, без JavaScript и без PHP!

1. Перейдите в Toolset → Dashboard и нажмите кнопку Create Content Template в строке Houses.
2. Используйте Редактор блоков WordPress для разработки шаблона.
3. Выберите блоки из раздела «Набор инструментов» для любой части шаблона, в которой отображаются поля (не статические элементы). Например, используйте блок «Заголовок» набора инструментов для любого заголовка, который будет отображать поле. Toolset добавляет возможность отображать динамический контент также из ядра WordPress и самых популярных сторонних плагинов.
4. Включите динамические источники для блоков, которые должны отображать поля публикации, отображаемые шаблоном.

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

5. Создайте динамический слайдер, чтобы показать изображения вашего объекта

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

Используя Toolset, вы можете легко создавать сложные слайдеры с переходами без какого-либо сложного кода PHP.

1. После того, как вы отредактировали или создали страницу, публикацию или шаблон, вставьте блок « Вид » и создайте новый вид.
2. В мастере создания представлений включите нумерацию страниц и в разделе « Выбор стиля цикла представления» выберите параметр « Неформатированный (последний)».
3. На последнем шаге выберите тип поста, для которого вы хотите отображать посты.
4. Нажмите, чтобы завершить работу мастера, и ваше представление готово.

Отображение полей сообщений и применение пользовательских стилей

1. Вставьте блок Container , чтобы добавить фон к слайдеру. Например, вы можете установить в качестве фона слайда динамическое изображение, полученное из избранного изображения публикации.
2. Используйте блоки набора инструментов, чтобы добавить в слайдер другие динамические поля, например заголовок сообщения.

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

6. Создайте пост-отношения, чтобы связать ваши дома с вашими агентами.

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

Чтобы узнать больше о том, как они помогают вам, ознакомьтесь с нашим руководством по созданию отношений публикации с помощью Toolset и OceanWP.

На нашем сайте недвижимости у нас есть дома и агенты по недвижимости. Давайте создадим почтовые отношения между ними.

Создайте отношения публикации

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

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

5. Назовите свои отношения.

6. Просмотрите свои отношения и нажмите Готово.

Как назначить свойства агенту

Теперь мы можем приступить к установлению конкретных связей между нашими объектами недвижимости и агентами по недвижимости.

1. Перейдите на страницу агента из меню администратора.
2. В нижней части страницы появится новый раздел под названием « Свойства агента». Нажмите « Подключить существующее свойство », а затем введите имя свойства или выберите его из доступного списка.

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

Создание представления для отображения ваших отношений с почтой

Есть два способа отобразить список отношений публикации:

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

Отображение множества связанных элементов

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

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

Отображение одного связанного элемента (родительского)

1. Перейдите к шаблону содержимого «Свойства».
2. Вы можете использовать любой блок Toolset для отображения родительской информации.
3. В свойствах блока выберите родителя из Post Source.
4. Выберите поле, которое вы хотите отобразить.

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

Расширенный пользовательский поиск — лучший способ для ваших пользователей найти именно то, что они ищут. С помощью нескольких фильтров они смогут выбрать лучший дом на основе своих личных требований.

1. Начните с вставки блока View на страницу.
2. В мастере создания видов включите параметр «Поиск».

3. На следующей странице выберите «Свойства» в разделе « Выберите содержимое, которое будет отображаться в этом представлении» .

4. После завершения работы мастера создания представления в области редактирования представления появится раздел Поиск представления. Используйте доступные кнопки, чтобы добавить пользовательское поле поиска, вставить кнопки отправки и сброса или добавить другие блоки.

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

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

6. Теперь мы готовы создать раздел, в котором будут отображаться результаты. Мы делаем это, добавляя блоки в область View Loop редактора.

7. Нажмите Добавить блок .

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

8. Показать карты, чтобы показать расположение свойств

Карты — отличный способ помочь пользователям сразу определить точное местоположение объекта.

1. Чтобы начать создание карты, перейдите на страницу или шаблон, где вы хотите отобразить карту. Вставьте блок Mapset Map. Если вам нужно установить ключ API, Google предоставляет подробные инструкции о том, как это сделать.
2. В разделе Источник для маркера включите Динамический источник .
3. В раскрывающемся списке « Источник публикации » выберите «Текущий ресурс». Затем в раскрывающемся списке « Источник » выберите любое настраиваемое поле, содержащее адрес, чтобы отобразить его на карте.

9. Создайте интерфейсную форму, чтобы пользователи могли отправлять свой контент

Наконец, вы можете захотеть, чтобы пользователи предоставляли свои собственные списки для рекламы на вашем веб-сайте недвижимости. Один из самых простых способов сделать это — через форму во внешнем интерфейсе, в которой есть все поля, которые вы хотите, чтобы они заполнили.

Создание формы не может быть проще благодаря редактору перетаскивания Toolset.

1. Перейдите в Toolset → Post Forms и нажмите Add New.
2. Нажмите « Продолжить» в мастере форм и введите имя формы.
3. Измените настройки формы, в том числе:
   1. Тип сообщения, к которому они будут добавлять материалы
   2. Статус сообщения после его отправки
   3. Что видят пользователи после отправки формы (вы также можете добавить сообщение, как я сделал ниже)

4. Теперь вы попадаете в редактор перетаскивания, где вы можете решить, какие поля и где должны быть. Здесь вы также можете использовать поля редактора CSS и редактора JS для оформления формы. Есть также ряд дополнительных элементов, которые вы можете добавить.

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

6. Нажмите Готово , и теперь ваша форма готова к отображению.

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

Следующие шаги

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

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

Какой у вас был опыт создания сайта по недвижимости? Дайте нам знать об этом в комментариях!