Membina borang pendaftaran pelbagai langkah untuk WordPress

Takeaways Key

Borang lalai yang disediakan oleh WordPress sering tidak sepadan dengan reka bentuk dan penjenamaan laman web ini, yang membawa kepada peningkatan permintaan untuk borang penetapan log masuk, pendaftaran dan kata laluan tersuai.
• Tutorial menerangkan cara membina borang pendaftaran pelbagai langkah WordPress menggunakan plugin yang dipanggil Profile, yang mengendalikan pengesahan PHP pelayan, pengesahan dan kebenaran borang tersuai.
Proses ini melibatkan menambah medan maklumat hubungan ke profil pengguna WordPress, membina borang pelbagai langkah dengan HTML, CSS, dan JavaScript, dan menukar borang ke dalam bentuk pendaftaran WordPress yang berfungsi menggunakan ciri Melange plugin.
• Borang Multi-Langkah boleh disesuaikan melalui CSS, dan ia boleh diintegrasikan dengan alat atau perkhidmatan lain. Adalah penting untuk memastikan borang itu mesra mudah alih dan mengesahkan input pengguna. Sekiranya borang itu panjang, ada kemungkinan untuk menyelamatkan kemajuan pengguna menggunakan kuki atau storan tempatan.
Borang Login Lalai, Pendaftaran dan Kata Laluan Termasuk dalam WordPress (di luar laman web yang dibangunkan dengannya) sering tidak mematuhi reka bentuk dan penjenamaan laman web.
Pada masa lalu apabila WordPress adalah enjin blog, ini baik -baik saja. WordPress sejak itu telah berkembang menjadi sistem pengurusan kandungan, yang membawa kepada permintaan yang semakin meningkat untuk borang reset log masuk, pendaftaran dan kata laluan tersuai.

Dalam tutorial ini, kami akan belajar bagaimana untuk membina borang pendaftaran Multi-Langkah WordPress menggunakan plugin yang saya telah dibangunkan dipanggil profilpress.

Perlu diingat bahawa kami telah meliputi cara membina borang log masuk, pendaftaran dan kata laluan yang sebelum ini dengan profilpress dan widget log masuk dan pendaftaran.

di bawah adalah reka bentuk borang pendaftaran pelbagai langkah yang akan kami bina pada akhir tutorial ini.

Lihat borang pendaftaran Multi Langkah Pena dengan bar kemajuan menggunakan jQuery dan CSS3 oleh Agbonghama Collins (@collizo4sky) pada codepen.

Jika anda ingin melompat ke hadapan tutorial ini, inilah demo secara langsung dalam bentuk di laman web wordpress.

Tanpa berlengah lagi, mari melompat terus ke dalam membina borang pendaftaran pelbagai langkah.

menyelam ke dalam pengekodan

Dalam demo di atas, bahagian Profil Sosial mengandungi Facebook, Twitter dan Google Field, yang tidak hadir dalam profil pengguna WordPress lalai. Akibatnya, kita perlu membuat kaedah hubungan untuk medan profil sosial di atas agar WordPress menyimpan data yang dimasukkan ke dalam bidang terhadap profil pengguna berdaftar.

Menambah medan kenalan menggunakan fail 'fungsi.php'

Terdapat beberapa tutorial dalam talian yang menggambarkan cara menambah medan maklumat hubungan ke profil pengguna WordPress, termasuk:

• Sesuaikan maklumat hubungan profil pengguna WordPress
• Tambahkan kaedah hubungan tambahan ke profil pengguna
• melanjutkan maklumat hubungan pengguna di WordPress

Tutorial ini menerangkan bahawa jika kod berikut disisipkan ke dalam fail fungsi.php tema anda, ia akan menambah medan Facebook, Twitter dan Google ke bahagian maklumat hubungan dalam profil pengguna WordPress.

<span>function add_contact_methods( $user_contact ){
</span>    <span>/* Add user contact methods */
</span>    <span>$user_contact['facebook'] = __('Facebook Username'); 
</span>    <span>$user_contact['twitter'] = __('Twitter Username');
</span>    <span>$user_contact['google'] = __('Google+ Profile');
</span> 
    <span>return $user_contact;
</span><span>}
</span> 
<span>add_filter('user_contactmethods', 'add_contact_methods');</span>

Menambah medan kenalan menggunakan plugin ProfilePress

Menggunakan plugin, medan maklumat hubungan boleh ditambah dengan mengisi borang kunci/label (lihat imej di bawah). Ini terletak di halaman Tetapan Maklumat Hubungan, di mana Key adalah nama unik yang digunakan secara dalaman oleh WordPress untuk mengenali medan dan label penerangan medan yang dipaparkan kepada pengguna.

Untuk maklumat lanjut, lihatlah menambah maklumat hubungan ke profil WordPress dengan plugin Profil.

navigasi ke profil WordPress anda untuk melihat Facebook, Twitter dan Google Field dipaparkan.

Setelah menambah medan maklumat Facebook, Twitter dan Google Hubungan ke profil WordPress anda, anda perlu membina borang pelbagai langkah melalui ciri melange.

Membina Borang Multi-Langkah

Saya tidak akan berjalan melalui proses bagaimana bentuk pelbagai langkah dibina dengan HTML, CSS dan JavaScript. Jangan ragu untuk mencucuk kod sumber untuk mengetahui tentang itu. Sebaliknya, kita akan belajar bagaimana untuk menukar borang menjadi borang pendaftaran WordPress yang sebenarnya.

Ciri Melange Plugin mampu menukarkan hampir mana -mana log masuk, penetapan semula kata laluan pendaftaran dan bahkan boleh mengedit templat borang profil supaya persamaan WordPress yang berfungsi tersedia (walaupun, ini hanya tersedia dalam versi premium dari versi premium plugin).

Dengan plugin yang dipasang, klik menu Melange seperti yang ditunjukkan dalam imej di bawah dan kemudian tambah butang baru untuk memulakan proses bangunan.

Borang akan dibentangkan kepada anda. Isi medan seperti berikut.

Masukkan nama untuk borang dalam medan Nama. Mari kita panggil Borang Pendaftaran Multistep Stride.

Salin kod HTML borang berbilang langkah ke editor Tinymce reka bentuk melange dan kemudian gantikan medan input dengan kesamaan kod shortcode masing-masing seperti:

kita boleh meninggalkan medan dalam bentuk cara mereka tanpa menggantikannya dengan persamaan kod shortcode profil mereka. Walau bagaimanapun, dengan menggunakan shortcode menjaga menambahkan atribut nama yang betul untuk medan input.

<span><form method="post" novalidate>
</span>    <span><div id="msform">
</span>        <span><!-- progressbar -->
</span>        <span><ul id="progressbar">
</span>            <span><li class="active">Account Setup</li>
</span>            <span><li>Social Profiles</li>
</span>            <span><li>Personal Details</li>
</span>        <span></ul>
</span>        <span><!-- fieldsets -->
</span>        <span><fieldset>
</span>            <span><h2 class="fs-title">Create your account</h2>
</span>
            <span><h3 class="fs-subtitle">This is step 1</h3>
</span>            <span>[reg-username placeholder="Username"]
</span>            <span>[reg-email placeholder="Email"]
</span>            <span>[reg-password placeholder="Password"]
</span>            <span><input type="button" name="next" class="next action-button" value="Next"/>
</span>        <span></fieldset>
</span>        <span><fieldset>
</span>            <span><h2 class="fs-title">Social Profiles</h2>
</span>
            <span><h3 class="fs-subtitle">Your presence on social networks</h3>
</span>            <span>[reg-cpf key="twitter" type="text" placeholder="Twitter"]
</span>            <span>[reg-cpf key="facebook" type="text" placeholder="Facebook"]
</span>            <span>[reg-cpf key="google" type="text" placeholder="Google Plus"]
</span>            <span><input type="button" name="previous" class="previous action-button" value="Previous"/>
</span>            <span><input type="button" name="next" class="next action-button" value="Next"/>
</span>        <span></fieldset>
</span>        <span><fieldset>
</span>            <span><h2 class="fs-title">Personal Details</h2>
</span>
            <span><h3 class="fs-subtitle">We will never sell it</h3>
</span>            <span>[reg-first-name placeholder="First Name"]
</span>            <span>[reg-last-name placeholder="Last Name"]
</span>            <span>[reg-nickname placeholder="Nickname"]
</span>            <span>[reg-bio placeholder="Biography"]
</span>            <span><input type="button" name="previous" class="previous action-button" value="Previous"/>
</span>            <span>[reg-submit class="submit action-button" value="Submit"]
</span>        <span></fieldset>
</span>    <span></div>
</span><span></form></span>

Jika anda dapat menentukan atribut nama untuk medan (contohnya, untuk medan nama pengguna, atribut nama adalah reg_username), anda juga boleh menghapuskan menggunakan kod pendek mereka.

Oleh kerana ProfilePress tidak termasuk kawasan teks untuk memasukkan JavaScript, kod JavaScript akan masuk ke medan Reka Bentuk Melange sejurus selepas kod HTML borang.

nota: atribut novalidate telah ditambahkan ke tag

untuk mengelakkan kesilapan "Kawalan bentuk tidak sah dengan nama =" tidak fokus "ralat dalam pelayar berasaskan berkedip) (seperti Chrome dan Opera) yang menghalang bentuk dari dikemukakan.

<span>function add_contact_methods( $user_contact ){
</span>    <span>/* Add user contact methods */
</span>    <span>$user_contact['facebook'] = __('Facebook Username'); 
</span>    <span>$user_contact['twitter'] = __('Twitter Username');
</span>    <span>$user_contact['google'] = __('Google+ Profile');
</span> 
    <span>return $user_contact;
</span><span>}
</span> 
<span>add_filter('user_contactmethods', 'add_contact_methods');</span>

Kod Penjelasan: Pertama, kami menyertakan panggilan tertunda ke perpustakaan pelonggaran jQuery. Ini dilakukan untuk menambah kesan pelonggaran kepada borang yang diikuti oleh kod JavaScript yang sebenarnya mengendalikan pelbagai langkah.

tampal CSS borang berbilang langkah ke kawasan kod stylesheet CSS.

NOTA: Kesilapan yang dihasilkan oleh borang pendaftaran yang dikuasakan oleh ProfilePress dibungkus dengan div dengan status Profile-Reg-status kelas, oleh itu kelas dalam lembaran gaya.

masukkan kod di bawah dalam bidang kejayaan pendaftaran untuk memaparkan notis tersuai pada pendaftaran pengguna yang berjaya.

Simpan borang dan navigasi kembali ke katalog Melange.

Salin kod shortcode yang dihasilkan dan tampalnya ke halaman WordPress yang anda pilih.

simpan halaman, kemudian pratonton untuk melihat pendaftaran pelbagai langkah dalam tindakan.

demo langsung borang pendaftaran pelbagai langkah boleh didapati di sini.

Ringkasan

Dalam tutorial ini, kami belajar bagaimana untuk membina borang pendaftaran Multi-Langkah WordPress menggunakan plugin yang saya bawa dipanggil ProfilePress. Plugin ini mengendalikan pengesahan PHP pelayan, pengesahan dan kebenaran log masuk tersuai, pendaftaran, tetapan semula kata laluan dan borang profil edit depan.

Jika anda mempunyai sebarang pertanyaan, cadangan atau sumbangan, sila beritahu saya dalam komen.

Soalan Lazim (Soalan Lazim) Mengenai Membina Borang Pendaftaran Multi-Langkah Untuk WordPress

Bagaimana saya boleh membuat borang pelbagai langkah tanpa menggunakan plugin?

Membuat borang pelbagai langkah tanpa menggunakan plugin melibatkan pengekodan. Anda perlu mempunyai pemahaman asas mengenai HTML, CSS, dan JavaScript. Proses ini melibatkan membuat bentuk HTML, menggayakannya dengan CSS, dan kemudian menggunakan JavaScript untuk mengawal langkah -langkah borang. Anda juga boleh menggunakan AJAX untuk menyerahkan borang tanpa menyegarkan halaman. Walau bagaimanapun, kaedah ini memerlukan pemahaman yang baik mengenai perkembangan bahasa dan WordPress ini. Jika anda tidak selesa dengan pengekodan, menggunakan plugin mungkin pilihan yang lebih baik.

Bolehkah saya menggunakan borang pelbagai langkah untuk tujuan lain selain pendaftaran?

Borang pelbagai langkah boleh digunakan untuk pelbagai tujuan. Mereka amat berguna apabila anda perlu mengumpulkan banyak maklumat daripada pengguna. Sebagai contoh, anda boleh menggunakannya untuk tinjauan, aplikasi kerja, atau borang hubungan yang kompleks. Kuncinya adalah untuk memecahkan maklumat ke dalam ketulan yang boleh diurus untuk memudahkan pengguna menyelesaikan borang. Daripada bentuk pelbagai langkah anda boleh dilakukan melalui CSS. Anda boleh menukar warna, fon, gaya butang, dan banyak lagi. Jika anda menggunakan plugin, ia mungkin datang dengan pilihan penyesuaian. Contohnya, beberapa plugin membolehkan anda memilih dari templat susun atur yang berbeza atau menambah CSS tersuai. Logik bersyarat ke borang pelbagai langkah anda. Ini bermakna langkah atau medan borang boleh berubah berdasarkan input pengguna. Sebagai contoh, anda mungkin ingin menunjukkan soalan yang berbeza berdasarkan jawapan pengguna sebelumnya. Ini boleh dilakukan melalui JavaScript atau dengan bantuan plugin yang menyokong logik bersyarat. Adakah mesra mudah alih adalah penting untuk pengalaman pengguna. Anda boleh melakukan ini dengan menggunakan teknik reka bentuk responsif. Ini bermakna bahawa susun atur dan elemen borang akan menyesuaikan diri secara automatik agar sesuai dengan saiz skrin yang berbeza. Sekiranya anda menggunakan plugin, pastikan ia menyokong reka bentuk responsif.

Bolehkah saya menyelamatkan kemajuan pengguna dalam bentuk multi-langkah? Borang Multi-Langkah. Ini berguna jika borang itu panjang dan pengguna mungkin tidak menyelesaikannya dalam satu sesi. Anda boleh melakukan ini dengan menggunakan kuki atau storan tempatan dalam penyemak imbas pengguna. Sesetengah plugin juga menawarkan ciri ini. Anda boleh melakukan ini dengan menggunakan JavaScript untuk menyemak input sebelum borang dikemukakan. Sesetengah plugin juga menawarkan ciri pengesahan terbina dalam.

Bolehkah saya mengintegrasikan borang pelbagai langkah saya dengan alat atau perkhidmatan lain? perkhidmatan. Sebagai contoh, anda mungkin mahu menghantar data borang ke perkhidmatan pemasaran e -mel atau CRM. Ini boleh dilakukan melalui API atau dengan bantuan plugin yang menyokong integrasi.

Bagaimanakah saya boleh menguji borang multi-langkah saya untuk memastikan ia berfungsi dengan betul? Anda boleh melakukan ini dengan mengisi borang diri anda dan memeriksa jika data disimpan dengan betul atau dihantar. Anda juga harus menguji borang pada peranti dan penyemak imbas yang berbeza untuk memastikan ia responsif dan serasi. Semasa membuat borang pelbagai langkah anda, anda boleh mencuba menyelesaikan masalah sendiri dengan menyemak kod atau tetapan plugin anda. Jika anda masih menghadapi masalah, anda boleh mendapatkan bantuan daripada komuniti dalam talian, forum, atau pasukan sokongan plugin. Ingat, tidak apa -apa untuk meminta pertolongan apabila anda memerlukannya.

Atas ialah kandungan terperinci Membina borang pendaftaran pelbagai langkah untuk WordPress. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!