Opprette Responsive Pricing Table Plugin for WordPress

Prisbord er en nøkkelkomponent i virksomheten din som fremmer produktene dine, og hjelper brukerne til å velge mellom ulike tjenester du har. De fleste moderne kommersielle WordPress-temaer gir bygget inn prisbord. Det er også rikelig med gratis og kommersielle pristabellplugger for WordPress. Denne opplæringen er ment å gi kunnskap til WordPress-utviklere på å lage et plugin fra grunnen som muliggjør tilpasning i ulike prosjekter.

Hvert webdesign prøver å oppnå responsive funksjoner som muliggjør bedre utseende og følelser på alle typer enheter. Pristabellene som er opprettet med dette pluginet, vil fungere på alle typer enheter, for eksempel mobiler og nettbrett. Så la oss komme i gang.

Du kan se på den endelige utformingen av prisbordet på følgende skjerm.

Planlegger prisplattformen

Planlegging er den vanskelige delen i et prosjekt. Det er bedre å planlegge hvordan vi skal utvikle prisbordet og hvilke teknikker vi skal bruke før du gjør noen koding. I utgangspunktet vil prisbordet ha følgende komponenter:

Prissettingstabell - er en samling av forskjellige typer pakker tilgjengelig for ditt produkt eller din tjeneste. Siden vi planlegger å opprette flere prisbord, er det bedre å velge en tilpasset posttype som heter pricing_tables.
Prispakke - er en samling av funksjoner i produktet ditt, som varierer på tvers av forskjellige pakker. Siden prisingstabeller kan inneholde flere pakker, kalles en egendefinert innleggstype pricing_packages vil bli brukt.
Pakkefunksjoner - er en samling av unike elementer av produktet eller tjenesten din. Funksjoner vil bli lagt til dynamisk ved hjelp av egendefinerte felt i prosessen med å opprette en prispakke.
Prissetting Borddesign - Vi kan velge enten en sidemal eller kortkode for å vise prisingstabellene. Vi vil bruke en kodenavn i dette pluginet.

Opprette prispakker

Vi skal bruke en egendefinert posttype som heter pricing_packages. Du kan ganske enkelt generere kode for å lage en egendefinert innleggstype ved hjelp av en online kodegenerator. Følgende kode oppretter egendefinert innleggstype for pakker med standardkonfigurasjonene:

 add_action ('init', 'wppt_register_cpt_pricing_packages'); funksjon wppt_register_cpt_pricing_packages () $ labels = array ('name' => _x ('Prissettingspakker', 'pricing_packages'), 'singular_name' => _x ('Prispakke', 'pricing_packages'), 'add_new' => _x ('Legg til nytt', 'pricing_packages'), 'add_new_item' => _x ('Legg til ny prispakke', 'pricing_packages'), 'edit_item' => _x ('Rediger prispakke', 'pricing_packages'), 'new_item '=> _x (' Ny prispakke ',' pricing_packages '),' view_item '=> _x (' Vis prispakke ',' pricing_packages '),' search_items '=> _x ), 'not_found' => _x ('Ingen prispakker funnet', 'pricing_packages'), 'not_found_in_trash' => _x ('Ingen prispakker funnet i søppel', 'pricing_packages'), 'parent_item_colon' => _x Parent Pricing Package: ',' pricing_packages '),' menu_name '=> _x (' Prissettingspakker ',' pricing_packages '),); $ args = array ('labels' => $ etiketter, 'hierarchical' => false, 'description' => 'Prispakker', 'støtter' => array ('title', 'editor'), 'public' > true, 'show_in_menu' => sant, 'show_in_nav_menus' => true, 'publicly_queryable' => sant, 'exclude_from_search' => false, 'has_archive' => true, 'query_var' => true, 'can_export' => true, 'rewrite' => true, 'capability_type' => 'innlegg'); register_post_type ('pricing_packages', $ args);

Bruke egendefinerte felt for pakkeinformasjon

Pakke navn, pris og link til kjøp er de viktigste komponentene i en prispakke. Så vi skal bruke en meta-boks for å legge til disse feltene. Vi krever også flere funksjoner for en pakke. Vi skal bruke en annen meta-boks for å legge til og fjerne funksjoner dynamisk som vist i koden under.

 add_action ('add_meta_boxes', 'wppt_pricing_packages_meta_boxes'); funksjon wppt_pricing_packages_meta_boxes () add_meta_box ("prispakke-info", "Prispakkeinfo", "wppt_generate_pricing_package_info", "pricing_packages", "normal", "high"); add_meta_box ("pricing-features-info", "Prissettingsfunksjoner", "wppt_generate_pricing_features_info", "pricing_packages", "normal", "high");

Metakasser for pakkefelt blir lagt til ved hjelp av add_meta_boxes handling. Du kan bruke en metakasse i stedet for to. Jeg har brukt to meta bokser for å gjøre ting klart.

 funksjon 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. = ''; $ html. = ''; $ html. = 'Pakkepris * '; $ html. = ' '; $ html. = ' 
Kjøp nå Link * '; $ html. = ' '; $ html. = ' 
'; ekko $ html;

Pakkepris *	'; $ html. = ' '; $ html. = '
Kjøp nå Link *	'; $ html. = ' '; $ html. = '

Første meta-boksen inneholder felt for pris og kjøpslink. Disse 2 feltene vil bli lagret i post_meta bord bruker _package_price og _package_buy_link nøkler henholdsvis.

Ved å bruke et understreke-prefiks for egendefinerte felt, forhindrer de at de vises under de egendefinerte feltene i opprettingsskjermbildet.

 funksjon 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. = 'Legg til pakkefunksjoner  $ html. = ' '; $ html. = ' '; $ html. = ' 
'; $ html. = ' '; foreach ($ package_features as $ package_feature) $ html. = ''. $ package_feature. "; $ html. = 'Slett
';  $ html. = '
'; ekko $ html;

Legg til pakkefunksjoner	$ html. = ' '; $ html. = ' '; $ html. = '
'; $ html. = ' '; foreach ($ package_features as $ package_feature) $ html. = ' '. $ package_feature. "; $ html. = 'Slett '; $ html. = '

Koden ovenfor inneholder HTML-feltet for pakkefunksjonene. En pakke inneholder mange funksjoner, derfor vil funksjonene bli lagt dynamisk til en uordnet liste med skjulte felter ved hjelp av jQuery. Funksjoner vil bli lagret i post_meta bord med _package_features nøkkel. En JSON formatert streng vil bli brukt til å beholde flere funksjoner.

Validerende pakkeoppretting

Pakkepris og kjøpslink er obligatorisk for hver pakke. Så vi trenger litt valideringskode før du lager pakker. Vi bruker jQuery-koden til validering som vist nedenfor.

 jQuery (dokument) .ready (funksjon ($) $ ("# post-body-content"). prepend ('
'); $ ('# post'). send (funksjon () hvis ($ ("# post_type") .val () == 'pricing_packages') return wppt_validate_pricing_packages (); annet hvis ($ ("# post_type") .val () == 'pricing_tables') return wppt_validate_pricing_tables ();); );

Vi må legge til en div element til opprettingsskjermbildet for å vise feil. Postopprettingsskjermbildet inneholder et skjema med ID-posten. Det endres ikke for de egendefinerte innleggstyper heller. Så jeg har brukt innleveringshendelsen til #post skjema for validering.

Siden vi bruker forskjellige egendefinerte innleggstyper, er det nødvendig å filtrere posttypen ved hjelp av koden nedenfor. Postopprettingsskjema inneholder et skjult felt med ID post_type.

 hvis ($ ("# post_type") .val () == 'pricing_packages') return wppt_validate_pricing_packages ();  ellers hvis ($ ("# post_type") .val () == 'pricing_tables') return wppt_validate_pricing_tables ();

Når filtreringen er fullført, kaller vi en bestemt valideringsfunksjon i henhold til posttypen som vist nedenfor.

 var wppt_validate_pricing_packages = funksjon () var err = 0; $ ( "# Pricing_error") html ( ""); $ ( "# Pricing_error") skjule (.); hvis ($ ("# title") .val () == ") $ (" # pricing_error ").Vennligst skriv inn pakkenavn.
"); err ++; hvis ($ (" # package_price ") .val () ==") $ ("# pricing_error").Vennligst skriv inn pakkepris.
"); err ++; hvis ($ (" # package_buy_link ") .val () ==") $ ("# pricing_error").Vennligst skriv inn pakke Kjøp Link.
"); err ++; hvis (err> 0) $ (" # publiser "). removeClass (" knapp-primær-deaktivert "); $ (" # ajax-loading " pricing_error "). show (); return false; else return true;;

Først fjerner vi eventuelle eksisterende feil som tidligere er satt inn i pricing_error element. Deretter kan vi validere hvert felt og legge til feilmeldingen til pricing_error container. Endelig viser vi feilene ved hjelp av $ ( "# Pricing_error"). Vis () funksjon.

Når du trykker på publiseringsknappen, vil WordPress forsøke å lagre innlegget. Derfor vil det laste sine standard stiler og funksjonalitet. Siden vi bruker jQuery-validering, må noen triks brukes. Vi kan forhindre at Publiser-knappen blir deaktivert ved å bruke $ ( "# Publisere"). RemoveClass ( "button-primær-funksjonshemmede"). Vi kan også stoppe ajax-lastebildet ved å bruke $ ( "# Ajax-loading"). Skjule ().

Lagre pakkeinformasjon

Nå har vi fullført alle feltskaper og valideringer for pakker. La oss fortsette å lagre informasjonen i databasen. Vi skal bruke lagre post handling som utføres like etter innlegget blir lagret i databasen.

 add_action ('save_post', 'wppt_save_pricing_packages'); funksjon wppt_save_pricing_packages ($ post_id) hvis (! wp_verify_nonce ($ _POST ['pricing_package_box_nonce'], basenavn (__FILE__))) return $ post_id;  hvis (definert ('DOING_AUTOSAVE') && DOING_AUTOSAVE) return $ post_id;  hvis ('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);  ellers return $ post_id;

Først gjør vi noen valideringer for å sjekke om ikke-verdiverdien som genereres i skjemaet, samsvarer med den ikke-verdien som mottas i $ _POST. Deretter må vi kontrollere om det er en automatisk lagring eller manuell lagring. Deretter må vi sjekke posttypen før du lagrer. Ellers vil denne koden bli utført på hver type post. Pakkepris og kjøpslink vil bli lagret direkte i post_meta bord ved hjelp av update_post_meta funksjon. Funksjoner vil bli lagret som en JSON-kodet streng. Nå er vi ferdige med å lage pakker. La oss fortsette å lage prisbord.

Opprette prisbord

Prissettingstabellene kommer til å være en annen egendefinert innleggstype på vårt plugin. Tilpasset posttypeopprettelse og lagring i databasen ligner veldig på koden som er forklart tidligere. Så jeg skal ikke gjøre det kjedelig ved å forklare det samme. Du kan finne tilpasset innleggsopprettelse og lagringskode for prisingstabeller i pluginfilene.

Prisklasser inneholder prispakker. Derfor vil metakassene som brukes til prisbord, være annerledes enn det vi brukte til prispakker. La oss ta en titt på meta-boksskapelsen for prisbord.

 add_action ('add_meta_boxes', 'wppt_pricing_tables_meta_boxes'); funksjon wppt_pricing_tables_meta_boxes () add_meta_box ("prissettingsinfo", "Prissettingsinfo", "wppt_generate_pricing_table_info", "pricing_tables", "normal", "high");  funksjon 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 = nytt WP_Query (array ('post_type' => 'pricing_packages', 'post_status' => 'publiser', 'posts_per_page' => -1, 'orderby' => 'post_date', 'order' => 'ASC')); $ html = ''; $ html. = ''; $ html. = ''; $ html. = ' '; mens ($ query-> have_posts ()): $ query-> the_post (); $ checked_status = (in_array ($ query-> post-> ID, $ table_packages))? "sjekket" : ""; $ html. = ''; $ html. = ' '; EndWhile; $ html. = 'Pakke Status Pakkenavn
'. $ query-> post-> post_title. '
'; ekko $ html;

Pakke Status	Pakkenavn
	'. $ query-> post-> post_title. '

Vi kan legge til en tilpasset meta-boks for prisingstabeller med lignende kode som den som ble brukt i forrige seksjon. Pakker av et bestemt bord skal lagres i post_meta bord som en JSON kodet streng. Så vi får pakker for den nåværende tabellen ved hjelp av get_post_meta funksjon. Deretter får vi alle publiserte prispakker ved hjelp av et tilpasset søk, som vist nedenfor.

 $ query = new WP_Query (array ('post_type' => 'pricing_packages', 'post_status' => 'publiser', 'posts_per_page' => -1, 'orderby' => 'post_date', 'order' => 'ASC '));

Vi kan velge pakkene ved hjelp av pricing_packages egendefinert innleggstype. Du kan velge andre forhold for spørringen i henhold til dine preferanser.

WP_Query vil returnere standard antall poster i resultatet hvis posts_per_page er ikke spesifisert. Du kan få alle innleggene uten noen grense ved å bruke -1 for posts_per_page tilstand.

Så bruker vi resultatet fra WP_Query for å vise alle prispakker med boksene foran dem. Under looping kontrollerer vi om pakken allerede er tilordnet bordet og tilordne en sjekk til avmerkingsboksen. Du kan legge til eller fjerne pakker dynamisk ved å velge / avmarkere avmerkingsboksene og trykke på oppdateringsknappen.

Validerende prissettingstabelloppretting

Vi skal validere prislistenavnet som vi gjorde tidligere med prispakker. Følgende jQuery-kode vil bli brukt til validering:

 var wppt_validate_pricing_tables = funksjon () var err = 0; $ ( "# Pricing_error") html ( ""); $ ( "# Pricing_error") skjule (.); hvis ($ ("# title") .val () == ") $ (" # pricing_error ").Vennligst skriv inn priserstabellnavn.
"); err ++; hvis (err> 0) $ (" # publiser "). removeClass (" knapp-primær-deaktivert "); $ (" # ajax-loading " pricing_error "). show (); return false; else return true;;

Ovennevnte kode er inkludert i pricing_admin.js fil i js mappe av plugin.

Generering av prisingstabell-ID

Vi trenger en unik nøkkel for pricng tabeller for å inkludere dem i kortnummeret. Så vi bruker ID-en av prisbordet som nøkkel. Når bordet er opprettet, kan vi vise pristabell-ID-en i listevisningen ved hjelp av en egendefinert kolonne. WordPress gir en enkel teknikk for å inkludere egendefinerte kolonner i listevisningen som vist nedenfor:

 add_filter ('manage_edit-pricing_tables_columns', 'wppt_edit_pricing_tables_columns'); funksjon wppt_edit_pricing_tables_columns ($ kolonner) $ kolonner = array ('cb' => '',' ID '=> __ (' Pristabell ID '),' title '=> __ (' Pristabellnavn '),' dato '=> __ (' Dato ')); returnere $ kolonner;

Vi kan bruke manage_edit- Custom Post Type _columns filtrer for å tilpasse kolonnene som vises i listevisning. Som du kan se har jeg tildelt en egendefinert kolonne kalt Pristabell ID for å bruke post-ID.

 add_action ('manage_pricing_tables_posts_custom_column', 'wppt_manage_pricing_tables_columns', 10, 2); funksjon wppt_manage_pricing_tables_columns ($ kolonne, $ post_id) global $ post; bytt ($ kolonne) case 'ID': $ pricing_id = $ post_id; hvis (tomt ($ pricing_id)) ekko __ ('Ukjent'); ellers printf ($ pricing_id); gå i stykker; standard: break;  add_filter ('manage_edit-pricing_tables_sortable_columns', 'wppt_pricing_tables_sortable_columns'); funksjon wppt_pricing_tables_sortable_columns ($ kolonner) $ kolonner ['ID'] = 'ID'; returnere $ kolonner;

Da kan vi tildele verdiene til kolonnen ved hjelp av en bryteretning på manage_ Custom Post Type _posts_custom_column handling. Til slutt bruker vi manage_edit- Custom Post Type _sortable_columns filter for å gjøre kolonnen sorterbar. Etter at du har opprettet et prisbord, kan du se nummeret i listevisningen.

Inkludert Plugin Scripts and Styles

Vi brukte en tilpasset JavaScript-fil for å validere administrasjonsfunksjoner. Så først skal vi se på hvordan skriptfiler er inkludert i WordPress admin-området.

 funksjon 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 er en krok som kan brukes til å inkludere alle CSS- og Script-filene i Admin-området i WordPress. Først må vi registrere skriptet ved hjelp av wp_register_script Fungerer med en unik nøkkel og sti til filen. Da kan vi bruke wp_enqueue_script funksjon for å inkludere filene.

La oss nå se på inkluderingen av frontendestiler og skript ved hjelp av koden nedenfor:

 funksjon wppt_pricing_front_scripts () wp_register_style ('prisbasert', plugins_url ('css / base.css', __FILE__)); wp_enqueue_style ('prisbasen'); wp_register_style ('prisoppsett', plugins_url ('css / layout.css', __FILE__)); wp_enqueue_style ('prisoppsett'); wp_register_style ('pris-fluid-skjelett', plugins_url ('css / fluid_skeleton.css', __FILE__)); wp_enqueue_style ('pris-fluid-skjelett'); wp_register_style ('prissettingstabell', plugins_url ('css / pricing_table.css', __FILE__)); wp_enqueue_style ('prisbordet');  add_action ('wp_enqueue_scripts', 'wppt_pricing_front_scripts');

I starten av opplæringen nevnte jeg at vi skal skape et responsivt prisbord. Det er lettere å jobbe med et eksisterende CSS-rammeverk for å gi responsiv funksjonalitet. Så jeg har valgt Skeleton som CSS-rammeverket. De tre første CSS-filene vil være Skeleton-rammeverkets CSS-filer, så har vi tatt med en tilpasset stil for vårt prisbord i pricing_table.css fil.

Nå er alle dataene som kreves for prisbordet, klare, og vi kan fortsette å opprette prisplanleggingsdesignet.

Utforming av prisbordet

Å designe et responsivt prisbord er en tidkrevende oppgave og krever avansert kunnskap i HTML og CSS. Derfor forklarer designen utelukket av denne opplæringen. Jeg bruker et responsivt prisbord som jeg opprettet for Webdesigntuts +. Hvis du er interessert kan du lære om designdelen ved å lese Responsive Pricing Tables Using :mål for liten skjerm opplæring. Følgende kode inneholder HTML-koden for et prisbord med to pakker:

     grunn~~POS=TRUNC 
  $ 9.99 
 
  Utsikt
  1GB Oppbevaring
 
  5GB båndbredde
 
  2 domener
 
  3 databaser
 
  1 FTP-konto
 
  25 E-postkontoer
 
  Kjøp nå 
 
 
    Standard 
  $ 19.99 
 
  Utsikt
  10GB Oppbevaring
 
  50 GB båndbredde
 
  10 domener
 
  25 databaser
 
  10 FTP-konto
 
  100 E-postkontoer
 
  Kjøp nå

Nå må vi velge en metode for å inkludere prisbordskoden i WordPress. Vi kan enten inkludere denne koden i en kortkode eller opprette en bestemt sidemal. Jeg skal bruke en kortkode. Du kan også prøve sidemalemetoden.

Opprette prissetting Shortocde

Kortkoder er en enkel måte å legge til dynamisk funksjonalitet på dine innlegg og sider. Jeg skal bruke en kodenavn som heter wppt_show_pricing for å sette inn et prisbord. Vi må passere ID-en av prisbordet som shortcode-parameteren ved hjelp av pricing_id nøkkel. La oss implementere kortnummeret.

 add_shortcode ("wppt_show_pricing", "wppt_generate_pricing_table"); funksjon wppt_generate_pricing_table ($ atts) global $ post; ekstrakt (shortcode_atts (array ('pricing_id' => '0',), $ atts)); // gjenværende kode

Jeg har definert en kodenummer som heter wppt_show_pricing bruker WordPress ' add_shortcode funksjon. Shortcode attributter vil automatisk bli overført til funksjonen. Først trekker vi ut kortkodesystemet og ID-en av prisingstabellen blir tildelt til pricing_id variabel. Resten av koden vil bli forklart i de følgende avsnittene.

 global $ post; $ table_packages = get_post_meta ($ pricing_id, "_table_packages", true); $ table_packages = ($ table_packages == ")? array (): json_decode ($ table_packages);

Deretter får vi prisbordet ID tildelt kortnummeret og alle pakkene som inngår i prisbordet fra post_meta bord.

 $ html = ''; $ pricing_index = 0; foreach ($ table_packages som $ 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. = ''; $ html. = '  '. $ plan_title. ' 
  $ '. $ package_price. ' 
 
'; $ html. = ' Utsikt  
'; foreach ($ package_features as $ package_feature) $ html. = ' '. $ package_feature. '
 
';  $ html. = ' Kjøp nå 
 
'; $ html. = '
';  $ html. = '
'; ekko $ html;

Mens du går gjennom hver pakke generert i forrige kode, får vi funksjonene og detaljene til pakkene ved hjelp av get_post_meta funksjon. Deretter inkluderer vi HTML-koden med dynamiske data for å vise prisingstabellen. Til slutt returnerer vi den genererte HTML-koden for å bli vist på sider som inneholder kortnummeret.

Nå har vi fullført utviklingen av vårt pristabellplugin for WordPress. Du kan gå gjennom kildekoden og legge til din egen tilpassede funksjonalitet i henhold til dine preferanser.

Retningslinjer for bruk av prisingstabell

Alle med grunnleggende kunnskaper om å arbeide med WordPress vil kunne opprette prisingstabeller ved hjelp av dette plugin. Jeg skal sørge for at det blir enklere for brukere uten mye erfaring i WordPress.

Klikk på Prispakker-delen på venstremenyen, og opprett en pakke med navn, pris, kjøpslink og funksjoner. Fortsett denne prosessen til du lager alle pakkene dine.
Deretter klikker du på Prismodeller på den venstre menyen for å legge til et nytt prisbord. En liste over prispakker vises i bunnen av skjermen. Velg pakkene du vil ha, og lagre prisbordet med et bestemt navn.
Gå til prislistetabellen og finn pristabell-ID for den nyopprettede tabellen.
Klikk så på siden Sider for å legge til en ny side. Skriv inn kortnummeret [wppt_show_pricing pricing_id = "ID" /] inne i sideditoren. Erstatt ID med den faktiske prisingstabellen ID.
Lagre siden og se den i en nettleser. Du vil få ditt responsive prisbord.

Å lage responsive pristabeller er ikke en lett oppgave, og krever mye manuell arbeid basert på design. Så sørg for å holde pristabellen på maksimalt 4 prispakker pr prisbord. Endre størrelsen på nettleseren for å se de responsive effektene i handlingen. Relaterte innlegg

Responsive Pricing Tables Using :mål for små skjermer

Jeg håper du lærte å bruke egendefinerte innleggstyper og meta-bokser for å lage et prisbord. Gi oss beskjed hvis du har din egen måte å opprette slik plugin gjennom kommentarene nedenfor.

Kode