Share
Prijzenstabellen zijn een belangrijk onderdeel van uw bedrijf dat uw producten promoot en helpt gebruikers bij het kiezen tussen verschillende diensten die u heeft. De meeste moderne commerciële WordPress-thema's bieden ingebouwde Pricing Tables. Er zijn ook tal van gratis en commerciële prijzentabel-plug-ins voor WordPress. Deze zelfstudie is bedoeld om WordPress-ontwikkelaars kennis bij te brengen over het maken van een nieuwe plug-in die aanpassingen in verschillende projecten mogelijk maakt.
Elk webontwerp probeert responsieve functies te realiseren die een beter uiterlijk en gevoel op elk type apparaat mogelijk maken. De prijstabellen die met deze plug-in zijn gemaakt, werken ook op allerlei apparaten, zoals mobiele telefoons en tablets. Dus laten we beginnen.
U kunt het definitieve ontwerp van de prijstabel op het volgende scherm bekijken.
Planning is het moeilijke deel in elk project. Het is beter om te plannen hoe we de prijstabel gaan ontwikkelen en welke technieken we gaan gebruiken voordat we coderen. In principe heeft de prijzentabel de volgende componenten:
Accentsconagua
pricing_tables.pricing_packages zal gebruikt worden.We gaan een aangepast berichttype gebruiken genaamd pricing_packages. U kunt eenvoudig code genereren voor het maken van een aangepast berichttype met behulp van een online codegenerator. De volgende code maakt het aangepaste berichttype voor pakketten met behulp van de standaardconfiguraties:
add_action ('init', 'wppt_register_cpt_pricing_packages'); function wppt_register_cpt_pricing_packages () $ labels = array ('name' => _x ('Prijzenpakketten', 'pricing_packages'), 'singular_name' => _x ('Prijzenpakket', 'pricing_packages'), 'add_new' => _x ('Nieuw toevoegen', 'pricing_packages'), 'add_new_item' => _x ('Nieuw tariefpakket toevoegen', 'pricing_packages'), 'edit_item' => _x ('Prijspakket bewerken', 'pricing_packages'), 'new_item '=> _x (' Nieuw prijspakket ',' pricing_packages '),' view_item '=> _x (' View Pricing Package ',' pricing_packages '),' search_items '=> _x (' Zoekprijspakketten ',' pricing_packages ' ), 'not_found' => _x ('Geen prijspakketten gevonden', 'pricing_packages'), 'not_found_in_trash' => _x ('Geen prijspakketten gevonden in Prullenbak', 'pricing_packages'), 'parent_item_colon' => _x (' Parent Pricing Package: ',' pricing_packages '),' menu_name '=> _x (' Prijzenpakketten ',' pricing_packages '),); $ args = array ('labels' => $ labels, 'hierarchical' => false, 'description' => 'Prijzenpakketten', 'ondersteunt' => array ('title', 'editor'), 'public' = > true, 'show_ui' => true, 'show_in_menu' => true, 'show_in_nav_menus' => true, 'publicly_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); Pakketnaam, prijs en link om te kopen zijn de belangrijkste componenten in een prijspakket. Dus we zullen een metabox gebruiken om deze velden toe te voegen. We hebben ook meerdere functies voor een pakket nodig. We gaan een andere metabox gebruiken om functies dynamisch toe te voegen en te verwijderen, zoals weergegeven in de onderstaande code.
add_action ('add_meta_boxes', 'wppt_pricing_packages_meta_boxes'); function wppt_pricing_packages_meta_boxes () add_meta_box ("pricing-package-info", "Pricing Package Info", 'wppt_generate_pricing_package_info', "pricing_packages", "normal", "high"); add_meta_box ("pricing-features-info", "Pricing Features", 'wppt_generate_pricing_features_info', "pricing_packages", "normal", "high"); Metaboxen voor pakketvelden worden toegevoegd met behulp van de add_meta_boxes actie. U kunt één metabox gebruiken in plaats van twee. Ik heb twee metaboxen gebruikt om dingen duidelijk te maken.
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", true); $ html = ''; $ html. = '
| '; $ html. = ' | '; $ html. = ' '; $ html. = ' | '; $ html. = '
|---|---|
| '; $ html. = ' | '; $ html. = ' '; $ html. = ' | '; $ html. = '
Eerste metabox bevat velden voor prijs en aankooplink. Deze 2 velden worden opgeslagen post_meta gebruik van de tafel _pakket prijs en _package_buy_link toetsen respectievelijk.
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. = '
|
De bovenstaande code bevat de HTML voor de velden met pakketfuncties. Eén pakket bevat veel functies, daarom worden de functies dynamisch toegevoegd aan een ongeordende lijst met verborgen velden met behulp van jQuery. Functies worden opgeslagen in de post_meta tafel met _package_features sleutel. Een JSON-opgemaakte reeks wordt gebruikt om meerdere functies te behouden.
Pakketprijs en aankooplink zijn verplicht voor elk pakket. We hebben dus een validatiecode nodig voor het maken van pakketten. We zullen de jQuery-code gebruiken voor validatie, zoals hieronder getoond.
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 ();); ); We moeten een toevoegen div element in het venster voor het maken van berichten om fouten weer te geven. Het scherm voor het maken van berichten bevat een formulier met de ID-post. Het verandert ook niet voor de aangepaste berichttypen. Dus ik heb de gebeurtenis submit van de #post formulier voor validatie.
Aangezien we verschillende aangepaste berichttypen gebruiken, is het noodzakelijk om het berichttype te filteren met behulp van de onderstaande code. Post creatie formulier bevat een verborgen veld met de 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 (); Nadat het filteren is voltooid, roepen we een specifieke validatiefunctie aan volgens het berichttype zoals hieronder weergegeven.
var wppt_validate_pricing_packages = function () var err = 0; $ ( "# Pricing_error") html ( ""); $ ( "# Pricing_error") te verbergen ().; if ($ ("# title"). val () == ") $ (" # pricing_error "). append ("Voer de pakketnaam in.
"); err ++; if ($ (" # package_price "). val () ==") $ ("# pricing_error"). append ("Voer de pakketprijs in.
"); err ++; if ($ (" # package_buy_link "). val () ==") $ ("# pricing_error"). append ("Voer Pakketkoppelingslink in.
"); err ++; if (err> 0) $ (" # publish "). removeClass (" button-primary-disabled "); $ (" # ajax-loading "). hide (); $ (" # pricing_error "). show (); return false; else return true;; Eerst wissen we bestaande fouten die eerder in de pricing_error element. Dan kunnen we elk veld valideren en het foutbericht toevoegen aan de pricing_error houder. Ten slotte geven we de fouten weer met behulp van de $ ( "# Pricing_error"). Concert () functie.
$ ( "# Publiceren"). RemoveClass ( "button-primaire-disabled"). Ook kunnen we het laden van de ajax stoppen met gebruik van $ ( "# Ajax-loading"). Verbergen (). Nu hebben we alle veldcreaties en validaties voor pakketten voltooid. Laten we verder gaan met het opslaan van de informatie in de database. We zullen de gebruiken save_post actie die wordt uitgevoerd net nadat het bericht in de database is opgeslagen.
add_action ('save_post', 'wppt_save_pricing_packages'); functie wppt_save_pricing_packages ($ post_id) if (! wp_verify_nonce ($ _POST ['pricing_package_box_nonce'], basename (__FILE__))) return $ post_id; if (defined ('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; Eerst voeren we enkele validaties uit om te controleren of de nonce-waarde gegenereerd in het formulier overeenkomt met de nonce-waarde ontvangen in $ _POST. Vervolgens moeten we controleren of het een automatische opslag of handmatige opslag is. Vervolgens moeten we het berichttype controleren voordat het wordt opgeslagen. Anders wordt deze code op elk type bericht uitgevoerd. Pakketprijs en aankooplink worden direct opgeslagen in de post_meta tabel met behulp van de update_post_meta functie. Functies worden opgeslagen als een JSON-gecodeerde reeks. Nu zijn we klaar met het maken van pakketten. Laten we verder gaan met het maken van prijstabellen.
Prijzenstabellen worden een ander aangepast berichttype op onze plug-in. Aangepast berichttype maken en opslaan in de database lijkt veel op de eerder toegelichte code. Dus ik zal het niet saai maken door hetzelfde uit te leggen. U vindt aangepaste berichtcreatie en bewaar code voor prijzentabellen in de plug-inbestanden.
Prijzen Tabellen bevatten prijsformules. Daarom zullen de metabakken die voor prijstabellen worden gebruikt, verschillen van een die we hebben gebruikt voor prijspakketten. Laten we eens kijken naar het maken van de metabox voor prijstabellen.
add_action ('add_meta_boxes', 'wppt_pricing_tables_meta_boxes'); functie wppt_pricing_tables_meta_boxes () add_meta_box ("pricing-table-info", "Pricing Table Info", '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' => 'publiceren', 'posts_per_page' => -1, 'orderby' => 'post_date', 'order' => 'ASC')); $ html = ''; $ html. = '| Pakketstatus | '; $ html. = 'Verpakkingsnaam |
|---|---|
| '; $ html. = ' | '. $ query-> post-> post_title. ' |
We kunnen een aangepaste metabox toevoegen voor prijstabellen met dezelfde code als in de vorige sectie. Pakketten van een specifieke tabel worden opgeslagen in de post_meta tabel als een JSON-gecodeerde string. Dus we krijgen de pakketten voor de huidige tabel met behulp van de get_post_meta functie. Vervolgens krijgen we alle gepubliceerde prijspakketten met een aangepaste zoekopdracht, zoals hieronder wordt weergegeven.
$ query = new WP_Query (array ('post_type' => 'pricing_packages', 'post_status' => 'publish', 'posts_per_page' => -1, 'orderby' => 'post_date', 'order' => 'ASC ')); We kunnen de pakketten selecteren met behulp van de pricing_packages aangepast berichttype. U kunt andere voorwaarden voor de zoekopdracht kiezen op basis van uw voorkeur.
WP_Query retourneert het standaardaantal records in het resultaat als posts_per_page is niet gespecificeerd. Je kunt alle berichten zonder limiet krijgen door te gebruiken -1 voor de posts_per_page staat. Vervolgens gebruiken we het resultaat gegenereerd uit WP_Query om alle prijsformules weer te geven met selectievakjes ervoor. Tijdens het lussen controleren we of het pakket al aan de tafel is toegewezen en wijst u een vinkje toe aan het selectievakje. U kunt pakketten dynamisch toevoegen of verwijderen door de selectievakjes in of uit te schakelen en op de updateknop te drukken.
We gaan de prijstabelnaam valideren zoals we eerder deden met prijspakketten. De volgende jQuery-code wordt gebruikt voor validatie:
var wppt_validate_pricing_tables = function () var err = 0; $ ( "# Pricing_error") html ( ""); $ ( "# Pricing_error") te verbergen ().; if ($ ("# title"). val () == ") $ (" # pricing_error "). append ("Voer de prijslijstnaam in.
"); err ++; if (err> 0) $ (" # publish "). removeClass (" button-primary-disabled "); $ (" # ajax-loading "). hide (); $ (" # pricing_error "). show (); return false; else return true;; De bovenstaande code is opgenomen in de pricing_admin.js bestand in de js map van de plug-in.
We hebben een unieke sleutel nodig voor prijstabellen om ze op te nemen in de shortcode. Dus we zullen de ID van de prijzentabel als sleutel gebruiken. Nadat de tabel is gemaakt, kunnen we de prijstabel-ID weergeven in de lijstweergave met behulp van een aangepaste kolom. WordPress biedt een eenvoudige techniek om aangepaste kolommen op te nemen in de lijstweergave, zoals hieronder weergegeven:
add_filter ('manage_edit-pricing_tables_columns', 'wppt_edit_pricing_tables_columns'); functie wppt_edit_pricing_tables_columns ($ columns) $ columns = array ('cb' => '',' ID '=> __ (' Pricing Table ID '),' title '=> __ (' Pricing Table Name '),' date '=> __ (' Date ')); return $ kolommen; We kunnen de gebruiken manage_edit- Aangepast berichttype _kolommen filter om de kolommen aan te passen die in de lijstweergave worden weergegeven. Zoals je kunt zien, heb ik een aangepaste kolom met de naam Pricing Table ID toegewezen om de post-ID te gebruiken.
add_action ('manage_pricing_tables_posts_custom_column', 'wppt_manage_pricing_tables_columns', 10, 2); functie wppt_manage_pricing_tables_columns ($ column, $ post_id) global $ post; switch ($ column) case 'ID': $ pricing_id = $ post_id; if (empty ($ pricing_id)) echo __ ('Unknown'); else printf ($ pricing_id); breken; standaard: pauze; add_filter ('manage_edit-pricing_tables_sortable_columns', 'wppt_pricing_tables_sortable_columns'); functie wppt_pricing_tables_sortable_columns ($ columns) $ columns ['ID'] = 'ID'; return $ kolommen; Dan kunnen we de waarden aan de kolom toewijzen met behulp van een switch-statement op de manage_ Aangepast berichttype _posts_custom_column actie. Eindelijk gebruiken we de manage_edit- Aangepast berichttype _Sortable_columns filter om de kolom sorteerbaar te maken. Nadat u een prijstabel hebt gemaakt, kunt u het nummer in de lijstweergave zien.
We gebruikten een aangepast JavaScript-bestand voor het valideren van functies van het beheergebied. Dus eerst gaan we bekijken hoe scriptbestanden worden opgenomen in het WordPress-beheergebied.
functie 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 is een haak die kan worden gebruikt om alle CSS- en Script-bestanden op te nemen in het Admin-gebied van WordPress. Eerst moeten we het script registreren met behulp van de wp_register_script functie met een unieke sleutel en pad naar het bestand. Dan kunnen we de gebruiken wp_enqueue_script functie om de bestanden op te nemen.
Laten we nu eens kijken naar de integratie van frontend-stijlen en -scripts met behulp van de onderstaande code:
functie 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'); In het begin van de tutorial meldde ik dat we een responsieve prijstabel gaan maken. Het is gemakkelijker om met een bestaand CSS-framework te werken om responsieve functionaliteit te bieden. Dus ik heb Skelet gekozen als het CSS-raamwerk. De eerste drie CSS-bestanden zijn de CSS-bestanden van het Skeleton-framework, vervolgens hebben we een aangepaste stijl opgenomen voor onze prijstabel in de pricing_table.css het dossier.
Nu zijn alle gegevens die nodig zijn voor de prijzentabel gereed en kunnen we doorgaan met het maken van het ontwerp van de prijzentabel.
Het ontwerpen van een responsieve prijstabel is een tijdrovende klus en vereist geavanceerde kennis in HTML en CSS. Vandaar dat het uitleggen van het ontwerp buiten de scope van deze tutorial valt. Ik gebruik een responsieve prijzentabel die ik heb gemaakt voor Webdesigntuts +. Als u geïnteresseerd bent, kunt u meer te weten komen over het ontwerpgedeelte door Responsive Pricing Tables Using te lezen :doelwit voor tutorials voor kleine schermen. De volgende code bevat de HTML-code voor een prijstabel met twee pakketten:
- basis-
- $ 9.99
- Uitzicht
- Koop nu
- Standaard
- $ 19.99
- Uitzicht
- Koop nu
Nu moeten we een methode kiezen om de prijzentabelcode in WordPress op te nemen. We kunnen deze code opnemen in een shortcode of een specifieke paginasjabloon maken. Ik ga een shortcode gebruiken. U kunt ook de paginasjabloonmethode proberen.
Shortcodes zijn een eenvoudige manier om dynamische functionaliteit toe te voegen aan uw berichten en pagina's. Ik zal een shortcode gebruiken genaamd wppt_show_pricing voor het invoegen van een prijstabel. We moeten de ID van de prijstabel doorgeven als de shortcode-parameter met behulp van de pricing_id sleutel. Laten we de shortcode implementeren.
add_shortcode ("wppt_show_pricing", "wppt_generate_pricing_table"); functie wppt_generate_pricing_table ($ atts) global $ post; extract (shortcode_atts (array ('pricing_id' => '0',), $ atts)); // Resterende code Ik heb een shortcode gedefinieerd met de naam wppt_show_pricing gebruik van WordPress ' add_shortcode functie. Shortcode-attributen worden automatisch doorgegeven aan de functie. Eerst extraheren we de shortcode-array en de ID van de prijzentabel zal worden toegewezen aan de pricing_id variabel. De rest van de code wordt in de volgende secties uitgelegd.
wereldwijde $ post; $ table_packages = get_post_meta ($ pricing_id, "_table_packages", true); $ table_packages = ($ table_packages == ")? array (): json_decode ($ table_packages);
Vervolgens krijgen we de prijzentabel-ID toegewezen aan de shortcode en alle pakketten die zijn opgenomen in de prijzentabel van de post_meta tafel.
$ html = ''; $ pricing_index = 0; foreach ($ table_packages als $ 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. = '
- Uitzicht
'; foreach ($ package_features als $ package_feature) $ html. = '- '; $ html. = '
'. $ package_feature. '- Koop nu
Tijdens het doorlopen van elk pakket gegenereerd in de vorige code, krijgen we de kenmerken en details van de pakketten met behulp van de get_post_meta functie. Vervolgens nemen we de HTML-code met dynamische gegevens op om de prijstabel weer te geven. Ten slotte retourneren we de gegenereerde HTML-code die moet worden weergegeven op pagina's die de shortcode bevatten.
Nu hebben we de ontwikkeling van onze prijstabel-plug-in voor WordPress voltooid. U kunt de broncode doorlopen en uw eigen aangepaste functionaliteit toevoegen aan uw voorkeuren.
Iedereen met de basiskennis van het werken met WordPress kan prijstabellen maken met behulp van deze plug-in. Ik zal de stappen uitvoeren om het voor gebruikers gemakkelijker te maken zonder veel ervaring in WordPress.
[wppt_show_pricing pricing_id = "ID" /] in de pagina-editor. Vervang de ID door de ID van de werkelijke prijzentabel.:doelwit voor kleine schermenIk hoop dat je hebt geleerd aangepaste berichttypen en metaboxen te gebruiken om een prijstabel te maken. Laat ons weten of je je eigen manier hebt om een dergelijke plug-in te maken via de onderstaande opmerkingen.
