Clase pentru Butoane Primare și Secundare

Question

Clase pentru Butoane Primare și Secundare

2 sept. 2014, 22:14:42

Vizualizări: 44K

Voturi: 7

Încerc să stilizez niște butoane într-o funcție (mai jos) cu clasele implicite de butoane WordPress, dar butoanele nu sunt afișate (apare doar textul cu hyperlink).

Am încercat, de asemenea, să dezactivez toate plugin-urile și să trec la o temă implicită WordPress pentru a vedea dacă butoanele se vor afișa, dar această problemă persistă. Deci poate există o problemă cu tag-urile a sau cu clasele în sine?

Iată funcția:

add_filter( 'upme_profile_edit_bar','upme_profile_edit_bar', 10, 3 );
function upme_profile_edit_bar( $edit_buttons , $id, $params ) {
    $edit_buttons .= '<a class="button button-primary" href="http://myurlhere.com" >Buton Personalizat 1</a>';   
    $edit_buttons .= '<a class="button button-secondary" href="http://myotherurlhere.com" >Buton Personalizat 2</a>';
    return $edit_buttons;
}

Mulțumesc pentru orice ajutor.

irishrunner16

107

butoane

Comentarii

Te rog adaugă informații suplimentare ca [edit]uri la întrebarea ta - în loc de comentarii.

kaiser

3 sept. 2014 18:28:35

Toate răspunsurile la întrebare

Comentarii

Aha, exact asta aveam nevoie! Îmi smulgeam părul încercând să înțeleg de ce nu se încărcau. Mulțumesc mult că ți-ai luat timpul să explici soluțiile atât de detaliat. Apreciez foarte mult!

irishrunner16

4 sept. 2014 23:34:19

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

Se pare că încerci să utilizezi clasele din stilurile admin ale WordPress pe partea de front-end. Totuși, acele stiluri nu sunt încărcate. Ai două opțiuni, dintre care una nu aș recomanda-o.

Metoda #1: Fă asta

Ceea ce aș recomanda este să copiezi și să lipescți doar stilurile butoanelor pe care le dorești în tema copil sau într-un plugin de CSS personalizat (exemplu, unul dintre multe).

Iată o primă variantă de extragere și curățare a acestora:

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

Această abordare are următoarele avantaje:

Asigură că, chiar dacă WordPress modifică numele claselor sau stilurile, tu păstrezi stilurile butoanelor tale.
Dacă WordPress mută fișierele de stiluri, tu tot vei avea acces la ele.
Acestea sunt exact ceea ce dorești. Alternativa ar fi încărcarea unor stiluri inutile.

Metoda #2: Nu face asta

Nu sunt sigur de ce menționez această metodă, dar poate va fi utilă pentru cineva. Alternativa este să încarci stilurile butoanelor WordPress pe partea de front-end. Aceasta are toate dezavantajele opuse avantajelor Metodei #1 enumerate mai sus.

Pentru a face acest lucru, ai nevoie de două lucruri: 1. Încarcă fișierul de stiluri. 1. Modifică markup-ul, deoarece toate stilurile funcționează doar dacă sunt încadrate într-un element cu clasa wp-core-ui. (Ceea ce ar trebui să-ți spună că încărcarea acestor stiluri nu este intenționată și este o idee proastă!)

Pentru a încărca stilurile, aș face acest lucru în fișierul functions.php al temei copil, într-un plugin personalizat sau într-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' );