Как добавить динамические поля на страницу настраиваемого типа записи в админ-разделе WordPress

Вопрос или проблема

Ответ или решение

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

Шаг 1: Создание пользовательского типа записи

Прежде всего, убедитесь, что у вас есть пользовательский тип записи. Для этого добавьте следующий код в файл functions.php вашей темы:

function create_custom_post_type() {
    register_post_type('my_custom_post',
        array(
            'labels'      => array(
                'name'          => __('Мои пользовательские записи'),
                'singular_name' => __('Пользовательская запись'),
            ),
            'public'      => true,
            'has_archive' => true,
            'supports'    => array('title', 'editor', 'custom-fields'),
        )
    );
}
add_action('init', 'create_custom_post_type');

Шаг 2: Установка и настройка плагина ACF

Как упоминалось в запросе, вы можете использовать плагин Advanced Custom Fields (ACF) для динамического управления полями. Установите и активируйте ACF через админ-панель WordPress.

1. Перейдите в раздел Плагины → Добавить новый.
2. Найдите плагин "Advanced Custom Fields" и установите его.

Шаг 3: Создание динамических полей

После установки ACF выполните следующие шаги для создания динамических полей:

1. В админ-панели перейдите в раздел Custom Fields → Add New.
2. Дайте название вашей группе полей, например, "Динамические поля".
3. Нажмите Add Field и добавьте два поля: одно для названия и одно для описания.
   • Для имени поля выберите тип "Text" для названия и "Textarea" для описания.
4. Убедитесь, что в разделе "Location" выбрано "Post Type" и выберите ваш пользовательский тип записи (например, my_custom_post).
5. Сохраните изменения.

Шаг 4: Добавление JavaScript для динамического создания полей

Чтобы поля добавлялись динамически, вам необходимо добавить JavaScript код в админку. Создайте файл custom-admin.js и подключите его в functions.php:

function my_enqueue_admin_scripts() {
    wp_enqueue_script('custom-admin-js', get_template_directory_uri() . '/custom-admin.js', array('jquery'), null, true);
}
add_action('admin_enqueue_scripts', 'my_enqueue_admin_scripts');

Внутри custom-admin.js реализуйте функциональность для добавления новых полей:

jQuery(document).ready(function($){
    var maxFields = 10; // максимальное количество полей
    var wrapper = $(".fields-wrapper"); // контейнер для динамических полей
    var addButton = $(".add-field"); // кнопка добавления нового поля

    var fieldHTML = '<div class="field-group"><input type="text" name="dynamic_fields[]How to add dynamic fields on wordpress custom post type page in admin section" placeholder="Заголовок"/><textarea name="dynamic_fields[]How to add dynamic fields on wordpress custom post type page in admin section" placeholder="Описание"></textarea><a href="#" class="remove_field">Удалить</a></div>';

    var fieldCount = 1; // текущее количество полей

    $(addButton).click(function(e){
        e.preventDefault();
        if(fieldCount < maxFields){ 
            fieldCount++; 
            $(wrapper).append(fieldHTML);
        }
    });

    $(wrapper).on("click", ".remove_field", function(e){
        e.preventDefault(); $(this).closest('.field-group').remove(); fieldCount--;
    });
});

Шаг 5: Сохранение данных

Добавьте функцию для обработки сохранения полей:

function save_dynamic_fields($post_id) {
    if (array_key_exists('dynamic_fields', $_POST)) {
        update_post_meta($post_id, '_dynamic_fields', $_POST['dynamic_fields']);
    }
}
add_action('save_post', 'save_dynamic_fields');

Шаг 6: Отображение информации на фронтенде

Для отображения сохраненных данных на странице поста, добавьте следующий код в файл-шаблон вашего пользовательского типа записи (например, single-my_custom_post.php):

$dynamic_fields = get_post_meta(get_the_ID(), '_dynamic_fields', true);
if ($dynamic_fields) {
    foreach ($dynamic_fields as $field) {
        echo '<h3>' . esc_html($field['title']) . '</h3>';
        echo '<p>' . esc_html($field['description']) . '</p>';
    }
}

Заключение

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

Если у вас есть вопросы, пожалуйста, не стесняйтесь их задавать.