06 Ноя
Создание контента с фронтенда сайта — одна из самых востребованных функций для WordPress-проектов. Особенно это актуально, если ваш сайт работает с пользовательским контентом: объявления, недвижимость, каталоги, отзывы и т.д. В этой статье рассмотрим, как реализовать возможность добавления записей Custom Post Type (CPT) напрямую с пользовательской части сайта, без доступа к админке WordPress.
Зачем добавлять Custom Post Type с фронтенда
Во многих проектах логично позволить пользователям создавать собственные записи. Например, если на сайте публикуются дома, сдаваемые в аренду, агенты или обычные пользователи должны иметь возможность добавлять объявления.
Очевидно, что давать им доступ к админке WordPress небезопасно и неудобно. Поэтому правильное решение — сделать специальную форму на фронтенде, через которую пользователь может создать новый пост нужного типа.
Создание шаблона страницы для формы
Чтобы форма отображалась на отдельной странице сайта, нужно подготовить шаблон. В плагине создаётся специальный файл, например property-template.php, который подключается через систему шаблонов WordPress.
Такой шаблон можно:
- автоматически создавать при активации плагина (через хук
register_activation_hook), - или просто указать в документации плагина, чтобы пользователь сам создал страницу и выбрал для неё этот шаблон.
Это более гибкий вариант, так как сайт-администратор может управлять страницей вручную.
Структура шаблона формы
На странице с шаблоном мы выводим контент (если он есть в редакторе WordPress) и под ним размещаем форму.
Пример базовой структуры:
<div class="wrapper">
<?php
if ( have_posts() ) :
while ( have_posts() ) : the_post();
the_title('<h1>', '</h1>');
the_content();
endwhile;
endif;
?>
<div class="form">
<form method="post" id="property_form" enctype="multipart/form-data">
<!-- Здесь будут поля формы -->
</form>
</div>
</div>
Поля формы для добавления Property
Теперь нужно создать все необходимые поля для нашего типа записи property. В типичных объявлениях используются:
- Title (Заголовок) —
input type="text" - Description (Описание) —
textarea - Image (Изображение) —
input type="file" - Location (Локация) —
select, заполняемый из таксономии
Пример базовой формы:
<p>
<label for="property_title">Заголовок</label>
<input type="text" name="property_title" id="property_title" required tabindex="1">
</p>
<p>
<label for="property_description">Описание</label>
<textarea name="property_description" id="property_description" required tabindex="2"></textarea>
</p>
<p>
<label for="property_image">Изображение</label>
<input type="file" name="property_image" id="property_image" required tabindex="3">
</p>
<p>
<label for="property_location">Локация</label>
<select name="property_location" id="property_location" tabindex="4">
<?php
$locations = get_terms([
'taxonomy' => 'location',
'hide_empty' => false,
]);
if ( !empty($locations) ) {
foreach ($locations as $term) {
echo '<option value="' . esc_attr($term->term_id) . '">' . esc_html($term->name) . '</option>';
}
}
?>
</select>
</p>
Стилизация формы
Чтобы форма выглядела аккуратно, можно добавить немного CSS.
Например:
.form p {
margin-bottom: 20px;
}
.form input,
.form textarea,
.form select {
width: 50%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 6px;
}
Так форма станет аккуратной, с равными отступами и понятной структурой.
Обработка данных формы
Когда пользователь заполняет форму и отправляет данные, нам нужно обработать их на сервере.
В дальнейшем это можно сделать через admin_post_ и admin_post_nopriv_ хуки, или с помощью AJAX, чтобы не перезагружать страницу.
На этом этапе урока важно подготовить форму и шаблон страницы, чтобы плагин умел отображать пользовательский интерфейс для добавления записей CPT. В следующей части можно будет реализовать сохранение данных, загрузку изображений и связь с таксономиями.
Заключение
Теперь у нас есть шаблон и фронтенд-форма, через которую пользователи могут добавлять новые записи типа property. Это основа для реализации полноценного пользовательского интерфейса добавления контента в WordPress.
Такой подход можно адаптировать под любые проекты — объявления, каталоги, вакансии, рецепты и многое другое.
