Membina plugin WordPress untuk membuat borang hubungan AJAX

Artikel ini menunjukkan membina plugin borang hubungan ajax mudah untuk WordPress. Kami akan meliputi penciptaan plugin, reka bentuk bentuk, pengendalian Ajax, dan pelaksanaan shortcode.

Konsep Utama:

• Plugin Plugin WordPress memanfaatkan plugin untuk memperluaskan fungsi tapak. Ini termasuk membuat borang hubungan yang menggunakan AJAX untuk penyerahan data. Ini melibatkan penciptaan fail plugin, pembinaan bentuk, pengendali Ajax, dan kod pendek.
• Pengendali Ajax adalah penting. Ia menerima input pengguna, mengesahkan data, dan menghantar pemberitahuan e -mel kepada pentadbir WordPress menggunakan wp_mail(). Pendaftaran yang betul dari pengendali Ajax adalah penting untuk memproses permintaan AJAX.
• shortcode memudahkan integrasi bentuk. Fungsi menghasilkan HTML borang, yang kemudiannya dikemas dalam kod shortcode untuk dimasukkan mudah ke dalam jawatan dan halaman.

Penciptaan Plugin:

1. Buat folder bernama ajaxcontactform dalam direktori WordPress wp-content/plugins anda.
2. di dalam, buat ajaxcontactform.php dengan tajuk plugin berikut:

<?php
/*
Plugin Name: Ajax Contact Form
Plugin URI:  (Your Plugin URI)
Description: A simple contact form using AJAX.
Author: Abbas Suterwala
Version: 1.0
Author URI: (Your Author URI)
*/
?>

3. Aktifkan plugin di panel admin WordPress anda.

Buat subfolder bernama
4. dalam js dan tambah ajaxcontactform untuk kod AJAX anda. ajaxcontact.js

Tambahkan kod PHP berikut untuk menentukan pemalar, skrip enqueue, dan lokalkan URL AJAX:

5. ajaxcontactform.php

Penciptaan bentuk:

define('ACFSURL', WP_PLUGIN_URL."/".dirname( plugin_basename( __FILE__ ) ) );
define('ACFPATH', WP_PLUGIN_DIR."/".dirname( plugin_basename( __FILE__ ) ) );

function ajaxcontact_enqueuescripts() {
    wp_enqueue_script('ajaxcontact', ACFSURL.'/js/ajaxcontact.js', array('jquery'));
    wp_localize_script( 'ajaxcontact', 'ajaxcontactajax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );
}
add_action('wp_enqueue_scripts', 'ajaxcontact_enqueuescripts');

Fungsi berikut menghasilkan html borang hubungan:

Borang ini akan dipaparkan seperti yang ditunjukkan di bawah selepas diintegrasikan ke dalam halaman atau pos:

function ajaxcontact_show_contact() {
?>
<div>
    <div style="background-color:https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bE6E6FA ;color:blue;"></div>
    <input type="text" id="ajaxcontactname" placeholder="Name"><br>
    <input type="email" id="ajaxcontactemail" placeholder="Email"><br>
    <input type="text" id="ajaxcontactsubject" placeholder="Subject"><br>
    <textarea id="ajaxcontactcontents" placeholder="Message"></textarea><br>
    <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" onclick="ajaxformsendmail(this.form);" style="cursor: pointer">Send Mail</a>
</div>
<?php
}

Ajax Handler:

Fungsi ini mengendalikan permintaan AJAX, mengesahkan data, dan menghantar e -mel:

pengendalian ralat akan memaparkan mesej seperti ini:

function ajaxcontact_send_mail() {
    $results = '';
    $error = 0;
    $name = isset($_POST['acfname']) ? sanitize_text_field($_POST['acfname']) : '';
    $email = isset($_POST['acfemail']) ? sanitize_email($_POST['acfemail']) : '';
    $subject = isset($_POST['acfsubject']) ? sanitize_text_field($_POST['acfsubject']) : '';
    $contents = isset($_POST['acfcontents']) ? wp_kses_post($_POST['acfcontents']) : '';
    $admin_email = get_option('admin_email');

    if (!is_email($email)) {
        $results = $email." :email address is not valid.";
        $error = 1;
    } elseif (empty($name)) {
        $results = "Name is invalid.";
        $error = 1;
    } elseif (empty($subject)) {
        $results = "Subject is invalid.";
        $error = 1;
    } elseif (empty($contents)) {
        $results = "Content is invalid.";
        $error = 1;
    }

    if ($error == 0) {
        $headers = 'From: ' . $email . "\r\n";
        if (wp_mail($admin_email, $subject, $contents, $headers)) {
            $results = "*Thanks for your mail.";
        } else {
            $results = "*The mail could not be sent.";
        }
    }
    die($results);
}

Mendaftar pengendali Ajax:

Daftar pengendali Ajax:

Menghantar permintaan Ajax (ajaxcontact.js):

add_action( 'wp_ajax_nopriv_ajaxcontact_send_mail', 'ajaxcontact_send_mail' );
add_action( 'wp_ajax_ajaxcontact_send_mail', 'ajaxcontact_send_mail' );

Membuat kod shortcode:

function ajaxformsendmail(form) {
    jQuery.ajax({
        type: 'POST',
        url: ajaxcontactajax.ajaxurl,
        data: {
            action: 'ajaxcontact_send_mail',
            acfname: jQuery('https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bajaxcontactname').val(),
            acfemail: jQuery('https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bajaxcontactemail').val(),
            acfsubject: jQuery('https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bajaxcontactsubject').val(),
            acfcontents: jQuery('https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bajaxcontactcontents').val()
        },
        success: function(data, textStatus, XMLHttpRequest) {
            jQuery('https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bajaxcontact-response').html(data);
        },
        error: function(MLHttpRequest, textStatus, errorThrown) {
            alert(errorThrown);
        }
    });
    return false; // Prevent default form submission
}

Borang yang lengkap akan muncul seperti berikut:

Keselamatan, penyesuaian, dan ciri canggih:

Kod yang disediakan tidak mempunyai langkah keselamatan yang penting (pengesahan nonce). Menambah nonces sangat disyorkan untuk mencegah serangan CSRF. Penyesuaian selanjutnya (gaya dengan CSS, pengesahan yang dipertingkatkan, integrasi CAPTCHA, muat naik fail, dll) boleh dilaksanakan berdasarkan keperluan khusus. Seksyen Soalan Lazim dalam teks asal memberikan panduan mengenai peningkatan ini. Ingatlah untuk membersihkan semua input pengguna untuk mengelakkan kelemahan.

Atas ialah kandungan terperinci Membina plugin WordPress untuk membuat borang hubungan AJAX. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!