Erstellen Sie ein einfaches CRM in WordPress Hinzufügen von Spalten zu WP_List_Table

Wir haben untersucht, wie Sie ein einfaches CRM-System in WordPress erstellen können. Im letzten Teil dieser Serie haben wir erweiterte benutzerdefinierte Felder verwendet, um benutzerdefinierte Felder zu unserem benutzerdefinierten Kontakttyp "Kontakte" hinzuzufügen. Wir haben gelernt, wie Sie mit Advanced Custom Fields arbeiten und programmieren können.

Heute erfahren Sie, wie Sie die in unseren benutzerdefinierten Feldern gespeicherten Daten direkt in unserer Kontakttabelle anzeigen können.

Alles über WP_List_Table

Jeder Beitragstyp, der über ein Dashboard verfügt, verwendet die WP_List_Table Klasse zum Rendern der bekannten Tabelle und der zugehörigen Aktionen:

Standardmäßig zeigt WordPress die folgenden Spalten an:

  • Ankreuzfeld (dient zum Auswählen / Abwählen von Beiträgen, auf die dann Aktionen angewendet werden können)
  • Titel
  • Autor
  • Bemerkungen
  • Datum

Für unser Kontakt Dies ist nicht sehr nützlich, wenn Sie wichtige Details wie die Telefonnummer oder das Foto des Kontakts auf einen Blick sehen möchten.

WordPress bietet einen Filter und eine Aktion, mit der neue Spalten hinzugefügt werden können WP_List_Table und bestimmen Sie die Ausgabe für jeden Beitrag.

Beginnen wir mit dem Hinzufügen der manage_edit- POST_TYPE _Spalten filtern Sie in das Konstrukt unserer Plugin-Klasse. POST-TYP wird der Name unseres Posttyps sein, der in diesem Fall ist Kontakt:

/** * Konstrukteur. Wird aufgerufen, wenn das Plugin initialisiert wird * / 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', array ($ this, 'add_table_columns')); 

Wir müssen auch unsere definieren add_table_columns () Diese Funktion teilt WordPress die Namen unserer zusätzlichen Spalten mit, die wir in unserer Kontakttabelle anzeigen möchten. Diese Funktion akzeptiert ein Array vorhandener Spalten, das Sie durch Hinzufügen unserer benutzerdefinierten Tabellenspalten erweitern können.

/ ** * Fügt Tabellenspalten zu den Kontakten hinzu WP_List_Table * * @param array $ column Vorhandene Spalten * @return array Neue Spalten * / function add_table_columns ($ column) $ column ['email_address'] = __ ('E-Mail-Adresse', 'tuts-crm'); $ column ['phone_number'] = __ ('Telefonnummer', 'tuts-crm'); $ column ['photo'] = __ ('Photo', 'tuts-crm'); $ spalten zurückgeben; 

Wir stellen sicher, dass die Array-Schlüssel mit den benutzerdefinierten Feldnamen von ACF übereinstimmen. Wenn Sie über verschiedene Felder verfügen, stellen Sie sicher, dass die Spaltenschlüsselnamen mit den Feldern 'f übereinstimmenFeldname Rahmen.

Sehen Sie Ihre Kontakte Tabelle durch Klicken auf Kontakte Im WordPress-Dashboard-Menü sehen Sie unsere neuen Spalten:

Es werden jedoch keine Daten für jeden Kontakt in der Tabelle angezeigt. Wir müssen das hinzufügen manage_ POST_TYPE _posts_custom_column Aktion für den Konstruktor unserer Plugin-Klasse. POST-TYP wird wieder der name unseres posttyps sein, was in diesem fall ist Kontakt:

/** * Konstrukteur. Wird aufgerufen, wenn das Plugin initialisiert wird * / 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', array ($ this, 'add_table_columns')); add_action ('manage_contact_posts_custom_column', array ($ this, 'output_table_columns_data'), 10, 2); 

Wir müssen auch unsere definieren output_table_columns_data () Funktion, die WordPress angibt, was für jede Kontakt- und Spaltenkombination angezeigt werden soll. Weil wir sichergestellt haben, dass unsere Spaltenschlüsselnamen mit unserem ACF übereinstimmen Feldnamen, Dies erleichtert die Kodierung. Erweiterte benutzerdefinierte Felder hat eine get_field () Funktion, die beide akzeptiert Feldname und Post ID-Parameter, um den gespeicherten Wert abzurufen:

/ ** * Gibt unsere benutzerdefinierten Kontaktfelddaten aus, basierend auf der angeforderten Spalte * * @param string $ columnName Spaltenschlüsselname * @param int $ post_id Beitrags-ID * / function output_table_columns_data ($ Spaltenname, $ post_id) echo get_field ($ columnName, $ post_id); 

Laden Sie Ihre Kontakttabelle neu, und Sie sehen Ihre benutzerdefinierten Felder:

Abhängig von Ihrer PHP-Konfiguration wird der Foto Die Spalte ist entweder leer oder gibt einen PHP-Hinweis aus:

Das Bildfeld in Advanced Custom Fields gibt bei Verwendung ein Array zurück get_field (), bestehend aus den Bilddetails und der URL, Breite und Höhe jeder registrierten Bildgröße (eine registrierte Bildgröße basiert normalerweise auf Ihren installierten Designs und Plugins).

Lassen Sie uns unsere Funktion ändern, um die richtigen Array-Daten auszugeben, um ein Bild anzuzeigen:

/ ** * Gibt unsere benutzerdefinierten Felddaten aus, basierend auf der angeforderten Spalte * * @param string $ columnName Spaltenschlüsselname * @param int $ post_id Beitrags-ID * / function output_table_columns_data ($ columnName, $ post_id) // Feld $ field = get_field ($ columnName, $ post_id); if ('photo' == $ columnName) echo '';  else // Ausgabefeld echo $ field; 

Laden Sie Ihre Kontakttabelle neu, und Sie sollten das Foto jedes Kontakts sehen:

Sortierbare Spalten

Was ist, wenn wir unsere Kontakte schnell nach Name, Telefonnummer oder E-Mail-Adresse sortieren müssen? Wir können bereits nach der Spalte für den Namen (oder eher nach dem Titel) sortieren, aber im Moment gibt es keine Funktion, die WordPress mitteilt, wie die Spalten für Telefonnummer und E-Mail-Adresse sortiert werden sollen.

Zurück zum Konstruktor unseres Plugins. Wir müssen das hinzufügen manage_ POST_TYPE _posts_custom_column filtern Sie in das Konstrukt unserer Plugin-Klasse, um WordPress mitzuteilen, dass bestimmte Spalten sortierbar sein sollen. POST-TYP wird wieder der Name unseres Posttyps sein, was in diesem Fall ist Kontakt:

/** * Konstrukteur. Wird aufgerufen, wenn das Plugin initialisiert wird * / 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', 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')); 

Wie bei unseren vorherigen Aktionen und Filtern müssen wir auch unsere definieren define_sortable_table_columns () Funktion, die WordPress mitteilt, welche Spalten sortierbar sein können:

/ ** * Legt fest, welche Kontaktspalten sortierbar sind * * @param array $ column Vorhandene sortierbare Spalten * @return array Neue sortierbare Spalten * / Funktion define_sortable_table_columns ($ Spalten) $ Spalten ['email_address'] = 'email_address'; $ column ['phone_number'] = 'phone_number'; $ spalten zurückgeben; 

Bewegen Sie den Mauszeiger über die E-Mail-Addresse und Telefonnummer Spalten, und Sie sehen einen Pfeil, der uns anzeigt, dass wir nach den Daten in der entsprechenden Spalte sortieren können:

Wenn Sie jetzt auf die Spaltenüberschrift klicken, um nach ihren Daten zu sortieren, wird dies nichts tun Sortieren nach Parameter, der in der URL festgelegt ist, wird von WordPress nicht erkannt.

Fügen Sie im Konstruktor unseres Plugins einen Filter für das hinzu anfordern Methode und definieren Sie dann unsere Funktion, um zu prüfen, ob wir versuchen, nach einer benutzerdefinierten Spalte zu sortieren (und wenn ja, ändern Sie die Posts-Abfrage, damit WordPress sie verstehen kann):

/** * Konstrukteur. Wird aufgerufen, wenn das Plugin initialisiert wird * / 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', 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')); 

Weil der anfordern Der Filter wird bei jeder Seitenladung von WordPress ausgeführt (unabhängig davon, ob es sich um die Frontend-Website oder die WordPress-Dashboard-Oberfläche handelt). Wir möchten die Anzahl der Aufrufe minimieren. Wir tun dies, indem wir den Filter nur hinzufügen, wenn wir in der WordPress-Administration sind (is_admin ()).

Als nächstes definieren wir unsere orderby_sortable_table_columns () Funktion:

/ ** * Untersuchen Sie die Anfrage, um zu sehen, ob wir uns in der Kontakte WP_List_Table befinden und versuchen, * nach E-Mail-Adresse oder Telefonnummer zu sortieren. Wenn ja, ändern Sie die Posts-Abfrage, um nach * diesem benutzerdefinierten Metaschlüssel zu sortieren. * * @Param array $ vars Anforderungsvariablen * @return array Neue Anforderungsvariablen * / function orderby_sortable_table_columns ($ vars) // Tun Sie nichts nicht in der Art des benutzerdefinierten Kontakts, wenn if ('contact'! = $ vars ['post_type']) $ vars zurückgibt; // Nichts tun, wenn kein orderby-Parameter gesetzt ist if (! Isset ($ vars ['orderby'])) return $ vars; // Prüfen Sie, ob der Parameter orderby mit einer unserer sortierbaren Spalten übereinstimmt, wenn ($ vars ['orderby'] == 'email_address' ODER $ vars ['orderby'] == 'phone_number') // Fügen Sie orderby-Werte für meta_value und meta_key hinzu zur Abfrage $ vars = array_merge ($ vars, array ('meta_key' => $ vars ['orderby'], 'orderby' => 'meta_value',));  return $ vars;  

Diese Funktion prüft, ob wir unser sehen Kontakte Benutzerdefinierter Beitragstyp und wenn ja, ein Sortieren nach Parameter wurde entweder passend eingestellt E-Mail-Addresse oder Telefonnummer. Diese werden festgelegt, wenn der Benutzer auf eine Spalte in der Kontakttabelle geklickt hat, um nach Telefonnummer oder E-Mail-Adresse zu bestellen.

Klicken Sie auf die Spalte E-Mail-Adresse, um die Ergebnisse korrekt anzuzeigen:

Durch erneutes Klicken wird die Reihenfolge der Ergebnisse umgekehrt:

Als nächstes…

Im nächsten Artikel werden wir die Filter- und Suchfunktion erweitern, sodass wir die in unseren erweiterten benutzerdefinierten Feldern gespeicherten Daten durchsuchen können.