Clases de Botones Primarios y Secundarios

Question

Clases de Botones Primarios y Secundarios

2 sept 2014, 22:14:42

Vistas: 44K

Votos: 7

Estoy tratando de estilizar algunos botones en una función (abajo) con las clases de botones predeterminadas de WordPress, pero los botones no se están mostrando (solo se muestra el texto con hipervínculo).

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

Aquí está 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" >Botón Personalizado 1</a>';   
    $edit_buttons .= '<a class="button button-secondary" href="http://myotherurlhere.com" >Botón Personalizado 2</a>';
    return $edit_buttons;
}

Gracias por cualquier ayuda.

irishrunner16

107

botones

Comentarios

Por favor, agrega información adicional como [edición]es a tu pregunta - en lugar de comentarios.

kaiser

3 sept 2014 18:28:35

Todas las respuestas a la pregunta

Comentarios

¡Ah, eso es exactamente lo que necesitaba! Me estaba arrancando los pelos preguntándome por qué no se cargaban. Muchísimas gracias por tomarte el tiempo de explicar las soluciones con tanto detalle. ¡Realmente lo aprecio!

irishrunner16

4 sept 2014 23:34:19

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

Parece que estás intentando usar clases de estilos del panel de administración de WordPress en el front end. Sin embargo, esos estilos no se cargan. Tienes dos opciones, una de las cuales no recomendaría.

Opción #1: Haz esto

Lo que sí recomendaría es que simplemente copies y pegues los estilos de botones que deseas en tu tema hijo o en un plugin de CSS personalizado (ejemplo, uno de muchos).

Aquí tienes un primer intento de extraerlos 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 las ventajas de:

Asegurar que, incluso si WordPress cambia los nombres de las clases o los estilos, mantendrás los estilos de tus botones.
Si WordPress mueve los archivos de estilos, seguirás teniendo los estilos.
Estos son exactamente lo que quieres. La alternativa es cargar estilos adicionales que no necesitas.

Opción #2: No hagas esto

No estoy muy seguro de por qué incluso incluyo esto, pero tal vez sea útil para alguien. La alternativa es cargar los estilos de botones de WordPress en el front end. Esto tiene todas las desventajas que son opuestas a las ventajas de la Opción #1 mencionadas anteriormente.

Para hacer esto se requieren dos cosas: 1. Cargar la hoja de estilos. 1. Cambiar tu marcado, ya que todos los estilos solo funcionan si están envueltos en un elemento con la clase wp-core-ui. (¡Lo cual debería decirte que cargar estos estilos no está previsto y es una mala idea!)

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