Share
Le tabelle dei prezzi sono una componente chiave della tua attività che promuove i tuoi prodotti e aiuta gli utenti a scegliere tra diversi servizi che hai. I più moderni temi commerciali di WordPress forniscono tabelle dei prezzi predefinite. Ci sono anche molti plugin gratuiti e commerciali per i prezzi delle tabelle per WordPress. Questo tutorial ha lo scopo di fornire conoscenze agli sviluppatori di WordPress sulla creazione di un plug-in da zero che consente la personalizzazione in diversi progetti.
Ogni web design sta cercando di realizzare funzionalità reattive che consentano un migliore aspetto su qualsiasi tipo di dispositivo. Le tabelle dei prezzi create con questo plugin funzioneranno su tutti i tipi di dispositivi come cellulari e tablet. Quindi iniziamo.
Puoi dare un'occhiata al design finale della tabella dei prezzi nella schermata seguente.
La pianificazione è la parte difficile in qualsiasi progetto. È meglio pianificare come svilupperemo la tabella dei prezzi e quali tecniche useremo prima di fare qualsiasi codice. Fondamentalmente la tabella dei prezzi avrà i seguenti componenti:
Accentsconagua
pricing_tables.pricing_packages sarà usato.Stiamo per utilizzare un tipo di messaggio personalizzato chiamato pricing_packages. Puoi semplicemente generare codice per creare un tipo di post personalizzato utilizzando un generatore di codice online. Il codice seguente crea il tipo di post personalizzato per i pacchetti utilizzando le configurazioni predefinite:
add_action ('init', 'wppt_register_cpt_pricing_packages'); function wppt_register_cpt_pricing_packages () $ labels = array ('name' => _x ('Pricing Packages', 'pricing_packages'), 'singular_name' => _x ('Pricing Package', 'pricing_packages'), 'add_new' => _x ('Aggiungi nuovo', 'pricing_packages'), 'add_new_item' => _x ('Aggiungi nuovo pacchetto prezzi', 'pricing_packages'), 'edit_item' => _x ('Modifica pacchetto prezzi', 'pricing_packages'), 'new_item '=> _x (' Nuovo pacchetto prezzi ',' pricing_packages '),' view_item '=> _x (' Visualizza pacchetto prezzi ',' pricing_packages '),' search_items '=> _x (' Pacchetti prezzi di ricerca ',' pacchetti pricing_ ' ), 'not_found' => _x ('Nessun pacchetto prezzi trovato', 'pricing_packages'), 'not_found_in_trash' => _x ('Nessun pacchetto prezzi trovato nel cestino', 'pricing_packages'), 'parent_item_colon' => _x (' Pacchetto prezzi padre: ',' pricing_packages '),' menu_name '=> _x (' Pacchetti di prezzi ',' pacchetti_con prezzi '),); $ args = array ('labels' => $ labels, 'hierarchical' => false, 'description' => 'Pricing Packages', 'supports' => array ('title', 'editor'), 'public' = > true, 'show_ui' => true, 'show_in_menu' => true, 'show_in_nav_menus' => true, 'public_queryable' => true, 'exclude_from_search' => false, 'has_archive' => true, 'query_var' => true, 'can_export' => true, 'rewrite' => true, 'capability_type' => 'post'); register_post_type ('pricing_packages', $ args); Nome del pacchetto, prezzo e link per l'acquisto sono i componenti più importanti in un pacchetto di prezzi. Quindi useremo una meta-box per aggiungere questi campi. Inoltre abbiamo bisogno di più funzionalità per un pacchetto. Utilizzeremo un'altra meta box per aggiungere e rimuovere funzionalità in modo dinamico come mostrato nel codice qui sotto.
add_action ('add_meta_boxes', 'wppt_pricing_packages_meta_boxes'); function wppt_pricing_packages_meta_boxes () add_meta_box ("pricing-package-info", "Informazioni sui prezzi dei pacchetti", "wppt_generate_pricing_package_info", "pricing_packages", "normal", "high"); add_meta_box ("pricing-features-info", "Caratteristiche dei prezzi", "wppt_generate_pricing_features_info", "pricing_packages", "normal", "high"); Le caselle Meta per i campi del pacchetto vengono aggiunte utilizzando il add_meta_boxes azione. Puoi usare una meta box invece di due. Ho usato due meta box per chiarire le cose.
function 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", vero); $ html = ''; $ html. = '
| '; $ html. = ' | '; $ html. = ' '; $ html. = ' | '; $ html. = '
|---|---|
| '; $ html. = ' | '; $ html. = ' '; $ html. = ' | '; $ html. = '
La prima meta box conterrà i campi per il prezzo e il link di acquisto. Questi 2 campi verranno salvati in post_meta tabella utilizzando _Prezzo del pacchetto e _package_buy_link tasti rispettivamente.
function 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. = '
|
Il codice sopra riportato contiene l'HTML per i campi delle caratteristiche del pacchetto. Un pacchetto conterrà molte funzionalità, quindi le funzionalità verranno aggiunte dinamicamente a un elenco non ordinato con campi nascosti utilizzando jQuery. Le caratteristiche saranno memorizzate nel post_meta tavolo con _package_features chiave. Una stringa formattata JSON verrà utilizzata per mantenere più funzionalità.
Il prezzo del pacchetto e il link di acquisto sono obbligatori per ogni pacchetto. Quindi abbiamo bisogno di un codice di convalida prima di creare pacchetti. Utilizzeremo il codice jQuery per la convalida come mostrato di seguito.
jQuery (document) .ready (function ($) $ ("# post-body-content"). prepend (''); $ ('# post'). submit (function () if ($ ("# post_type"). val () == 'pricing_packages') return wppt_validate_pricing_packages (); else if ($ ("# post_type") .val () == 'pricing_tables') return wppt_validate_pricing_tables ();); ); Dobbiamo aggiungere un div elemento alla schermata di creazione del post per visualizzare gli errori. La schermata di creazione post contiene un modulo con il post ID. Non cambia neanche per i tipi di post personalizzati. Quindi ho usato l'evento di invio di #inviare modulo per la convalida.
Poiché utilizziamo diversi tipi di post personalizzati, è necessario filtrare il tipo di post utilizzando il codice riportato di seguito. Il modulo di post-creazione contiene un campo nascosto con l'ID post_type.
if ($ ("# post_type"). val () == 'pricing_packages') return wppt_validate_pricing_packages (); else if ($ ("# post_type"). val () == 'pricing_tables') return wppt_validate_pricing_tables (); Una volta completato il filtraggio, chiamiamo una funzione di convalida specifica in base al tipo di post come mostrato di seguito.
var wppt_validate_pricing_packages = function () var err = 0; $ ( "# Pricing_error") html ( ""); $ ( "# Pricing_error") nascondere ().; if ($ ("# title"). val () == ") $ (" # pricing_error "). append ("Si prega di inserire il nome del pacchetto.
"); err ++; if ($ (" # package_price "). val () ==") $ ("# pricing_error"). append ("Si prega di inserire il prezzo del pacchetto.
"); err ++; if ($ (" # package_buy_link "). val () ==") $ ("# pricing_error"). append ("Inserisci il link di acquisto del pacchetto.
"); err ++; if (err> 0) $ (" # publish "). removeClass (" button-primary-disabled "); $ (" # ajax-loading "). hide (); $ (" # pricing_error "). show (); return false; else return true;; Per prima cosa cancelliamo eventuali errori esistenti precedentemente impostati nel file pricing_error elemento. Quindi possiamo convalidare ogni campo e aggiungere il messaggio di errore al pricing_error contenitore. Finalmente mostriamo gli errori usando il $ ( "# Pricing_error"). Show () funzione.
$ ( "# Pubblicare"). RemoveClass ( "button-primario-disabled"). Inoltre possiamo fermare l'immagine di caricamento Ajax utilizzando $ ( "# Ajax-loading"). Hide (). Ora abbiamo completato tutte le creazioni sul campo e le convalide per i pacchetti. Passiamo al salvataggio delle informazioni nel database. Useremo il save_post azione che viene eseguita subito dopo il salvataggio del post nel database.
add_action ('save_post', 'wppt_save_pricing_packages'); function wppt_save_pricing_packages ($ post_id) if (! wp_verify_nonce ($ _POST ['pricing_package_box_nonce'], basename (__FILE__))) return $ post_id; if (definito ('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'])? $ _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 ()); $ package_features = json_encode ($ package_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); else return $ post_id; Per prima cosa eseguiamo alcune convalide per verificare se il valore nonce generato nel modulo corrisponde al valore nonce ricevuto in $ _POST. Quindi dobbiamo assicurarci che si tratti di un salvataggio automatico o di un salvataggio manuale. Quindi dobbiamo controllare il tipo di post prima di salvare. Altrimenti questo codice verrà eseguito su ogni tipo di post. Il prezzo del pacchetto e il link di acquisto verranno salvati direttamente nel post_meta tabella utilizzando il update_post_meta funzione. Le funzionalità verranno salvate come una stringa codificata JSON. Ora abbiamo finito con la creazione di pacchetti. Passiamo alla creazione di tabelle dei prezzi.
Le tabelle dei prezzi saranno un altro tipo di post personalizzato sul nostro plug-in. La creazione e il salvataggio personalizzati del tipo di post nel database sono molto simili al codice spiegato in precedenza. Quindi non lo renderò noioso spiegando la stessa cosa. È possibile trovare la creazione di post personalizzati e il salvataggio del codice per le tabelle dei prezzi nei file del plugin.
Le tabelle dei prezzi contengono pacchetti di prezzi. Quindi i meta box usati per le tabelle dei prezzi saranno diversi da quelli usati per i pacchetti di prezzi. Diamo un'occhiata alla creazione del meta-box per le tabelle dei prezzi.
add_action ('add_meta_boxes', 'wppt_pricing_tables_meta_boxes'); function wppt_pricing_tables_meta_boxes () add_meta_box ("pricing-table-info", "Informazioni prezzi tabella", "wppt_generate_pricing_table_info", "pricing_tables", "normal", "high"); function 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 = new WP_Query (array ('post_type' => 'pricing_packages', 'post_status' => 'pubblica', 'posts_per_page' => -1, 'orderby' => 'post_date', 'order' => 'ASC')); $ html = ''; $ html. = '| Stato del pacchetto | '; $ html. = 'Nome del pacchetto |
|---|---|
| '; $ html. = ' | '. $ query-> post-> post_title. ' |
Possiamo aggiungere una meta box personalizzata per le tabelle dei prezzi utilizzando un codice simile a quello utilizzato nella sezione precedente. I pacchetti di una tabella specifica verranno archiviati nel post_meta tabella come una stringa codificata JSON. Quindi otteniamo i pacchetti per la tabella corrente usando il get_post_meta funzione. Quindi otteniamo tutti i pacchetti di prezzi pubblicati utilizzando una query personalizzata come mostrato di seguito.
$ query = new WP_Query (array ('post_type' => 'pricing_packages', 'post_status' => 'publish', 'posts_per_page' => -1, 'orderby' => 'post_date', 'order' => 'ASC ')); Possiamo selezionare i pacchetti usando il pricing_packages tipo di messaggio personalizzato. È possibile scegliere altre condizioni per la query in base alle proprie preferenze.
WP_Query restituirà il numero predefinito di record nel risultato se posts_per_page non è specificato. Puoi ottenere tutti i post senza limiti usando -1 per il posts_per_page condizione. Quindi usiamo il risultato generato da WP_Query per visualizzare tutti i pacchetti di prezzi con caselle di controllo di fronte a loro. Durante il ciclo controlliamo se il pacchetto è già assegnato alla tabella e assegna un segno di spunta alla casella di controllo. Puoi aggiungere o rimuovere pacchetti in modo dinamico selezionando / deselezionando le caselle di controllo e premendo il pulsante di aggiornamento.
Stiamo andando a convalidare il nome della tabella dei prezzi come abbiamo fatto in precedenza con i pacchetti di prezzi. Il seguente codice jQuery verrà utilizzato per la convalida:
var wppt_validate_pricing_tables = function () var err = 0; $ ( "# Pricing_error") html ( ""); $ ( "# Pricing_error") nascondere ().; if ($ ("# title"). val () == ") $ (" # pricing_error "). append ("Inserisci il nome della tabella dei prezzi.
"); err ++; if (err> 0) $ (" # publish "). removeClass (" button-primary-disabled "); $ (" # ajax-loading "). hide (); $ (" # pricing_error "). show (); return false; else return true;; Il codice sopra è incluso nel pricing_admin.js file nel js cartella del plugin.
Abbiamo bisogno di una chiave univoca per le tabelle di pricng per includerle nello shortcode. Quindi utilizzeremo l'ID della tabella dei prezzi come chiave. Una volta creata la tabella, è possibile mostrare l'ID della tabella dei prezzi nella visualizzazione elenco utilizzando una colonna personalizzata. WordPress fornisce una semplice tecnica per includere colonne personalizzate nella visualizzazione elenco come mostrato di seguito:
add_filter ('manage_edit-pricing_tables_columns', 'wppt_edit_pricing_tables_columns'); function wppt_edit_pricing_tables_columns ($ columns) $ columns = array ('cb' => '',' ID '=> __ (' ID tabella prezzi '),' titolo '=> __ (' Nome tabella prezzi '),' data '=> __ (' Data ')); restituire $ colonne; Possiamo usare il manage_edit- Custom Post Type _columns filtro per personalizzare le colonne visualizzate nella visualizzazione elenco. Come puoi vedere, ho assegnato una colonna personalizzata denominata ID tabella di determinazione dei prezzi per utilizzare l'ID post.
add_action ('manage_pricing_tables_posts_custom_column', 'wppt_manage_pricing_tables_columns', 10, 2); funzione wppt_manage_pricing_tables_columns ($ column, $ post_id) global $ post; switch ($ column) case 'ID': $ pricing_id = $ post_id; if (vuoto ($ pricing_id)) echo __ ('Unknown'); else printf ($ pricing_id); rompere; default: break; add_filter ('manage_edit-pricing_tables_sortable_columns', 'wppt_pricing_tables_sortable_columns'); function wppt_pricing_tables_sortable_columns ($ columns) $ columns ['ID'] = 'ID'; restituire $ colonne; Quindi possiamo assegnare i valori alla colonna usando un'istruzione switch sul manage_ Custom Post Type _posts_custom_column azione. Finalmente usiamo il manage_edit- Custom Post Type _sortable_columns filtro per rendere la colonna ordinabile. Dopo aver creato una tabella dei prezzi sarai in grado di vedere il numero nella visualizzazione elenco.
Abbiamo utilizzato un file JavaScript personalizzato per la convalida delle funzioni dell'area di amministrazione. Quindi, prima di tutto, daremo un'occhiata a come i file di script sono inclusi nell'area di amministrazione di WordPress.
function wppt_pricing_admin_scripts () wp_register_script ('pricing-admin', plugins_url ('js / pricing_admin.js', __FILE__), array ('jquery')); wp_enqueue_script ('pricing-admin'); add_action ('admin_enqueue_scripts', 'wppt_pricing_admin_scripts'); admin_enqueue_scripts è un hook che può essere utilizzato per includere tutti i file CSS e Script nell'area Admin di WordPress. Per prima cosa dobbiamo registrare lo script usando il wp_register_script funziona con una chiave e un percorso univoci per il file. Quindi possiamo usare il wp_enqueue_script funzione per includere i file.
Ora diamo un'occhiata all'inclusione di stili e script front end usando il codice qui sotto:
function wppt_pricing_front_scripts () wp_register_style ('pricing-base', plugins_url ('css / base.css', __FILE__)); wp_enqueue_style ('pricing-base'); wp_register_style ('pricing-layout', plugins_url ('css / layout.css', __FILE__)); wp_enqueue_style ('pricing-layout'); wp_register_style ('pricing-fluid-skeleton', plugins_url ('css / fluid_skeleton.css', __FILE__)); wp_enqueue_style ('pricing-fluid-skeleton'); wp_register_style ('pricing-table', plugins_url ('css / pricing_table.css', __FILE__)); wp_enqueue_style ('pricing-table'); add_action ('wp_enqueue_scripts', 'wppt_pricing_front_scripts'); All'inizio del tutorial ho detto che creeremo una tabella dei prezzi reattiva. È più semplice lavorare con un framework CSS esistente per fornire funzionalità reattive. Quindi ho scelto Skeleton come framework CSS. I primi tre file CSS saranno i file CSS del framework Skeleton, quindi abbiamo incluso uno stile personalizzato per la nostra tabella dei prezzi nel pricing_table.css file.
Ora tutti i dati necessari per la tabella dei prezzi sono pronti e possiamo passare alla creazione della progettazione della tabella dei prezzi.
Progettare una tabella dei prezzi reattiva è un'attività che richiede tempo e richiede conoscenze avanzate in HTML e CSS. Quindi spiegare il design è fuori dallo scopo di questo tutorial. Userò una tabella dei prezzi reattiva che ho creato per Webdesigntuts +. Se sei interessato, puoi conoscere la parte di progettazione leggendo tabelle di prezzi reattivi :bersaglio tutorial per i piccoli schermi. Il seguente codice contiene il codice HTML per una tabella dei prezzi con due pacchetti:
- Di base
- $ 9.99
- vista
- Acquista ora
- Standard
- $ 19.99
- vista
- Acquista ora
Ora dobbiamo scegliere un metodo per includere il codice della tabella dei prezzi in WordPress. Possiamo includere questo codice in uno shortcode o creare un modello di pagina specifico. Userò uno shortcode. Puoi anche provare il metodo del modello di pagina.
Gli shortcode sono un modo semplice per aggiungere funzionalità dinamiche ai tuoi post e alle tue pagine. Userò uno shortcode chiamato wppt_show_pricing per l'inserimento di una tabella dei prezzi. Dobbiamo passare l'ID della tabella dei prezzi come parametro shortcode usando il pricing_id chiave. Implementiamo lo shortcode.
add_shortcode ("wppt_show_pricing", "wppt_generate_pricing_table"); function wppt_generate_pricing_table ($ atts) global $ post; extract (shortcode_atts (array ('pricing_id' => '0',), $ atts)); // codice rimanente Ho definito un shortcode chiamato wppt_show_pricing usando WordPress ' add_shortcode funzione. Gli attributi shortcode verranno passati automaticamente alla funzione. Prima estraiamo la matrice shortcode e l'ID della tabella dei prezzi verrà assegnato al pricing_id variabile. Il resto del codice verrà spiegato nelle seguenti sezioni.
$ globale post; $ table_packages = get_post_meta ($ pricing_id, "_table_packages", true); $ table_packages = ($ table_packages == ")? array (): json_decode ($ table_packages);
Quindi otteniamo l'ID della tabella prezzi assegnato allo shortcode e tutti i pacchetti inclusi nella tabella dei prezzi da post_meta tavolo.
$ html = ''; $ pricing_index = 0; foreach ($ table_packages as $ 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. '
- $ '. $ prezzo_pacchetto. '
'; $ html. = '
- vista
'; foreach ($ package_features come $ package_feature) $ html. = '- '; $ html. = '
'. $ pacchetto_funzione. '- Acquista ora
Mentre attraversiamo ogni pacchetto generato nel codice precedente, otteniamo le caratteristiche e i dettagli dei pacchetti usando il get_post_meta funzione. Quindi includiamo il codice HTML con dati dinamici per visualizzare la tabella dei prezzi. Infine, restituiamo il codice HTML generato per essere visualizzato all'interno delle pagine che contengono lo shortcode.
Ora abbiamo completato lo sviluppo del nostro plug-in della tabella dei prezzi per WordPress. Puoi consultare il codice sorgente e aggiungere le tue funzionalità personalizzate in base alle tue preferenze.
Chiunque abbia le conoscenze di base su come lavorare con WordPress sarà in grado di creare tabelle dei prezzi usando questo plugin. Fornirò i passaggi per rendere più semplice per gli utenti senza molta esperienza in WordPress.
[wppt_show_pricing pricing_id = "ID" /] all'interno dell'editor della pagina. Sostituisci l'ID con l'ID della tabella dei prezzi effettiva.:bersaglio per piccoli schermiSpero che tu abbia imparato come utilizzare i Tipi di post personalizzati e le Meta Box per creare una tabella dei prezzi. Facci sapere se hai il tuo modo di creare tale plugin attraverso i commenti qui sotto.
