Maak een eenvoudige CRM in WordPress Kolommen toevoegen aan WP_List_Table

We hebben gekeken hoe een eenvoudig CRM-systeem kan worden gemaakt in WordPress. In het laatste deel van deze serie hebben we geavanceerde aangepaste velden gebruikt om aangepaste velden toe te voegen aan ons aangepast aangepast berichttype. We hebben geleerd om aangepaste aangepaste velden te gebruiken en deze te configureren om programmatisch te werken.

Vandaag bespreken we hoe we de gegevens die zijn opgeslagen in onze aangepaste velden kunnen weergeven in onze tabel met contactpersonen.

Alles over WP_List_Table

Elk berichttype met een dashboard gebruikt de WP_List_Table class om de vertrouwde tabel en de bijbehorende acties weer te geven:

WordPress geeft standaard de volgende kolommen weer:

  • selectievakje (gebruikt om berichten te selecteren / deselecteren, waarop dan acties kunnen worden toegepast)
  • titel
  • schrijver
  • opmerkingen
  • datum

Voor onze Contact aangepast berichttype, dit is niet erg handig als we snel belangrijke details in één oogopslag willen zien, zoals het telefoonnummer of de foto van de contactpersoon.

WordPress biedt een filter en een actie die kan worden gebruikt om nieuwe kolommen toe te voegen aan de WP_List_Table en bepaal de uitvoer voor elke post.

Laten we beginnen met het toevoegen van de manage_edit- POST_TYPE _columns filter naar de constructie van onze plugin-klasse. POST_TYPE wordt de naam van ons berichttype, wat in dit geval het geval is contact:

/ ** * Constructor. Wordt aangeroepen wanneer de plugin wordt geïnitialiseerd * / function __construct () add_action ('init', array ($ this, 'register_custom_post_type')); add_action ('plugins_loaded', array ($ this, 'acf_fields')); add_filter ('manage_edit-contact_kolommen', array ($ this, 'add_table_columns')); 

We moeten ook onze add_table_columns () functie, die WordPress de namen van onze extra kolommen vertelt die we willen weergeven in onze tabel met contactpersonen. Deze functie accepteert een reeks bestaande kolommen, die we kunnen uitbreiden door onze aangepaste tabelkolommen toe te voegen.

/ ** * Voegt tabelkolommen toe aan de Contactpersonen WP_List_Table * * @param array $ kolommen Bestaande kolommen * @return array Nieuwe kolommen * / functie add_table_columns ($ kolommen) $ columns ['email_address'] = __ ('Email Address', 'tuts-crm'); $ columns ['phone_number'] = __ ('Telefoonnummer', 'tuts-crm'); $ columns ['photo'] = __ ('Photo', 'tuts-crm'); return $ kolommen; 

We zorgen ervoor dat de arraysleutels overeenkomen met de aangepaste veldnamen van ACF. Als u verschillende velden gebruikt, moet u ervoor zorgen dat uw kolomsleutelnamen overeenkomen met de f-waarden van uw veldenveldnaam omgeving.

Bekijk je Contacten tafel door op te klikken Contacten in het WordPress dashboard-menu, en je zult onze nieuwe kolommen zien:

Er worden echter geen gegevens weergegeven voor elk contact in de tabel. We moeten het toevoegen manage_ POST_TYPE _posts_custom_column actie voor de constructor van onze plugin-klasse. POST_TYPE wordt opnieuw de naam van ons berichttype, wat in dit geval is contact:

/ ** * Constructor. Wordt aangeroepen wanneer de plugin wordt geïnitialiseerd * / function __construct () add_action ('init', array ($ this, 'register_custom_post_type')); add_action ('plugins_loaded', array ($ this, 'acf_fields')); add_filter ('manage_edit-contact_kolommen', array ($ this, 'add_table_columns')); add_action ('manage_contact_posts_custom_column', array ($ this, 'output_table_columns_data'), 10, 2); 

We moeten ook onze output_table_columns_data () functie, die WordPress vertelt wat voor elke contact- en kolomcombinatie moet worden weergegeven. Omdat we ervoor hebben gezorgd dat onze kolomsleutelnamen overeenkomen met onze ACF Veldnamen, dit maakt onze codering eenvoudiger. Geavanceerde aangepaste velden heeft een get_field () functie, die beide accepteert Veldnaam en Post ID-parameters om de opgeslagen waarde op te halen:

/ ** * Voert onze aangepaste veldgegevens voor Contact uit, op basis van de gevraagde kolom * * @param string $ columnName Column Key Name * @param int $ post_id Post ID * / function output_table_columns_data ($ columnName, $ post_id) echo get_field ($ columnName, $ post_id); 

Laad uw tabel Contactpersonen opnieuw en u ziet uw aangepaste velden:

Afhankelijk van uw PHP-configuratie, de Foto kolom is leeg of geeft een PHP-melding:

Het afbeeldingsveld in Geavanceerde aangepaste velden retourneert een array bij gebruik get_field (), bestaande uit de afbeeldingsdetails en de URL, breedte en hoogte van elk geregistreerd afbeeldingsformaat (een geregistreerde afbeeldingsgrootte is meestal gebaseerd op uw geïnstalleerde thema's en plug-ins).

Laten we onze functie aanpassen om de juiste arraygegevens uit te voeren om een ​​afbeelding weer te geven:

/ ** * Voert onze aangepaste veldgegevens voor Contact uit, op basis van de gevraagde kolom * * @param string $ columnName Column Key Name * @param int $ post_id Post ID * / function output_table_columns_data ($ columnName, $ post_id) // Field $ field = get_field ($ columnName, $ post_id); if ('photo' == $ columnName) echo '';  else // Uitvoerveld echo $ veld; 

Laad uw tabel met contactpersonen opnieuw en u zou de foto van elke contactpersoon moeten zien:

Sorteerbare kolommen

Wat als we onze contactpersonen snel op naam, telefoonnummer of e-mailadres moeten sorteren? We kunnen al sorteren op de naam (of liever de titel) kolom, maar op dit moment is er geen functionaliteit om WordPress te vertellen hoe te sorteren op ons telefoonnummer en e-mailadres kolommen.

Terug naar de constructor van onze plug-in. We moeten het toevoegen manage_ POST_TYPE _posts_custom_column filter naar de constructie van onze plugin-klasse, om WordPress te laten weten dat we bepaalde kolommen willen kunnen sorteren. POST_TYPE wordt weer de naam van ons berichttype, wat in dit geval is contact:

/ ** * Constructor. Wordt aangeroepen wanneer de plugin wordt geïnitialiseerd * / function __construct () add_action ('init', array ($ this, 'register_custom_post_type')); add_action ('plugins_loaded', array ($ this, 'acf_fields')); add_filter ('manage_edit-contact_kolommen', array ($ this, 'add_table_columns')); add_action ('manage_contact_posts_custom_column', array ($ this, 'output_table_columns_data'), 10, 2); add_filter ('manage_edit-contact_sortable_columns', array ($ this, 'define_sortable_table_columns')); 

Net als bij onze eerdere acties en filters, moeten we ook onze define_sortable_table_columns () functie, die WordPress vertelt welke kolommen sorteerbaar zijn:

/ ** * Bepaalt welke contactcategorieën kunnen worden gesorteerd * * @param array $ -kolommen Bestaande sorteerbare kolommen * @return-array Nieuwe sorteerbare kolommen * / function define_sortable_table_columns ($ columns) $ columns ['email_address'] = 'email_address'; $ columns ['phone_number'] = 'telefoonnummer'; return $ kolommen; 

Beweeg de muiscursor over de E-mailadres en Telefoonnummer kolommen, en u ziet een pijl verschijnen die ons laat zien dat we kunnen sorteren op de gegevens in de relevante kolom:

Op dit moment zal klikken op de kolomkop om te sorteren op zijn gegevens niets doen, zoals de orderby parameter die is ingesteld in de URL is niet een die WordPress zal herkennen.

In de constructor van onze plug-in, laten we een filter toevoegen aan de verzoek methode, en definieer vervolgens onze functie om te controleren of we proberen te sorteren op een aangepaste kolom (en zo ja, de vraag voor berichten aan te passen zodat WordPress het kan begrijpen):

/ ** * Constructor. Wordt aangeroepen wanneer de plugin wordt geïnitialiseerd * / function __construct () add_action ('init', array ($ this, 'register_custom_post_type')); add_action ('plugins_loaded', array ($ this, 'acf_fields')); add_filter ('manage_edit-contact_kolommen', array ($ this, 'add_table_columns')); add_action ('manage_contact_posts_custom_column', array ($ 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', array ($ this, 'orderby_sortable_table_columns')); 

Omdat het verzoek filter draait op elke pagina laden van WordPress (of de frontend-website of WordPress dashboard-interface), we willen minimaliseren hoe vaak het wordt genoemd. Dit doen we door alleen het filter toe te voegen als we in het WordPress-beheer zijn (is_admin ()).

Laten we vervolgens onze definiëren orderby_sortable_table_columns () functie:

/ ** * Inspecteer de aanvraag om te zien of we op de Contactpersonen WP_List_Table staan ​​en proberen * te sorteren op e-mailadres of telefoonnummer. Als dit het geval is, wijzigt u de pagerquery om te sorteren op * die aangepaste meta-sleutel * * @param-array $ vars Verzoekvariabelen * @return-array Nieuwe aanvraagvariabelen * / functie orderby_sortable_table_columns ($ vars) // doe niets als we zijn niet op de contactpersoon Aangepast berichttype if ('contact'! = $ vars ['post_type']) retourneert $ vars; // Doe niets als geen parameter orderby wordt ingesteld als (! Isset ($ vars ['orderby'])) $ vars retourneert; // Controleer of de parameter orderby overeenkomt met een van onze sorteerbare kolommen if ($ vars ['orderby'] == 'email_address' OR $ vars ['orderby'] == 'phone_number') // order toevoegen met meta_value en meta_key parameters naar de vraag $ vars = array_merge ($ vars, array ('meta_key' => $ vars ['orderby'], 'orderby' => 'meta_value',));  retourneer $ vars;  

Deze functie controleert of we onze bekijken Contacten Aangepast berichttype en zo ja, een orderby parameter is ook overeenkomend ingesteld e-mailadres of telefoonnummer. Deze worden ingesteld als de gebruiker op een kolom in de tabel met contactpersonen heeft geklikt om te bestellen op telefoonnummer of e-mailadres.

Klik op de kolom E-mailadres en we zullen zien dat de resultaten correct zijn geordend:

Als u er nog een keer op klikt, wordt de volgorde van de resultaten omgekeerd:

Volgende…

In het volgende artikel gaan we de filter- en zoekfunctionaliteit uitbreiden, zodat we de gegevens kunnen doorzoeken die zijn opgeslagen in onze geavanceerde aangepaste velden.