Dodaj wsparcie dla niestandardowych formularzy w WordPressie z łatwością
Objaśnienie
Aby dodać niestandardowy formularz do swojej strony WordPress, możesz użyć shortcode'a. Ten fragment kodu tworzy prosty formularz z polami na imię i adres e-mail. Możesz umieścić ten formularz w dowolnym miejscu na swojej stronie, używając shortcode'a [wp_dudecom_custom_form]
.
Przesyłanie formularza:
- Kiedy ktoś wyśle formularz, kod sprawdza ukryte pole, aby upewnić się, że jest to ważne przesłanie.
- Wykorzystuje również kontrolę bezpieczeństwa zwaną nonce, aby zapobiec nieautoryzowanym przesyłaniom.
- Po walidacji, dane wejściowe są oczyszczane, aby zapewnić bezpieczeństwo Twojej strony.
- Dane formularza mogą być przetwarzane, na przykład poprzez wysłanie e-maila do administratora strony z przesłanymi szczegółami.
- Po przetworzeniu użytkownicy są przekierowywani na stronę z podziękowaniami.
Stylizacja i skrypty:
- Kod zawiera style i skrypty dla formularza, które są ładowane tylko na stronach lub wpisach, gdzie są potrzebne.
- Upewnij się, że masz odpowiednie pliki CSS i JavaScript w katalogu swojego motywu, aby stylizować i poprawić funkcjonalność formularza.
Ta konfiguracja pozwala na łatwą integrację niestandardowego formularza w Twojej stronie WordPress bez potrzeby używania wtyczki, dając Ci większą kontrolę nad jego wyglądem i działaniem.
Kod
<?php
// Add a custom form shortcode
function wp_dudecom_custom_form_shortcode() {
ob_start();
?>
<form id="wp-dudecom-custom-form" method="post" action="">
<label for="wp-dudecom-name">Name:</label>
<input type="text" id="wp-dudecom-name" name="wp-dudecom-name" required>
<label for="wp-dudecom-email">Email:</label>
<input type="email" id="wp-dudecom-email" name="wp-dudecom-email" required>
<input type="hidden" name="wp_dudecom_form_submitted" value="1">
<?php wp_nonce_field('wp_dudecom_custom_form', 'wp_dudecom_custom_form_nonce'); ?>
<input type="submit" value="Submit">
</form>
<?php
return ob_get_clean();
}
add_shortcode('wp_dudecom_custom_form', 'wp_dudecom_custom_form_shortcode');
// Handle form submission
function wp_dudecom_handle_form_submission() {
if (isset($_POST['wp_dudecom_form_submitted']) && $_POST['wp_dudecom_form_submitted'] == '1') {
if (!isset($_POST['wp_dudecom_custom_form_nonce']) || !wp_verify_nonce($_POST['wp_dudecom_custom_form_nonce'], 'wp_dudecom_custom_form')) {
wp_die('Security check failed');
}
$name = sanitize_text_field($_POST['wp-dudecom-name']);
$email = sanitize_email($_POST['wp-dudecom-email']);
// Process form data (e.g., send email, save to database)
// Example: Send an email
$to = get_option('admin_email');
$subject = 'New Form Submission';
$message = 'Name: ' . $name . "\n" . 'Email: ' . $email;
$headers = array('Content-Type: text/plain; charset=UTF-8');
wp_mail($to, $subject, $message, $headers);
// Redirect to a thank you page or display a success message
wp_redirect(home_url('/thank-you'));
exit;
}
}
add_action('init', 'wp_dudecom_handle_form_submission');
// Enqueue necessary scripts and styles
function wp_dudecom_enqueue_custom_form_scripts() {
if (is_page() || is_single()) {
wp_enqueue_style('wp-dudecom-custom-form-style', get_template_directory_uri() . '/css/wp-dudecom-custom-form.css');
wp_enqueue_script('wp-dudecom-custom-form-script', get_template_directory_uri() . '/js/wp-dudecom-custom-form.js', array('jquery'), null, true);
}
}
add_action('wp_enqueue_scripts', 'wp_dudecom_enqueue_custom_form_scripts');
?>
Instrukcja
Lokalizacja pliku: Dodaj kod do pliku functions.php
swojego motywu lub do pliku własnej wtyczki.
Wymagania wstępne:
- Podstawowa znajomość edytowania plików WordPress.
- Dostęp do plików motywu WordPress lub katalogu wtyczek.
- Upewnij się, że masz kopię zapasową swojej strony przed wprowadzeniem zmian.
Kroki wdrożenia:
- Dostęp do plików WordPress: Użyj klienta FTP lub menedżera plików swojego dostawcy hostingu, aby uzyskać dostęp do instalacji WordPress.
- Edytuj plik
functions.php
: Przejdź dowp-content/themes/twoj-motyw/functions.php
i otwórz go do edycji. - Wstaw kod: Skopiuj i wklej podany fragment kodu do pliku
functions.php
. Upewnij się, że jest umieszczony przed zamykającym tagiem?>
, jeśli taki istnieje. - Utwórz pliki CSS i JavaScript: W katalogu swojego motywu utwórz folder
css
i folderjs
, jeśli jeszcze nie istnieją. Dodaj swoje niestandardowe style dowp-dudecom-custom-form.css
oraz wszelkie skrypty JavaScript dowp-dudecom-custom-form.js
. - Użyj shortcode: Dodaj shortcode
[wp_dudecom_custom_form]
do dowolnego wpisu lub strony, na której chcesz, aby formularz się pojawił. - Przetestuj formularz: Odwiedź stronę, na której dodałeś shortcode, aby upewnić się, że formularz wyświetla się poprawnie, a przesyłki są przetwarzane zgodnie z oczekiwaniami.
Jeśli potrzebujesz pomocy przy wdrożeniu lub wymagasz bardziej zaawansowanej funkcjonalności, rozważ skorzystanie z usług wp-dude.com.