Come aggiungere un fantastico shortcode del pulsante CSS3 in WordPress

Se non sei un grande fan di lavorare con l’editor HTML in WordPress o vuoi fornire alcuni fantastici miglioramenti per i tuoi temi premium, i codici brevi sono un’ottima soluzione per espandere le capacità del tuo editor di post mantenendo le cose semplici.


Stavo pensando che sarebbe bello aggiungere una sorta di pulsante al mio sito quando si forniscono collegamenti a file gratuiti o altri siti (usando ovviamente gli shortcode) quindi dopo aver aggiunto lo shortcode al mio tema ho pensato che avrei condiviso il codice qui sul blog in modo che altre persone interessate ad aggiungere codici brevi dei pulsanti al loro sito possano semplicemente copiare e incollare il mio codice nel loro tema e non dover passare troppo tempo a creare i codici brevi e lo stile del pulsante.

Cosa sono gli shortcode?

I codici brevi sono stati introdotti in WordPress 2.5 e consentono di creare codici macro da utilizzare nel contenuto dei post. Un semplice shortcode sarebbe simile a questo:

[codice corto]

Che una volta aggiunto all’editor dei post restituirà il valore dello shortcode come definito nei file dei temi. Ti mostrerò come creare un shortcode che ti permetterà di aggiungere facilmente pulsanti al tuo editor di post senza toccare alcun codice.

Aggiunta di uno shortcode “pulsante” personalizzato

La prima cosa che devi fare è aggiungere il codice php per il tuo shortcode al tuo tema. Il seguente codice può essere utilizzato per aggiungere un semplice pulsante al tuo sito. Questo codice può essere inserito nel file Functions.php. Se stai usando un tema di terze parti, è meglio farlo tramite un tema figlio di WordPress.

funzione myprefix_button_shortcode ($ atts, $ content = null) {

// Estrai gli attributi shortcode
extract (shortcode_atts (array (
'url' => '',
'title' => '',
'target' => '',
'text' => '',
'color' => 'green',
), $ atts));

// Usa il valore del testo per gli elementi senza contenuto
$ content = $ text? $ text: $ content;

// Pulsante Return con collegamento
if ($ url) {

$ link_attr = array (
'href' => esc_url ($ url),
'title' => esc_attr ($ title),
'target' => ('blank' == $ target)? '_blank': '',
'class' => 'myprefix-button color-'. esc_attr ($ color),
);

$ link_attrs_str = '';

foreach ($ link_attr as $ key => $ val) {

if ($ val) {

$ link_attrs_str. = ''. $ chiave. '= "'. $ val. '"';

}

}


ritorno ''. do_shortcode ($ content). '';

}

// Nessun collegamento definito, quindi restituire il pulsante come intervallo
altro {

ritorno ''. do_shortcode ($ content). '';

}

}
add_shortcode ('button', 'myprefix_button_shortcode');

Utilizzo dello shortcode nell’editor dei post

Ora che hai un shortcode puoi aggiungere il nuovo “pulsante” (che ora sembra un semplice link dato che non l’abbiamo disegnato) al tuo editor di post.

// Esempio di utilizzo 1
Testo pulsante [/ pulsante] // Esempio di utilizzo 2

Styling The Button

Qual è lo scopo di creare un shortcode se sembrerà un semplice link? Niente. Ecco perché ti mostrerò come aggiungere alcuni fantastici CSS3 per dare stile al pulsante di download e renderlo sexy.

Come hai notato nel shortcode ho aggiunto la classe “myprefix-button” in modo da poterlo facilmente modellare tramite il tuo file style.css. Inserisci il seguente codice nel tuo foglio di stile per creare un bel pulsante blu come quello nell’immagine.

/ * Stile pulsante principale * /
.myprefix-button {sfondo: # 65A343; text-shadow: 1px 1px 1px # 000; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 1px 2px 1px rgba (0, 0, 0, 0.1); -moz-box-shadow: 1px 2px 1px rgba (0, 0, 0, 0.1); box-shadow: 1px 2px 1px rgba (0, 0, 0, 0,1); cursore: puntatore; display: blocco in linea; troppo pieno: nascosto; imbottitura: 1px; vertical-align: middle; }

.span del pulsante myprefix {border-top: 1px solido rgba (255, 255, 255, 0,25); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; colore: #fff; blocco di visualizzazione; peso carattere: grassetto; dimensione carattere: 1em; imbottitura: 6px 12px; text-shadow: 1px 1px 1px rgba (0, 0, 0, 0,25); }

/ * Hover * /
.myprefix-button: hover {sfondo: # 558938; text-decoration: none; }

/* Attivo */
.pulsante myprefix: attivo {sfondo: # 446F2D; }

Tasto di scelta rapida verde

Supporto per più colori

Se hai notato che lo shortcode ha un parametro color che puoi usare per aggiungere stili CSS per diversi colori dei pulsanti. Ad esempio, se puoi aggiungere un’opzione di colore blu aggiungendo questo CSS aggiuntivo:

/ * Pulsante blu * /
.myprefix-button.color-blue {background: # 2981e4}

/ * Pulsante blu al passaggio del mouse * /
.myprefix-button.color-blue: hover {sfondo: # 2575cf}

/ * Pulsante blu attivo * /
.myprefix-button.color-blue: attivo {sfondo: # 0760AD}

Ora usa semplicemente il parametro color nel shortcode:

Testo pulsante [/ pulsante]

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map