Share
Quando è stato rilasciato WordPress 3.1, è stata introdotta una nuova funzionalità chiamata Post Formats, che ha dato agli autori la possibilità di selezionare uno dei nove formati per i loro post. Gli sviluppatori di temi hanno dovuto aggiungere il supporto per includere ogni formato, nonché alcuni tag e CSS condizionali per trarre vantaggio da ciò che avevano da offrire. Ogni formato potrebbe essere visualizzato sul front-end con un layout e un design diversi, sebbene l'editor visuale in wp-admin non riflettesse questo.
Per questo tutorial, mi concentrerò su come possiamo ottenere il nostro tema per visualizzare il formato Post preventivo in modo che il layout e il design del front-end si riflettano durante la creazione di un post nell'editor visivo.
In tutto, ci sono solo nove formati di post che possono essere supportati da un tema: a parte, galleria, video, Audio, Immagine, stato, collegamento, citazione, Chiacchierare. Puoi leggere di più su tutti i formati di post disponibili in WordPress nell'articolo di Braden Keith Post Formats Inside and Out.
Per prima cosa, assicuriamoci che il nostro tema supporti i formati dei post e stili dell'editor. Tutto ciò che dobbiamo fare è includere quanto segue nel nostro functions.php file:
Accentsconagua
// Questo tema disegna l'editor visuale con editor-style.css in modo che corrisponda allo stile del tema. add_editor_style (); // Aggiungi il supporto per i formati del post quote add_theme_support ('post-formats', array ('quote')); Mancia: Ricorda che quando aggiungi PHP a un file, deve essere all'interno dell'apertura e chiusura ?> i tag o verranno visualizzati solo come HTML invece di essere elaborati come PHP.
Al fine di controllare il modo in cui il nostro Post Post Format verrà visualizzato sul front-end, dobbiamo creare un file chiamato content-quote.php. Questo è il modello di pagina del nostro modello Quote e deve essere inserito nella cartella del nostro tema. Ecco il codice che dobbiamo aggiungere al nostro nuovo file:
>
Questo modello di pagina verrà utilizzato nelle nostre pagine di indice e di archivio e viene spesso chiamato direttamente da index.php file con il seguente codice:
Ecco un esempio di come appare il formato post preventivo nel mio tema Gridiculous per WordPress:
Per ottenere le cose come vogliamo, dobbiamo includere alcuni CSS:
/ * = Citazione ---------------------------------------------- ---------------- * / .format-quote .post-content dimensione font: 18px; altezza della linea: 27px; padding-left: 50px; stile di carattere: corsivo; .format-quote p, .format-quote blockquote margin: 0; .format-quote: before font-family: Georgia, serif; colore: n. 999; blocco di visualizzazione; font-size: 100px; larghezza: 50 px; contenuto: '\ 201C'; altezza: 0; inizio: -40px; posizione: relativa; .format-quote blockquote border: 0; padding: 0; font-size: 18px; colore: # 555; citare text-align: right; stile font: normale; blocco di visualizzazione; margin-bottom: 10px; cite: before content: '\ 2013 \ 00A0';
Il CSS di cui sopra deve essere incluso nel nostro tema style.css file, ma abbiamo anche bisogno di creare un redattore style.css file e aggiungilo al nostro tema. Questo foglio di stile è ciò che verrà utilizzato quando visualizzeremo il nostro post nell'editor visivo.
Quasi tutti i fantastici effetti che si verificano nell'amministratore di WordPress vengono creati utilizzando jQuery. Dato che è già incluso nella pagina di amministrazione, basterà utilizzarlo per far funzionare il nostro editor visivo con gli stili dell'editor di formato post.
Se una / js la cartella non esiste già nel tuo tema, creane una e aggiungi un nuovo file JavaScript chiamato Editor-styles-Post-format.js. Una volta creato il file, aprilo nel tuo editor di testo preferito e aggiungi quanto segue:
(function ($) $ (window) .load (function () var init_post_format = $ ('# post-formats-select') .find ('.post-format: checked') .val (); add_post_format ( init_post_format);); $ ('# post-formats-select') .find ('.post-format') .change (function () var post_format = $ (this) .val (); add_post_format (post_format) ;); function add_post_format (post_format) post_format = (0 == post_format)? 'standard': post_format; if (frames ['content_ifr']) $ ('html', frames ['content_ifr']. documento). removeClass (). addClass ('format-' + post_format);) (jQuery); Con il nostro script jQuery pronto, dobbiamo accodarlo in modo che appaia effettivamente quando navighiamo intorno al nostro amministratore. Ecco un altro piccolo blocco di codice che dobbiamo aggiungere al nostro functions.php file:
add_action ('admin_enqueue_scripts', 'editor_style_admin_script'); function editor_style_admin_script ($ hook) if ('post-new.php' == $ hook || 'post.php' == $ hook) wp_enqueue_script ('editor_styles_post_format_js', get_template_directory_uri (). '/ js / editor-styles- post-format.js ', true, array (' jquery '),' 1.0.0 '); Con tutto ciò che è disponibile, ogni volta che selezioniamo un formato di post nella schermata di modifica del post nel nostro admin, una classe verrà aggiunta all'editor visivo in modo simile a come viene aggiunta nel front-end e potremo vedere in anteprima come il nostro post sembrerà come lo stiamo creando. Dobbiamo solo assicurarci di utilizzare il seguente codice HTML durante la creazione di un post in modo che il nostro CSS funzioni correttamente.
Solo una cosa è impossibile per Dio: trovare un senso in qualsiasi legge sul copyright sul pianeta. Mark Twain
Ci sono un paio di passaggi coinvolti, ma alla fine, non è così complicato mettere le cose a posto per far funzionare il nostro editor visivo con i formati dei post. Per fortuna, molti temi includono già la maggior parte di questi elementi, quindi potremmo aver solo bisogno di creare e accodare il nuovo file JavaScript. Uno di questi giorni, forse qualcuno creerà anche una patch in WordPress, quindi questa funzionalità diventa parte integrante del core.
Se hai commenti o feedback su qualcosa che hai letto sopra, non esitare a discuterne di seguito.
