buttons – Clases de botones primarios y secundarios

Pregunta:

Estoy tratando de diseñar algunos botones en una función (a continuación) con las clases de botones de WordPress predeterminadas, pero los botones no se muestran (solo se muestra el texto con hipervínculo).

También intenté desactivar todos los complementos y cambiar a un tema de WP predeterminado para ver si se mostraban los botones, pero este problema persiste. Así que tal vez hay un problema con las a etiquetas o las propias clases?

Esta es la función:

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

Gracias por cualquier ayuda.

Respuesta:

Parece que está intentando usar clases de los estilos de administración de WordPress en la interfaz. Sin embargo, esos estilos no se cargan. Tienes dos opciones, una de las cuales no recomendaría.

Camino # 1: haz esto

Lo que recomendaría es que simplemente copie y pegue los estilos de botones que desee en su tema secundario o en el complemento CSS personalizado (por ejemplo , uno de muchos).

Aquí hay un primer paso para sacarlos y limpiarlos:

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

Esto tiene la ventaja de:

  1. Asegurándose de que incluso si WordPress cambia los nombres o estilos de las clases, mantenga los estilos de sus botones.
  2. Si WordPress mueve los archivos de la hoja de estilo, aún obtendrá los estilos.
  3. Éstos son exactamente lo que quieres. La alternativa es cargar estilos adicionales que no necesita.

Camino # 2: No hagas esto

No estoy muy seguro de por qué incluyo esto, pero tal vez sea útil para alguien. La alternativa es cargar los estilos de los botones de WordPress en la interfaz. Esto tiene todas las desventajas que son opuestas a las ventajas de la Vía # 1 enumeradas anteriormente.

Para hacer esto, se necesitarían dos cosas: 1. Cargue la hoja de estilo. 1. Cambie su marcado ya que todos los estilos solo funcionan si están envueltos en un elemento con la clase wp-core-ui . (Lo que debería decirle que cargar estos estilos no es una intención y es una mala idea.

Para cargar los estilos, haría esto en el archivo functions.php un tema secundario, un complemento personalizado o 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' );

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top

web tasarım