Cómo editar el pie de página en WordPress (4 métodos)

¿Quieres editar el pie de página de tu sitio web WordPress?

Ya sabes, ¿la parte de tu sitio web que suele tener un 'Powered by WordPress'?

También podría tener una declaración de derechos de autor, sus enlaces a redes sociales, información de contacto, un conjunto adicional de enlaces como la política de privacidad, descargos de responsabilidad y tal vez incluso un mapa de Google.

Los visitantes de su sitio web pueden sentir que la declaración por defecto está un poco fuera de lugar y, a veces, también es poco profesional.

Por lo tanto, tiene sentido editar el pie de página del sitio web de WordPress y elegir mostrar información relacionada con su marca.

Si quieres saber cómo editar un pie de página en WordPress, te recomendamos que le eches un vistazo a este artículo, ya que te lo explicamos todo paso a paso.

¿Qué es un pie de página de WordPress?

Como su nombre indica, el pie de página se encuentra en la parte inferior de un sitio web.

Por ejemplo, en la parte inferior de esta página (y en todo nuestro sitio WP Astra) verás lo siguiente:

Además de la declaración de derechos de autor y los iconos de redes sociales, verás una serie de enlaces adicionales. Puede añadirlos con widgets de pie de página.

Si se planifica con cuidado, el pie de página del sitio web puede aumentar significativamente la experiencia del usuario al incluir una colección de enlaces que permiten a los usuarios acceder a ellos desde casi cualquier página.

Ejemplos de pies de página para inspirarse

He aquí algunos ejemplos plantillas de sitios web.

Aunque puede dar rienda suelta a su imaginación y ser creativo con el diseño del pie de página de su sitio web, estos ejemplos deberían servirle de inspiración para empezar.

Entrenador de salud en línea

Un pie de página sencillo y directo que incluye un CTA de "Suscribirse al boletín", iconos de redes sociales, una declaración de copyright y la línea "powered by".

Empresa de consultoría empresarial

En este ejemplo, el pie de página incluye la dirección, además de los elementos mencionados anteriormente.

Agencia de marketing digital

¿Quieres promocionar tu negocio? ¿Quieres recordar a tus usuarios los servicios que ofreces? Pues inclúyalos todos en el pie de página del sitio web.

Como se muestra en este ejemplo, se recuerda al usuario los servicios de su empresa a medida que se desplaza hasta la parte inferior de su sitio web. Esto también funciona si tiene un Tienda de comercio electrónico ya que tiene otra oportunidad de exhibir productos.

Tienda de muebles

Como hemos mencionado en el ejemplo anterior, este pie de página incluye enlaces a categorías de productos individuales. Esto es especialmente útil cuando tienes poco espacio en el menú de navegación superior.

Blogger técnico

Por último, este ejemplo incluye todos los elementos que acabamos de ver, es decir, los enlaces a las redes sociales, el CTA del boletín, los enlaces individuales, la dirección, el copyright y una línea de "Powered-by".

Cómo acceder y editar el pie de página del sitio web en WordPress

Una vez que crear un sitio web en WordPressEn el pie de página de su sitio web encontrará una declaración de copyright y una declaración "Powered by WordPress", similar a la imagen siguiente.

El nombre de dominio mencionado en la declaración de derechos de autor, es decir, "Copyright © 2020 Nombre de dominio", suele sustituirse por su propio dominio.

Tanto si eres una organización que desea mostrar el nombre de su marca en el pie de página como si eres un autónomo al que le gustaría incluir tu información de contacto, la edición del pie de página en WordPress te ofrece esa personalización adicional que deseas.

Eliminar el texto "Powered by WordPress" del pie de página de WordPress

Afortunadamente, editar el pie de página del sitio web en WordPress es bastante sencillo.

Pero, lo primero es lo primero.

¿Cómo se accede al pie de página? ¿Es un archivo y, en caso afirmativo, dónde se encuentra?

Normalmente, existen dos métodos para editar el pie de página.

• A través de un editor WYSIWYG (por ejemplo, el personalizador integrado de WordPress, constructores de páginas como Elementorinstalación de plugins de WordPress, etc.)

O

• Accediendo al archivo 'footer.php

Si compartimos los mismos sentimientos, entonces editar el pie de página a través del editor WYSIWYG (What You See Is What You Get) es mucho más sencillo que abrir el archivo PHP con interminables líneas de código.

Aunque el proceso de edición del pie de página es el mismo, lo que debe tener en cuenta es la ubicación del pie de página.

Esto puede variar según los temas.

En 9 de cada 10 temas, puedes acceder al pie de página entrando en la sección "Personalizar", en "Apariencia" (Apariencia > Personalizar), como se muestra a continuación.

Un método alternativo, si está utilizando el tema Astra, es dirigirse a Apariencia > Encabezado, pie de página y bloques.

Ahora que ya sabes cómo encontrar el pie de página, pasemos a nuestro primer método.

Método 1: Editar el pie de página del sitio web con el personalizador de WordPress

Diríjase a 'Apariencia > Personalizar > Pie de página > Barra de pie de página'.

Suponemos que está utilizando el Tema Astracomo hemos hecho en este artículo.

Si está utilizando cualquier otro tema, entonces la configuración puede parecer un poco diferente. Pero todavía se puede editar el pie de página a través del personalizador de WordPress.

Como se muestra en la imagen anterior, puedes editar el enlace de copyright de Astra desde la barra de pie de página.

Con el Configuración de la barra de pie de página de AstraTambién puede añadir un widget y un menú.

Con la opción de widget, puedes desbloquear posibilidades ilimitadas, como añadir iconos de redes sociales, mostrar publicaciones recientes, categorías y mucho más.

También verás etiquetas integradas en las áreas de texto personalizadas, como:

[current_year] and [site_title]

Deberías dejarlo como está a menos que quieras volver cada año y actualizar el año actual y el título del sitio.

¿Quieres añadir algo de HTML personalizado aquí?

Por ejemplo, puede que desee añadir el texto "Alojado en BlueHost" e hipervincularlo en nuestro ejemplo anterior.

El enlace también puede ser su enlace de afiliado, en caso de que quiera ganar una comisión de referencia por recomendar un servicio de alojamiento.

¿Cómo se hace?

Tendrás que añadir algunas etiquetas HTML.

Para insertar un enlace, deberá incluir un "Ancla" (<a>). Por lo tanto, si desea enlazar sólo 'Hosted on BlueHost', su línea de código sería la siguiente,

Sin enlace:

Sitio web alojado en BlueHost

Con enlace de afiliado (anchor tag):

Página web <a href="/es/”https://git-staging.wpastra.com/go/bluehost”/">Alojado en BlueHost</a>

Con enlace de afiliado (etiqueta de anclaje) que se abre en una ventana nueva:

Página web <a href="/es/”https://git-staging.wpastra.com/go/bluehost”/" target="”_blank”">Alojado en BlueHost</a>

No olvides pulsar el botón 'Publiqueen la parte superior para guardar los cambios.

¡Voilà! Su pie de página acaba de ser actualizado en todo su sitio web.

Método 2: Utilizar el Constructor de encabezados y pies de página Astra

Este método es exclusivo para quienes utilizan el tema Astra.

Astra tiene se ha introducido un constructor de encabezados y pies de página que se puede arrastrar y soltar. Esto le da la libertad de personalizar la navegación y el pie de página de su sitio web sin escribir una sola línea de código. Basta con arrastrar y soltar.

Usted tiene el control total sobre el posicionamiento y el estilo de los elementos de pie de página utilizando un editor en vivo.

Suponiendo que tengas Astra instalado, dirígete a Apariencia > Personalizar > Constructor de pie de página.

Utilizando el Constructor Visual (como se muestra en la imagen), puede añadir y gestionar los distintos elementos del pie de página.

A la hora de personalizar los elementos que acabas de añadir, puedes hacerlo desde la pestaña General y Diseño.

El nuevo Visual Footer Builder es un constructor de pie de página avanzado que le permite realizar cambios que se reflejan en todo su sitio web al instante.

Basta con arrastrar y soltar los widgets necesarios en las distintas secciones, y ya está.

Método 3: Editar el pie de página en WordPress con el plugin Header Footer & Blocks

En nuestro segundo método, vamos a suponer que tiene Astra y el Creador de páginas Elementor instalado. Simplemente hace que crear y editar páginas web sea mucho más fácil.

Para empezar, vamos a instalar un plugin.

Diríjase a 'Plugins > Añadir nuevo' y busque la opción 'Elementor Encabezado Pie de página y Bloques' plugin.

Instale y activar este plugin.

Una vez activado este plugin, dirígete a 'Apariencia > Encabezado, pie de página y bloques.' Encontrará el 'Pie de páginaPlantilla.

Haga clic en 'Editar con Elementoren la plantilla "Pie de página".

Ahora se le dirigirá a la sección 'Editar derechos de autoren el constructor de páginas Elementor.

A medida que realiza los cambios en el texto, puede previsualizar cómo aparecerá en el pie de página del sitio web.

Una vez que haya realizado los cambios y modificaciones necesarios, haga clic en 'Actualización(en la parte inferior de la página). Los cambios se aplicarán a todo el sitio web.

¿No habíamos dicho que editar el pie de página de su sitio web en WordPress es fácil? Del mismo modo, puede editar la cabecera de WordPress con Elementor.

Método 4: Editando el archivo footer.php

Mientras que los tres métodos anteriores eran bastante sencillos, este método implicará un poco de codificación. Aunque este método no es demasiado técnico, debes cubrir todos los pasos mencionados aquí.

Para empezar, tendrá que instalar un tema hijo. ¿Por qué?

Digamos que has hecho cambios en los archivos PHP del núcleo y la próxima vez que recibas una notificación de actualización de tema, sigues adelante y actualizas tu tema.

Lo cual, por supuesto, es lo correcto. ¡Ten siempre actualizados tus temas y plugins!

Usted notará que una vez que su tema se actualiza, todos los cambios que hizo en los archivos PHP desaparecerán. Sobrescritos por nuevas versiones frescas como parte de la actualización.

Para evitar que esto ocurra, recomendamos crear un tema hijo.

Esto nos lleva a la pregunta más importante.

¿Cómo se crea un tema hijo?

Diríjase a 'Generador de temas infantiles Astra.'

Introduzca un nombre para el Tema Hijo que desea crear. Puede ser cualquier nombre de su elección.

Para este artículo, crearemos un tema hijo y lo llamaremos 'mychildtheme'.

Ahora puede hacer clic en el botón 'Generepara descargar su tema hijo, pero le recomendamos que haga clic en el botón 'Opciones avanzadas' en su lugar.

En Opciones avanzadas, puede personalizar campos como Autor, URL del autor, Nombre de la carpeta y seleccionar una Captura de pantalla (que aparece como diseño de portada del tema).

Por ejemplo, enAutor', 'Autor URLyNombre de la carpeta', hemos introducido 'My Child Theme' (un nombre de su elección), 'https://mychildthemedomain.com' (este tiene que ser el nombre de dominio, bajo el cual está instalando el tema hijo) y 'mychildtheme' (nombre de la carpeta bajo la cual se instalará el tema hijo en el servidor en vivo), respectivamente.

Selecciona una captura de pantalla, preferiblemente una imagen de 1200×900, en línea con el tema Astra. Esto es, de nuevo, puramente tu elección.

Una vez completados todos los pasos anteriores, haga clic en 'Genere.' Su tema hijo, en este caso, 'mychildtheme.zip' se descargará.

Ahora, dirígete a 'Apariencia > Temas > Añadir nuevo > Subir tema.'

Sube el tema hijo y, a continuación, instálalo y actívalo.

Genial, tu tema hijo ha sido activado.

Ahora, dirígete a 'Apariencia > Editor de temas.'

Es posible que, en ocasiones, se te pida que evites utilizar el editor de temas. Mientras tengas cuidado y no acabes editando (o incluso borrando) los archivos, no pasa nada.

Por defecto, verás que el tema hijo que acabas de instalar está seleccionado en el Editor de temas.

Los archivos por defecto bajo el tema hijo serán 'style.cssyfunciones.php.'

Por lo tanto, si desea editar el archivo 'pie.phptendrá que copiar el archivo del tema principal en el tema secundario.

Uno de estos métodos consiste en crear un nuevo archivo vacío llamado footer.php en su sistema y subirlo a la carpeta del tema hijo.

También puedes copiar y subir el footer.php del tema padre (si no puedes crear un archivo footer.php).

Sólo asegúrese de eliminar el código de su interior y sólo añadir el código que desea modificar. Esto anulará el footer.php del tema padre

Una vez que esté en el editor de temas (de nuevo en el panel de WordPress), busque el icono 'pie.phpArchivo ' en 'Archivos temáticos.' Se encuentra entre los archivos de la derecha de su panel de control.

Busque elDesarrollado por WordPressentre el código (como se indica a continuación)

Sustituya el texto por su marca y, una vez completado, haga clic en 'Actualizar archivo.'

No ha sido tan difícil, ¿verdad?

Personalizar el pie de página de WordPress

Hemos mencionado anteriormente en este artículo cómo editar el pie de página utilizando el personalizador de WordPress.

Con el personalizador, puede modificar los colores, añadir una imagen de fondo y jugar con la tipografía del pie de página de WordPress.

Una vez activado el Colores y módulo de fondo disponibles con Astra ProAdemás, tiene una opción adicional para añadir una imagen de fondo a la barra de pie de página.

Una vez activado, dirígete a Apariencia > Personalizar > Pie de página > Barra de pie de página.

En virtud de la Color de fondo verás una pestaña para añadir una imagen. Adelante, incorpora una imagen de fondo que combine con el pie de página de tu web.

Lo mismo ocurre con la tipografía.

Una vez activado el módulo de tipografía desde los ajustes del Astra Pro, encontrará algunas opciones dedicadas a la tipografía en Apariencia > Personalizar > Pie de página > Barra de pie de página.

¿Quieres más opciones de estilo? Echa un vistazo al Módulo de widgets de pie de página que viene con el Addon Astra Pro.

Lo que no debe hacer

Además de los métodos mencionados anteriormente, existe otro método para editar el pie de página en WordPress. Esto es mediante la edición del archivo '.css'.

Aunque le explicaremos cómo se hace, es una opción que le recomendamos que no utilice. La razón de esto se cubrirá pronto.

Volver a 'Apariencia > Editor de temas', y esta vez, seleccione el archivo 'style.css' de la lista de archivos de la derecha, en 'Archivos temáticos.'

Busque (CTRL + F) '.site'.

Verá un bloque de código que empieza por '.site'. Como el resaltado en la imagen de arriba.

Incluya la siguiente línea de código.

.site-info {display: none;}

Puede insertar esta línea después de los paréntesis de cierre (}) y antes de '.site-'.

Por ejemplo, en la imagen de arriba, el código original es el siguiente (de la línea #1875).

}
.site-title {

Puede sustituirse por

}
.site-info {display: none;}
.site-title {

Una vez que hayas terminado, haz clic en 'Actualizar archivo.' Y ya está.

Aunque esta opción no es demasiado técnica, no la recomendaríamos desde un punto de vista puramente Punto de vista SEO.

La línea de código anterior, es decir, .site-info {display: none;}es un medio de ocultar la información del sitio. Lo que se reduce a ocultar el contenido de su página web.

Ocultar contenido no es bien visto por Google y puede tener consecuencias negativas para el SEO, como una mala clasificación de las palabras clave y, en algunos casos, ¡no clasificar en absoluto!

Echa un vistazo a este artículo sobre Todo lo que necesitas saber sobre el texto oculto y SEO por Diario de los motores de búsqueda si desea más información.

Así que, aunque compartimos cómo hacerlo, este es un método que te recomendamos encarecidamente que no utilices.

Cómo añadir código al pie de página de WordPress

¿Quieres añadir algún código personalizado a tu pie de página de WordPress? Tal vez incrustar un vídeo, algún contador de estadísticas del sitio web, o tal vez incluso algún código de seguimiento?

De acuerdo, la mayoría de los códigos de seguimiento se incorporan a la cabecera de su sitio web, pero, ¿por qué descartar esa opción?

Aunque hay varias formas de añadir código al pie de página de tu sitio web WordPress, vamos a ver una que utiliza la función Diseños personalizados que Astra Pro viene con.

Añada código al pie de página de su sitio web con el módulo de diseño personalizado de Astra

Necesitarás la versión Astra Pro para utilizar los diseños personalizados. Adelante, instale y active Astra Pro.

Una vez activado, dirígete a Apariencia > Opciones Astra y desplácese hacia abajo hasta la parte donde ve Diseños personalizados.

Adelante, active los diseños personalizados.

Encontrará una nueva pestaña en Apariencia > Opciones Astraque es Diseños personalizados.

Haga clic en Diseños personalizados y luego en Añadir nuevo.

Accederá a una página como la que se muestra a continuación.

Sigue adelante e incluye el código personalizado en el área que dice '<!– Add your snippet here. –>'.

Si te desplazas un poco hacia abajo, verás algunas opciones de configuración del diseño personalizado.

Una opción es seleccionar dónde desea incluir el código personalizado, es decir, en el encabezado, el pie de página, la página 404 o como ganchos.

En este caso, seleccionemos Pie de página.

Continuando, tienes algunos ajustes más, como Stick, Pantalla encendida, y Funciones de los usuarios.

¿Notas esos encabezados y pies de página que se pegan a la parte superior o inferior de la pantalla? En Stick le permite hacer precisamente eso.

Puede decidir dónde mostrar el fragmento de código mediante la opción Pantalla encendida opción. También puede optar por no mostrar el código en determinadas páginas añadiendo una regla de exclusión.

Una vez que hayas terminado con todos los ajustes, no olvides guardarlo y publicarlo.

Los cambios en el pie de página se mostrarán ahora en todo el sitio web.

¿Quieres más opciones para editar el pie de página del sitio web y añadir código personalizado? Consulte nuestro artículo detallado sobre cómo añadir código al encabezado y pie de página de WordPress.

Preguntas frecuentes sobre la edición del pie de página en WordPress

1. ¿Necesita un sitio web un pie de página?

Un sitio web no necesita un pie de página, pero se beneficia de su uso. Normalmente, el pie de página contiene las declaraciones de derechos de autor, los iconos de redes sociales, un conjunto de enlaces de menú, la dirección, un mapa en algunos casos y otros elementos de la página.

¿Se pueden incluir en otro sitio? Por supuesto que sí. Todo depende de cómo quiera organizar los enlaces de su sitio web. La mayoría de las organizaciones utilizan el espacio principal de su sitio web para destacar los enlaces más importantes, como los de sus productos y servicios.

Lo ideal sería no saturar el espacio principal con enlaces como Política de privacidad, Renuncias de responsabilidad y Divulgaciones de la FTC. Así, aunque estos enlaces son igualmente importantes, podríamos añadir un conjunto secundario de enlaces (menú secundario) al menú de pie de página.

2. ¿Es legal eliminar "Proudly Powered By WordPress"?

Sí, es legal eliminar los enlaces de crédito del pie de página "Proudly Powered by WordPress". Para empezar, WordPress es libre. WordPress está licenciado bajo la GPL, es decir, la Licencia Pública General, que proporciona cuatro libertades fundamentales.

Como se muestra en la imagen anterior, procedente de la propia WordPress, la plataforma nos da la libertad de utilizar, modificar e incluso redistribuir WordPress. Esto no se limita únicamente a la plataforma WordPress, sino también a cualquiera de los temas y plugins de WordPress. Por supuesto, los temas y plugins deben proceder del directorio oficial de WordPress.org.

Así que no te preocupes. Usted puede seguir adelante y editar el pie de página en WordPress.

3. ¿Puedo añadir imágenes al pie de página?

Sí, puedes añadir imágenes al pie de página, y a continuación te explicamos cómo. Para empezar, vaya a 'Apariencia > Personalizar > Pie de página > Widgets de pie de página' (Se lo hemos puesto más fácil con la serie de imágenes de abajo).

En Widgets de pie de páginaseleccione la opción de presentación alternativa. Seleccione la opción de diseño que muestra cuatro casillas.

Ahora que ha seleccionado la opción de diseño de 4 widgets para el pie de página, siga adelante y establezca los widgets para cada bloque en Apariencia > Personalizar > Widgets > Widget de pie de página 1/2/3/4.

Incluya la imagen en el área correspondiente del widget de pie de página.

Alternativamente, si usted tiene la última versión de WordPress instalado, es decir, WordPress 5,8diríjase a Apariencia > Widgets.

Desplácese hacia abajo hasta la parte en la que verá las cuatro áreas de widgets de pie de página. Haz clic en el widget de pie de página correspondiente y añade un bloque de imagen.

No olvides actualizar los cambios una vez que hayas terminado.

Y así de sencillo es añadir una imagen al pie de página de WordPress.

4. ¿Cómo añado iconos de redes sociales al pie de página?

Es muy fácil añadir iconos de redes sociales al pie de página. En lugar del icono 'widget de imagen,' añades tu widget de iconos sociales. Sí, necesitará un plugin para redes sociales pero el resto es fácil.

Puede elegir entre varias opciones disponibles en el repositorio de plugins de WordPress.

Una vez que hayas instalado y activado el plugin, debajo de los iconos sociales, selecciona 'Añadir Widget' en el Widget de Pie de Página de tu elección, y tus iconos de redes sociales aparecerán en el pie de página.

5. ¿Cómo añado un formulario de contacto en el pie de página?

Es muy sencillo añadir un formulario de contacto al pie de página. Como se muestra a continuación, en lugar de añadir el carácter 'Widget de imagenen el pie de página, añada el símbolo 'WPForms' widget.

Para obtener el widget WPForms, primero tiene que instalar el plugin WPForms y crear un formulario de contacto.

Una vez que haya añadido el widget WP Forms a su widget de pie de página, por ejemplo, Footer Widget Area 1, seleccione el formulario que desea incluir en el pie de página.

Por ejemplo, seleccione 'Formulario de contacto 1como se muestra en la imagen y haga clic en 'Guardarcuando haya terminado.

Actualice su página web y verá el formulario en el pie de página.

6. ¿Cómo añado un mapa de Google al pie de página de WordPress?

Puedes añadir un Google Map al pie de página de WordPress con facilidad. En lugar de utilizar el widget de imagen, hay dos métodos para añadir su mapa de Google en el pie de página.

El primer método consiste en incrustar el código. Piense en un mapa que le gustaría incluir en el pie de página o en su sitio web.

Copie el código HTML que aparece debajo de "Incrustar un mapa".

A continuación, en el widget de pie de página de su elección, añada el carácter 'HTML personalizado,' bloque.

Una vez que hayas añadido el bloque "HTML personalizado" al widget de pie de página, pega el código HTML que has copiado en el área de contenido.

Y luego haga clic en 'Guardar.'

La opción alternativa es instalar un plugin, como por ejemplo Widget de mapas para Google Mapsy añade el widget a tu pie de página. Y el resto del procedimiento es el mismo que se explicó anteriormente.

Reflexiones finales

Aunque el pie de página es lo último en lo que pueden fijarse sus visitantes, es un elemento bastante importante de su sitio web WordPress. Es una forma más de incluir información importante y enlaces que podrían servir de recordatorio a tus visitantes mientras se desplazan hasta la parte inferior de tu sitio web.

El pie de página de su sitio web puede desempeñar una función importante, desde incluir enlaces a sus redes sociales hasta enumerar sus productos o servicios, añadir información de contacto, una declaración de derechos de autor y un montón de enlaces no tan importantes pero útiles.

Editar el pie de página de tu sitio web en WordPress es bastante sencillo. Ya sea usando un editor WYSIWYG o editando algunos archivos PHP, aquí lo tenemos todo cubierto.

Nos gustaría saber su opinión. ¿Cómo se edita el pie de página del sitio web? ¿Hay algún método que se nos haya escapado? Háznoslo saber.