Vuoi aggiungere stili personalizzati sull'editor visivo di WordPress? L'aggiunta di stili personalizzati consente di applicare rapidamente la formattazione senza passare all'editor di testo. In questo articolo, ti mostreremo come aggiungere stili personalizzati all'editor visivo di WordPress.
Nota: Questo tutorial richiede una conoscenza di base dei CSS.
Quando sarà lei hai bisogno di aggiungere uno stile personalizzato nell'editor visivo di WordPress?
Per impostazione predefinita, l'editor visivo di WordPress offre opzioni di formattazione e stile di base. Tuttavia, a volte sarà necessario avere a portata di mano stili personalizzati che ti consentiranno, ad esempio, di aggiungere pulsanti CSS, contenuto, ganci, ecc.
Puoi sempre passare dall'editor visivo all'editor di testo e aggiungere codice HTML e CSS personalizzato. Ma se usi regolarmente determinati stili, sarebbe meglio aggiungerli nell'editor visivo in modo da poterli riutilizzare facilmente.
Ciò ti farà risparmiare un'enorme quantità di tempo e ti consentirà anche di utilizzare sempre gli stessi stili ovunque sul tuo sito web.
Ancora più importante, puoi facilmente modificare o aggiornare gli stili senza dover modificare gli articoli sul tuo sito.
Ora scopriremo come farlo su WordPress.
Metodo 1: aggiungi uno stile personalizzato con un plugin
La prima cosa che devi fare è installare e attivare il plugin " Stili di TinyMCE personalizzate ". Per maggiori dettagli, consulta la nostra guida passo passo su come installare a WordPress Plugin.
Dopo l'attivazione, è necessario visitare " Impostazioni> Impostazioni »Stili personalizzati TinyMCE Per configurare le impostazioni del plugin.
Il plug-in ti consente di scegliere la posizione dei file dei fogli di stile. Può utilizzare il tuo tema o lo stile del tema figlio oppure puoi scegliere una posizione personalizzata.
Successivamente, devi fare clic sul pulsante " salva tutte le impostazioni Per memorizzare le tue impostazioni.
Ora puoi aggiungere i tuoi stili personalizzati. Devi scorrere fino alla sezione stile e fare clic sul pulsante Aggiungi nuovo stile '.
Devi prima inserire un titolo per lo stile. Questo titolo verrà visualizzato nel menu a discesa. Quindi devi definire. Che si tratti di una riga, un blocco o un elemento di selezione.
Successivamente aggiungi una classe CSS e quindi aggiungi le tue regole CSS come mostrato nello screenshot qui sotto.
Dopo aver aggiunto uno stile CSS, è sufficiente fare clic sul pulsante "Salva tutte le impostazioni" per salvare le modifiche.
Ora puoi modificare un articolo esistente o crearne uno nuovo. Noterai un formato nel menu a discesa, nella seconda riga dell'editor visivo di WordPress.
Seleziona un testo nell'editor, quindi scegli il tuo stile personalizzato dal menu a discesa per applicarlo.
Ora puoi visualizzare in anteprima il tuo articolo per vedere se i tuoi stili personalizzati si applicano correttamente.
Metodo 2: aggiungere manualmente stili al Visual Editor
Questo metodo richiede di aggiungere manualmente il codice ai file di WordPress. Se è la prima volta che lo fai, dai un'occhiata al nostro tutorial su come aggiungere a WordPress Plugin.
Passaggio 1: aggiungere uno stile personalizzato dal menu a discesa dell'editor visivo di WordPress.
Innanzitutto, aggiungeremo un menu a discesa nell'editor visivo di WordPress. Questo menu a discesa ci consentirà quindi di selezionare e applicare i nostri stili personalizzati.
È necessario aggiungere il seguente codice al file functions.php o sul vostro plugin.
funzione wpb_mce_buttons_2 ($ pulsanti) {array_unshift ($ pulsanti, 'styleselect'); restituire $ pulsanti; } add_filter ('mce_buttons_2', 'wpb_mce_buttons_2');
Passaggio 2: come aggiungere opzioni nel menu a discesa
Ora dovrai aggiungere alcune opzioni al menu a discesa appena creato. Sarai quindi in grado di scegliere e applicare queste opzioni dai formati nel menu a discesa.
Per questo tutorial, aggiungeremo tre stili personalizzati da creare contenuto blocco e pulsanti.
Dovrai aggiungere il seguente codice al file "functions.php" del tuo functions.php o un plugin specifico.
/ * * Funzione di callback per filtrare le impostazioni MCE * / function my_mce_before_init_insert_formats ($ init_array) {// Definisci l'array style_formats $ style_formats = array (/ * * Ogni array figlio è un formato con le proprie impostazioni * Nota che ogni array ha un titolo , blocco, classi e argomenti wrapper * Il titolo è l'etichetta che sarà visibile nel menu Formati * Il blocco definisce se si tratta di uno stile span, div, selettore o inline * Classes consente di definire le classi CSS * Wrapper se è necessario o meno aggiungi un nuovo elemento a livello di blocco attorno a qualsiasi elemento selezionato * / array ('title' => 'Content Block', 'block' => 'span', 'classes' => 'content-block', 'wrapper' => true,), array ('title' => 'Blue Button', 'block' => 'span', 'classes' => 'blue-button', 'wrapper' => true,), array ('title' => 'Red Button', 'block' => 'span', 'classes' => 'red-button', 'wrapper' => true,),); // Inserisci l'array, JSON ENCODED, in 'style_formats' $ init_array ['style_formats'] = json_encode ($ style_formats); return $ init_array; } // Allega la richiamata a 'tiny_mce_before_init' add_filter ('tiny_mce_before_init', 'my_mce_before_init_insert_formats');
Ora puoi aggiungere un nuovo post su WordPress e fare clic sui formati dal menu a discesa dell'editor visivo. Noterai che i tuoi stili personalizzati sono ora visibili.
Tuttavia, la loro selezione non farà alcuna differenza sull'editor visivo di WordPress.
3 Step: aggiungi uno stile CSS
Ora l'ultimo passaggio è aggiungere regole di stile CSS per i tuoi stili personalizzati.
Dovrai aggiungere questo CSS nel file style.css del tuo tema o in quello del child theme.
.content-block {border: 1px solid #eee; imbottitura: 3px; sfondo: #ccc; larghezza massima: 250px; galleggiante: a destra; text-align: center; } .content-block: dopo {clear: both; } .blue-button {background-color: # 33bdef; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; bordo: 1px solido # 057fd0; display: blocco in linea; cursore: punto; colore: #ffffff; imbottitura: 6px 24px; testo-decorazione: nessuno; } .red-button {background-color: # bc3315; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; bordo: 1px solido # 942911; display: blocco in linea; cursore: punto; colore: #ffffff; imbottitura: 6px 24px; testo-decorazione: nessuno; }
Il foglio di stile dell'editor controlla l'aspetto del tuo file contenuto nell'editor visivo. Controlla la documentazione per vedere come trovare la posizione di questo file.
Se il tuo tema non ha un file di foglio di stile, puoi sempre crearne uno. Basta creare un nuovo file CSS e assegnargli un nome " Custom-redattore style.css '.
Devi caricare questo file nella directory principale del tuo tema, quindi aggiungere questo codice al file "functions.php" del tuo tema.
Funzione my_theme_add_editor_styles () {add_editor_style ( 'custom-redattore style.css'); } Add_action ( 'init', 'my_theme_add_editor_styles');
È tutto. Hai appena aggiunto i tuoi stili personalizzati nell'editor visivo di WordPress. Ora puoi effettuare le personalizzazioni che ritieni corrette.
Sentiti libero di condividere questo tutorial con i tuoi amici sui tuoi social network preferiti.
