Un buen sitio web es como un buen libro. Puedes tomar el libro porque inmediatamente te sientes atraído por su portada. Luego irá a la contraportada para encontrar información importante como la sinopsis del libro, la lista de notas de otros autores, el precio, etc.
De la misma manera, puedes pensar en el encabezado y pie de página de tu sitio web. El encabezado es la portada del sitio web: generalmente incluye el nombre de la página en letra grande, una imagen de fondo y poco más. El pie de página es la contraportada de su sitio web que contiene información importante, como aviso de derechos de autor, logotipos, enlaces de navegación, información de contacto y más.
Al igual que la portada de un libro, el encabezado y el pie de página son elementos de diseño importantes de un sitio web de WordPress. Afortunadamente, los temas de WordPress vienen con un encabezado y un pie de página predeterminados, por lo que no es necesario que los codifiques desde cero.
Sin embargo, es probable que deba agregar código para personalizar las secciones de encabezado y pie de página. Hay dos razones principales. Primero, para un control completo sobre la apariencia del encabezado y el pie de página, debe agregar CSS personalizado. En segundo lugar, para integrarse con ciertos servicios, como Google Analytics, debe agregar fragmentos de código a la sección de encabezado o pie de página de su sitio web.
Hay muchas formas de agregar código al encabezado y al pie de página. Analicemos brevemente cada opción a continuación.
¿Cómo insertar encabezados y pies de página en su sitio web?
De forma predeterminada, el encabezado y el pie de página de WordPress son fragmentos de código simples. Por ejemplo, si fue al archivo de plantilla wp-content / themes / classic / header.php en Tema clásico de WordPressverá el siguiente código de encabezado:
<h1 id="header"><a rel="noopener" target="_blank" rel="noopener" target="_blank" href="https://blog.hubspot.com/website/<?php bloginfo("url'); ?>"><?php bloginfo('name'); ?></a>
</h1>
La siguiente información de estilo se puede encontrar en el archivo style.css:
#header {background: #90a090;
border-bottom: double 3px #aba;
border-left: solid 1px #9a9;
border-right: solid 1px #565;
border-top: solid 1px #9a9;
font: italic normal 230% 'Times New Roman', Times, serif;
letter-spacing: 0.2em;
margin: 0;
padding: 15px 10px 15px 60px;
}
Debido a este CSS, el encabezado del tema clásico predeterminado tendría un color de fondo verde, un marco multicolor, una fuente Times New Roman y un relleno que sangra el texto en el lado izquierdo. El resultado sería algo como esto:
Sin embargo, suponga que el esquema de color de su sitio web no contiene verde. O estás usando una fuente diferente en tu sitio. Cualquiera sea el motivo, puede cambiar el color de fondo, el borde, el tamaño y el estilo de fuente, el espaciado entre letras y más al editar o agregar código.
Puede insertar código de encabezado y pie de página de tres maneras.
- Puede editar manualmente la hoja de estilo style.css o los archivos header.php y footer.php del tema.
- Puede usar los módulos de código de encabezado y pie de página integrados del tema, si los hay.
- Puedes usar un complemento de WordPress.
Si es nuevo en la codificación, debe usar un complemento. La mayoría de los usuarios optarán por esta opción, ya que editar la hoja de estilo o los archivos de temas puede ser difícil, ya que un pequeño error podría dañar su sitio. Además, estos cambios generalmente se deshacen cuando actualiza su tema o versión de WordPress.
Por esta razón, hemos incluido algunos de los mejores complementos para insertar código de encabezado y pie de página a continuación.
Complementos para insertar encabezados y pies de página
Usar un complemento es la forma más fácil no solo de agregar código a su encabezado y pie de página de WordPress, sino también de crear y personalizar estas secciones. Hemos reunido las mejores opciones de complementos a continuación. Elige la herramienta que mejor se adapte a tus necesidades y presupuesto.
- Insertar encabezados y pies de página: Lo mejor para agregar código rápidamente a encabezados y pies de página
- Inyecciones de cabeza, pie y post.: Lo mejor para agregar código de Google Ads a encabezados, pies de página y publicaciones.
- Administrador de código de encabezado y pie de página: Mejor para agregar múltiples guiones a encabezados y pies de página
- Elementor – plantilla de encabezado, pie de página y bloques: Lo mejor para los usuarios de Elementor
- Mi encabezado de pie de página: Lo mejor para crear encabezados y pies de página totalmente personalizados.
1. Insertar encabezados y pies de página: Lo mejor para agregar código rápidamente a encabezados y pies de página
Diseñado para ser la forma más fácil de insertar código en los encabezados y pies de página de WordPress, Insertar encabezados y pies de página es un complemento gratuito que ofrece una interfaz simple para insertar scripts. En el mismo lugar, puede insertar código CSS personalizado, código de seguimiento de Google Analytics, código de seguimiento de píxeles de Facebook y más. No es necesario editar archivos de temas ni descargar e instalar varios complementos.
Mejor para: Fácil y rápida integración y modificación de encabezado y pie de página. Con más de un millón de descargas y actualizaciones periódicas, Insertar encabezados y pies de página se trata de simplificar las funciones clave de encabezado y pie de página en un lugar fácil de usar.
2. Inyecciones de cabeza, pie y post.: Lo mejor para agregar código de Google Ads a encabezados, pies de página y publicaciones.
El complemento de encabezado y pie de página simple y flexible es otra opción gratuita para agregar cualquier script en la sección de encabezado o pie de página de su sitio web, página de inicio o cualquier otra página o publicación. Puede agregar el código de Google Analytics, el código de verificación requerido por las Herramientas para webmasters de Google, un script de Facebook para el botón Me gusta y más. Esto es especialmente bueno si está utilizando Google Ads, ya que le permite agregar un código de anuncio a cualquier parte de su publicación o página. También puede agregar código a los encabezados y pies de página.
Mejor para: Agregue Google Ads, Facebook Pixel y un código de seguimiento personalizado a sus encabezados, pies de página y publicaciones. Simplemente copie y pegue este código en las inyecciones de encabezado, pie de página y publicación para cambiar sus publicaciones y páginas sin afectar el código de su tema.
3. Administrador de código de encabezado y pie de página: Mejor para agregar múltiples guiones a encabezados y pies de página
Header Footer Code Manager tiene más de 200.000 instalaciones y se actualiza regularmente para mantenerse al día con el desarrollo de WordPress. Este complemento le permite ver exactamente qué fragmentos están cargados en su sitio, dónde se muestran y quién los ha cargado. También asegura que no perderá su código de encabezado y pie de página si cambia o cambia de tema.
Mejor para: Reduzca la complejidad del encabezado y pie de página. El propósito de este complemento es integrar y simplificar las funciones de complementos similares en una solución que le permita agregar, administrar y controlar encabezados y pies de página con confianza. También le permite agregar un número ilimitado de guiones a los encabezados y pies de página. Si solo está agregando el código de seguimiento de Google Analytics, pruebe una herramienta más simple como Insertar encabezados y pies de página.
4. Elementor – plantilla de encabezado, pie de página y bloques: Lo mejor para los usuarios de Elementor
Si es nuevo en la codificación para escribir CSS personalizado, puede usar un complemento como Elementor para personalizar las secciones de encabezado y pie de página.
Con este editor, puede crear diseños de encabezado y pie de página personalizados y elegir dónde mostrarlos. ¿Quiere mostrar un encabezado y un pie de página personalizados solo en su página de inicio? ¿O tal vez solo en la página de archivo del blog? ¿O tal vez todo el sitio? Este complemento le permite elegir cualquier ubicación de destino. También puede usar los widgets integrados del complemento para crear estos diseños de encabezado y pie de página con las funciones que desee, como logotipo, título, eslogan, título de página, imagen, aviso de derechos de autor y formulario de búsqueda.
Mejor para: usuarios actuales de Elementor. Como una de las plataformas de diseño y complementos de WordPress más populares, Elementor ofrece una gama de servicios para ayudar a mejorar la administración de WordPress. Si ya está usando Elementor o planea comenzar, este complemento es una excelente opción.
5. Mi encabezado de pie de página: Lo mejor para crear encabezados y pies de página totalmente personalizados.
My Header Footer es un complemento premium diseñado para simplificar el proceso de edición de las secciones de encabezado y pie de página de WordPress. Con esta herramienta, puede eliminar el encabezado y el pie de página predeterminados del tema y crear uno propio desde cero, conservar uno y rediseñar el otro, o editar ambos. También puede agregar campos dinámicos al encabezado y al pie de página, crear menús de navegación totalmente receptivos, diseñar menús para diferentes tipos de dispositivos y agregar CSS personalizado.
Mejor para: Cree encabezados y pies de página personalizados. My Header Footer resuelve el mayor problema con los encabezados y pies de página de WordPress: son difíciles de editar con las herramientas estándar de WordPress. Este complemento está diseñado para permitirle editar encabezados y pies de página a pedido y con total flexibilidad.
Personalización del encabezado y pie de página de WordPress
Tiene muchas opciones para personalizar su encabezado y pie de página de WordPress; cada una es adecuada para usuarios con diferentes niveles de experiencia técnica. Si bien las personas con experiencia en codificación no tendrán problemas para editar archivos de temas, las personas sin experiencia en codificación pueden usar el complemento. Cada uno de estos métodos da como resultado un sitio web diseñado de arriba a abajo para reflejar la identidad única de su marca.
Nota del editor: esta publicación se publicó originalmente en octubre de 2020 y se actualizó para que sea completa.
