Створення плагіна для кастомної контактної форми у WordPress

У цій статті ми пройдемося по процесу створення простого плагіна для WordPress, який дозволяє користувачам створити кастомну контактну форму. Ця форма міститиме різні поля та можливість надсилати дані на вказану електронну пошту. Ми охопимо все: від структури плагіна до кодування форми та обробки відправлень.

Крок 1: Налаштування структури плагіна

Спочатку створіть папку для вашого плагіна в директорії wp-content/plugins. Назвіть її якось відповідно, наприклад, custom-contact-form. Всередині цієї папки створіть PHP-файл з такою ж назвою: custom-contact-form.php.

Ось базова структура файлу плагіна:

<?php
/*
Plugin Name: Custom Contact Form
Description: A simple plugin to create a custom contact form.
Version: 1.0
Author: Your Name
*/

if ( ! defined( 'ABSPATH' ) ) {
    exit; // Вихід, якщо доступ безпосередньо
}

// Хук для додавання шорткоду
add_shortcode( 'custom_contact_form', 'ccf_display_contact_form' );

// Функція для відображення контактної форми
function ccf_display_contact_form() {
    ob_start(); // Початок буферизації виводу
    ?>
    <form method="post" action="">
        <label for="ccf_name">Ім'я:</label>
        <input type="text" id="ccf_name" name="ccf_name" required>

        <label for="ccf_email">Електронна пошта:</label>
        <input type="email" id="ccf_email" name="ccf_email" required>

        <label for="ccf_message">Повідомлення:</label>
        <textarea id="ccf_message" name="ccf_message" required></textarea>

        <input type="submit" name="ccf_submit" value="Надіслати">
    </form>
    <?php
    return ob_get_clean(); // Повертаємо буферизований вивід
}

Пояснення:

• Заголовок плагіна: Містить метадані про плагін.

• Вихід, якщо доступ безпосередньо: Запобігає безпосередньому доступу до файлу плагіна.

• Хук шорткоду: Реєструє шорткод, який відображатиме контактну форму.

• Розмітка форми: HTML-структура форми для введення даних користувача.

Зручний хостинг для ваших сайтів на WordPress

Так, це хвилинка реклами в тексті. Але корисної! Ну і мені хотілось би, щоб ви побачили :)

Шукаєте хороший хостинг для ваших сайтів на WordPress? Зверніть увагу на Host4Biz. Це надійний хостинг з сучасними серверами в Європі та українською командою.

А за промокодом MYHOST10 ви отримаєте знижку в 10% на першу оплату. Для цього реєструйтесь за посиланням та введіть код перед оплатою.

Крок 2: Обробка відправлення форми

Далі, нам потрібно обробити дані форми, коли вона буде надіслана. Додамо функціональність для надсилання електронної пошти з відправленими даними.

Оновіть ваш файл custom-contact-form.php, додавши наступний код під функцією форми:

// Обробка відправлення форми
if ( isset( $_POST['ccf_submit'] ) ) {
    $name    = sanitize_text_field( $_POST['ccf_name'] );
    $email   = sanitize_email( $_POST['ccf_email'] );
    $message = sanitize_textarea_field( $_POST['ccf_message'] );

    $to      = get_option( 'admin_email' ); // Використовуємо електронну пошту адміністратора сайту
    $subject = 'Нове повідомлення з контактної форми';
    $body    = "Ім'я: $name\nЕлектронна пошта: $email\nПовідомлення:\n$message";
    $headers = array('Content-Type: text/plain; charset=UTF-8');

    // Надсилаємо електронну пошту
    wp_mail( $to, $subject, $body, $headers );
    
    echo '<p>Дякуємо за ваше повідомлення. Воно було надіслане.</p>';
}

Пояснення:

• Перевірка відправлення форми: Перевіряємо, чи форма була надіслана.

• Санітиза даних: Введені дані очищуються для безпеки.

• Налаштування електронної пошти: Визначаємо одержувача, тему та текст електронної пошти.

• Надсилання електронної пошти: Використовуємо функцію wp_mail() для надсилання електронної пошти.

• Повідомлення про підтвердження: Відображаємо повідомлення користувачу після відправлення.

Крок 3: Додавання шорткоду на сторінку

Щоб відобразити контактну форму, створіть нову сторінку або відредагуйте існуючу в адмінці WordPress. У текстовій області додайте наступний шорткод:

[custom_contact_form]

Цей шорткод відобразить вашу контактну форму там, де ви його вставите.

Крок 4: Тестування плагіна

1. Активуйте плагін: Перейдіть до панелі адміністратора WordPress, зайдіть у розділ "Плагіни", знайдіть "Custom Contact Form" і активуйте його.

2. Перевірте форму: Відвідайте сторінку, на якій ви додали шорткод. Заповніть форму та надішліть її, щоб перевірити, чи отримуєте ви електронну пошту.

3. Налагодження: Якщо виникли проблеми, перевірте журнал налагодження WordPress або увімкніть WP_DEBUG у файлі wp-config.php для отримання повідомлень про помилки.

Висновок

Ви успішно створили простий плагін для контактної форми у WordPress! Цей плагін дозволяє користувачам надсилати свої ім'я, електронну пошту та повідомлення, а форма автоматично обробляє відправлення. Ви можете розширити цей плагін, додавши більше функцій, таких як валідація, повідомлення про помилки або навіть стилізація форми, щоб вона відповідала темі вашого сайту.

Це лише початок того, що ви можете зробити з плагінами WordPress. Експериментуйте з різними функціональностями та покращуйте свої навички як розробника!