Agregar un logotipo/imagen HTML receptivo a través del personalizador de Génesis

Este tutorial se refiere al reemplazo de la técnica de fondo CSS utilizada para mostrar un logotipo/imagen en el encabezado de marco de Genesis con una etiqueta de línea de marcado HTML real, que es mejor para el diseño receptivo en todos los dispositivos. Esto se puede hacer de algunas maneras, uno con un filtro y otro con una acción. Pero primero algunas información general … Génesis Ejemplo de colocación de temas de la imagen de cabeza/logotipo y la técnica utilizada en la muestra de génesis del tema depende de si ha seleccionado la imagen de “texto dinámico” o “logotipo” en génesis> endet.

Si se selecciona “Texto dinámico”, “Título del sitio” y “Slogan” se usan como establecidos en la configuración de WordPress Fields>. Si se selecciona “imagen del logo”, consulte una imagen en el directorio de imágenes de su tema llamado logo.png y hay una implícita en 360x164px. Esto se ha eliminado en el último tema de muestra de Genesis a partir de 2.2.3.

360px * 154px predeterminado
La imagen se coloca como fondo CSS en lugar de una etiqueta de imagen marcada HTML.

En el código, puede ver que la imagen es un fondo CSS del enlace dentro del H1 del área. Funciona en su mayor parte, pero tiene problemas de respuesta y no es realmente apropiado para la marca corporativa principal de los sitios, ya sea. Desde un punto de vista semántico o para SEO. Los problemas de respuesta se pueden resolver utilizando la regla CSS para el tamaño de fondo. Sin embargo, creo que una marca HTML de la imagen realmente debería usarse en esta área.
El CSS es diferente del tema de la muestra de Genesis desde 2.2.3 hacia arriba, mediante el cual no hay antecedentes para indicar un logotipo predeterminado. Sede personalizado de Genesis fuera del tema de la muestra de Genesis, la mayoría de los temas de StudioPress agregan soporte para la sede personalizada algo similar al siguiente (tomado de News Pro), que encontrará en las características del tema.php. Con la sede personalizada, agregue la imagen. / El logotipo de aspecto> un encabezado y se ingresa en el personalizador, lo que facilita que un usuario no técnico cambie la imagen principal.
Con respecto al tamaño de la imagen, que se define dentro de la matriz de valores en el encabezado personalizado, cámbielas a lo que necesita, pero también ajusta los elementos circundantes en el marcado CSS para asegurarse de que todos se jueguen bellamente.

El soporte de encabezado personalizado no es génesis específico, pero es una característica de WordPress que se puede usar en cualquier temas. Uno de los ajustes de génesis específicos es el uso del sector de encabezado que se utiliza para apuntar al elemento HTML que tendrá la imagen de fondo CSS. Está codificado a Genesis/Header.php en las funciones de Genesis_Custom_header y Genesis_Custom_heer_style, Genesis_Custom_heer_Style realmente controla el resultado aquí y puede eliminarse. Maneras alternativas … Usando una acción, Genesis_Site_Title usando una imagen en lugar de un fondo CSS – Préstamo de _S, por lo que en lugar de usar un fondo CSS, para usar un marcado HTML que contiene el elemento de imagen. Podemos pellizcar la marca en el subrayado.
En _S/Inc/Custom-Header.Php Lines 7-11
Por lo tanto, podemos agregar nuestro propio soporte para el tema del encabezado personalizado, eliminar la acción Genesis_Custom_heer_Style y conectar el encabezado _s. Para agregar funciones. Phpin El fragmento de código, agregamos soporte para el encabezado personalizado para nuestro tema, eliminando el comportamiento predeterminado del encabezado Genesis y conectando nuestro nuevo encabezado marcado. El marcado está conectado con el génesis_site_title gancho con una alta prioridad (5) para asegurarse de que se ejecute temprano y esté por encima del título. Cambie el tamaño para que se ajuste a sus necesidades y ahora puede agregar la imagen por personalizador o mirar.
Lo que es bueno en eso es que …

Es una imagen aún más controlable

La imagen se puede cambiar fácilmente personalizando
Si no se selecciona ninguna imagen, se muestran el título y la descripción del sitio, si desea tanto el logotipo como el título del sitio y la descripción del Sitio para mostrar, cambie el valor del texto del encabezado desde el soporte de encabezado personalizado.
CSS CLIMING TAMBIÉN, necesitaremos eliminar algunos antecedentes CSS asociados con CSS para .Header-Image .Site-Title> A, Eliminar o Comentar .heada-Image .Site-Title> A {
flota a la izquierda;
Altura mínima: 150px;
Ancho: 100%;
} Usando un filtro, Genesis_Seo_Title (¡una mejor manera!) Genesis viene con un filtro que puede cambiar el contenido sin cambiar el aspecto de marcado, el filtro en cuestión es Genesis_Seo_Title, que puede ver en Genesis/Header.php desde la línea 932
Entonces, en lo anterior, todavía uso el encabezado de subrayos y elimino el logotipo si el encabezado está configurado, si no está configurado, elimine el nombre del sitio. El resto del código es una salida mejorada de Tony Eppright, publicada aquí. Lo que quería de otra manera (del método Tonys) era que la imagen sería administrada por la opción. También agrego la clase de visión. Sin embargo, la descripción del sitio se mostrará normalmente si la imagen no está configurada en la personalización. La opción de filtro es mejor. CSS CLIMING TAMBIÉN, necesitaremos eliminar algunos CSS asociados con la ocultación. Imagen de encabezado. Descripción del sitio,
.Header-Image. Site-Title {
Bloqueo de pantalla;

Text -indent: -9999px;
} En esto .HEADER-IMAGE. SITE-DEESSCRIPTION {
Bloqueo de pantalla;
Text -indent: -9999px;
} y aún se elimina.
flota a la izquierda;
Altura mínima: 150px;
Ancho: 100%;
} Y si tiene una versión hereditaria utilizando un logo.png depositado en la carpeta de imagen – Eliminar CSS
.title -ear {
fondo: url (imágenes/logo.png) centro sin repetir;
llenado: 0;
}