- 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.
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.
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></span>Seterusnya, kami menambah fungsi html_form_code () yang mengandungi borang hubungan html:
<span>function html_form_code() { </span> <span>echo '<form action="'%20.%20esc_url(%20%24_SERVER%5B'REQUEST_URI'%5D%20)%20.%20'" method="post">'; </form></span> <span>echo '<p>'; </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 : . size="40">'; </span> <span>echo ''; </span> <span>echo '<p>'; </p></span> <span>echo 'Your Email (required) <br>'; </span> <span>echo '<input type="email" name="cf-email" value="' . ( isset( $_POST[" cf-email esc_attr : . size="40">'; </span> <span>echo ''; </span> <span>echo '<p>'; </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 : . size="40">'; </span> <span>echo ''; </span> <span>echo '<p>'; </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 ''; </span> <span>echo '<p><input type="submit" name="cf-submitted" value="Send"></p>'; </span> <span>echo ''; </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></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.
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 ditinggalkanFungsi 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="'%20.%20esc_url(%20%24_SERVER%5B'REQUEST_URI'%5D%20)%20.%20'" method="post">'; </form></span> <span>echo '<p>'; </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 : . size="40">'; </span> <span>echo ''; </span> <span>echo '<p>'; </p></span> <span>echo 'Your Email (required) <br>'; </span> <span>echo '<input type="email" name="cf-email" value="' . ( isset( $_POST[" cf-email esc_attr : . size="40">'; </span> <span>echo ''; </span> <span>echo '<p>'; </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 : . size="40">'; </span> <span>echo ''; </span> <span>echo '<p>'; </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 ''; </span> <span>echo '<p><input type="submit" name="cf-submitted" value="Send"></p>'; </span> <span>echo ''; </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> $email</span>>"</span> . "\r\n"; <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>echo '<p>Thanks for contacting me, expect a response soon.</p>'; </span> <span>echo '</span> </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></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
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!

Memilih persekitaran pembangunan bersepadu yang betul (IDE) untuk pembangunan WordPress Selama sepuluh tahun, saya telah meneroka pelbagai persekitaran pembangunan bersepadu (IDES) untuk pembangunan WordPress. Variasi semata -mata - bebas dari komersial, asas untuk FEA

Tutorial ini menunjukkan membina plugin WordPress menggunakan prinsip pengaturcaraan berorientasikan objek (OOP), memanfaatkan API Dribbble. Mari kita memperbaiki teks untuk kejelasan dan kesimpulan sambil memelihara makna dan struktur asal. Objek-ori

Amalan terbaik untuk meluluskan data PHP ke JavaScript: Perbandingan WP_LOCALIZE_SCRIPT dan WP_ADD_INLINE_SCRIPT Menyimpan data dalam rentetan statik dalam fail PHP anda adalah amalan yang disyorkan. Sekiranya data ini diperlukan dalam kod JavaScript anda, incorporat

Panduan ini menunjukkan bagaimana untuk membenamkan dan melindungi fail PDF dalam jawatan WordPress dan halaman menggunakan plugin PDF WordPress. PDFS menawarkan format yang mesra pengguna dan boleh diakses secara universal untuk pelbagai kandungan, dari katalog ke persembahan. Kaedah ini ENS

Orang memilih untuk menggunakan WordPress kerana kuasa dan fleksibiliti. 1) WordPress adalah CMS sumber terbuka dengan kemudahan penggunaan dan skalabiliti yang kuat, sesuai untuk pelbagai keperluan laman web. 2) Ia mempunyai tema dan plugin yang kaya, ekosistem yang besar dan sokongan komuniti yang kuat. 3) Prinsip kerja WordPress adalah berdasarkan tema, pemalam dan fungsi teras, dan menggunakan PHP dan MySQL untuk memproses data, dan menyokong pengoptimuman prestasi.


Alat AI Hot

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool
Gambar buka pakaian secara percuma

Clothoff.io
Penyingkiran pakaian AI

AI Hentai Generator
Menjana ai hentai secara percuma.

Artikel Panas

Alat panas

MinGW - GNU Minimalis untuk Windows
Projek ini dalam proses untuk dipindahkan ke osdn.net/projects/mingw, anda boleh terus mengikuti kami di sana. MinGW: Port Windows asli bagi GNU Compiler Collection (GCC), perpustakaan import yang boleh diedarkan secara bebas dan fail pengepala untuk membina aplikasi Windows asli termasuk sambungan kepada masa jalan MSVC untuk menyokong fungsi C99. Semua perisian MinGW boleh dijalankan pada platform Windows 64-bit.

DVWA
Damn Vulnerable Web App (DVWA) ialah aplikasi web PHP/MySQL yang sangat terdedah. Matlamat utamanya adalah untuk menjadi bantuan bagi profesional keselamatan untuk menguji kemahiran dan alatan mereka dalam persekitaran undang-undang, untuk membantu pembangun web lebih memahami proses mengamankan aplikasi web, dan untuk membantu guru/pelajar mengajar/belajar dalam persekitaran bilik darjah Aplikasi web keselamatan. Matlamat DVWA adalah untuk mempraktikkan beberapa kelemahan web yang paling biasa melalui antara muka yang mudah dan mudah, dengan pelbagai tahap kesukaran. Sila ambil perhatian bahawa perisian ini

Muat turun versi mac editor Atom
Editor sumber terbuka yang paling popular

VSCode Windows 64-bit Muat Turun
Editor IDE percuma dan berkuasa yang dilancarkan oleh Microsoft

Dreamweaver CS6
Alat pembangunan web visual
