Hoy vamos a aprender a colocar un ‘claim’ en la cabecera de nuestra página web.
Para esta demo hemos utilizado nuestro T Theme pero te invito a probarlo con cualquiera de nuestros themes.
Disclaimer…
Este tutorial funciona en todos los themes de AsiThemes a excepción de:
- El D Theme por que la estructura de su encabezado centra el logo.
- El E Theme por que este diseño ya incorpora un ‘claim’ de forma nativa.
- Y el R theme y V theme que carecen de menú superior.
Antes de entrar en materia vamos a intentar definir que es un ‘claim’.
Qué es un claim y por que debes utilizarlo
Un ‘claim’ es una frase y/o slogan que refuerza el mensaje que estamos intentando transmitir a través de nuestra página web.
Puede ser utilizado cómo una CTA o para reforzar la descripción de nuestro producto y/o servicio.
En AsiThemes lo utilizamos para reforzar la descripción de nuestro producto con el texto:
WordPress Genesis Minimal Themes
Este sencillo texto complementa a la perfección la descripción principal de nuestro producto:
WordPress Genesis Framework Themes
Gracias a la combinación de ambos textos ampliamos el espéctro y las oportunidades que nos brinda Google en sus resutados de búsqueda.
¡Tu puedes hacer lo mismo!
Vamos allá…
Cómo añadir un ‘claim’ en la cabecera de nuestra web hecha con un Genesis child theme de AsiThemes
Para añadir un ‘claim’ vamos a utilizar una función o ‘function’ y un poco de CSS para que todo quede bonito ;)
El código PHP es este:
<?php
add_filter('genesis_markup_title-area_close', 'asitheme_genesis_header_before_nav', 10, 2);
function asitheme_genesis_header_before_nav($close_html, $args) {
if ($close_html) {
$additional_html = '
<div class="claim">';
$additional_html .= '<strong>Pon aquí</strong> lo que tu quieras';
$additional_html .= '</div>
';
$close_html = $close_html . $additional_html;
}
return $close_html;
}
?>
Para añadir este código tenemos dos opciones:
- Añadirlo directamente a nuestro archivo functions.php en cuyo caso, omitiremos las etiquetas de apertura y cierre del propio PHP.
- Colocarlo a través de un plugin llamado Genesis Simple Hooks.
En este caso vamos a elegir la opción número dos.
El motivo es muy sencillo.
La ventaja de colocar el código PHP a través de un plugin nos garantiza no perder nuestros cambios si actualizamos, o cambiamos, nuestro theme.
Para ello navegaremos desde la zona de administración de nuestro WordPress hasta Plugins > Añadir nuevo y en el campo del buscador introduciremos el nombre Genesis Simple Hooks. Luego simplemente instalaremos y activaremos el plugin.
Ahora navegaremos hasta Genesis > Simple Hooks y haremos scroll hasta que encontremos Ganchos de cabecera > genesis_before_header Gancho.
Ahí es donde pegaremos nuestro código además de asegurarnos de activar la opción ¿Ejecutar PHP en este gancho?.
Una vez hecho guardamos los cambios.
Ahora vamos a por el CSS
.title-area{
display: flex;
align-items: center;
justify-content: space-between;
padding: 0;
margin: 0;
}
.site-header > .wrap{
display: flex;
justify-content: space-between;
align-items: center;
padding: 2rem 0;
}
.site-header .wrap:after,
.site-header .wrap:before{
display: none;
}
.site-header .widget-area{
margin-top: 0;
}
@media only screen and (max-width: 990px){
.site-header #menu-btn,
.site-header.open #menu-btn{
position: relative;
padding-top: 15px;
height: 30px;
}
}
Podrías colocar el CSS directamente en el archivo ‘style.css’ de tu genesis child theme pero, es mucho mejor incluirlo a través de la opción Apariencia > Personalizar > CSS adicional.
Al igual que con el caso anterior del código PHP si lo hacemos así tampoco perderemos los cambios al actualizar nuestro child theme.
Guardaremos los cambios y navegamos hasta la parte pública de nuestra página web.
Deberías ver algo parecido a esto:
¡Ahora te toca a ti!
Tal y como puedes ver añadir un ‘claim’ a tu página web es muy sencillo.
Lo único que deberás hacer es cambiar el texto:
<strong>Pon aquí</strong> lo que tu quieras
Por lo que tu proyecto, producto o servicio necesite ;)
Si quieres más tutoriales de este estilo escríbenos aquí.