În postul meu anterior din această serie, am început să construiesc o pagină de bun venit pentru un plugin WordPress. Am discutat arhitectura plugin-ului și cum funcționează. Apoi am scris codul pentru fișierele de bază și inițiale, unde am adăugat blocurile de cod pentru adăugarea și ștergerea unui tranzitoriu bazat pe activarea și dezactivarea pluginului.
În acest articol final, voi discuta fișierele plugin-ului rămase, împreună cu implementarea practică a pluginului. Spre sfârșitul acestui articol, veți fi conștienți de procesul de codificare a primei pagini de întâmpinare pentru un plugin WordPress.
welcome-init.php
fișierul definește tot codul care inițializează procesul pentru pagina noastră de întâmpinare. A început cu adăugarea și ștergerea tranzițiilor prin set_transient ()
(la activarea pluginului) și delete_transient ()
funcții (la dezactivarea pluginului).
Acestea fiind spuse, acum avem nevoie de o modalitate de a redirecționa utilizatorul la pagina noastră de întâmpinare. Pentru a gestiona logica pluginului, am creat un fișier separat numit welcome-logic.php
.
Să examinăm codul pentru acest fișier.
'wpw_welcome_page'), admin_url ('plugins.php'))); add_action ('admin_init', 'wpw_safe_welcome_redirect');
Deci, după cum știți până acum, îmi place să urmez standardele de codificare și documentare WordPress, motiv pentru care există o mulțime de documentații acolo, în timp ce unele dintre ele au fost adăugate pentru înțelegerea dvs..
Există un antet de fișier DocBlock care este utilizat pentru a oferi o imagine de ansamblu a conținutului fișierului. Codul începe cu un ABSPATH
verificați, care întrerupe funcționarea pluginului dacă cineva încearcă să acceseze direct fișierul plugin. După aceea, am scris rutina codului pentru o redirecționare sigură.
Apoi am definit o funcție numită wpw_safe_welcome_redirect ()
să se ocupe de redirecționarea în siguranță către pagina de bun venit. Înăuntru, am făcut câteva dacă
controalele care monitorizează metoda de redirecționare. Dacă ați trecut prin articolele anterioare, atunci știți că am definit _welcome_redirect_wpw
trecătoare și a stabilit valoarea sa la adevărat. Voi folosi aceeași cheie pentru a efectua aceste verificări. Pentru a înțelege mai bine codul, trebuie să treceți în detaliu articolul precedent.
Să începem cu ce se întâmplă în wpw_safe_welcome_redirect ()
funcţie.
Am verificat dacă există o tranziție de redirecționare a activării, adică. _welcome_redirect_wpw
tranzitorie, prin get_transient ()
funcţie. Această funcție este folosită pentru a obține valoarea unei tranziții. Dacă tranzitorul nu există, nu are valoare sau a expirat, atunci valoarea returnată va fi falsă.
Deci, dacă valoarea recuperată nu este egală cu Adevărat
, atunci nu este nevoie să redirecționăm utilizatorul către o pagină de bun venit. Dacă valoarea este preluată Adevărat
iar transientul de redirecționare a activării este prezent, apoi să mergem mai departe.
În cazul în care tranzitorii _welcome_redirect_wpw
se intoarce Adevărat
, înseamnă două lucruri: mai întâi că este prezent în baza de date și că nu am redirecționat utilizatorul pe pagina de întâmpinare. Deci haideți să ștergeți acest tranzitoriu și să redirecționați utilizatorul către pagina noastră de întâmpinare.
Apoi avem o altă declarație de verificare care confirmă faptul că o redirecționare de pagină de întâmpinare sigură se întâmplă numai pentru un site care nu este o rețea sau un site multi-site. Nu vrem redirecționarea paginii de bun venit dacă pluginul este activat dintr-o rețea.
În cele din urmă, după toate aceste verificări, am redirecționat utilizatorul la pagina noastră de întâmpinare. wp_safe_redirect ($ location)
funcția efectuează o redirecționare locală și comunică serverului despre $ locație
pentru a redirecționa utilizatorul.
Pentru a defini locația, am folosit funcția add_query_arg ()
care returnează un șir de interogări modificat de adresă URL. Aceasta ocupă o matrice asociativă care are o pereche cheie-valoare împreună cu adresa URL a locației.
În acest caz, creez o chestie numită pagină
cu o valoare wpw_welcome_page
și redirecționarea către plugins.php
fișier prin intermediul admin_url ()
funcţie. Aceasta înseamnă că redirecționez utilizatorul către o pagină personalizată din meniul Pluginuri și că utilizatorul va fi redirecționat către your-domain.com/wp-admin/plugin.php?page=wpw_welcome_page
URL-.
Apoi, am prins totul wpw_safe_welcome_redirect ()
funcția la admin_init
.
Până în prezent, am definit procedura pentru o redirecționare sigură. Locația este a pagină
care există în interiorul PLUGINS
meniul. Dar nu am creat pagina încă. Acum, să creăm o pagină de bun venit în interiorul Plugin-uri meniul.
Codul rămas al welcome-logic.php
fișierul este:
/ ** * Adaugă submeniul de pagină de întâmpinare. * * @ începând cu 1.0.0 * / funcția wpw_welcome_page () global $ wpw_sub_menu; $ wpw_sub_menu = add_submenu_page ('plugins.php', // numele de slug pentru meniul părinte (sau numele de fișier al paginii de administrare standard WordPress) __ ('Pagina de întâmpinare', 'wpw'), // Textul pentru să fie afișate în etichetele de titlu ale paginii când este selectat meniul __ ('Pagina de întâmpinare', 'wpw'), // Textul care trebuie utilizat pentru meniu 'read', // Capacitatea necesară pentru acest meniu pentru a fi afișat utilizatorului. 'wpw_welcome_page', // Numele de slug pentru a se referi la acest meniu prin (ar trebui să fie unic pentru acest meniu) 'wpw_welcome_page_content' // Funcția care va fi apelată pentru afișarea conținutului pentru această pagină. ; add_action ('admin_menu', 'wpw_welcome_page'); / ** * Conținutul paginii de întâmpinare. * * @ din 1.0.0 * / funcția wpw_welcome_page_content () if (fișier_există (WPW_DIR. '/welcome/welcome-view.php')) requ_once (WPW_DIR ./welcome/welcome-view.php ');
Pentru a adăuga submeniul, am creat un wpw_welcome_page ()
în interiorul căruia i-am sunat add_submenu_page ()
funcţie.
add_submenu_page ()
funcția adaugă o pagină în interiorul unui meniu. Este nevoie de o listă de parametri:
wpw_welcome_page
, același lucru pe care l-am definit în timpul funcției de redirecționare sigură.Am definit valorile acestor parametri și, în final, am adăugat wpw_welcome_page ()
funcționează ca add_action la admin_menu
.
Acum trebuie să rezolvăm conținutul paginii de bun venit, pentru care am creat-o wpw_welcome_page_content ()
(aceasta este funcția de apel invers pentru add_submenu_page ()
) care necesită welcome-view.php
fişier.
S-ar putea să fi observat că am creat o variabilă globală $ wpw_sub_menu
care conține ID-ul ecranului paginii pentru noua noastră pagină de submeniuri. Vom folosi acest lucru în următoarea secțiune.
Chiar după toate acestea, am enqueued a style.css
fișier pentru personalizarea stilului elementelor din pagina noastră de bun venit. În interiorul codului de mai sus, am stabilit o variabilă globală $ wpw_sub_menu
care conținea ID-ul ecranului sub-meniu.
Putem verifica acest ID al ecranului în timp ce enqueuează fișierul nostru de stiluri pentru a ne asigura că acesta este enqueued numai atunci când navigăm pe pagina de întâmpinare și nu peste tot în admin. Acesta este ceea ce face următorul cod.
/ ** * Styles Enqueue. * * @ din 1.0.0 * / funcția wpw_styles ($ hook) global $ wpw_sub_menu; // Adăugați stil numai în pagina de bun venit. dacă ($ hook! = $ wpw_sub_menu) retur; // Stiluri de bun venit. wp_enqueue_style ('wpw_style', WPW_URL. '/welcome/css/style.css', array (), WPW_VERSION, 'toate'); // Introduceți stilurile. add_action ('admin_enqueue_scripts', 'wpw_styles');
Logica paginii noastre de întâmpinare este completă. Puteți vedea codul complet al fișierului welcome-logic.php la GitHub.
Acum că logica paginii noastre de întâmpinare este completă, puteți testa pluginul pe care l-ați creat și vă va redirecționa către pagina de întâmpinare. Singurul lucru pe care trebuie să-l faceți este să construiți vizualizarea paginii dvs. de întâmpinare. Acest lucru ar putea fi orice vrei tu, dar vreau să te las cu o boilerplate din motive evidente.
Partea HTML și CSS a plugin-ului se află în interiorul welcome-view.php
fişier. Codul său merge după cum urmează:
Fișierul începe ca un fișier PHP obișnuit cu un DocBlock și apoi codul pentru un ABSPATH
verificați astfel încât nimeni să nu poată accesa direct fișierul. După aceea, am creat o variabilă pentru versiunea pluginului și calea imaginii noastre.
Am adăugat un dosar numit css
și un fișier numit style.css
în interiorul acestuia pentru a crea anumite stiluri personalizate pentru pagina de bun venit. Codul arată după cum urmează. Este codul folosit pentru a modifica clasa suplimentară pe care am adăugat-o pentru sigla noastră. (Puteți să o adăugați așa cum vă place; tocmai am înlocuit sigla WP pentru a păstra lucrurile simple în scopul acestui tutorial.)
/ * Logo * / .svg .wp-badge.welcome__logo fundal: url ('... /img/logo.png') centru 24px no-repeat # 0092f9; dimensiune de fond: conține; culoare: #fff; / * Responsabil Youtube Video * / .embed-container înălțime: 0; max-lățime: 100%; overflow: ascuns; pad-bottom: 56,25%; poziție: relativă; .embed-container iframe, .embed-container object, .embed-container embed top: 0; înălțime: 100%; stânga: 0; poziția: absolută; lățime: 100%;
După aceasta, există partea HTML a paginii noastre. Există un videoclip de pe YouTube încorporat ca un film receptiv.
Partea HTML a paginii de întâmpinare este similară cu cea a paginii de întâmpinare implicite WordPress. Avantajul este că nu trebuie să scriem o mulțime de CSS, iar utilizatorii sunt deja familiarizați cu formatul încorporat.
Pluginurile sunt extensii pentru WordPress. Puteți extinde WordPress creând un plugin, motiv pentru care cred că trebuie să utilizați întotdeauna stilurile implicite și încorporate pentru a păstra lucrurile mai în concordanță cu tabloul de bord WordPress. Unele pluginuri adaugă pictograme colorate și fundal greu sau nu, dar la sfârșitul zilei acestea sfârșesc prin a deranja o experiență netedă a utilizatorilor.
Sunt sigur că dezvoltatorii de plugin-uri sunt bine familiarizați cu programarea HTML. Iată codul oricum.
Codul afișează următoarea structură:
În momentul redactării, puteți folosi următoarele clase CSS pentru a crea coloane:
.facilitate-secțiune
impreuna cu .One col
: Pentru a crea o singură coloană..facilitate-secțiune
impreuna cu .două col
: Pentru a crea două coloane..facilitate-secțiune
impreuna cu .trei-col
: Pentru a crea trei coloane.Acest lucru completează dezvoltarea pluginului nostru. Să o testam pe un site demo.
Pentru a testa pluginul pe un site demo, puteți descărca și instala aplicația WP-welcome-Page--pentru-șabloane TutsPlusde la GitHub.
După aceasta, efectuați următorii pași:
Voila! Am redirecționat pagina de întâmpinare?
Odată ce ați terminat, reveniți la pagina de pornire a tabloului de bord și plasați mouse-ul peste Plugin-uri meniul. Se adaugă un submeniu suplimentar, numit ca Pagina de întâmpinare. Pentru a vă reaminti din nou, aceasta este aceeași pagină pe care am creat-o anterior.
Apropo, pagina finală de întâmpinare arată așa.
Aici este aspectul complet al ecranului de întâmpinare.
Acesta este modul în care puteți crea o pagină de bun venit pentru pluginul dvs. WordPress. Am descris o implementare foarte de bază. Puteți să o modificați în funcție de cerințele dvs. Aș recomanda descărcarea Bine ati venit
și inclusiv welcome-init.php
la produsul dvs. (nu modificați constantele globale în fișierele de bun venit - *. php).
În cele din urmă, îți poți captura toate cursurile și tutorialele pe pagina mea de profil și poți să mă urmărești pe blogul meu și / sau să contactezi Twitter @mrahmadawais unde scriu despre fluxurile de lucru în contextul WordPress.
Ca de obicei, nu ezitați să lăsați mai jos întrebări sau comentarii, și mă voi adresa fiecăruia.