Share
Les tableaux de tarification sont un élément clé de votre entreprise qui promeut vos produits et aide les utilisateurs à choisir entre différents services. La plupart des thèmes WordPress commerciaux modernes fournissent des tableaux de prix intégrés. Il existe également de nombreux plug-ins de tarification gratuits et commerciaux pour WordPress. Ce tutoriel est destiné à fournir aux développeurs WordPress des connaissances sur la création d'un plugin à partir de zéro, permettant la personnalisation dans différents projets..
Chaque conception de site Web essaie d’obtenir des fonctionnalités réactives qui permettent une meilleure apparence sur tout type de périphérique. Les tableaux de prix créés avec ce plugin fonctionneront sur tous les types d'appareils tels que les mobiles et les tablettes. Alors, commençons.
Vous pouvez consulter la conception finale du tableau de prix sur l'écran suivant.
La planification est la partie difficile de tout projet. Il est préférable de planifier la manière dont nous allons développer la table de tarification et les techniques que nous allons utiliser avant de procéder à tout codage. Fondamentalement, la table de tarification aura les composants suivants:
Accentsconagua
tarification_tables.pricing_packages sera utilisé.Nous allons utiliser un type de message personnalisé appelé pricing_packages. Vous pouvez simplement générer du code pour créer un type de publication personnalisé à l'aide d'un générateur de code en ligne. Le code suivant crée le type de publication personnalisé pour les packages utilisant les configurations par défaut:
add_action ('init', 'wppt_register_cpt_pricing_packages'); function wppt_register_cpt_pricing_packages () $ labels = array ('name' => _x ('Packages de tarification', 'pricing_packages'), 'singular_name' => _x ('Package de tarification', 'pricing_packages'), 'add_new' => _x ('Add New', 'pricing_packages'), 'add_new_item' => _x ('Ajouter un nouveau package de tarification', 'pricing_packages'), 'edit_item' => _x ('Modifier le package de tarification', 'pricing_packages'), 'new_item '=> _x (' Nouveau package de tarification ',' pricing_packages '),' view_item '=> _x (' Afficher le package de tarification ',' pricing_packages '),' search_items '=> _x (' Recherche de packs de tarification ',' pricing_packages ' ), 'not_found' => _x ('Aucun ensemble de prix trouvé', 'pricing_packages'), 'not_found_in_trash' => _x ('Aucun ensemble de prix trouvé dans la corbeille', 'pricing_packages'), 'parent_item_colon' => _x (' Package de tarification parent: ',' pricing_packages '),' menu_name '=> _x (' Packages de tarification ',' pricing_packages '),); $ 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, 'type_de capacité' => 'post'); register_post_type ('pricing_packages', $ args); Le nom, le prix et le lien d’achat de l’emballage sont les éléments les plus importants d’un ensemble de prix. Nous allons donc utiliser une méta-boîte pour ajouter ces champs. Nous avons également besoin de plusieurs fonctionnalités pour un package. Nous allons utiliser une autre méta-boîte pour ajouter et supprimer des fonctionnalités de manière dynamique, comme indiqué dans le code ci-dessous..
add_action ('add_meta_boxes', 'wppt_pricing_packages_meta_boxes'); function wppt_pricing_packages_meta_boxes () add_meta_box ("pricing-package-info", "Informations sur le package de tarification", "wppt_generate_pricing_package_info", "pricing_packages", "normal", "élevé"); add_meta_box ("pricing-features-info", "Fonctionnalités de tarification", "wppt_generate_pricing_features_info", "pricing_packages", "normal", "élevé"); Les méta-boîtes pour les champs de package sont ajoutées à l'aide de la commande add_meta_boxes action. Vous pouvez utiliser une méta-boîte au lieu de deux. J'ai utilisé deux boîtes à méta pour clarifier les choses.
fonction 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. = '
La première boîte de méta contiendra des champs pour le prix et le lien d'achat. Ces 2 champs seront sauvegardés dans post_meta table en utilisant _prix du coffret et _package_buy_link touches respectivement.
fonction 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. = '
|
Le code ci-dessus contient le code HTML pour les champs de fonctionnalités du package. Un package contiendra de nombreuses fonctionnalités. Par conséquent, les fonctionnalités seront ajoutées de manière dynamique à une liste non ordonnée avec des champs cachés à l'aide de jQuery. Les fonctionnalités seront stockées dans le post_meta table avec _package_features clé. Une chaîne au format JSON sera utilisée pour conserver plusieurs fonctionnalités.
Le prix du forfait et le lien d'achat sont obligatoires pour chaque forfait. Nous avons donc besoin d’un code de validation avant de créer des packages. Nous utiliserons le code jQuery pour la validation, comme indiqué ci-dessous.
jQuery (document) .ready (function ($) $ ("# post-body-content"). prepend (''); $ ('# post'). submit (function () if ($ ("# post_type"). val () == 'pricing_packages') return wppt_validate_pricing_packages (); sinon if ($ ("# # post_type") .val () == 'pricing_tables') return wppt_validate_pricing_tables ();); ); Nous devons ajouter un div élément de l'écran de création de publication pour afficher les erreurs. L'écran de post-création contient un formulaire avec l'identifiant post. Cela ne change pas non plus pour les types de publication personnalisés. J'ai donc utilisé l'événement submit du #poster formulaire de validation.
Comme nous utilisons différents types de publication personnalisés, il est nécessaire de filtrer le type de publication à l'aide du code ci-dessous. Le formulaire de post-création contient un champ masqué avec l'ID Type de poste.
if ($ ("# post_type"). val () == 'pricing_packages') return wppt_validate_pricing_packages (); else if ($ ("# post_type"). val () == 'pricing_tables') return wppt_validate_pricing_tables (); Une fois le filtrage terminé, nous appelons une fonction de validation spécifique en fonction du type de publication, comme indiqué ci-dessous..
var wppt_validate_pricing_packages = function () var err = 0; $ ("# pricing_error"). html (""); $ ("# pricing_error"). hide (); if ($ ("# titre"). val () == ") $ (" # pricing_error "). append ("S'il vous plaît entrer le nom du paquet.
"); err ++; if ($ (" # package_price "). val () ==") $ ("# pricing_error"). append ("S'il vous plaît entrer le prix du forfait.
"); err ++; if ($ (" # package_buy_link "). val () ==") $ ("# pricing_error"). append ("Veuillez entrer le lien d'achat du forfait.
"); err ++; if (err> 0) $ (" # publier "). removeClass (" button-primary-disabled "); $ (" # ajax-loading "). hide (); $ (" # pricing_error "). show (); return false; else return true;; Tout d'abord, nous supprimons les erreurs existantes précédemment définies dans la pricing_error élément. Ensuite, nous pouvons valider chaque champ et ajouter le message d'erreur au pricing_error récipient. Enfin, nous affichons les erreurs en utilisant le $ ("# pricing_error"). show () une fonction.
$ ("# publier"). removeClass ("button-primary-disabled"). Nous pouvons aussi arrêter l’image de chargement ajax en utilisant $ ("# ajax-loading"). hide (). Nous avons maintenant terminé toutes les créations et validations de champs pour les paquets. Passons maintenant à l'enregistrement des informations dans la base de données. Nous allons utiliser le save_post action qui s'exécute juste après l'enregistrement du message dans la base de données.
add_action ('save_post', 'wppt_save_pricing_packages'); function wppt_save_pricing_packages ($ post_id) if (! wp_verify_nonce ($ _POST ['pricing_package_box_nonce'],] nom de base (__FILE__))) return $ post_id; if (défini ('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; Nous faisons d’abord des validations pour vérifier si la valeur de nonce générée dans le formulaire correspond à la valeur de nonce reçue dans $ _POST. Ensuite, nous devons nous assurer qu'il s'agit d'une sauvegarde automatique ou manuelle. Ensuite, nous devons vérifier le type de message avant de sauvegarder. Sinon, ce code sera exécuté sur chaque type de message. Le prix du forfait et le lien d’achat seront enregistrés directement dans post_meta table en utilisant le update_post_meta une fonction. Les fonctionnalités seront enregistrées en tant que chaîne codée JSON. Nous en avons terminé avec la création de packages. Passons maintenant à la création de tableaux de prix.
Les tableaux de prix vont être un autre type de message personnalisé sur notre plugin. La création et l'enregistrement de type de message personnalisé dans la base de données sont très similaires au code expliqué précédemment. Donc, je ne vais pas le rendre ennuyeux en expliquant la même chose. Vous pouvez trouver des codes de post-création et d’enregistrement personnalisés pour les tableaux de prix dans les fichiers du plugin.
Les tableaux de prix contiennent des forfaits de prix. Par conséquent, les méta-boîtes utilisées pour les tableaux de prix vont être différentes de celles que nous avons utilisées pour les forfaits de prix. Jetons un coup d'œil à la création de la boîte à méta pour les tableaux de prix.
add_action ('add_meta_boxes', 'wppt_pricing_tables_meta_boxes'); function wppt_pricing_tables_meta_boxes () add_meta_box ("pricing-info-table", "Informations sur la table de tarification", "wppt_generate_pricing_table_info", "pricing_tables", "normal", "haut"); 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' => 'publish', 'posts_per_page' => -1, 'orderby' => 'post_date', 'order' => 'ASC')); $ html = ''; $ html. = '| Statut du colis | '; $ html. = 'Nom du paquet |
|---|---|
| '; $ html. = ' | '. $ query-> post-> post_title. ' |
Nous pouvons ajouter une méta-boîte personnalisée pour les tables de tarification utilisant un code similaire à celui utilisé dans la section précédente. Les paquets d’une table spécifique vont être stockés dans le post_meta table sous forme de chaîne encodée JSON. Donc, nous obtenons les paquets pour la table actuelle en utilisant le get_post_meta une fonction. Ensuite, nous obtenons tous les packages de prix publiés en utilisant une requête personnalisée, comme indiqué ci-dessous..
$ query = new WP_Query (array ('post_type' => 'pricing_packages', 'post_status' => 'publish', 'posts_per_page' => -1, 'orderby' => 'post_date', 'order' => 'ASC ')); Nous pouvons sélectionner les paquets en utilisant le pricing_packages type de message personnalisé. Vous pouvez choisir d'autres conditions pour la requête en fonction de vos préférences..
WP_Query renverra le nombre par défaut d'enregistrements dans le résultat si posts_per_page n'est pas spécifié. Vous pouvez obtenir tous les messages sans aucune limite en utilisant -1 pour le posts_per_page état. Ensuite, nous utilisons le résultat généré par WP_Query pour afficher tous les packages de prix avec les cases à cocher devant eux. En boucle, nous vérifions si le paquet est déjà affecté à la table et affectons une coche à la case à cocher. Vous pouvez ajouter ou supprimer des packages de manière dynamique en sélectionnant / désélectionnant les cases à cocher et en appuyant sur le bouton de mise à jour..
Nous allons valider le nom de la table de tarification, comme nous l'avons fait précédemment avec les packages de tarification. Le code jQuery suivant sera utilisé pour la validation:
var wppt_validate_pricing_tables = function () var err = 0; $ ("# pricing_error"). html (""); $ ("# pricing_error"). hide (); if ($ ("# titre"). val () == ") $ (" # pricing_error "). append ("Veuillez entrer le nom de la table de tarification.
"); err ++; if (err> 0) $ (" # publier "). removeClass (" button-primary-disabled "); $ (" # ajax-loading "). hide (); $ (" # pricing_error "). show (); return false; else return true;; Le code ci-dessus est inclus dans le pricing_admin.js déposer dans le js dossier du plugin.
Nous avons besoin d'une clé unique pour les tables de prix afin de les inclure dans le shortcode. Nous allons donc utiliser l'ID de la table de tarification comme clé. Une fois la table créée, nous pouvons afficher l'ID de la table de tarification dans la vue Liste à l'aide d'une colonne personnalisée. WordPress fournit une technique simple pour inclure des colonnes personnalisées dans la vue liste, comme indiqué ci-dessous:
add_filter ('manage_edit-pricing_tables_columns', 'wppt_edit_pricing_tables_columns'); fonction wppt_edit_pricing_tables_columns ($ colonnes) $ colonnes = array ('cb' => '',' ID '=> __ (' ID de table de tarification '),' titre '=> __ (' Nom de la table de tarification '),' date '=> __ (' Date ')); retourne $ colonnes; Nous pouvons utiliser le manage_edit- Type de message personnalisé _colonnes filtre pour personnaliser les colonnes affichées dans la vue liste. Comme vous pouvez le constater, j'ai affecté une colonne personnalisée appelée ID de table de tarification pour utiliser l'ID de publication..
add_action ('manage_pricing_tables_posts_custom_column', 'wppt_manage_pricing_tables_columns', 10, 2); fonction wppt_manage_pricing_tables_columns ($ column, $ post_id) global $ post; switch ($ column) case 'ID': $ pricing_id = $ post_id; if (empty ($ pricing_id)) echo __ ('Inconnu'); else printf ($ pricing_id); Pause; défaut: break; add_filter ('manage_edit-pricing_tables_sortable_columns', 'wppt_pricing_tables_sortable_columns'); function wppt_pricing_tables_sortable_columns ($ columns) $ columns ['ID'] = 'ID'; retourne $ colonnes; Ensuite, nous pouvons affecter les valeurs à la colonne en utilisant une instruction switch sur le manage_ Type de message personnalisé _posts_custom_column action. Enfin nous utilisons le manage_edit- Type de message personnalisé _sortable_columns filtre pour rendre la colonne triable. Après avoir créé un tableau de prix, vous pourrez voir le numéro dans la liste..
Nous avons utilisé un fichier JavaScript personnalisé pour valider les fonctions de la zone d'administration. Nous allons donc d'abord examiner comment les fichiers de script sont inclus dans la zone d'administration de WordPress..
fonction 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 est un crochet qui peut être utilisé pour inclure tous les fichiers CSS et Script dans la zone d’administration de WordPress. Nous devons d’abord enregistrer le script en utilisant le wp_register_script fonctionne avec une clé unique et un chemin d'accès au fichier. Ensuite, nous pouvons utiliser le wp_enqueue_script fonction pour inclure les fichiers.
Voyons maintenant l'inclusion des styles et des scripts frontaux en utilisant le code ci-dessous:
fonction 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 ('tarification-fluide-squelette', plugins_url ('css / fluid_skeleton.css', __FILE__)); wp_enqueue_style ('pricing-fluide-squelette'); 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'); Au début du didacticiel, j'ai mentionné que nous allons créer un tableau de prix réactif. Il est plus facile de travailler avec une infrastructure CSS existante pour fournir des fonctionnalités réactives. J'ai donc choisi Skeleton comme framework CSS. Les trois premiers fichiers CSS seront les fichiers CSS du framework Skeleton, puis nous avons inclus un style personnalisé pour notre tableau de tarification dans pricing_table.css fichier.
Maintenant, toutes les données nécessaires pour la table de tarification sont prêtes et nous pouvons passer à la création de la conception de la table de tarification..
Concevoir un tableau de prix réactif est une tâche fastidieuse qui nécessite des connaissances avancées en HTML et CSS. Par conséquent, expliquer la conception sort du cadre de ce tutoriel. Je vais utiliser un tableau de prix réactif que j'ai créé pour Webdesigntuts +. Si vous êtes intéressé, vous pouvez en apprendre davantage sur la conception en lisant les tableaux de tarification réactif à l'aide de :cible pour tutoriel sur les petits écrans. Le code suivant contient le code HTML d'une table de tarification avec deux packages:
- De base
- 9,99 $
- Vue
- Acheter maintenant
- la norme
- 19,99 $
- Vue
- Acheter maintenant
Nous devons maintenant choisir une méthode pour inclure le code du tableau de prix dans WordPress. Nous pouvons soit inclure ce code dans un shortcode, soit créer un modèle de page spécifique. Je vais utiliser un shortcode. Vous pouvez aussi essayer la méthode du modèle de page.
Les codes courts constituent un moyen simple d’ajouter des fonctionnalités dynamiques à vos publications et à vos pages. Je vais utiliser un shortcode appelé wppt_show_pricing pour l'insertion d'un tableau de prix. Nous devons passer l'ID de la table de tarification en tant que paramètre shortcode à l'aide du pricing_id clé. Implémentons le shortcode.
add_shortcode ("wppt_show_pricing", "wppt_generate_pricing_table"); fonction wppt_generate_pricing_table ($ atts) global $ post; extraire (shortcode_atts (array ('pricing_id' => '0',), $ atts)); // Code restant J'ai défini un shortcode appelé wppt_show_pricing en utilisant WordPress ' add_shortcode une fonction. Les attributs de shortcode seront automatiquement passés à la fonction. Nous allons d’abord extraire le tableau de shortcode et l’ID de la table de tarification sera attribué à la table. pricing_id variable. Le reste du code sera expliqué dans les sections suivantes.
global $ post; $ table_packages = get_post_meta ($ pricing_id, "_table_packages", true); $ table_packages = ($ table_packages == ")? array (): json_decode ($ table_packages);
Ensuite, nous obtenons l’ID de la table de tarification affecté au shortcode et tous les packages inclus dans la table de tarification à partir du post_meta table.
$ html = ''; $ pricing_index = 0; foreach ($ table_packages en tant que $ 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. = '
- Vue
'; foreach ($ package_features en tant que $ package_feature) $ html. = '- '; $ html. = '
'. $ package_feature. '- Acheter maintenant
En parcourant chaque paquet généré dans le code précédent, nous obtenons les caractéristiques et les détails des paquets à l’aide de la get_post_meta une fonction. Ensuite, nous incluons le code HTML avec des données dynamiques pour afficher le tableau de prix. Enfin, nous renvoyons le code HTML généré à afficher dans les pages contenant le shortcode..
Nous avons maintenant terminé le développement de notre plugin de tableau de prix pour WordPress. Vous pouvez parcourir le code source et ajouter vos propres fonctionnalités personnalisées selon vos préférences..
Toute personne ayant les connaissances de base pour travailler avec WordPress sera capable de créer des tableaux de prix en utilisant ce plugin. Je vous expliquerai les étapes à suivre pour simplifier la tâche des utilisateurs sans grande expérience de WordPress..
[wppt_show_pricing pricing_id = "ID" /] dans l'éditeur de page. Remplacer l'ID par l'ID de la table de tarification réelle.:cible pour petits écransJ'espère que vous avez appris à utiliser les types de messages personnalisés et les méta-boîtes pour créer un tableau de prix. Faites-nous savoir si vous avez votre propre façon de créer un tel plugin à travers les commentaires ci-dessous.
