Croatian (Hrvatski) translation by Maja Petek (you can also view the original English article)
Ravno iz kutije, WordPress omogućuje prilagođeni obrazac za registraciju koji se može upotrijebiti za podešavanje novog korisnika, ili dodavanje novog korisnika već postojećoj WordPress instalaciji. Ali što ako želite implementirati registracijski obrazac koji ne renderira opcije u WordPress Dashboardu?
U ovom tutorialu ćemo naučiti kako kreirati korisnički registracijski obrazac u WordPressu koristeći kombinaciju predložaka tagova i kratkih kodova.
Zadani registracijski obrazac sastoji se od samo dva polja obrasca - korisničkog imena i emaila.
Iz razloga što su u polju obrasca prisutni samo korisničko ime i email, ovaj proces je nevjerojatno lagan. Prvo, unesete svoje korisničko ime i email nakon čega će vam putem emaila biti proslijeđena lozinka. Zatim se logirate na stranicu sa lozinkom i dovršite svoj profil te promijenite lozinku u nešto što ćete lakše upamtiti.
Umjesto da natjerate korisnika da prolazi kroz cijeli navedeni stres samo kako bi se logirao na vašu stranicu, zašto mu ne biste omogućili izravan registracijski obrazac koji sadrži neka dodatna polja obrasca kao dodatak zadanom korisničkom imenu i emailu kao što je npr. lozinka, URL na njihovu web stranicu, biografija, nadimak, te njihovo ime i prezime.
Ovo je naročito korisno kod web stranica sa višebrojnim autorima kao što je Tuts+.
U ovom članku ćemo graditi plugin za korisnički registracijski obrazac sa sljedećim poljima obrasca:
- korisničko ime
- lozinka
- URL web stranice
- ime
- prezime
- nadimak
- biografija (ili odjeljak "o meni")
Korisnički obrazac za registraciju može biti integriran u WordPress pomoću plugin kratkog koda i pripadajućim tagom.
Sa kratkim kodom možete kreirati stranicu i učiniti je službenom registracijskom stranicom vaše web stranice. Kratki kod također možete upotrijebiti unutar posta kako bi se korisnik mogao prijaviti na vašu stranicu nakon čitanja nekog vašeg članka.
Ako želite dodati registracijski obrazac na alatnu traku ili neku specifičnu lokaciju na stranici, možete editirati WordPress temu ali smještajući tag na željenu lokaciju.
Prije nego što počnemo graditi plugin registracijskog obrasca, vrijedi napomenuti da su potrebni korisničko ime, lozinka i email polje.
Ovo pravilo ćemo nametati kada ćemo pisati našu validacijsku funkciju.
Premium Opcija
Ovaj tutorial će vas naučiti iz temelja izgraditi plugin, ali ako tražite brzo, 'plug-and-play' rješenje, pokušajte sa WordPress Registration Form pluginom na Envato Marketu. Možete podesiti široki raspon registracijskih obrazaca sa kontrolom provjere valjanosti. Kada je registracija završena, novom članu se šalje email sa njegovim detaljima za prijavu. Email predložak može biti modificiran za registraciju, promjenu lozinke, itd.
Još jedna opcija je jednostavno predavanje narudžbe na Envato Studio. Možete odabrati pravu osobu među mnogim iskusnim WordPress plugin razvojnim programerima. Zatim pošaljete svoja kratka uputstva i developer će kreirati vaš plugin unutar dogovorenog vremenskog roka.
Na primjer, Alisaleem252 će razviti prilagođeni WordPress plugin koji će biti kompatibilan sa posljednjom WordPress Repository verzijom prema vašim zahtjevima.
Dobiti ćete:
- prilagođeni widget, ukoliko je potrebno
- prilagođeni kratki kod, ako je potrebno
- prilagođeni post tip, ako je potrebno
- pouzdanu uslugu
Cijena kompletne usluge iznosi samo 300$, i vaš plugin će biti gotov za 10 dana. Alisaleem252 ima 98% pozitivan rejting potvrđen od strane prijašnjih klijenata. Pa zašto ne biste isprobali ovu popularnu Custom WordPress Plugin Development uslugu!
Izgradnja Plugina
Nakon što smo sve rekli, možemo početi sa kodiranjem plugina. Prvo, uključite plugin zaglavlje.
<?php /* Plugin Name: Custom Registration Plugin URI: https://code.tutsplus.com Description: Updates user rating based on number of posts. Version: 1.0 Author: Agbonghama Collins Author URI: http://tech4sky.com */
Zatim, kreiramo PHP funkciju koja sadrži HTML kod registracijskog obrasca.
function registration_form( $username, $password, $email, $website, $first_name, $last_name, $nickname, $bio ) {
echo '
<style>
div {
margin-bottom:2px;
}
input{
margin-bottom:4px;
}
</style>
';
echo '
<form action="' . $_SERVER['REQUEST_URI'] . '" method="post">
<div>
<label for="username">Username <strong>*</strong></label>
<input type="text" name="username" value="' . ( isset( $_POST['username'] ) ? $username : null ) . '">
</div>
<div>
<label for="password">Password <strong>*</strong></label>
<input type="password" name="password" value="' . ( isset( $_POST['password'] ) ? $password : null ) . '">
</div>
<div>
<label for="email">Email <strong>*</strong></label>
<input type="text" name="email" value="' . ( isset( $_POST['email']) ? $email : null ) . '">
</div>
<div>
<label for="website">Website</label>
<input type="text" name="website" value="' . ( isset( $_POST['website']) ? $website : null ) . '">
</div>
<div>
<label for="firstname">First Name</label>
<input type="text" name="fname" value="' . ( isset( $_POST['fname']) ? $first_name : null ) . '">
</div>
<div>
<label for="website">Last Name</label>
<input type="text" name="lname" value="' . ( isset( $_POST['lname']) ? $last_name : null ) . '">
</div>
<div>
<label for="nickname">Nickname</label>
<input type="text" name="nickname" value="' . ( isset( $_POST['nickname']) ? $nickname : null ) . '">
</div>
<div>
<label for="bio">About / Bio</label>
<textarea name="bio">' . ( isset( $_POST['bio']) ? $bio : null ) . '</textarea>
</div>
<input type="submit" name="submit" value="Register"/>
</form>
';
}
Primjećujete li da je registracijsko polje proslijeđeno gornjoj funkciji kao varijabla? U funkcijskom kodu, vidjeti ćete instance sljedećeg koda, na primjer:
( isset( $_POST['lname'] ) ? $last_name : null )
Trojni operator provjerava sadržaj globalne $_POST strelice da provjeri sadrži li obrazac vrijednost. Ako sadrži vrijednost, upotpunjuje polja obrasca sa vrijednostima kako bi poštedio korisnika od ponovnog unosa podataka u polje.
Registracijski obrazac nije završen sve dok ne potvrdite i trajno uklonite unos korisnika. Kao rezultat ćemo kreirati validacijsku funkciju sa nazivom registration_validation.
Da ublažimo bol validacije, upotrijebiti ćemo WordPress WP_Error klasu. Pratite me dok kodiramo validacijsku funkciju:
- Kreirajte funkciju i proslijedite polje za registraciju kao argument funkcije.
function registration_validation( $username, $password, $email, $website, $first_name, $last_name, $nickname, $bio ) { - Instancirajte
WP_Errorklasu i učinite varijablu instance globalnom kako bi bila pristupačna izvan područja funkcije.global $reg_errors; $reg_errors = new WP_Error;
- Upamtite: Rekli smo da su potrebni korisničko ime, lozinka i email i ne smiju se izostaviti. Kako bismo utvrdili pravilo, moramo provjeriti je li bilo koje polje prazno. Ako jest, dodajemo error poruku globalnoj
WP_Errorklasi.if ( empty( $username ) || empty( $password ) || empty( $email ) ) { $reg_errors->add('field', 'Required form field is missing'); } - Također provjeravamo da broj znamenki korisničkog imena nije manji od 4.
if ( 4 > strlen( $username ) ) { $reg_errors->add( 'username_length', 'Username too short. At least 4 characters is required' ); } - Provjerite je li korisničko ime već registrirano.
if ( username_exists( $username ) ) $reg_errors->add('user_name', 'Sorry, that username already exists!'); - Upotrijebite usluge WordPress validate_username funkcije da provjerite je li korisničko ime valjano.
if ( ! validate_username( $username ) ) { $reg_errors->add( 'username_invalid', 'Sorry, the username you entered is not valid' ); } - Provjerite je li broj znamenki za zaporku unesen od strane korisnika manji od 5.
if ( 5 > strlen( $password ) ) { $reg_errors->add( 'password', 'Password length must be greater than 5' ); } - Provjerite je li email adresa valjana.
if ( !is_email( $email ) ) { $reg_errors->add( 'email_invalid', 'Email is not valid' ); } - Provjerite je li email adresa već registrirana.
if ( email_exists( $email ) ) { $reg_errors->add( 'email', 'Email Already in use' ); } - Ako je polje web stranice ispunjeno, provjerite da vidite je li valjano.
if ( ! empty( $website ) ) { if ( ! filter_var( $website, FILTER_VALIDATE_URL ) ) { $reg_errors->add( 'website', 'Website is not a valid URL' ); } } - I na kraju, prolazimo kroz greške u našoj
WP_Errorinstanci i prikazujemo individualnu grešku.if ( is_wp_error( $reg_errors ) ) { foreach ( $reg_errors->get_error_messages() as $error ) { echo '<div>'; echo '<strong>ERROR</strong>:'; echo $error . '<br/>'; echo '</div>'; } }Završili smo kodiranje validacije funkcije.
Sljedeći na redu je plugin complete_registration() funkcija koja rješava registraciju korisnika.
Registracija korisnika ustvari vrši wp_insert_user funkcija koja prihvaća red korisničkih podataka.
function complete_registration() {
global $reg_errors, $username, $password, $email, $website, $first_name, $last_name, $nickname, $bio;
if ( 1 > count( $reg_errors->get_error_messages() ) ) {
$userdata = array(
'user_login' => $username,
'user_email' => $email,
'user_pass' => $password,
'user_url' => $website,
'first_name' => $first_name,
'last_name' => $last_name,
'nickname' => $nickname,
'description' => $bio,
);
$user = wp_insert_user( $userdata );
echo 'Registration complete. Goto <a href="' . get_site_url() . '/wp-login.php">login page</a>.';
}
}
U complete_registration() funkciji iznad, učinili smo $reg_errors WP_Error instance i polja obrasca varijable globalnima kako bi mogli pristupiti varijabli u globalnom području.
Zatim provjeravamo sadrži li $reg_errors instanca kakvu grešku. Ako nije pronađena nikakva greška, nastavljamo populirati $userdata red i ubacujemo detalje registracije korisnika u WordPress bazu podataka te prikazujemo Registration Complete poruku sa poveznicom na login stranicu.
Sljedeće je super custom_registration_function() funkcija koja stavlja sve funkcije koje smo gore kreirali u upotrebu.
function custom_registration_function() {
if ( isset($_POST['submit'] ) ) {
registration_validation(
$_POST['username'],
$_POST['password'],
$_POST['email'],
$_POST['website'],
$_POST['fname'],
$_POST['lname'],
$_POST['nickname'],
$_POST['bio']
);
// sanitize user form input
global $username, $password, $email, $website, $first_name, $last_name, $nickname, $bio;
$username = sanitize_user( $_POST['username'] );
$password = esc_attr( $_POST['password'] );
$email = sanitize_email( $_POST['email'] );
$website = esc_url( $_POST['website'] );
$first_name = sanitize_text_field( $_POST['fname'] );
$last_name = sanitize_text_field( $_POST['lname'] );
$nickname = sanitize_text_field( $_POST['nickname'] );
$bio = esc_textarea( $_POST['bio'] );
// call @function complete_registration to create the user
// only when no WP_error is found
complete_registration(
$username,
$password,
$email,
$website,
$first_name,
$last_name,
$nickname,
$bio
);
}
registration_form(
$username,
$password,
$email,
$website,
$first_name,
$last_name,
$nickname,
$bio
);
}
Dozvolite da vam objasnim kod u custom_registration_function() funkciji.
Prvo, provjeravajući je li podešen $_POST['submit'] određujemo je li obrazac zaprimljen. Ako je obrazac zaprimljen, zovemo registration_validation funkciju da validiramo zaprimljen obrazac korisnika.
Zatim trajno uklonimo podatke obrasca i podesimo podatke trajnog uklanjanja u varijablu nazvanu prema polju obrasca. Na kraju zovemo complete_registration da registriramo korisnika.
Moramo pozvati registration_form funkciju da prikažemo obrazac za registraciju.
Sjećate li se da sam ranije spomenuo kako ćemo pružiti podršku za kratki kod za registracijski plugin? Ispod je kod sa podrškom za kratki kod.
// Register a new shortcode: [cr_custom_registration]
add_shortcode( 'cr_custom_registration', 'custom_registration_shortcode' );
// The callback function that will replace [book]
function custom_registration_shortcode() {
ob_start();
custom_registration_function();
return ob_get_clean();
}
U ovom trenutku smo završili kodiranje plugina. Ispod je slika koja prikazuje izgled obrasca za registraciju.
Imajte na umu da možda ne postignete identičan izgled na svojoj WordPress stranici zbog različitosti CSS stila.
Upotreba Plugina
Kako bismo implementirali plugin u WordPress post ili stranicu, upotrijebite kratki kod [cr_custom_registration].
Kako biste implementirali registracijski obrazac u određeni aspekt teme, dodajte sljedeći predložak tag - <?phpcustom_registration_function(); ?> .
Plugin datoteku možete preuzeti u prilogu ovog članka.
Sažetak
U ovom članku smo prošli kroz proces izrade plugina koji u WordPress dodaje korisnički obrazac za registraciju. Možete dodatno proširiti obrazac za registraciju da uključite ekstra polja poput uloge korisnika, AOL IM računa i sl., ali pripazite da polje obrasca bude valjani meta podatak za wp_insert_user.
Ukoliko imate kakvih pitanja i prijedloga, javite mi u komentarima!
Ne zaboravite, ako ste se s teškoćom pratili ovaj tutorial i želite jednostavno rješenje, isprobajte WordPress Registration Form plugin na Envato Marketu.
