Classi per Pulsanti Primari e Secondari

Question

Classi per Pulsanti Primari e Secondari

2 set 2014, 22:14:42

Visualizzazioni: 44K

Voti: 7

Sto cercando di stilizzare alcuni pulsanti in una funzione (qui sotto) con le classi predefinite dei pulsanti WordPress, ma i pulsanti non vengono visualizzati (appare solo il testo del collegamento ipertestuale).

Ho anche provato a disattivare tutti i plugin e a passare a un tema WP predefinito per vedere se i pulsanti venissero visualizzati, ma il problema persiste. Quindi forse c'è un problema con i tag a o con le classi stesse?

Ecco la funzione:

add_filter( 'upme_profile_edit_bar','upme_profile_edit_bar', 10, 3 );
function upme_profile_edit_bar( $edit_buttons , $id, $params ) {
    // Aggiunge il primo pulsante personalizzato
    $edit_buttons .= '<a class="button button-primary" href="http://myurlhere.com" >Pulsante Personalizzato 1</a>';   
    // Aggiunge il secondo pulsante personalizzato
    $edit_buttons .= '<a class="button button-secondary" href="http://myotherurlhere.com" >Pulsante Personalizzato 2</a>';
    return $edit_buttons;
}

Grazie per qualsiasi assistenza.

irishrunner16

107

pulsanti

Commenti

Per favore aggiungi ulteriori informazioni come [modifiche] alla tua domanda - invece di commenti.

kaiser

3 set 2014 18:28:35

Tutte le risposte alla domanda

Commenti

Aha, è esattamente ciò di cui avevo bisogno! Mi stavo strappando i capelli chiedendomi perché non si caricassero. Grazie mille per aver dedicato del tempo a spiegare le soluzioni così dettagliatamente. Lo apprezzo davvero molto!

irishrunner16

4 set 2014 23:34:19

mrwweb 10.3K · Accepted Answer · 2014-09-04T18:53:28Z

Sembra che tu stia cercando di utilizzare le classi degli stili admin di WordPress sul front end. Tuttavia, questi stili non vengono caricati. Hai due opzioni, una delle quali non consiglierei.

Metodo #1: Fai così

Quello che consiglierei è semplicemente copiare e incollare gli stili dei pulsanti che desideri nel tuo child theme o in un plugin CSS personalizzato (esempio, uno dei tanti).

Ecco una prima bozza per estrarli e ripulirli:

.button,
.button-primary,
.button-secondary {
    display: inline-block;
    text-decoration: none;
    font-size: 13px;
    line-height: 26px;
    height: 28px;
    margin: 0;
    padding: 0 10px 1px;
    cursor: pointer;
    border-width: 1px;
    border-style: solid;
    -webkit-appearance: none;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    white-space: nowrap;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.button,
.button-secondary {
    color: #555;
    border-color: #cccccc;
    background: #f7f7f7;
    -webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba(0,0,0,.08);
    box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba(0,0,0,.08);
    vertical-align: top;
}

p .button {
    vertical-align: baseline;
}

.button:hover,
.button-secondary:hover,
.button:focus,
.button-secondary:focus {
    background: #fafafa;
    border-color: #999;
    color: #222;
}

.button:focus,
.button-secondary:focus {
    -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.2);
    box-shadow: 1px 1px 1px rgba(0,0,0,.2);
}

.button:active,
.button-secondary:active {
    background: #eee;
    border-color: #999;
    color: #333;
    -webkit-box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 );
    box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 );
}

.button-primary {
    background: #2ea2cc;
    border-color: #0074a2;
    -webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,0.5), 0 1px 0 rgba(0,0,0,.15);
    box-shadow: inset 0 1px 0 rgba(120,200,230,0.5), 0 1px 0 rgba(0,0,0,.15);
    color: #fff;
    text-decoration: none;
}

.button-primary:hover,
.button-primary:focus {
    background: #1e8cbe;
    border-color: #0074a2;
    -webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,0.6);
    box-shadow: inset 0 1px 0 rgba(120,200,230,0.6);
    color: #fff;
}

.button-primary:focus {
    border-color: #0e3950;
    -webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,0.6), 1px 1px 2px rgba(0,0,0,0.4);
    box-shadow: inset 0 1px 0 rgba(120,200,230,0.6), 1px 1px 2px rgba(0,0,0,0.4);
}

.button-primary:active {
    background: #1b7aa6;
    border-color: #005684;
    color: rgba(255,255,255,0.95);
    -webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,0.1);
    box-shadow: inset 0 1px 0 rgba(0,0,0,0.1);
    vertical-align: top;
}

Questo ha il vantaggio di:

Garantire che, anche se WordPress cambia i nomi delle classi o gli stili, tu mantenga gli stili dei tuoi pulsanti.
Se WordPress sposta i file degli stili, ottieni comunque gli stili.
Questi sono esattamente quelli che vuoi. L'alternativa è caricare stili extra di cui non hai bisogno.

Metodo #2: Non fare così

Non sono sicuro del perché lo includa, ma forse sarà utile a qualcuno. L'alternativa è caricare gli stili dei pulsanti di WordPress sul front end. Questo ha tutti gli svantaggi opposti ai vantaggi del Metodo #1 elencati sopra.

Per farlo servono due cose: 1. Caricare il foglio di stile. 1. Cambiare il markup poiché tutti gli stili funzionano solo se sono racchiusi in un elemento con la classe wp-core-ui. (Il che dovrebbe dirti che caricare questi stili non è previsto ed è una cattiva idea!)

Per caricare gli stili, lo farei nel file functions.php di un child theme, in un plugin personalizzato o in un mu-plugin:

function wpse159952_load_wp_button_styles() {
    wp_enqueue_style( 'wpse159952_wp_button_styles', includes_url() . 'css/buttons.css', array(), get_bloginfo( 'version' ) );
}
add_action( 'wp_enqueue_scripts', 'wpse159952_load_wp_button_styles' );