Créer un CRM simple dans WordPress Ajout de colonnes à WP_List_Table

Nous avons cherché à créer un système CRM simple dans WordPress. Dans la dernière partie de cette série, nous avons utilisé Champs personnalisés avancés pour ajouter des champs personnalisés à notre type de publication personnalisée Contacts. Nous avons appris à utiliser Advanced Custom Fields et à le configurer pour qu'il fonctionne par programmation..

Aujourd'hui, nous verrons comment afficher les données stockées dans nos champs personnalisés directement dans notre tableau de contacts..

Tout sur WP_List_Table

Chaque type de message qui a un tableau de bord utilise le WP_List_Table class pour rendre la table familière et ses actions associées:

Par défaut, WordPress affichera les colonnes suivantes:

  • case à cocher (utilisée pour sélectionner / désélectionner les publications, auxquelles peuvent être appliquées des actions)
  • Titre
  • auteur
  • commentaires
  • rendez-vous amoureux

Pour notre Contact type de message personnalisé, ce n'est pas très utile si nous voulons voir rapidement les détails clés en un coup d'œil, tels que le numéro de téléphone ou la photo du contact.

WordPress fournit un filtre et une action permettant d’ajouter de nouvelles colonnes au WP_List_Table et déterminer sa sortie pour chaque poste.

Commençons par ajouter le manage_edit- POST_TYPE _columns filtrer à la construction de notre classe de plugin. TYPE DE POSTE sera le nom de notre type de message, qui dans ce cas est contact:

/ ** * Constructeur. Appelé quand le plugin est initialisé * / function __construct () add_action ('init', array ($ this, 'register_custom_post_type')); add_action ('plugins_loaded', array ($ this, 'acf_fields')); add_filter ('manage_edit-contact_columns', tableau ($ this, 'add_table_columns')); 

Nous devons également définir notre add_table_columns () fonction, qui indique à WordPress les noms de nos colonnes supplémentaires que nous aimerions afficher dans notre table Contacts. Cette fonction accepte un tableau de colonnes existantes, que nous pouvons étendre en ajoutant nos colonnes de table personnalisées..

/ ** * Ajoute des colonnes de table aux contacts WP_List_Table * * tableau @param $ colonnes Colonnes existantes * tableau @return Nouvelles colonnes * / fonction add_table_columns ($ colonnes) $ colonnes ['adresse_email'] = __ ('Adresse électronique', 'tuts-crm'); $ columns ['phone_number'] = __ ('Numéro de téléphone', 'tuts-crm'); $ colonnes ['photo'] = __ ('Photo', 'tuts-crm'); retourne $ colonnes; 

Nous nous assurons que les clés de tableau correspondent aux noms de champs personnalisés d'ACF. Si vous avez des champs différents, assurez-vous que les noms de clé de colonne correspondent à ceux de votre champ.nom de champ réglage.

Voir votre Contacts table en cliquant sur Contacts dans le menu du tableau de bord WordPress, vous verrez nos nouvelles colonnes:

Cependant, aucune donnée n'est affichée pour chaque contact dans le tableau. Nous devons ajouter le manage_ POST_TYPE _posts_custom_column action au constructeur de notre classe de plugin. TYPE DE POSTE sera à nouveau le nom de notre type de message, qui dans ce cas est contact:

/ ** * Constructeur. Appelé quand le plugin est initialisé * / function __construct () add_action ('init', array ($ this, 'register_custom_post_type')); add_action ('plugins_loaded', array ($ this, 'acf_fields')); add_filter ('manage_edit-contact_columns', tableau ($ this, 'add_table_columns')); add_action ('manage_contact_posts_custom_column', tableau ($ this, 'output_table_columns_data'), 10, 2); 

Nous devons également définir notre output_table_columns_data () fonction, qui indique à WordPress quoi afficher pour chaque combinaison de contacts et de colonnes. Parce que nous nous sommes assurés que les noms de clé de colonne correspondent à notre ACF Noms de champs, cela facilite notre codage. Les champs personnalisés avancés ont un get_field () fonction, qui accepte les deux Nom de domaine et paramètres Post ID pour récupérer la valeur stockée:

/ ** * Affiche les données de notre champ personnalisé Contact, en fonction de la colonne demandée * * @ @param string $ columnName Nom de la clé de colonne * @param int $ post_id ID du message * / function output_table_columns_data ($ columnName, $ post_id) echo get_field ($ nomcolonne, $ post_id); 

Rechargez votre table Contacts et vous verrez vos champs personnalisés:

En fonction de votre configuration PHP, le Photo colonne sera vide ou produira un avis PHP:

Le champ image dans Advanced Custom Fields renvoie un tableau lorsque vous utilisez get_field (), comprenant les détails de l'image et l'URL, la largeur et la hauteur de chaque taille d'image enregistrée (une taille d'image enregistrée est généralement basée sur vos thèmes et plug-ins installés).

Modifions notre fonction pour afficher les bonnes données de tableau afin d'afficher une image:

/ ** * Affiche les données de notre champ personnalisé Contact, en fonction de la colonne demandée * * @ @param string $ columnName Nom de la clé de colonne * @param int $ post_id ID du message * / function output_table_columns_data ($ columnName, $ post_id) // Field $ field = get_field ($ columnName, $ post_id); if ('photo' == $ columnName) echo '';  else // Champ en sortie echo $ field; 

Rechargez votre table des contacts et vous devriez voir la photo de chaque contact:

Colonnes Triables

Et si nous avions besoin de trier rapidement nos contacts par nom, numéro de téléphone ou adresse email? Nous pouvons déjà trier sur la colonne nom (ou plutôt titre), mais pour l’instant, il n’existe aucune fonctionnalité permettant à WordPress d’indiquer comment trier nos colonnes de numéro de téléphone et d’adresse électronique..

Retour au constructeur de notre plugin. Nous devons ajouter le manage_ POST_TYPE _posts_custom_column filtrer à la construction de notre classe de plugin, pour dire à WordPress que nous souhaitons activer le tri de certaines colonnes. TYPE DE POSTE sera à nouveau le nom de notre type de message, qui dans ce cas est contact:

/ ** * Constructeur. Appelé quand le plugin est initialisé * / function __construct () add_action ('init', array ($ this, 'register_custom_post_type')); add_action ('plugins_loaded', array ($ this, 'acf_fields')); add_filter ('manage_edit-contact_columns', tableau ($ this, 'add_table_columns')); add_action ('manage_contact_posts_custom_column', tableau ($ this, 'output_table_columns_data'), 10, 2); add_filter ('manage_edit-contact_sortable_columns', array ($ this, 'define_sortable_table_columns')); 

Comme pour nos actions et filtres précédents, nous devons également définir notre define_sortable_table_columns () fonction, qui indique à WordPress quelles colonnes peuvent être triées:

/ ** * Définit les colonnes de contact qui sont triables * * Tableau @param $ colonnes Colonnes triables existantes * Tableau @return Nouvelles colonnes triables * / function define_sortable_table_columns ($ columns) $ columns ['email_address'] = 'email_address'; $ columns ['phone_number'] = 'phone_number'; retourne $ colonnes; 

Passez le curseur de la souris sur la Adresse électronique et Numéro de téléphone colonnes, et vous verrez une flèche apparaît, nous indiquant que nous pouvons trier par les données dans la colonne appropriée:

Pour le moment, cliquer sur l'en-tête de la colonne pour trier ses données ne fera rien, car le commandé par paramètre qui est défini dans l'URL n'est pas celui que WordPress reconnaîtra.

Dans le constructeur de notre plugin, ajoutons un filtre sur le demande méthode, puis définissez notre fonction pour vérifier si nous essayons de trier par une colonne personnalisée (et si tel est le cas, modifiez la requête posts pour que WordPress puisse la comprendre):

/ ** * Constructeur. Appelé quand le plugin est initialisé * / function __construct () add_action ('init', array ($ this, 'register_custom_post_type')); add_action ('plugins_loaded', array ($ this, 'acf_fields')); add_filter ('manage_edit-contact_columns', tableau ($ this, 'add_table_columns')); add_action ('manage_contact_posts_custom_column', tableau ($ this, 'output_table_columns_data'), 10, 2); add_filter ('manage_edit-contact_sortable_columns', array ($ this, 'define_sortable_table_columns')); if (is_admin ()) add_filter ('request', tableau ($ this, 'orderby_sortable_table_columns')); 

Parce que le demande Le filtre s’exécute à chaque chargement de page de WordPress (qu’il s’agisse du site Web frontal ou de l’interface de tableau de bord WordPress), nous souhaitons réduire la fréquence d’appel. Pour ce faire, nous n’ajoutons le filtre que si nous sommes dans l’administration WordPress (is_admin ()).

Ensuite, définissons notre orderby_sortable_table_columns () une fonction:

/ ** * Inspectez la demande pour voir si nous sommes sur Contacts WP_List_Table et tentons de * trier par adresse électronique ou numéro de téléphone. Si tel est le cas, modifiez la requête Posts pour trier par * cette clé méta personnalisée * * @param array $ vars Variables de requête * @return array Nouvelles variables de requête * / function orderby_sortable_table_columns ($ vars) // Ne faites rien si nous le sommes. pas sur le type de message personnalisé du contact si ('contact'! = $ vars ['post_type']) renvoie $ vars; // Ne fait rien si aucun paramètre orderby n'est défini si (! Isset ($ vars ['orderby'])) return $ vars; // Vérifie si le paramètre orderby correspond à l'une de nos colonnes triables si ($ vars ['orderby'] == 'adresse_email' OU $ vars ['orderby'] == 'numéro_phone') // Ajoute les paramètres orderby par meta_value et meta_key à la requête $ vars = array_merge ($ vars, array ('meta_key' => $ vars ['orderby'], 'orderby' => 'meta_value',));  return $ vars;  

Cette fonction vérifie que nous visualisons notre Contacts Type de message personnalisé, et si ainsi qu'un commandé par paramètre a été mis en correspondance soit adresse électronique ou numéro de téléphone. Ceux-ci sont définis si l'utilisateur a cliqué sur une colonne de la table des contacts pour la commander par numéro de téléphone ou adresse électronique..

Cliquons dans la colonne Adresse électronique et nous verrons que les résultats sont ordonnés correctement:

Cliquez à nouveau pour inverser l'ordre des résultats:

Suivant…

Dans le prochain article, nous allons étendre les fonctionnalités de filtrage et de recherche, nous permettant de rechercher les données stockées dans nos champs personnalisés avancés..