Bina plugin borang kenalan WordPress anda sendiri dalam 5 minit

Takeaways Key

Membangunkan plugin borang hubungan WordPress anda sendiri dapat membantu anda memahami dengan lebih baik bagaimana WordPress berfungsi, meningkatkan kemahiran pembangunan web anda, dan membuat borang yang disesuaikan dengan keperluan khusus anda tanpa ciri yang tidak perlu.
• Artikel ini menyediakan panduan langkah demi langkah mengenai cara membuat plugin borang hubungan yang mudah dan tidak berdarah untuk WordPress, termasuk cara menulis kod PHP, tambahkan pengesahan asas ke borang, dan hantar data borang ke alamat e -mel pentadbir laman web.
• Plugin Borang Hubungan yang dihasilkan dapat dengan mudah diintegrasikan ke dalam laman web WordPress dengan mengaktifkannya di bahagian 'Plugin' dari papan pemuka WordPress dan menambah kod shortcode yang disediakan ke pos atau halaman.
Artikel ini juga membincangkan beberapa plugin borang hubungan percuma yang popular yang terdapat di direktori plugin WordPress, seperti borang hubungan 7, borang hubungan ke e -mel, borang hubungan formget, dan borang hubungan terbaik.
• Kebanyakan laman web biasanya direka untuk mematuhi amalan web standard dengan memasukkan halaman khusus di mana borang hubungan terletak. Ini menyediakan pelawat dengan cara mudah untuk menjangkau pemilik tapak.

Secara ringkas, borang hubungan mempunyai satu set soalan dan bidang yang diisi oleh pelawat. Maklumat ini biasanya dihantar secara automatik melalui e -mel kepada pentadbir tapak atau akaun e -mel yang dinamakan lain. Perlu diingat bahawa alamat e -mel ini tidak dipaparkan kepada pelawat, jadi menggunakan borang hubungan biasanya mengurangkan spam e -mel dari bot yang menuai alamat e -mel telanjang di Internet. Borang hubungan memainkan peranan yang sangat penting di laman web, di mana ia digunakan untuk mengumpul maklum balas, pertanyaan dan data lain dari pengguna.

Jika laman web anda dikuasakan oleh WordPress, terdapat banyak plugin yang mengintegrasikan borang hubungan dengan lancar di laman web anda.

Dalam artikel ini, saya akan menyediakan senarai beberapa plugin borang hubungan WordPress percuma. Saya juga akan membincangkan mengapa anda harus mempertimbangkan untuk melancarkan borang hubungan anda sendiri. Kemudian, saya akan memberikan anda tutorial pendek yang menunjukkan kepada anda bagaimana untuk membina plugin borang hubungan WordPress anda sendiri.

plugin borang hubungan WordPress

Sebelum kita memulakan, kita akan pergi ke beberapa plugin borang hubungan percuma yang popular yang terdapat di direktori plugin WordPress. Ini bagus untuk digunakan, tetapi lebih baik untuk belajar dari ketika anda mula membina plugin anda sendiri.

di bawah adalah beberapa plugin borang hubungan percuma yang paling tinggi untuk WordPress:

Borang hubungan 7 - Ini adalah plugin kedua yang paling popular dengan lebih daripada 18 juta muat turun, ia hampir boleh dianggap sebagai plugin borang hubungan de facto untuk laman web WordPress. Borang Hubungi 7 boleh menguruskan pelbagai borang hubungan dan anda boleh menyesuaikan borang dan kandungan e -mel dengan markup mudah. Ciri-ciri bentuk termasuk penyerahan berkuasa Ajax, Captcha, penapisan spam Akismet dan banyak lagi.

borang kenalan ke e -mel - Plugin ini bukan sahaja membuat borang hubungan dan menghantar data ke alamat e -mel yang ditentukan, ia juga menyimpan data borang hubungan ke dalam pangkalan data, menyediakan laporan yang boleh dicetak dan pilihan untuk mengeksport data yang dipilih ke Fail CSV/Excel.

Formget Form Borang - Mudah seret dalam talian dan drop Alat Pembina Borang Hubungan. Yang perlu anda lakukan ialah klik pada medan yang anda inginkan dalam borang anda, dan dalam beberapa saat borang hubungan anda sudah siap.

Borang hubungan terbaik - membolehkan anda melaksanakan borang maklum balas ke laman web atau pos dengan mudah. Ia sangat mudah, dan anda tidak akan memerlukan sebarang tetapan tambahan, walaupun terdapat beberapa yang tersedia untuk dimainkan.

Mengapa menggulung plugin borang hubungan anda sendiri?

menjadi pemaju yang lebih baik

Membangunkan plugin WordPress anda sendiri membantu anda memahami dengan lebih baik bagaimana WordPress berfungsi 'di bawah tudung' yang dapat membantu anda menjadi pemaju web yang lebih berpengalaman. Walaupun terdapat puluhan ribu plugin dalam direktori plugin WordPress untuk digunakan, dapat mengubah dan memperluaskan plugin lain adalah kemahiran yang sangat berguna.

membina bentuk yang lebih baik

Banyak plugin borang hubungan WordPress adalah kembung. Mereka termasuk banyak ciri yang tidak boleh anda gunakan. Penggunaan berat fail JavaScript dan CSS juga biasa dalam beberapa plugin borang hubungan standard. Ini meningkatkan bilangan permintaan HTTP yang menjejaskan prestasi WordPress.

Menurut peraturan prestasi Yahoo:

80% masa tindak balas pengguna akhir dibelanjakan di hadapan. Kebanyakan masa ini terikat dalam memuat turun semua komponen di halaman: imej, stylesheets, skrip, flash, dan lain -lain. Mengurangkan bilangan komponen seterusnya mengurangkan bilangan permintaan HTTP yang diperlukan untuk menjadikan halaman tersebut. Ini adalah kunci untuk halaman yang lebih cepat.

Jika anda seperti saya, dan anda menginginkan plugin borang hubungan mudah yang hanya berfungsi, baca terus. Saya akan membimbing anda melalui proses mudah untuk membangunkan plugin anda sendiri supaya anda boleh mencium plugin kembung selamat tinggal. Dalam contoh ini tiada fail CSS dan JavaScript tambahan diperlukan, pengesahan yang dilakukan menggunakan HTML5.

pembangunan plugin borang hubungan

Dalam masa lima minit, anda akan belajar bagaimana untuk membangunkan borang hubungan WordPress yang mudah, itulah janji!

siap? Tetapkan? Pergi!

Semua pluigns WordPress adalah fail PHP, yang terletak di/WP-Content/Plugin/Direktori. Dalam contoh kami, fail itu akan dipanggil SP-Form-example.php. Saya menganggap anda selesa dengan menyambung ke pelayan anda menggunakan FTP/SFTP/SCP atau SSH.

Jika anda mahu mengikuti, cuma buat fail yang dipanggil SP-Form-example.php (contoh lengkap terakhir akan tersedia pada akhir artikel):

<span><span><?php
</span></span><span><span>/*
</span></span><span><span>Plugin Name: Example Contact Form Plugin
</span></span><span><span>Plugin URI: http://example.com
</span></span><span><span>Description: Simple non-bloated WordPress Contact Form
</span></span><span><span>Version: 1.0
</span></span><span><span>Author: Agbonghama Collins
</span></span><span><span>Author URI: http://w3guy.com
</span></span><span><span>*/
</span></span><span>    <span>//
</span></span><span>    <span>// the plugin code will go here..
</span></span><span>    <span>//
</span></span><span><span>?></span></span>

Seterusnya, kami menambah fungsi html_form_code () yang mengandungi borang hubungan html:

<span>function html_form_code() {
</span>    <span>echo '<form action="' . esc_url( $_SERVER['REQUEST_URI'] ) . '" method="post">';
</span>    <span>echo '<p>';
</span>    <span>echo 'Your Name (required) <br />';
</span>    <span>echo '<input type="text" name="cf-name" pattern="[a-zA-Z0-9 ]+" value="' . ( isset( $_POST["cf-name"] ) ? esc_attr( $_POST["cf-name"] ) : '' ) . '" size="40" />';
</span>    <span>echo '</p>';
</span>    <span>echo '<p>';
</span>    <span>echo 'Your Email (required) <br />';
</span>    <span>echo '<input type="email" name="cf-email" value="' . ( isset( $_POST["cf-email"] ) ? esc_attr( $_POST["cf-email"] ) : '' ) . '" size="40" />';
</span>    <span>echo '</p>';
</span>    <span>echo '<p>';
</span>    <span>echo 'Subject (required) <br />';
</span>    <span>echo '<input type="text" name="cf-subject" pattern="[a-zA-Z ]+" value="' . ( isset( $_POST["cf-subject"] ) ? esc_attr( $_POST["cf-subject"] ) : '' ) . '" size="40" />';
</span>    <span>echo '</p>';
</span>    <span>echo '<p>';
</span>    <span>echo 'Your Message (required) <br />';
</span>    <span>echo '<textarea rows="10" cols="35" name="cf-message">' . ( isset( $_POST["cf-message"] ) ? esc_attr( $_POST["cf-message"] ) : '' ) . '</textarea>';
</span>    <span>echo '</p>';
</span>    <span>echo '<p><input type="submit" name="cf-submitted" value="Send"/></p>';
</span>    <span>echo '</form>';
</span><span>}</span>

Pengesahan asas ditambah ke dalam bentuk melalui atribut input corak.

regex dalam borang hubungan Adakah pengesahan medan berikut:

• [a-z0-9]: Hanya huruf, ruang dan nombor yang dibenarkan dalam medan nama; Simbol khas dianggap tidak sah.

• [a-za-z]: Hanya huruf dan ruang yang dibenarkan dalam bidang subjek.

• Kawalan borang e -mel mengesahkan medan e -mel oleh itu tidak ada keperluan untuk atribut corak.

Untuk maklumat lanjut tentang bagaimana ini berfungsi, baca artikel saya mengenai pengesahan borang klien dengan HTML5 untuk memahami bagaimana atribut corak membantu dengan pengesahan bentuk.

Cepat!

Baiklah, berapa minit yang telah kita tinggalkan? Empat minit! Kami masih mempunyai masa untuk mendapatkannya dengan.

fungsi penghantaran_mail () membersihkan data borang dan menghantar mel ke alamat e -mel pentadbir WordPress.

<span><span><?php
</span></span><span><span>/*
</span></span><span><span>Plugin Name: Example Contact Form Plugin
</span></span><span><span>Plugin URI: http://example.com
</span></span><span><span>Description: Simple non-bloated WordPress Contact Form
</span></span><span><span>Version: 1.0
</span></span><span><span>Author: Agbonghama Collins
</span></span><span><span>Author URI: http://w3guy.com
</span></span><span><span>*/
</span></span><span>    <span>//
</span></span><span>    <span>// the plugin code will go here..
</span></span><span>    <span>//
</span></span><span><span>?></span></span>

Sanitasi data borang dilakukan oleh fungsi dalaman WordPress berikut:

• sanitize_text_field (): membersihkan data dari input pengguna.

• sanitize_email (): Strip keluar semua aksara yang tidak dibenarkan dalam e -mel.

• esc_textarea (): melarikan diri

  mesej nilai kawasan teks.

kod get_option ('admin_email') secara programatik mengambil alamat e -mel pentadbir WordPress dari pangkalan data di mana e -mel akan dihantar ke.

Tidak mahu borang kenalan menghantar mel ke admin? Cukup tetapkan pembolehubah $ ke alamat e -mel yang dikehendaki.

Jika e -mel telah berjaya diproses tanpa sebarang kesilapan oleh fungsi wp_mail (), teks

terima kasih kerana menghubungi saya, mengharapkan respons tidak lama lagi akan ditunjukkan, jika tidak ralat yang tidak dijangka berlaku dipaparkan.

1 minit dan 30 saat ditinggalkan

Fungsi cf_shortcode () adalah fungsi panggil balik yang dipanggil apabila shortcode borang hubungan [sitepoint_contact_form] aktif.

<span>function html_form_code() {
</span>    <span>echo '<form action="' . esc_url( $_SERVER['REQUEST_URI'] ) . '" method="post">';
</span>    <span>echo '<p>';
</span>    <span>echo 'Your Name (required) <br />';
</span>    <span>echo '<input type="text" name="cf-name" pattern="[a-zA-Z0-9 ]+" value="' . ( isset( $_POST["cf-name"] ) ? esc_attr( $_POST["cf-name"] ) : '' ) . '" size="40" />';
</span>    <span>echo '</p>';
</span>    <span>echo '<p>';
</span>    <span>echo 'Your Email (required) <br />';
</span>    <span>echo '<input type="email" name="cf-email" value="' . ( isset( $_POST["cf-email"] ) ? esc_attr( $_POST["cf-email"] ) : '' ) . '" size="40" />';
</span>    <span>echo '</p>';
</span>    <span>echo '<p>';
</span>    <span>echo 'Subject (required) <br />';
</span>    <span>echo '<input type="text" name="cf-subject" pattern="[a-zA-Z ]+" value="' . ( isset( $_POST["cf-subject"] ) ? esc_attr( $_POST["cf-subject"] ) : '' ) . '" size="40" />';
</span>    <span>echo '</p>';
</span>    <span>echo '<p>';
</span>    <span>echo 'Your Message (required) <br />';
</span>    <span>echo '<textarea rows="10" cols="35" name="cf-message">' . ( isset( $_POST["cf-message"] ) ? esc_attr( $_POST["cf-message"] ) : '' ) . '</textarea>';
</span>    <span>echo '</p>';
</span>    <span>echo '<p><input type="submit" name="cf-submitted" value="Send"/></p>';
</span>    <span>echo '</form>';
</span><span>}</span>

Fungsi di atas memanggil fungsi html_form_code () dan deliver_mail () untuk memaparkan borang HTML borang hubungan dan mengesahkan data borang masing -masing.

Akhirnya, shortcode [sitepoint_contact_form] didaftarkan kepada WordPress. Jadi hanya tambahkan:

<span>function deliver_mail() {
</span>
    <span>// if the submit button is clicked, send the email
</span>    <span>if ( isset( $_POST['cf-submitted'] ) ) {
</span>
        <span>// sanitize form values
</span>        <span>$name    = sanitize_text_field( $_POST["cf-name"] );
</span>        <span>$email   = sanitize_email( $_POST["cf-email"] );
</span>        <span>$subject = sanitize_text_field( $_POST["cf-subject"] );
</span>        <span>$message = esc_textarea( $_POST["cf-message"] );
</span>
        <span>// get the blog administrator's email address
</span>        <span>$to = get_option( 'admin_email' );
</span>
        <span>$headers = "From: <span><span>$name</span> <<span>$email</span>>"</span> . "\r\n";
</span>
        <span>// If email has been process for sending, display a success message
</span>        <span>if ( wp_mail( $to, $subject, $message, $headers ) ) {
</span>            <span>echo '<div>';
</span>            <span>echo '<p>Thanks for contacting me, expect a response soon.</p>';
</span>            <span>echo '</div>';
</span>        <span>} else {
</span>            <span>echo 'An unexpected error occurred';
</span>        <span>}
</span>    <span>}
</span><span>}</span>

3, 2, 1 ... masa!

Tahniah, kami telah berjaya membangunkan plugin borang hubungan WordPress kami sendiri dan saya telah memenuhi janji saya yang terdahulu.

Sekarang, untuk menggunakan plugin ini di laman web anda, hanya aktifkannya di bawah bahagian 'plugin' dari papan pemuka WordPress anda, kemudian buat pos atau halaman dan kemudian tambahkan kod shortcode di mana anda mahu borang muncul [sitepoint_contact_form] .

Jika anda kemudian pratonton halaman dan anda harus melihat borang hubungan yang dipaparkan seperti yang ditunjukkan di bawah.

Kesimpulan

Untuk lebih memahami bagaimana plugin dibina dan bagaimana untuk melaksanakannya di laman WordPress anda, salin kod di bawah, tampal dalam fail dan muat naiknya ke kandungan/plugin/plugin/wp anda.

Berikut adalah contoh keseluruhan plugin:

<span><span><?php
</span></span><span><span>/*
</span></span><span><span>Plugin Name: Example Contact Form Plugin
</span></span><span><span>Plugin URI: http://example.com
</span></span><span><span>Description: Simple non-bloated WordPress Contact Form
</span></span><span><span>Version: 1.0
</span></span><span><span>Author: Agbonghama Collins
</span></span><span><span>Author URI: http://w3guy.com
</span></span><span><span>*/
</span></span><span>    <span>//
</span></span><span>    <span>// the plugin code will go here..
</span></span><span>    <span>//
</span></span><span><span>?></span></span>

Ini hanya satu contoh mudah. Jika anda berminat untuk mempelajari lebih lanjut mengenai pembangunan plugin, berikut adalah beberapa bacaan yang disyorkan lagi:

Plugin Pentadbiran WordPress Mudah (Tutorial)
plugin widget WordPress (tutorial)
dokumentasi pemaju plugin WordPress Codex rasmi
saluran php sitepoint

beritahu saya fikiran dan soalan anda dalam komen.

Soalan Lazim (Soalan Lazim) Mengenai Membina Plugin Borang Hubungan WordPress Anda Sendiri

Apakah faedah membuat plugin borang hubungan WordPress saya sendiri? Anda boleh menyesuaikan borang untuk memadankan estetika laman web anda, menambah bidang yang unik yang memenuhi keperluan khusus anda, dan menguruskan data yang dikumpulkan dengan cara yang sesuai dengan operasi perniagaan anda. Di samping itu, ia menghapuskan keperluan untuk plugin pihak ketiga, yang kadang-kadang boleh melambatkan laman web anda atau menimbulkan risiko keselamatan. , Pengetahuan asas PHP, HTML, dan CSS diperlukan untuk membuat plugin borang hubungan WordPress. Walau bagaimanapun, proses itu dipermudahkan dalam panduan kami, menjadikannya mudah untuk pemula. Sekiranya anda tidak selesa dengan pengekodan, terdapat banyak plugin pembina bentuk WordPress yang tersedia yang menawarkan antara muka yang lebih mesra pengguna, seret dan drop. ? Teknik yang sama. Kemas kini dan pemantauan secara berkala juga penting untuk mengekalkan keselamatan borang. keupayaan untuk menambah medan tersuai. Ini boleh terdiri daripada input teks mudah ke medan yang lebih kompleks seperti muat naik fail, pemetik tarikh, atau dropdowns tersuai. Proses ini melibatkan mengubah HTML borang dan mengendalikan data dengan sewajarnya dalam kod PHP anda.

Bagaimana saya boleh gaya borang hubungan WordPress saya untuk menyesuaikan reka bentuk laman web saya? Anda boleh menambah kelas tersuai ke elemen borang anda dan menentukan gaya dalam fail CSS tema anda atau plugin CSS tersuai. Ini membolehkan anda mengawal warna, fon, susun atur, dan banyak lagi. Dikendalikan dalam pelbagai cara bergantung kepada keperluan anda. Anda boleh menghantar data ke alamat e-mel, menyimpannya dalam pangkalan data WordPress anda, atau mengintegrasikan dengan perkhidmatan pihak ketiga seperti sistem CRM atau platform pemasaran e-mel. Ini memerlukan pengekodan php tambahan untuk memproses penyerahan borang.

Bolehkah saya membuat borang hubungan WordPress Multi-Step? pengekodan. Ini melibatkan mewujudkan pelbagai halaman bentuk dan menguruskan data antara langkah -langkah menggunakan sesi atau medan tersembunyi. Borang pelbagai langkah dapat meningkatkan pengalaman pengguna dengan memecahkan borang panjang ke bahagian yang boleh diurus. Mengintegrasikan dengan perkhidmatan CAPTCHA seperti Google Recaptcha. Ini memerlukan mendapatkan kunci API dari perkhidmatan dan menambah kod HTML dan PHP yang diperlukan ke borang anda. Captcha membantu melindungi borang anda dari spam dan penyerahan automatik.

Bolehkah saya membuat borang hubungan WordPress yang responsif? Baik dan berfungsi dengan baik pada semua saiz peranti. Ini termasuk menetapkan lebar, margin, dan padding yang sesuai untuk elemen bentuk dan menggunakan pertanyaan media untuk menyesuaikan gaya untuk saiz skrin yang berbeza. Dengan borang hubungan WordPress anda melibatkan mengenal pasti masalah, memeriksa kod anda untuk kesilapan, dan menguji borang di bawah keadaan yang berbeza. Isu -isu biasa termasuk borang yang tidak menghantar e -mel, bentuk yang tidak memaparkan dengan betul, atau membentuk penyerahan yang tidak disimpan. Jika anda tidak dapat menyelesaikan masalah ini, pertimbangkan untuk mendapatkan bantuan daripada komuniti WordPress atau pemaju profesional.

Atas ialah kandungan terperinci Bina plugin borang kenalan WordPress anda sendiri dalam 5 minit. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!