Seguimos haciendo crecer el repertorio de tutoriales para el tema Zerif Lite de ThemeIsle, y en el episodio XI veremos cómo añadir un tercer botón en la sección de título grande.

Los predeterminados del tema son dos: uno rojo y uno verde, cuya etiqueta y enlace se pueden modificar desde el Personalizador.

Zerif Lite - Botones

¿Qué tal si queremos agregar un tercer botón, al lado del botón verde?

Ante todo, asegúrese de que está usando un tema hijo. Las instrucciones para crear un tema hijo se encuentran en esta entrada anterior.

Abrimos el archivo functions.php del tema hijo, y pegamos el siguiente código (antes del cierre de la etiqueta ?>, si lo hubiere):

function zerif_third_button() {
    echo '<a href="#" class="btn btn-primary custom-button">Tercer botón</a>';
}
add_action( 'zerif_big_title_buttons_bottom', 'zerif_third_button');

El resultado será el siguiente:

Zerif Lite - 3 botones

Tenga en cuenta que tendrá que reemplazar manualmente el enlace (#) y la etiqueta del botón (Tercer botón) por los que correspondan.

Como vemos, el color es el predeterminado de la hoja de estilos del tema, pero podemos usar los otros tres incluidos, modificando las clases del código anterior.

Para el color rojo (la clase .red-btn):

echo '<a href="#" class="btn btn-primary custom-button red-btn">Tercer botón</a>';

Para el verde (la clase .green-btn):

echo '<a href="#" class="btn btn-primary custom-button green-btn">Tercer botón</a>';

Para el amarillo (la clase .yellow-btn):

echo '<a href="#" class="btn btn-primary custom-button yellow-btn">Tercer botón</a>';

Zerif Lite - Botón amarillo

¿Y qué tal si queremos un color personalizado? Usemos una clase personalizada, por ejemplo .custom-btn.

echo '<a href="#" class="btn btn-primary custom-button custom-btn">Tercer botón</a>';

Luego vamos a la hoja de estilos del tema hijo, custom.css, o al recuadro CSS adicional del Personalizador, y pegamos el siguiente código (reemplace el valor del color de fondo por el de su preferencia):

.custom-btn {
    background: #1990a4;
}

Zerif Lite - Botón personalizado

Por último, si queremos modificar también el color de fondo al posar el puntero (y evitar el azul predeterminado), añadimos el siguiente código:

.custom-btn:hover {
    background: #15798a;
}

Recuerde reemplazar el valor del color de fondo por el de su preferencia.

Caribdis Diseño Web

Caribdis Diseño Web

Ana Ayelén Martínez - Buenos Aires, Argentina
Técnica en electromecánica, periodista, entusiasta de los idiomas y enamorada de WordPress. Amante de la lectura, la música y el mate, y fanática de las series de J.J. Abrams.
Caribdis Diseño Web

Últimas entradas por Caribdis Diseño Web (ver todas)