Share
Tabelele de prețuri reprezintă o componentă cheie a afacerii dvs. care vă promovează produsele și îi ajută pe utilizatori să aleagă între diferitele servicii pe care le aveți. Majoritatea temelor WordPress comerciale moderne oferă o construcție în tabelele de prețuri. Există, de asemenea, o mulțime de pluginuri gratuite și de tabel de prețuri comerciale pentru WordPress. Acest tutorial este destinat să ofere cunoștințe dezvoltatorilor WordPress cu privire la crearea unui plugin de la zero, care permite personalizarea în diferite proiecte.
Fiecare design web încearcă să realizeze caracteristici sensibile care să permită un aspect mai bun pe orice tip de dispozitiv. Tabelele de tarifare create cu acest plugin vor funcționa pe toate tipurile de dispozitive, cum ar fi telefoanele mobile și tabletele. Deci sa începem.
Puteți să aruncați o privire la proiectul final al tabelului de prețuri de pe ecranul următor.
Planificarea este partea dificilă în orice proiect. Este mai bine să planificați modul în care vom elabora tabelul de prețuri și tehnicile pe care le vom folosi înainte de a face orice codificare. Practic, tabelul de prețuri va avea următoarele componente:
Accentsconagua
pricing_tables.pricing_packages va fi folosit.Vom folosi un tip de post particularizat numit pricing_packages. Puteți genera pur și simplu un cod pentru crearea unui tip de post personalizat utilizând un generator de coduri online. Următorul cod creează tipul de post personalizat pentru pachete utilizând configurațiile implicite:
add_action ('init', 'wppt_register_cpt_pricing_packages'); funcția wppt_register_cpt_pricing_packages () $ labels = array ('name' => _x ('Pachete de prețuri', 'pricing_packages'), 'singular_name' => _x ("Adăugați noi", "pricing_packages"), "add_new_item" => _x (" '=> _x (' Pachet de prețuri de căutare ',' pricing_packages '),' view_item '=> _x ), 'not_found' => _x ("Pachete fără prețuri găsite", 'pricing_packages'), 'not_found_in_trash' Pachetul de prețuri pentru părinte: ',' pricing_packages '),' menu_name '=> _x (' Pachete de prețuri ',' pricing_packages ')); $ args = array ('etichete' => etichete $, 'hierarchical' => false, 'description' => > true, 'show_in_name' => true, 'show_in_nav_menus' => true, 'publicly_queryable' => true, 'exclude_from_search' adevărat, 'can_export' => true, 'rewrite' => true, 'capability_type' => 'post'); register_post_type ('pricing_packages', $ args); Numele pachetului, prețul și link-ul la cumpărare sunt cele mai importante componente dintr-un pachet de prețuri. Deci, vom folosi o casetă meta pentru a adăuga aceste câmpuri. De asemenea, avem nevoie de mai multe funcții pentru un pachet. Vom folosi o altă casetă de metadate pentru a adăuga și a elimina dinamic funcțiile, așa cum se arată în codul de mai jos.
add_action ('add_meta_boxes', 'wppt_pricing_packages_meta_boxes'); funcția wppt_pricing_packages_meta_boxes () add_meta_box ("tarifare-pachet-info", "Prețuri pachet Info", "wppt_generate_pricing_package_info", "pricing_packages", "normal", "mare"); add_meta_box ("pricing-features-info", "Caracteristici de stabilire a prețurilor", "wppt_generate_pricing_features_info", "pricing_packages", "normal", "high"); Mesajele pentru câmpurile de pachete sunt adăugate utilizând add_meta_boxes acțiune. Puteți utiliza o casetă meta în loc de două. Am folosit două căsuțe meta pentru a clarifica lucrurile.
funcția wppt_generate_pricing_package_info () global $ post; $ package_price = get_post_meta ($ post-> ID, "_package_price", true); $ package_buy_link = get_post_meta ($ post-> ID, "_package_buy_link", true); $ html = '„; $ html. = '
| „; $ html. = ' | „; $ html. = ' „; $ html. = ' | „; $ html. = '
|---|---|
| „; $ html. = ' | „; $ html. = ' „; $ html. = ' | „; $ html. = '
Prima casetă meta va conține câmpuri pentru link-ul de preț și cumpărare. Cele două câmpuri vor fi salvate în post_meta folosind tabelul _package_price și _package_buy_link chei, respectiv.
funcția wppt_generate_pricing_features_info () global $ post; $ package_features = get_post_meta ($ post-> ID, "_package_features", true); $ package_features = ($ package_features == ")? array (): json_decode ($ package_features); $ html. = '
| „; $ html. = ' | $ html. = ' „; $ html. = ' „; $ html. = ' |
|---|---|
„; $ html. = '
|
Codul de mai sus conține câmpurile HTML pentru câmpurile pentru pachete. Un pachet va conține multe caracteristici, prin urmare caracteristicile vor fi adăugate dinamic într-o listă neordonată cu câmpuri ascunse utilizând jQuery. Caracteristicile vor fi stocate în post_meta tabelul cu _package_features cheie. Un șir formatat în JSON va fi utilizat pentru a păstra mai multe caracteristici.
Prețul pachetului și link-ul de cumpărare sunt obligatorii pentru fiecare pachet. Deci, avem nevoie de un cod de validare înainte de a crea pachete. Vom folosi codul jQuery la validare după cum se arată mai jos.
jQuery (document) .ready (funcția ($) $ ("# post-body-content") prepend ('„); $ ("# post_type") return () ($ ("# post_type")) .val () == 'pricing_tables') returnați wppt_validate_pricing_tables ();); ); Trebuie să adăugăm o div element pentru a afișa erori. Ecranul pentru crearea postului conține un formular cu postarea ID. Nu se modifică nici pentru tipurile personalizate de postări. Așadar, am folosit evenimentul prezentat de #post formular pentru validare.
Deoarece folosim diferite tipuri de posturi personalizate, este necesar să filtrați tipul de post utilizând codul de mai jos. Formularul de creare a poștei conține un câmp ascuns cu ID-ul post_type.
dacă ($ ("# post_type") val () == 'pricing_packages') returnați wppt_validate_pricing_packages (); altfel dacă ($ ("# post_type") val () == 'pricing_tables') returnați wppt_validate_pricing_tables (); Odată ce filtrarea este finalizată, sunăm o funcție de validare specifică în funcție de tipul postului, după cum se arată mai jos.
var wppt_validate_pricing_packages = funcție () var err = 0; $ ( "# Pricing_error") html ( "").; $ ( "# Pricing_error") ascunde ().; dacă ($ ("title") val () == ") $ (" # pricing_error "Introduceți numele pachetului.
") () () () () () () () () ()Introduceți prețul pachetului.
") () () () () () () () () () () ##########################################################################Introduceți linkul Buy Buy.
") ################################################################################################################ < "returnare false"; altceva return true;; Mai întâi eliminăm toate erorile existente stabilite anterior în interiorul pricing_error element. Apoi putem valida fiecare câmp și adăugăm mesajul de eroare la pricing_error container. În cele din urmă, afișăm erorile folosind $ ( "# Pricing_error"). Spectacol () funcţie.
$ ( "# Publică"). RemoveClass ( "buton-primar-dezactivat"). De asemenea, putem opri imaginea de încărcare ajax folosind $ ( "# Ajax-încărcare"). Ascunde (). Acum am finalizat toate creațiile de teren și validările pentru pachete. Să trecem mai departe la salvarea informațiilor în baza de date. Vom folosi save_post acțiune care se execută imediat după ce postarea este salvată în baza de date.
add_action ('save_post', 'wppt_save_pricing_packages'); funcția wppt_save_pricing_packages ($ post_id) if (! wp_verify_nonce ($ _POST ['pricing_package_box_nonce'], numele de bază (__FILE__))) return $ post_id; dacă (definit ('DOING_AUTOSAVE') && DOING_AUTOSAVE) return $ post_id; if ('pricing_packages' == $ _POST ['post_type'] && current_user_can ('edit_post', $ post_id)) $ package_price = isset ($ _POST ['package_price']) "$ package_buy_link = (isset ($ _POST ['package_buy_link'])? $ _POST ['package_buy_link']:"); $ package_features = (isset ($ _POST ['package_features'])? $ _POST ['package_features']: array ()); $ pachetul_features = json_encode ($ pachet_features); update_post_meta ($ post_id, "_package_price", $ package_price); update_post_meta ($ post_id, "_package_buy_link", $ package_buy_link); update_post_meta ($ post_id, "_package_features", $ package_features); altceva return $ post_id; Mai întâi, facem niște validări pentru a verifica dacă valoarea nonce generată în formular se potrivește cu valoarea nonce primită în $ _POST. Apoi trebuie să ne asigurăm dacă este o salvare automată sau salvare manuală. Înainte de a salva, trebuie să verificăm tipul postării. În caz contrar, acest cod va fi executat pentru fiecare tip de post. Prețul pachetului și linkul de cumpărare vor fi salvate direct în post_meta tabel folosind update_post_meta funcţie. Caracteristicile vor fi salvate ca un șir JSON codificat. Acum, am terminat cu crearea de pachete. Să trecem la crearea tabelelor de prețuri.
Tabelele de prețuri vor fi un alt tip de post personalizat pe pluginul nostru. Crearea tipului de posturi personalizate și salvarea lor în baza de date este foarte asemănătoare cu codul explicat anterior. Deci nu o voi face plictisitor explicând același lucru. Puteți găsi crearea postului personalizat și codul de salvare pentru tabelele de prețuri în fișierele de pluginuri.
Tabelele de prețuri conțin pachete de prețuri. Prin urmare, căsuțele meta utilizate pentru tabelele de prețuri vor fi diferite de cele utilizate pentru pachetele de prețuri. Să aruncăm o privire la crearea meta-box pentru tabelele de prețuri.
add_action ('add_meta_boxes', 'wppt_pricing_tables_meta_boxes'); funcția wppt_pricing_tables_meta_boxes () add_meta_box ("tarif-table-info", "tabelul de prețuri", "wppt_generate_pricing_table_info", "tabletele de preț", "normal", "mare"); funcția wppt_generate_pricing_table_info () global $ post; $ table_packages = get_post_meta ($ post-> ID, "_table_packages", true); $ table_packages = ($ table_packages == ")? array (): json_decode ($ table_packages); $ query = noi WP_Query (array ('post_type' => 'pricing_packages', 'post_status' => 1, 'orderby' => 'post_date', 'comanda' => 'ASC')); $ html = '„; $ html. = '| Stare pachet | „; $ html. = 'Numele pachetului |
|---|---|
| „; $ html. = ' | ". $ query-> post-> post_title. ' |
Putem adăuga o casetă de metode personalizate pentru tabelele de prețuri care utilizează un cod similar celui folosit în secțiunea anterioară. Pachetele unei mese specifice vor fi stocate în post_meta tabel ca un șir JSON codificat. Deci, primim pachetele pentru masa curentă folosind get_post_meta funcţie. Apoi vom obține toate pachetele de prețuri publicate utilizând o interogare particularizată, după cum se arată mai jos.
$ query = = noua 'WP_Query' (array ('post_type' => 'pricing_packages', 'post_status' => 'publish', 'posts_per_page' => ')); Putem selecta pachetele folosind pricing_packages post tip personalizat. Puteți alege alte condiții pentru interogare în funcție de preferințele dvs..
WP_Query va returna numărul implicit de înregistrări în rezultat dacă posts_per_page nu este specificat. Puteți obține toate posturile fără nici o limită prin utilizarea -1 pentru posts_per_page condiție. Apoi vom folosi rezultatul generat de WP_Query pentru a afișa toate pachetele de prețuri cu casetele de selectare în fața lor. În timpul looping-ului verificăm dacă pachetul este deja atribuit tabelului și atribuie un check la caseta de validare. Puteți să adăugați sau să eliminați dinamic pachetele selectând / deselectând casetele de selectare și apăsând butonul de actualizare.
Vom valida numele tabelului de prețuri, așa cum am făcut mai devreme cu pachetele de prețuri. Următorul cod jQuery va fi folosit pentru validare:
var wppt_validate_pricing_tables = funcție () var err = 0; $ ( "# Pricing_error") html ( "").; $ ( "# Pricing_error") ascunde ().; dacă ($ ("title") val () == ") $ (" # pricing_error "Introduceți numele tabelului de prețuri.
") ################################################################################################################ < "returnare false"; altceva return true;; Codul de mai sus este inclus în pricing_admin.js fișier în js folderul pluginului.
Avem nevoie de o cheie unică pentru mesele pricng pentru a le include în codul scurt. Prin urmare, vom folosi ID-ul tabelului de prețuri drept cheie. Odată ce tabela este creată, putem afișa ID-ul tabelului de prețuri în vizualizarea de listă utilizând o coloană personalizată. WordPress oferă o tehnică simplă pentru a include coloane personalizate în vizualizarea listei după cum se arată mai jos:
add_filter ('manage_edit-pricing_tables_columns', 'wppt_edit_pricing_tables_columns'); funcția wppt_edit_pricing_tables_columns ($ coloane) $ columns = array ('cb' => '',' ID '=> __ ("ID tabelul de prețuri"), "titlu" => __ ("Nume tabel de prețuri"), "data" => __ ("data")); returnează coloane $; Putem folosi manage_edit- Custom Post Type _columns filtrați pentru a personaliza coloanele afișate în vizualizarea listei. După cum puteți vedea, am atribuit o coloană personalizată numită ID-ul Tabelului de prețuri pentru a utiliza ID-ul postului.
add_action ('manage_pricing_tables_posts_custom_column', 'wppt_manage_pricing_tables_columns', 10, 2); funcția wppt_manage_pricing_tables_columns (coloană $, $ post_id) global $ post; comutator (coloana $) caz 'ID': $ pricing_id = $ post_id; dacă (gol ($ pricing_id)) echo __ ("Necunoscut"); altceva printf ($ pricing_id); pauză; prestabilit: pauză; add_filter ('manage_edit-pricing_tables_sortable_columns', 'wppt_pricing_tables_sortable_columns'); funcția wppt_pricing_tables_sortable_columns ($ coloane) coloane $ ['ID'] = 'ID'; returnează coloane $; Apoi putem atribui valorile coloanei utilizând o instrucțiune de comutare pe manage_ Custom Post Type _posts_custom_column acțiune. În cele din urmă, folosim manage_edit- Custom Post Type _sortable_columns filtrați pentru a face coloana să se încadreze. După crearea unei tabele de prețuri, veți putea vedea numărul din vizualizarea listei.
Am folosit un fișier JavaScript personalizat pentru validarea funcțiilor din zona de administrare. Deci, mai întâi vom examina modul în care fișierele de script sunt incluse în zona de administrare WordPress.
funcția wppt_pricing_admin_scripts () wp_register_script ('pricing-admin', plugins_url ('js / pricing_admin.js', __FILE__), array ('jquery')); wp_enqueue_script ("tarifare-admin"); add_action ('admin_enqueue_scripts', 'wppt_pricing_admin_scripts'); admin_enqueue_scripts este un cârlig care poate fi folosit pentru a include toate fișierele CSS și Script din zona de administrare a WordPress. Mai intai trebuie sa inregistram scriptul folosind wp_register_script funcția cu o cheie unică și calea spre fișier. Apoi putem folosi wp_enqueue_script pentru a include fișierele.
Acum, să aruncăm o privire asupra includerii stilurilor și scenariilor din capătul frontal folosind codul de mai jos:
funcția wppt_pricing_front_scripts () wp_register_style ('base-pricing', plugins_url ('css / base.css', __FILE__)); wp_enqueue_style ("baza de prețuri"); wp_register_style ("preț-layout", plugins_url ('css / layout.css', __FILE__)); wp_enqueue_style ("preț-layout"); wp_register_style ("preț-fluid-schelet", plugins_url ("css / fluid_skeleton.css", __FILE__)); wp_enqueue_style ("preț-fluid-schelet"); wp_register_style ("tabelul de prețuri", plugins_url ('css / pricing_table.css', __FILE__)); wp_enqueue_style ("tabelul de prețuri"); add_action ('wp_enqueue_scripts', 'wppt_pricing_front_scripts'); La începutul tutorialului am menționat că vom crea un tabel de prețuri receptiv. Este mai ușor să lucrați cu un cadru CSS existent pentru a oferi funcționalitate receptivă. Așa că am ales Skeleton ca cadru CSS. Primele trei fișiere CSS vor fi fișiere CSS ale cadrului scheletului, apoi am inclus un stil personalizat pentru tabelul nostru de prețuri în pricing_table.css fişier.
Acum, toate datele necesare pentru tabelul de prețuri sunt gata și putem trece la crearea tipului de tabel de prețuri.
Proiectarea unui tabel de prețuri receptiv este o sarcină consumatoare de timp și necesită cunoștințe avansate în HTML și CSS. Prin urmare, explicarea designului este în afara scopului acestui tutorial. Voi folosi un tabel de prețuri receptiv pe care l-am creat pentru Webdesigntuts +. Dacă sunteți interesat puteți afla despre partea de proiectare prin citirea tabelelor de prețuri responsabile folosind :ţintă pentru tutorialul Small Screens. Următorul cod conține codul HTML pentru un tabel de prețuri cu două pachete:
- De bază
- $ 9.99
- Vedere
- Cumpară acum
- Standard
- $ 19.99
- Vedere
- Cumpară acum
Acum trebuie să alegem o metodă de includere a codului mesei de tarifare în WordPress. Putem să includem acest cod într-un cod scurt sau să creăm un anumit șablon de pagină. Voi folosi un scurtcod. Puteți încerca și metoda șablonului de pagină.
Codurile scurte reprezintă o modalitate ușoară de a adăuga funcții dinamice postărilor și paginilor dvs. Voi folosi un shortcode numit wppt_show_pricing pentru introducerea unui tabel de prețuri. Trebuie să transmitem ID-ul tabelului de prețuri ca parametru de cod scurt utilizând pricing_id cheie. Să implementăm codul scurt.
add_shortcode ("wppt_show_pricing", "wppt_generate_pricing_table"); funcția wppt_generate_pricing_table ($ atts) global $ post; extrageți (shortcode_atts (array ('pricing_id' => '0',), $ atts)); // Codul rămas Am definit un shortcode numit wppt_show_pricing folosind WordPress " add_shortcode funcţie. Atributele de cod scurt vor fi transmise automat funcției.În primul rând extragem matricea de coduri scurte și ID-ul tabelului de prețuri va fi atribuit pricing_id variabil. Restul codului va fi explicat în secțiunile următoare.
postare globală $; $ table_packages = get_post_meta ($ pricing_id, "_table_packages", true); $ table_packages = ($ table_packages == ")? array (): json_decode ($ table_packages);
Apoi primim ID-ul tabelului de preț atribuit codului scurt și tuturor pachetelor incluse în tabelul de prețuri de la post_meta masa.
$ html = '„; $ pricing_index = 0; foreach ($ table_packages sub formă de $ table_package) $ pricing_index ++; $ plan_title = get_the_title ($ table_package); $ package_price = get_post_meta ($ table_package, "_package_price", true); $ package_buy_link = get_post_meta ($ table_package, "_package_buy_link", true); $ package_features = get_post_meta ($ table_package, "_package_features", true); $ package_features = ($ package_features == ")? array (): json_decode ($ package_features); $ html. = '„; echo $ html;„; $ html. = '„; $ html. = '„; $ html. = '
- ". $ plan_title. '
- $ '. $ package_price. '
„; $ html. = '
- Vedere
„; foreach ($ package_features ca $ pachet_feature) $ html. = '- „; $ html. = '
". $ package_feature. '- Cumpară acum
În timp ce traversăm prin fiecare pachet generat în codul anterior, obținem caracteristicile și detaliile pachetelor utilizând get_post_meta funcţie. Apoi vom include codul HTML cu date dinamice pentru a afișa tabelul de stabilire a prețurilor. În cele din urmă vom returna codul HTML generat care va fi afișat în paginile care conțin codul scurt.
Acum am finalizat dezvoltarea pluginului nostru de tabel de prețuri pentru WordPress. Puteți trece prin codul sursă și puteți adăuga propriile funcții personalizate în funcție de preferințele dvs..
Oricine are cunoștințele de bază despre lucrul cu WordPress va fi capabil să creeze tabele de tarifare utilizând acest plugin. Voi oferi pașii pentru a face mai ușor pentru utilizatorii fără o experiență de mult în WordPress.
[wppt_show_pricing pricing_id = "ID" /] în interiorul editorului de pagini. Înlocuiți ID-ul cu ID-ul real al tabelului de prețuri.:ţintă pentru ecrane miciSper că ați învățat cum să utilizați Tipuri personalizate de posturi și Meta Boxe pentru a crea un tabel de prețuri. Spuneți-ne dacă aveți propriul dvs. mod de a crea un astfel de plugin prin comentariile de mai jos.
