Vai al contenuto principale

Come aggiungere un menu a tendina con i CSS in Visual Editor

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]

In questo tutorial imparerai come trasformare facilmente i collegamenti di testo in tasti attraenti in WordPress. Seguendo questa guida alla procedura, saprai come aggiungere un menu a discesa per l'editor visivo di WordPress che ti consentirà di applicare stili CSS personalizzati al contenuto del tuo articolo.

Questi stili CSS personalizzati possono essere applicati al testo nei tuoi post per decorarli e formattarli. Sono utilizzati principalmente per creare pulsanti attraenti e accattivanti per i tuoi articoli. Questo tutorial riguarderà anche la creazione di un pulsante per gli stili CSS.

Se desideri un modo semplice per aggiungere pulsanti attraenti nei post e nelle pagine, questo tutorial è per te.

Il risultato finale

Il risultato finale di questo tutorial ti consentirà di selezionare il testo nel tuo articolo e quindi applicarvi uno stile tramite il menu a discesa dell'editor dell'articolo.

Una volta terminato, l'editor visivo avrà questo aspetto e conterrà un elemento "stili" sotto forma di menu a discesa:

How-to-Styles-01

Utilizzando il nuovo menu, sarà possibile applicare uno stile CSS al collegamento testuale nel tuo articolo, in modo da creare un effetto pulsante senza utilizzare immagini. I collegamenti potrebbero essere così, anche se l'aspetto dipende da te:

How-to-Styles-02

Questo approccio non solo consente di risparmiare tempo durante la creazione di un articolo, ma consente anche a tutti i collaboratori del tuo blog di essere in grado di utilizzare sempre gli stessi stili per decorare i pulsanti o qualsiasi altro elemento degli articoli.

Istruzioni di sicurezza

In questo tutorial modificheremo i seguenti file:

  • fonctions.php
  • style.css

Questi due file fanno parte del tuo tema, quindi lavoreremo con le versioni associate al tema attualmente attivo sul tuo blog. Prima di tutto è importante di effettuare un backup di questi file nel caso qualcosa vada storto.

In secondo luogo, è consigliabile per creare un tema figlio del tuo tema attuale. Se non sai come creare un tema figlio. L'uso di un tema figlio garantirà l'aggiornamento del tema corrente. Vale anche la pena sottolineare che se cambi tema, ces modifiche andranno perse.

Tuttavia, se stai lavorando su un blog in fase di sviluppo o su un'installazione locale di WordPress, non è necessario creare un tema figlio.

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]

Aggiunta di una voce “Stili” al Menu.

Il menu a discesa "stili" in realtà fa già parte dell'editor visivo di WordPress, ma è stato disabilitato per impostazione predefinita. Per attivarlo è sufficiente aggiungere alcuni codici al file fonctions.php del tuo tema attuale.

Per aprire il file e modificarlo, vai al menu ” Apparence "Quindi clicca su"Éditeur”Nel sottomenu. Se hai una versione inglese Vai a Aspetto> Editor

How-to-Styles-03

Innanzitutto, verifica che il tema attualmente utilizzato dal tuo blog sia selezionato dal menu a discesa in alto a destra nella pagina. Attualmente sto modificando il file fonctions.php Venti dodici temi ma per te potrebbe essere un tema diverso.

Quindi fare clic sul file fonctions.php dall'elenco dei file sul lato destro della pagina, per iniziare a modificarlo. Copia e incolla il seguente codice nel file. Per comodità, ti consiglio di incollarlo alla fine del file, in modo da poter facilmente tenere traccia di ciò che hai aggiunto al file.

1
2
3
4
5
6
7
8
9
// Enable the Styles dropdown menu item
// Callback function to insert 'styleselect' into the $buttons array
function my_mce_buttons_2( $buttons ) {
array_unshift( $buttons, 'styleselect' );
return $buttons;
}
// Register our callback to the appropriate filter
add_filter('mce_buttons_2', 'my_mce_buttons_2');
// end of part I

Dopo aver aggiunto il codice al file, fare clic sul pulsante Aggiorna per salvare le modifiche. Se tutto va bene, dovresti vedere che il menu a discesa di selezione dello stile è stato aggiunto all'editor visivo dei post di WordPress.

Tuttavia, non abbiamo ancora finito. Se esaminate le voci di menu in questo nuovo elenco a discesa, noterete che si tratta di stili correlati all'Editor visivo degli altri pulsanti.

Vogliamo Aggiungi i nostri stili alla lista.

Crea gli stili CSS dei tuoi pulsanti.

In questo tutorial, creeremo un pulsante per i nostri collegamenti di testo, ma potresti facilmente creare la decorazione e la formattazione per qualsiasi altro tipo di elemento.

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]

Ora creeremo stili CSS per i pulsanti. Puoi creare il tuo CSS o utilizzare una delle tante app per la generazione di pulsanti online. Generatore di pulsanti CSS è una buona scelta, quindi visita il sito e crea rapidamente un pulsante e quindi copia il CSS. Quindi vai su "Aspetto", quindi su "Editor" e fai clic sul file style.css nell'elenco dei file sul lato destro. In inglese avrai Aspetto> Pagina dell'editor> style.css

Ancora una volta, scorri fino alla fine del file e incolla il CSS dal pulsante sottostante o usa il tuo CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
.linkButton {
-moz-box-shadow:inset 0px 1px 0px 0px #bbdaf7;
-webkit-box-shadow:inset 0px 1px 0px 0px #bbdaf7;
box-shadow:inset 0px 1px 0px 0px #bbdaf7;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #378de5) );
background:-moz-linear-gradient( center top, #79bbff 5%, #378de5 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#378de5');
background-color:#79bbff;
-webkit-border-top-left-radius:0px;
-moz-border-radius-topleft:0px;
border-top-left-radius:0px;
-webkit-border-top-right-radius:0px;
-moz-border-radius-topright:0px;
border-top-right-radius:0px;
-webkit-border-bottom-right-radius:0px;
-moz-border-radius-bottomright:0px;
border-bottom-right-radius:0px;
-webkit-border-bottom-left-radius:0px;
-moz-border-radius-bottomleft:0px;
border-bottom-left-radius:0px;
text-indent:0;
border:1px solid #84bbf3;
display:inline-block;
color:#ffffff;
font-family:Trebuchet MS;
font-size:15px;
font-weight:bold;
font-style:normal;
height:40px;
line-height:40px;
width:100px;
text-decoration:none;
text-align:center;
text-shadow:1px 1px 0px #528ecc;
}

.linkButton:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #378de5), color-stop(1, #79bbff) );
background:-moz-linear-gradient( center top, #378de5 5%, #79bbff 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#378de5', endColorstr='#79bbff');
background-color:#378de5;
}

.linkButton:active {
position:relative;
top:1px;
}

/* This button was generated using CSSButtonGenerator.com */

Aggiorna il file per salvare le modifiche.

Aggiungi stili al menu a discesa.

Ora fare nuovamente clic sul file fonctions.php  e incolla il seguente codice nella parte inferiore del file.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// Add the Button CSS to the Dropdown Menu
// Callback function to filter the MCE settings
function my_mce_before_init_insert_formats( $init_array ) {

// Define the style_formats array
$style_formats = array(

// Each array child is a format with it's own settings
array(
'title' => 'Link Button',
'selector' => 'a',
'classes' => 'linkButton',
),
);

// Insert the array, JSON ENCODED, into 'style_formats'
$init_array['style_formats'] = json_encode( $style_formats );
return $init_array;
}

// Attach callback to 'tiny_mce_before_init'
add_filter( 'tiny_mce_before_init', 'my_mce_before_init_insert_formats' );
// end of part II

Nota queste righe all'interno della tabella:

  • titolo: questo è il titolo che verrà visualizzato nel menu a discesa
  • selettore - la "a" si riferisce all'ancora, indicando che questo stile è per i collegamenti.
  • classi: questo è il nome della classe del nostro pulsante CSS

Se hai usato il tuo CSS, il nome della classe sarebbe quello che hai dato come nome della tua classe CSS. Nell'esempio sopra, il pulsante dello stile CSS è chiamato linkButton.

Dopo aver incollato il codice al suo interno, fai clic sul pulsante di aggiornamento per salvare le modifiche. Non appena il file viene salvato, vai all'editor dei post di WordPress e aggiorna la finestra per rendere effettive le modifiche. Quindi fai clic sul menu a discesa "Stili" e dovresti vedere una voce intitolata "LinkButton".

 

How-to-Styles-05

Per applicare lo stile CSS e creare il pulsante, basta creare un collegamento di testo in il tuo articolo, seleziona il testo, quindi seleziona lo stile che vuoi dare al tuo pulsante dal menu. Gli stili non saranno visibili nella finestra dell'editor dei post. Dovresti visualizzare in anteprima l'articolo, che dovrebbe assomigliare a questo:

How-to-Styles-06

Ora, ogni volta che devi inserire un pulsante accattivante e accattivante nei tuoi post o pagine, crea un link di testo e seleziona il suo stile dal menu a discesa.

Opzioni avanzate

Spero che tu possa pensare ad altri usi per questa funzione. Ad esempio, puoi aggiungere altri stili al menu. Potrebbe essere la formattazione dell'aspetto del testo o qualsiasi altra cosa che puoi fare con CSS.

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 vuoi creare uno stile di pulsante aggiuntivo che verrà aggiunto all'elenco a discesa, sarà sufficiente creare un'altra voce nella tabella (che è stata aggiunta a fonctions.php) E modificare le linee e il titolo della classe:

1
2
3
4
5
array(
'title' => Bigger Button',
'selector' => 'a',
'classes' => 'biggerButton',
),

Quindi aggiungi un nuovo stile CSS nel file style.css. Se desideri creare stili per elementi che non sono collegamenti, puoi anche farlo. Ciò richiede una modifica della seconda riga in base all'area in cui si desidera applicare lo stile.  

Tasti di scelta rapida.

Se tutto quanto sopra è un'ottima teoria per te, tuttavia desideri un modo più veloce per applicare questa teoria senza dover modificare il codice, allora questi due plugin potrebbero interessarti:

Conclusione.

Ora puoi creare facilmente fantastici pulsanti di ricerca in WordPress semplicemente selezionando un'opzione da un menu a discesa nell'editor dei post di WordPress.

Speriamo che questo tutorial ti abbia aiutato a progettare un selettore di stile nel tuo editor di post. Se abbiamo omesso determinate parti o se pensi di fornire maggiori dettagli, non esitare a lasciarci i tuoi commenti nella sezione riservata a questi ultimi.

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
11 azioni
quota10
Tweet1
Enregistrer