Vai al contenuto principale

Come aggiungere uno stile visivo per l'editor di WordPress

Divi: il tema WordPress più semplice da usare

Divi: il miglior tema WordPress di tutti i tempi!

più Download di 901.000, Divi è il tema WordPress più popolare al mondo. È completo, facile da usare e viene fornito con oltre i modelli gratuiti 62. [Consigliato]

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.

stylesinwpeditor

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 disporre di stili personalizzati che consentano, ad esempio, di aggiungere pulsanti CSS, blocchi di contenuto, hook e così via.

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 in tutto il 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 un plugin per WordPress.

Dopo l'attivazione, è necessario visitare " Impostazioni> Impostazioni »Stili personalizzati TinyMCE Per configurare le impostazioni del plugin.

Control-di-plugin-TinyMCE

Il plugin ti consente di scegliere la posizione dei file del foglio di stile. Può utilizzare lo stile del tema o del tema figlio oppure puoi scegliere una posizione personalizzata.

Crea facilmente il tuo sito Web con Elementor

Elementor ti consente di creare facilmente qualsiasi design di sito Web con un aspetto professionale. Smetti di pagare caro per quello che puoi fare da solo. [Free]

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.

regola-di-style-css

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.

stile da personalizzare-redattore 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.

Stai cercando i migliori temi e plugin per WordPress?

Scarica i migliori plugin e temi WordPress su Envato e crea facilmente il tuo sito web. Già più di 49.720.000 download. [ESCLUSIVO]

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 un plugin per WordPress.

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 per creare contenuti e pulsanti a blocchi.

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; }

pulsanti panoramica-of-the-TinyMCE-aggiunta-di-style-personalizza

Il foglio di stile dell'editor controlla l'aspetto del contenuto nell'editor visivo. Vedere la documentazione per vedere come trovare la posizione di questo file.

Crea facilmente il tuo negozio online

Scarica gratuitamente WooCommerce, i migliori plug-in di e-commerce per vendere i tuoi prodotti fisici e digitali su WordPress. [Consigliato]

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.

Questo articolo contiene i commenti 0

Lascia un commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito utilizza Akismet per ridurre indesiderati. Ulteriori informazioni su come vengono utilizzati i dati dei commenti.

Torna in alto
7 azioni
quota6
Tweet
Enregistrer1