Share
La scorsa settimana abbiamo introdotto come creare meta box personalizzati all'interno del post-editor e salvare i dati che hai inserito. Ma quali sono alcune applicazioni pratiche di questa tecnica? Oggi l'obiettivo è di esaminare tre esempi reali di utilizzo di meta box personalizzate per migliorare la pagina di post.
Nell'articolo introduttivo, hai imparato tutto su come implementare i meta-box e salvare / pulire i dati che contengono. Che bello! Ma è il momento di andare oltre le informazioni concettuali e mettere quelle meta box personalizzate per funzionare.
Lo scenario: Gestisci un sito Web che pubblica principalmente contenuti di ispirazione. Una delle cose che fai costantemente è mettere le virgolette all'inizio di ogni post. Per separare queste citazioni dal contenuto, devi spostarle in una meta-box personalizzata.
Nell'articolo "how to", hai imparato come implementare le meta box, ma ecco una rapida recensione.
Agganciare una funzione nel add_meta_boxes che contiene una chiamata al add_meta_box funzione.
Crea una funzione con lo stesso nome di $ callback Specificato in add_meta_box. Questo è il pezzo che visualizza effettivamente il contenuto del meta-box.
Accentsconagua
ID, '_cd_quote_content', vero); $ author = get_post_meta ($ post-> ID, '_cd_quote_author', vero); $ date = get_post_meta ($ post-> ID, '_cd_quote_date', true); // Nonce per verificare l'intenzione più tardi wp_nonce_field ('save_quote_meta', 'quote_nonce'); ?>
Agganciare una funzione in save_post che prima gestisce la verifica delle autorizzazioni e delle intenzioni e quindi pulisce e salva i dati.
array ()); if (isset ($ _POST ['_ cd_quote_content'])) update_post_meta ($ id, '_cd_quote_content', wp_kses ($ _POST ['_ cd_quote_content'], $ consentito)); if (isset ($ _POST ['_ cd_quote_author'])) update_post_meta ($ id, '_cd_quote_author', esc_attr (strip_tags ($ _POST ['_ cd_quote_author']))); if (isset ($ _POST ['_ cd_quote_date'])) update_post_meta ($ id, '_cd_quote_date', esc_attr (strip_tags ($ _POST ['_ cd_quote_date']))); ?>
Potremmo usare i dati salvati nelle nostre meta-box modificando i file modello del nostro tema. Ma è troppo facile. Per mantenere modulare il nostro codice preventivo (un file di plugin), utilizzeremo i hook del filtro, parte dell'API del plugin. I ganci filtro sono leggermente diversi dalle azioni. Quando si aggancia un filtro, lo scopo è, nella maggior parte dei casi, di modificare il modo in cui un pezzo di contenuto viene visualizzato su una pagina. Nel nostro caso, ci collegheremo il contenuto, e se siamo su una singola pagina del post che ha una citazione, la aggiungeremo sopra.
Un altro modo di pensare all'azione e al filtro è che tu eco cose fuori nelle azioni (ad esempio wp_head, vedere la sezione 2), ma con i filtri si prendono in una o più variabili, modificale, quindi ritorno loro.
Per mostrare la nostra citazione, ci collegheremo il contenuto, che passa una variabile di default: il contenuto di un determinato post. All'interno della nostra funzione hooked, ci assicureremo di essere su un singolo post e, se non lo siamo, restituiremo il contenuto in modo corretto (senza modifiche).
Il prossimo, avremo il nostro $ postale variabile. Perché siamo nel giro, chiamiamo semplicemente $ globale post. Poi riceveremo la nostra citazione, se nessun valore torna, sappiamo che non è stata inserita alcuna citazione e restituiamo il contenuto ancora una volta senza modifiche.
ID, '_cd_quote_content', vero); // cauzione se non abbiamo una citazione; if (empty ($ quote)) restituisce $ content; ?>
Ora che ci siamo assicurati di essere su un singolo post e abbiamo effettivamente una citazione, ci occupiamo di mettere insieme le cose. Per prima cosa chiameremo il nostro autore e le sue date via get_post_meta (), allora possiamo iniziare a costruire una stringa nel $ out variabile. Per prima cosa aggiungeremo un e la nostra citazione. Quindi controlliamo se il campo dell'autore è stato compilato. Se fosse, inizieremo un paragrafo per l'autore, quindi controlleremo se c'è una data e aggiungiamola al paragrafo. Infine, aggiungeremo la nostra chiusura etichetta.
ID, '_cd_quote_content', vero); // cauzione se non abbiamo una citazione; if (empty ($ quote)) restituisce $ content; // Assembla la nostra citazione $ author = get_post_meta ($ post-> ID, '_cd_quote_author', vero); $ date = get_post_meta ($ post-> ID, '_cd_quote_date', true); $ out = ''. $ Quote; if (! empty ($ author)) $ out. = ''; ?>-'. $ Autore; if (! empty ($ date)) $ out. = '('. $ date. ')'; $ out. = '
'; $ out. = '
Ora il passo più cruciale: restituire la combinazione del nostro nuovo prodotto $ out stringa che contiene la citazione e il contenuto originale trovato in $ content.
ID, '_cd_quote_content', vero); // cauzione se non abbiamo una citazione; if (empty ($ quote)) restituisce $ content; // Assembla la nostra citazione $ author = get_post_meta ($ post-> ID, '_cd_quote_author', vero); $ date = get_post_meta ($ post-> ID, '_cd_quote_date', true); $ out = ''. $ Quote; if (! empty ($ author)) $ out. = ''; // Restituisce i valori: prima citazione, poi il contenuto restituisce $ out. $ Content; ?>-'. $ Autore; if (! empty ($ date)) $ out. = '('. $ date. ')'; $ out. = '
'; $ out. = '
Questo è tutto! Puoi vedere il risultato.
Lo scenario: Hai una comunità attiva di lettori che condividono regolarmente i tuoi articoli su Facebook. È fantastico e invia molto traffico a modo tuo. Ma inizi a notare che le immagini mostrate con i tuoi articoli su Facebook non sono l'ideale. Inoltre, non sei contento di come stanno uscendo i titoli dei tuoi post. La soluzione consiste nell'aggiungere meta tag Open Graph per controllare come vengono visualizzati i tuoi articoli. Invece di lasciare che questo si occupi automaticamente, decidi di implementare una meta box personalizzata per prenderti cura di esso.
Probabilmente hai già questo down, ma ecco il codice per far funzionare la tua meta-box.
ID, '_cd_opengraph_title', vero); $ desc = get_post_meta ($ post-> ID, '_cd_opengraph_desc', vero); $ image = get_post_meta ($ post-> ID, '_cd_opengraph_image', vero); // Aggiungi un campo nonce wp_nonce_field ('save_opengraph_meta', 'opengraph_nonce'); ?>
Le immagini piccole e quadrate funzionano meglio.
Per far funzionare il pulsante "Carica immagine", dovremo aggiungere un po 'di javascript che dirotta l'uploader di WordPress integrato. Ciò significa che utilizzeremo ancora un altro hook di azione. Questa volta è admin_print_script - $ page.
Quando aggiungi script e / o stili all'area di amministrazione di WordPress, c'è una regola d'oro: aggiungi solo gli script / stili dove ti servono. Ciò impedisce al tuo plugin / tema di rompere qualcos'altro in caso di incidente. admin_print_scripts - $ page consente di inserire solo script (tramite la funzione wp_enqueue_script) solo su $ page specificato. In questo caso, dobbiamo aggiungere il nostro script al post.php e post-new.php schermi. Ciò richiede agganciare la stessa funzione in entrambi.
E il javascript.
jQuery (document) .ready (function () var ogfield = null; jQuery ('# cdog-thickbox') .click (function () ogfield = jQuery ('input # og-image') .attr ('nome') ); tb_show (", 'media-upload.php? type = image & TB_iframe = true'); return false;); window.send_to_editor_old = window.send_to_editor; window.send_to_editor = function (html) var ogimg; if (ogfield ! = null) ogimg = jQuery ('img', html) .attr ('src'); jQuery ('input # og-image') .val (ogimg); tb_remove (); ogfield = null; else window.send_to_editor_old (html);;); Per prima cosa ci assicuriamo che l'uploader di thickbox venga visualizzato quando si fa clic sul pulsante, e impostiamo una variabile che indica a WordPress che era il nostro pulsante su cui è stato fatto clic. Quindi, salviamo il window.send_to_editor funziona con un nuovo nome. Questa è la funzione che inserisce effettivamente l'immagine HTML nell'area di modifica del post. Stiamo per dirottare questa funzione per inviare l'attributo src al nostro campo modulo, ma solo se lo thickbox è stato richiamato dal nostro pulsante.
Ci collegheremo al wp_head azione per aggiungere i nostri meta tag nel sezione. Per prima cosa ci assicureremo di essere su una singola pagina di post, quindi di configurare il nostro $ postale variabile. $ postale non dovrebbe essere vuoto a questo punto in quanto WordPress ha già deciso quale tipo di oggetto il suo rendering e quale file di modello ha bisogno di utilizzare. Ma, nel caso lo sia, recupereremo post con get_queried_object ().
get_queried_object (); ?>
Successivamente possiamo passare attraverso ogni variabile di Open Graph, recuperando tutto con get_post_custom (), e, se è lì, riecheggia nella sezione principale della nostra pagina.
get_queried_object (); $ values = get_post_custom ($ post-> ID); if (isset ($ values ['_ cd_opengraph_title'])) echo ''. "\ n"; if (isset ($ values ['_ cd_opengraph_desc'])) echo ''. "\ N"; if (isset ($ values ['_ cd_opengraph_image'])) echo ''. "\ N"; ?>
Lo scenario: Fai molto affidamento sul modello di pagina della barra laterale di Twenty Eleven. Ma vuoi essere in grado di alternare tra barre laterali sinistra e destra per ogni pagina.
Il seguente codice sarebbe qualcosa di meglio lasciato nel file delle funzioni di un tema. Detto questo, perché stiamo usando un plugin qui, possiamo collegarci al dentro e con il nostro controllo delle funzioni assicuratevi che Twenty Eleven sia il tema attuale. Se non lo è, disattiveremo il plug-in. Innanzitutto, definiremo una costante contenente l'URL della directory in cui risiede il nostro plug-in.
Stessa routine di prima: aggiungi la meta-box, esegui il rendering e salva i dati. Questa volta, tuttavia, mostreremo la nostra meta-box sulla schermata di modifica per le pagine. Utilizzeremo anche una funzione di wordpress elegante chiamata get_template_directory_uri, che restituisce una stringa contenente l'URI della directory per il tema corrente. Lo useremo per prendere in prestito alcune immagini che Twenty Eleven utilizza nella pagina delle opzioni del tema. Utilizzeremo anche la costante definita in precedenza per aggiungere un'immagine della nostra.
ID, '_cd_post_layout', vero); // Imposta la nostra variabile di layout, anche sui nuovi post se (vuoto ($ layout)) $ layout = 'default'; // Directory dei temi per prendere in prestito immagini 2011 $ dir = get_template_directory_uri (); wp_nonce_field ('save_post_layout', 'layout_nonce'); ?> Per migliorare un po 'la nostra meta-box, dovremo aggiungere anche il nostro foglio di stile. Ricorda admin_print_scripts - $ page dal secondo scenario sopra? Ha un fratello, admin_print_styles - $ page, che, come suggerisce il nome, consente di aggiungere un foglio di stile all'amministratore wordpress su pagine specifiche. Dovremo inserire questa funzione per post.php e post-new.php. Useremo anche wp_enqueue_style (); funziona allo stesso modo di wp_enqueue_script (), che abbiamo usato nel secondo esempio sopra.
E il CSS.
div.cd-layout width: 200px; float: sinistra; input del layout div.cd display: block; # cd-sidebar-pos .clearfix: after clear: both; contenuto: "; display: block; font-size: 0; line-height: 0; visibility: hidden; width: 0; height: 0; # cd-sidebar-pos label span display: block; margin-top: 5px;
Twenty Eleven realizza il posizionamento della barra laterale agganciandosi a un filtro chiamato body_class. Questo fa parte della funzione chiamata , che, se hai già progettato un tema, probabilmente hai usato. Se il layout predefinito è due colonne, Twenty Eleven aggiunge uno dei due elementi aggiuntivi a body_class: barra laterale destra o barra laterale sinistra. Puoi vedere il codice per questo nel tema inc cartella nel file theme-options.php.
Anche il nostro codice si aggancia body_class. Innanzitutto, ci assicureremo di essere su una pagina e che quella pagina sta utilizzando il Modello della barra laterale. Quindi otterremo il $ postale variabile o impostarlo se è vuoto. Notare due argomenti aggiuntivi per add_filter. 99 è la priorità. Vogliamo che questo si accenda per ultimo, quindi usiamo un numero più alto. 1 è il numero o gli argomenti da inviare alla nostra funzione.
body_class invierà una matrice di tutti gli elementi che andranno nel body_class () funzione di uscita. Da qui, abbiamo solo bisogno di ottenere i nostri meta-valori. Se il nostro valore è 'giusto', cercheremo "left-sidebar" nell'array della classe body. Se è lì, lo disinseriremo e lo sostituiremo con "barra di destra". Viceversa se il nostro valore è lasciato.
ID, '_cd_post_layout', vero); // se stiamo usando il layout giusto, aggiungi if ($ layout == 'right') $ key = array_search ('left-sidebar', $ classes); if ($ key) unset ($ classes [$ key]); $ classes [] = 'right-sidebar'; elseif ($ layout = 'left') $ key = array_search ('right-sidebar', $ classes); if ($ key) unset ($ classes [$ key]); $ classes [] = 'left-sidebar'; restituisce $ classes; ?> Quanto sopra funzionerebbe, ma abbiamo omesso un piccolo dettaglio. Se un utente avesse le opzioni del tema di Twenty Eleven impostate su un display a una colonna, nessuna delle opzioni nella nostra meta-box funzionerebbe. Quindi, consente di modificare add_meta_box chiama un po ' Innanzitutto otterremo le opzioni di Twenty Eleven, quindi ci assicureremo che l'opzione di layout del tema non sia impostata su una colonna. Se il tema è impostato su una colonna, non aggiungeremo la meta-box.
Come puoi immaginare, ci sono molti altri usi per i meta box personalizzati? questi sono solo alcuni esempi pratici per far funzionare la tua mente. Se combinati con tipi di post personalizzati, consentono di creare schermate di modifica estremamente personalizzate. La vera forza dei meta box personalizzati, tuttavia, risiede nel modo in cui i progettisti di temi e gli sviluppatori di plug-in possono creare interfacce più intuitive per le impostazioni di post o pagina.
Speriamo ti sia piaciuto il tutorial!
