Crea un CRM semplice in WordPress aggiunta di colonne a WP_List_Table

Abbiamo cercato come creare un semplice sistema CRM in WordPress. Nell'ultima parte di questa serie, abbiamo utilizzato Campi personalizzati avanzati per aggiungere campi personalizzati al nostro tipo di post personalizzato Contatti. Abbiamo imparato come utilizzare i campi personalizzati avanzati e configurarlo per funzionare a livello di programmazione.

Oggi illustreremo come visualizzare i dati memorizzati nei nostri campi personalizzati direttamente nella nostra tabella dei contatti.

Tutto su WP_List_Table

Ogni tipo di post che ha un dashboard utilizza il WP_List_Table classe per rendere la tabella familiare e le sue azioni associate:

Per impostazione predefinita, WordPress mostrerà le seguenti colonne:

  • checkbox (usato per selezionare / deselezionare i post, che possono quindi essere applicati ad essi)
  • titolo
  • autore
  • Commenti
  • Data

Per noi Contatto tipo di messaggio personalizzato, questo non è molto utile se vogliamo vedere rapidamente i dettagli chiave a colpo d'occhio, come il numero di telefono o la foto del contatto.

WordPress fornisce un filtro e un'azione che può essere utilizzata per aggiungere nuove colonne al file WP_List_Table e determinare il suo output per ogni post.

Iniziamo aggiungendo il manage_edit- post_type _columns filtra il nostro costrutto di classe plugin. Post_type sarà il nome del nostro Post Type, che in questo caso è contatto:

/ ** * Costruttore. Chiamato quando il plugin è inizializzato * / 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')); 

Abbiamo anche bisogno di definire il nostro add_table_columns () funzione, che indica a WordPress i nomi delle nostre colonne aggiuntive che vorremmo visualizzare nella nostra tabella Contatti. Questa funzione accetta un array di colonne esistenti, che possiamo estendere aggiungendo le nostre colonne di tabella personalizzate.

/ ** * Aggiunge colonne di tabella ai contatti WP_List_Table * * @param array $ colonne Colonne esistenti * @return array Nuove colonne * / funzione add_table_columns ($ colonne) $ columns ['email_address'] = __ ('Indirizzo email', 'tuts-crm'); $ columns ['phone_number'] = __ ('Numero di telefono', 'tuts-crm'); $ columns ['photo'] = __ ('Foto', 'tuts-crm'); restituire $ colonne; 

Ci assicuriamo che i tasti dell'array corrispondano ai nomi dei campi personalizzati di ACF. Se hai campi diversi, assicurati che i nomi delle tue colonne corrispondano ai tuoi campi 'fnome ambientazione.

Guarda il tuo Contatti tabella facendo clic su Contatti nel menu del pannello di WordPress e vedrai le nostre nuove colonne:

Tuttavia, non ci sono dati visualizzati per ogni contatto nella tabella. Abbiamo bisogno di aggiungere il manage_ post_type _posts_custom_column azione per il nostro costruttore di classi plugin. Post_type sarà di nuovo il nome del nostro post Type, che in questo caso è contatto:

/ ** * Costruttore. Chiamato quando il plugin è inizializzato * / 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); 

Abbiamo anche bisogno di definire il nostro output_table_columns_data () funzione, che indica a WordPress cosa visualizzare per ogni combinazione di contatti e colonne. Perché ci siamo assicurati che i nostri nomi delle chiavi delle colonne corrispondessero al nostro ACF Nomi dei campi, questo semplifica la nostra codifica. I campi personalizzati avanzati hanno a get_field () funzione, che accetta entrambi Nome del campo e Post parametri ID per recuperare il valore memorizzato:

/ ** * Emette i dati del campo Contatto personalizzati, in base alla colonna richiesta * * @param stringa $ columnName Nome chiave colonna * @param int $ post_id ID post * / funzione output_table_columns_data ($ columnName, $ post_id) echo get_field ($ columnName, $ post_id); 

Ricarica la tua tabella Contatti e vedrai i tuoi campi personalizzati:

A seconda della configurazione di PHP, il Foto la colonna sarà vuota o emetterà un avviso PHP:

Il campo immagine in Advanced Custom Fields restituisce una matrice durante l'utilizzo get_field (), che comprende i dettagli dell'immagine e l'URL, la larghezza e l'altezza di ciascuna immagine registrata (le dimensioni di un'immagine registrata sono in genere basate sui Temi e Plugin installati).

Modifichiamo la nostra funzione per produrre i dati dell'array giusto per visualizzare un'immagine:

/ ** * Emette i dati del campo Contatto personalizzati, in base alla colonna richiesta * * @param stringa $ columnName Nome chiave colonna * @param int $ post_id ID post * / funzione output_table_columns_data ($ columnName, $ post_id) // Field $ field = get_field ($ columnName, $ post_id); if ('foto' == $ columnName) echo '';  else // Campo di output echo $ campo; 

Ricarica la tua tabella dei contatti e dovresti visualizzare la foto di ciascun contatto:

Colonne ordinabili

Che cosa succede se abbiamo bisogno di ordinare rapidamente i nostri contatti per nome, numero di telefono o indirizzo e-mail? Possiamo già ordinare la colonna del nome (o, piuttosto, del titolo), ma al momento non ci sono funzionalità per dire a WordPress come ordinare sul nostro numero di telefono e colonne di indirizzo email.

Torna al costruttore del nostro plugin. Abbiamo bisogno di aggiungere il manage_ post_type _posts_custom_column filtra il costrutto della nostra classe di plugin, per dire a WordPress che vogliamo abilitare certe colonne per essere ordinabili. Post_type sarà ancora il nome del nostro Post Type, che in questo caso è contatto:

/ ** * Costruttore. Chiamato quando il plugin è inizializzato * / 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')); 

Come con le nostre precedenti azioni e filtri, abbiamo anche bisogno di definire il nostro define_sortable_table_columns () funzione, che indica a WordPress quali colonne possono essere ordinabili:

/ ** * Definisce quale colonna del contatto sono ordinabili * * @param array $ colonne Esistenti colonne ordinabili * @return array Nuove colonne ordinabili * / funzione define_sortable_table_columns ($ colonne) $ columns ['email_address'] = 'email_address'; $ columns ['phone_number'] = 'numero_telefono'; restituire $ colonne; 

Passa il cursore del mouse sopra il Indirizzo email e Numero di telefono colonne, e vedrai apparire una freccia, mostrandoci che possiamo ordinare i dati nella colonna pertinente:

In questo momento, facendo clic sull'intestazione della colonna per ordinare i suoi dati, non verrà fatto nulla, come ordinato da il parametro impostato nell'URL non è quello che riconoscerà WordPress.

Nel costruttore del nostro plugin, aggiungiamo un filtro su richiesta metodo, e quindi definire la nostra funzione per verificare se stiamo cercando di ordinare da una colonna personalizzata (e in tal caso, modificare la query di post in modo che WordPress possa capirlo):

/ ** * Costruttore. Chiamato quando il plugin è inizializzato * / 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')); 

Perché il richiesta il filtro gira su ogni pagina caricata da WordPress (sia il frontend web che l'interfaccia dashboard di WordPress), vogliamo minimizzare la frequenza con cui viene chiamato. Lo facciamo aggiungendo il filtro solo se siamo in Amministrazione di WordPress (is_admin ()).

Quindi, definiamo il nostro orderby_sortable_table_columns () funzione:

/ ** * Ispeziona la richiesta per verificare se siamo nella WP_List_Table Contatti e se tenti di * ordinare per indirizzo email o numero di telefono. In tal caso, modifica la query Posts per ordinare per * quella meta chiave personalizzata * * @param array $ vars Richiedi variabili * @return array Nuove variabili di richiesta * / function orderby_sortable_table_columns ($ vars) // Non fare nulla se siamo non sul contatto Tipo di messaggio personalizzato se ('contact'! = $ vars ['post_type']) restituisce $ vars; // Non fare nulla se non è impostato alcun parametro orderby se (! Isset ($ vars ['orderby'])) restituisce $ vars; // Verifica se il parametro orderby corrisponde a una delle nostre colonne ordinabili if ($ vars ['orderby'] == 'indirizzo_email' OR $ vars ['orderby'] == 'numero_telefono') // Aggiungi ordine dei parametri meta_value e meta_key alla query $ vars = array_merge ($ vars, array ('meta_key' => $ vars ['orderby'], 'orderby' => 'meta_value',));  return $ vars;  

Questa funzione controlla che stiamo visualizzando il nostro Contatti Tipo di messaggio personalizzato e, in tal caso, a ordinato da parametro è stato impostato corrispondente indirizzo email o numero di telefono. Questi sono impostati se l'utente ha fatto clic su una colonna nella tabella Contatti per ordinare per numero di telefono o indirizzo e-mail.

Facciamo clic sulla colonna Indirizzo email e vedremo i risultati ordinati in modo corretto:

Cliccandolo di nuovo si inverte l'ordine dei risultati:

Avanti il ​​prossimo…

Nel prossimo articolo, estenderemo il filtro e la funzionalità di ricerca, consentendoci di cercare i dati memorizzati all'interno dei nostri campi personalizzati avanzati.