web-dev-qa-db-fra.com

Classes de boutons primaires et secondaires

J'essaie de styliser certains boutons d'une fonction (ci-dessous) avec les classes de boutons WordPress par défaut, mais les boutons ne sont pas affichés (seul le texte en hyperlien est affiché).

J'ai également essayé de désactiver tous les plugins et de passer à un thème par défaut WP pour voir si les boutons seraient affichés, mais ce problème persiste toujours. Alors peut-être qu'il y a un problème avec les balises a ou les classes elles-mêmes?

Voici la fonction:

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" >Custom Button 1</a>';   
    $edit_buttons .= '<a class="button button-secondary" href="http://myotherurlhere.com" >Custom Button 2</a>';
    return $edit_buttons;
}

Merci pour toute aide.

buttons
4
irishrunner16

On dirait que vous essayez d'utiliser des classes à partir des styles WordPress admin sur le front-end. Cependant, ces styles ne sont pas chargés. Vous avez deux options, dont une que je ne recommanderais pas.

Voie n ° 1: Faites ceci

Ce que je voudrais recommande, c’est de copier et coller les styles de boutons de votre choix dans votre thème child ou un plugin CSS personnalisé ( exemple , un des nombreux).

Voici un premier passage pour les sortir et les nettoyer:

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

Cela a l'avantage de:

  1. En vous assurant que même si WordPress change les noms de classe ou les styles, vous conservez les styles de vos boutons.
  2. Si WordPress déplace les fichiers de feuilles de style, vous obtenez toujours les styles.
  3. Ce sont exactement ce que vous voulez. L'alternative est de charger des styles supplémentaires dont vous n'avez pas besoin.

Voie n ° 2: ne fais pas ça

Je ne sais pas trop pourquoi j'inclus cela, mais peut-être que ce sera utile pour quelqu'un. L'alternative consiste à charger les styles de bouton WordPress sur le front-end. Cela présente tous les inconvénients qui s’opposent aux avantages de la solution n ° 1 énumérés ci-dessus.

Pour ce faire, il faudrait deux choses: 1. Chargez la feuille de style. 1. Modifiez votre balisage car tous les styles ne fonctionnent que s’ils sont encapsulés dans un élément avec la classe wp-core-ui. (Ce qui devrait vous dire que le chargement de ces styles n'est pas voulu et une mauvaise idée!

Pour charger les styles, je le ferais dans le fichier functions.php d'un thème enfant, un plugin personnalisé ou 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' );
3
mrwweb