WordPress ensambla múltiples archivos de plantilla PHP para generar contenido legible para el usuario en el navegador.Los temas de WordPress contienen archivos header.php, footer.php, single.php (para publicaciones), page.php (para páginas) y sidebar.php; los temas más recientes usan secciones de plantillas adicionales para generar el contenido principal.
Todas estas plantillas están cuidadosamente ensambladas y se muestran cuando ve la página de WordPress en su navegador.Por lo general, no necesita modificar estos archivos y hay complementos disponibles para insertar funciones personalizadas.Sin embargo, en algunos casos, debe insertar código en las secciones de encabezado y pie de página de WordPress.
En este artículo, explicaremos cómo hacerlo sin y con complementos.
¿Por qué insertar código en el encabezado o pie de página?
Las secciones de encabezado y pie de página son útiles para varias integraciones de código y agregan funcionalidad adicional a su sitio.Estos son algunos de los mejores ejemplos que requieren que inserte código en el encabezado y pie de página de su sitio de WordPress.
Inserte el código de anuncio automático de Google AdSense o el código de anuncio de oferta de cabecera de cualquier otro programa de anuncios.
Instale el código de seguimiento de Google Analytics y Facebook Pixel.
Inserte captcha de Bing Webmaster Tools, Google Search Console, Baidu, Yandex y cualquier otra plataforma como Pinterest.
Agregue CSS personalizado al encabezado, como hojas de estilo de Google Fonts y JavaScript en el pie de página.
Inserte componentes personalizados como migas de pan en el encabezado cuando use complementos como Yoast SEO.
Como puede ver, la lista será más larga dependiendo de sus necesidades.
Agregar código a las secciones de encabezado y pie de página en WordPress
De forma predeterminada, WordPress no ofrece ninguna opción para insertar código en las secciones de encabezado y pie de página.La opción fácil es editar el archivo directamente e insertar su código.Sin embargo, también hay complementos disponibles para este propósito.En este artículo, explicaremos dos formas de agregar código a las secciones de encabezado y pie de página de cualquier sitio de WordPress.
Edite manualmente los archivos header.php y footer.php del tema de WordPress.
Use el complemento Insertar encabezado y pie de página para agregar código sin editar el archivo.
Además, explicaremos el uso de algunos temas para insertar código en encabezados y pies de página usando los ganchos wp_head y wp_footer.
Insertar manualmente el código de encabezado y pie de página de WordPress
Esta opción requiere editar el archivo header.php o footer.php en el tema de su sitio de WordPress y puede no ser amigable para principiantes.
Primero, comience preparando fragmentos de código o copiándolos de sitios de terceros.Una vez que tenga listo su código de encabezado y pie de página, coloque el cursor sobre el menú Apariencia en el panel del sitio y haga clic en la pestaña Editor de temas.
Ignore cualquier mensaje de advertencia que reciba y seleccione su tema activo de la lista desplegable "Seleccionar tema para editar:".
Seleccione el archivo "header.php" o "footer.php" a la derecha de la vista actual.
Para el encabezado, asegúrese de pegar el código debajo de la etiqueta de cierre "", luego el código para el pie de página debe estar debajo de "" Etiqueta.A veces, es posible que también deba insertar código antes de la etiqueta de cierre.
Finalmente, haga clic en el botón "Actualizar archivo" para guardar los cambios en su sitio con el fragmento agregado.
Asegúrese de probar su sitio y verifique que las funciones que conectó funcionen como se esperaba.
Inserte el código de encabezado y pie de página de WordPress usando complementos
De forma predeterminada, WordPress le permite agregar CSS personalizado a su sitio web en la sección Apariencia> Personalización> CSS adicional.Sin embargo, no puede insertar JavaScript en esta sección.Hay muchos complementos gratuitos y complementos disponibles para insertar código, aquí lo explicaremos usando "WPBeginner Insert Header and Footer".El complemento tiene una interfaz súper simple que los principiantes pueden usar fácilmente.
Primero, instale y active el complemento "Insertar encabezado y pie de página".Desde el panel de control de su sitio de WordPress, coloque el cursor sobre el menú Complementos y haga clic en Agregar nuevo.
Use la función de complemento de búsqueda para encontrar "Insertar encabezado y pie de página" y haga clic en el botón "Instalar ahora".Una vez que se complete el proceso de instalación, "Activar" el complemento.
Instalar complemento
Vaya al menú Configuración, busque y haga clic en el submenú Insertar encabezado y pie de página.
El complemento proporciona tres cuadros para colocar secuencias de comandos en el encabezado, el cuerpo y el pie de página para insertar código.Hasta entonces, los proveedores externos como Google Analytics le indicarán en qué casilla colocar sus fragmentos.De lo contrario, asegúrese de saber exactamente dónde desea insertar el código.
Pegue estos códigos en los códigos apropiados y haga clic en Guardar para completar los cambios en su sitio.
Los scripts de código ahora se cargan automáticamente en la ubicación específica donde se ejecuta el sitio.
Siempre puede editar más el código y mantener el complemento activo, ya que su desactivación evitará agregar funciones personalizadas y deshabilitará todos los scripts agregados previamente a su sitio.
Insertar código usando complementos
Tenga en cuenta que si por casualidad el complemento "Insertar encabezado y pie de página" se desactiva o desinstala por error, su código permanecerá en la base de datos de su sitio.Simplemente reinstale o reactive el complemento para que funcione el código anterior.Además, se recomienda que borre el caché de su sitio de WordPress al agregar y guardar cambios en los fragmentos de código de encabezado y pie de página en el complemento.
Editar encabezados y pies de página con temas
Ya sea que edite sus archivos de tema manualmente o use un complemento, el código que inserte afectará todo su sitio web.Debe usar complementos como Insertar fragmentos de HTML o probar bloques HTML personalizados en el editor de Gutenberg para insertar código personalizado solo en publicaciones o páginas específicas.Sin embargo, puede insertar código en encabezados y pies de página con los temas más recientes, como GeneratePress Premium y Astra Pro.Estos temas utilizan los enlaces estándar wp_head y wp_footer y permiten aplicar restricciones personalizadas.Por ejemplo, puede simplemente insertar migas de pan en una sola publicación sin afectar la página.
Aquí usaremos el tema Astra Pro para obtener instrucciones, puede realizar pasos similares en el tema GeneratePress Premium usando la opción 'Elementos'.
Después de instalar el complemento Astra Pro, vaya a Apariencia > Opciones de Astra.
Active la opción Diseño personalizado y haga clic en el enlace Configuración para esa opción.
Haga clic en el botón "Agregar nuevo" y pegue el código que desea insertar en el cuadro.
En la sección Configuración de diseño personalizado, haga clic en el menú desplegable Diseño y seleccione la opción Ganchos.
Insertar código de encabezado en el tema Astra
En la lista desplegable Acción, seleccione wp_head para la sección de encabezado y wp_footer para la sección de pie de página.
Si solo usa un fragmento, deje "prioridad" en blanco.Sin embargo, cuando inserte varios códigos en la misma ubicación del anzuelo, asegúrese de establecer el orden de prioridad para insertar los códigos.Puede usar 10, 20, 30, etc. como prioridad, el más bajo tendrá prioridad sobre los demás.
Proporcione detalles de espaciado superior e inferior en píxeles si es necesario.
Seleccione dónde desea mostrar el código en el menú desplegable Mostrar en.Puede seleccionar publicaciones, páginas, categorías específicas o insertar su sitio web completo o insertar tipos de publicaciones específicas, como publicaciones, páginas o cualquier tipo de publicación personalizada utilizada en su sitio web.
En la lista desplegable Función de usuario, seleccione la función de usuario para la que desea que el código esté activo.
Una vez que haya completado todas las configuraciones, haga clic en el botón Publicar para que los cambios surtan efecto.
Razones para usar el complemento Insertar encabezado y pie de página
Hay tantas desventajas en la edición de archivos de temas o en el uso de un tema personalizado que te quedarás con el enfoque del complemento.Estos son algunos de los beneficios que puede obtener al usar el complemento, excepto que es posible que no sea un experto en tecnología o que sea un principiante.
Dado que la tienda de complementos agrega scripts en una ubicación separada, no necesita preocuparse por el borrado de código durante las actualizaciones, actualizaciones o cambios de temas.Tampoco necesita temas secundarios, ya que el complemento funciona independientemente del tema de su sitio.
Hace que agregar código personalizado en encabezados y pies de página sea fácil y rápido.Además, esto ayuda a mantener la organización de fragmentos de código en una sola ubicación.
Es posible encontrar errores al elegir editar su tema de WordPress, por lo que usar un complemento puede ayudar a detectar, prevenir y evitar tales errores.
Pensamientos finales
En muchos casos, debe cambiar el aspecto, cambiar la forma o agregar otra funcionalidad a su sitio de WordPress.En cualquier caso, cuando no esté técnicamente inclinado, recuerde usar el método de complemento para insertar código de encabezado y pie de página.Si bien los temas como Astra y GeneratePress pueden ayudarlo con esto, deberá comprar la versión premium.Además, puede dificultar el cambio de temas, momento en el que deberá buscar complementos para usar.
