Avisos
Vaciar todo

[Resuelto] Cómo colocar el logo, el nombre y la descripción corta en la cabecera con el tema Storefront

5 Respuestas
3 Usuarios
0 Reactions
35 Visitas
Respuestas: 213
Estimable Member
Topic starter
 

Hola amigos. Estoy utilizando el tema Storefront y me gustaría saber si hay alguna forma de poder colocar en la cabecera el logo y al lado el nombre del sitio con la descripción corta. Utilizo el tema Storefront. Me gustaría hacerlo sin plugin. Mi web es prueba.unifilomedia.net Gracias de antemano.

Un saludo virtual 🙂


 
Respondido : 22/10/2020 1:05 pm
Karen Rios
Respuestas: 18663
Illustrious Member Moderator
 

Hola Carmen,

En este caso prueba añadir el siguiente código en el archivo function.php (preferiblemente un chidltheme), este archivo puedes localizarlo en tu cPanel -> Administrador de Archivo -> Public_html

Una vez dentro de el ingresa a la carpeta donde tienes los archivos de tu web y ubica la ruta wp-content/themes/tu_Tema

add_action( 'storefront_header', 'jk_storefront_header_content', 40 );
function jk_storefront_header_content() { ?>
<div class="cabecera">
<p>Cámbialo el texto por el titulo de tu sitio web<br/>Añade la descripción de tu sitio web</p>
</div>
<?php
}

Luego de guardar los cambios debes ingresar a el apartado Apariencia -> Personalizar -> CSS Adicional y añadir la el siguiente código CSS

.cabecera {
clear: both;
text-align: left;
}

Guarda los cambios y comprueba si con ello logra añadir la información que deseas en la cabecera de tu sitio web. El resultado debe ser algo como por ejemplo

Screenshot

Un Saludo


 
Respondido : 22/10/2020 3:37 pm
Respuestas: 213
Estimable Member
Topic starter
 

@karen

¡Genial! ¿Se puede colocar el texto a la derecha del logo para que la cabecera quede más estrecha? Gracias de antemano.

Un saludo 🙂


 
Respondido : 22/10/2020 4:14 pm
Jhon
 Jhon
Respuestas: 44989
Illustrious Member Moderator
 

Hola

Elimina el código que usaste para la cabecera:

.cabecera {
clear: both;
text-align: left;
}

Luego agrega en su lugar el siguiente código

.site-branding{
width: 240px!important;
}

Saludos.


Esta publicación ha sido modificada el hace 5 años por Jhon
 
Respondido : 22/10/2020 4:38 pm
Respuestas: 213
Estimable Member
Topic starter
 

@jmarreros

Genial !!! Mil gracias 🙂


 
Respondido : 27/10/2020 11:31 am