Agregar código a un encabezado o pie de página de WordPress

Por una amplia variedad de razones, es posible que en algún momento desee o necesite agregar código al encabezado o pie de página de su sitio de WordPress. Desafortunadamente, la plataforma no proporciona una forma simple o directa de hacer esto de manera inmediata.

La buena noticia es que puede remediar esto fácilmente con la ayuda de un tema secundario y su archivo functions.php , o un complemento de WordPress. Cualquiera que sea el método que elija, podrá mejorar fácilmente su sitio con funciones personalizadas, datos de usuario y estrategias de mejora del rendimiento.

En esta publicación, explicaremos algunos casos en los que podría necesitar o desear agregar código al encabezado y pie de página de su sitio de WordPress. Luego, compartiremos instrucciones paso a paso para dos métodos que le permitirán editar estos elementos para crear un encabezado o pie de página personalizado. ¡Empecemos!

¿Por qué editar su código de encabezado y pie de página de WordPress?

Las razones por las que puede querer editar su encabezado o pie de página de WordPress son muchas y variadas. Probablemente el más obvio es que a veces desea diseñar su sitio mediante el uso de un código personalizado y necesita una forma de agregar este código a su encabezado y/o pie de página.

Sin embargo, estos también son lugares privilegiados para los códigos de seguimiento, como el que se usa para Google Analytics. Estos códigos pueden proporcionar información valiosa sobre el comportamiento del usuario para mejorar sus estrategias de marketing y contenido.

Además, WordPress no incluye etiquetas meta por defecto. Estos se agregan al encabezado de su sitio para ayudar a los motores de búsqueda a rastrear sus páginas. Aunque ahora no son tan relevantes como solían ser, no hay nada de malo en agregarlos a su encabezado; solo pueden ayudar a la visibilidad de su sitio.

Por último, es posible que esté familiarizado con la práctica de mover el JavaScript que bloquea el renderizado 'debajo de la página'. Esto generalmente significa agregarlo al pie de página de WordPress, lo que requerirá editar su código. Esta técnica puede ayudar a mejorar el rendimiento de su sitio al disminuir los tiempos de carga.

Cómo agregar código a su encabezado o pie de página de WordPress manualmente (en 2 pasos)

Hay dos métodos principales para agregar código a su encabezado o pie de página de WordPress. El primero es editar manualmente el tema de su sitio y el segundo es usar un complemento. Aunque editar manualmente los archivos de su tema es más arriesgado y difícil, para algunos usuarios más avanzados es el método preferido.

Paso 1: crea un tema secundario

Agregar código manualmente a su encabezado o pie de página de WordPress implica editar algunos de los archivos de su tema. Cuando tenga que hacer esto, siempre es aconsejable editar un tema secundario en lugar de jugar directamente con los archivos de su tema principal. De esta manera, puede evitar perder sus cambios cuando actualice su tema.

Afortunadamente, el proceso para crear un tema secundario manualmente es bastante simple y puede acceder a los tutoriales de WordPress que necesitará para personalizar los encabezados. Sin embargo, si necesita crear un tema secundario en un abrir y cerrar de ojos, un complemento de creación de temas como Child Theme Configurator puede ayudar.

Con un complemento de creación de temas, puede generar fácilmente un tema secundario con solo hacer clic en un botón, aunque el enfoque completamente manual podría ser igual de rápido una vez que haya dominado el método.

Paso 2: edite el archivo functions.php de su tema infantil

Una vez que haya configurado su tema secundario, deberá acceder y editar su archivo functions.php . Antes de comenzar, siempre es aconsejable hacer una copia de seguridad de su sitio, en caso de que cometa algún error y desee restaurarlo fácilmente a un estado anterior.

La forma habitual de editar su archivo functions.php es a través del Protocolo de transferencia de archivos (FTP) y un cliente FTP como FileZilla. Sin embargo, también puede editar ciertos archivos desde su panel de WordPress. Para acceder a él, vaya a Apariencia > Editor de temas .

Recibirá una advertencia de que está a punto de editar los archivos de su tema; haga clic en el botón Entiendo para continuar. A continuación, querrá asegurarse de que ha seleccionado el archivo correcto. En la barra lateral a la derecha del editor del sitio, asegúrese de que esté seleccionado Funciones del tema (functions.php) .

Ahora puede agregar su código personalizado al final de este archivo y hacer clic en Actualizar archivo cuando haya terminado.

Cómo agregar código a su encabezado o pie de página de WordPress con un complemento (en 2 pasos)

Si bien en algunos casos puede ser más fácil editar manualmente los archivos de su tema de WordPress para agregar código a su pie de página o sección de encabezado, usar un complemento suele ser la ruta más segura. Para los propósitos de este artículo, usaremos uno de los complementos más populares y mejor calificados para la tarea, Inyecciones de encabezado, pie de página y publicación.

Sin embargo, hay muchos complementos disponibles en el directorio de complementos de WordPress y en otros lugares que pueden ayudar con esta tarea.

Paso 1: Instale y active el complemento de su elección

Para empezar, deberá instalar y activar el complemento que desea usar. Puede hacerlo descargando el archivo .zip del complemento del directorio de complementos u otro mercado en línea y luego cargándolo en su sitio. Alternativamente, navegue a Complementos> Agregar nuevo en su tablero.

Aquí puede buscar el complemento de pie de página o encabezado que desea utilizar. Cualquiera que sea el método que elija, terminará este paso haciendo clic en el botón Instalar , luego en Activar cuando se presente la opción.

Paso 2: agregue sus fragmentos de código a las inyecciones de encabezado, pie de página y publicación

Una vez que se instala el complemento, debería poder navegar a Configuración> Encabezado y pie de página en su tablero.

Aquí encontrará un editor de texto para agregar fragmentos de código, como un código de seguimiento de Google Analytics o JavaScript personalizado, que desee incluir en su encabezado o pie de página.

Hay mucho que puedes lograr en esta página. En los primeros dos campos puede agregar código a su sección de encabezado. El campo de la izquierda agrega el código a cada página de su sitio; esto es útil para Google Analytics, por ejemplo. El campo de la derecha agregará el código solo a su página de inicio.

Los siguientes campos agregan código al cuerpo y al pie de página de sus páginas. Los campos de la izquierda son para visualización de escritorio, mientras que los de la derecha son para versiones móviles de su código. Una vez que haya terminado de editar, no olvide hacer clic en el botón Guardar en la parte inferior de la pantalla.

Mejore la experiencia de su sitio con WP Engine

No hay duda de que desea que su sitio web de WordPress brinde una experiencia digital de primer nivel a sus usuarios. Agregar código a su pie de página o encabezado de WordPress es una táctica útil para personalizar su sitio, implementar Google Analytics o mejorar el rendimiento.

En WP Engine, tenemos una amplia variedad de recursos para desarrolladores que pueden ayudarlo a llevar la experiencia de su sitio web de WordPress a nuevas alturas. ¡Échales un vistazo hoy!