Entre la multitud de gestores de co­n­te­ni­dos WordPress es quizás el CMS más utilizado. Una página web de WordPress consta de varios co­m­po­ne­n­tes:

  • Núcleo de WordPress: la in­s­ta­la­ción de WordPress
  • Tema: un marco básico para mostrar contenido dinámico
  • Plugins: para ampliar la fu­n­cio­na­li­dad principal de WordPress
  • Contenido: creados por el pro­pie­ta­rio y al­ma­ce­na­dos en la mediateca

Para crear un WordPress realmente efectivo, suelen ser im­pre­s­ci­n­di­bles pequeños cambios. La in­te­gra­ción de scripts externos es uno de los cambios más comunes que realizan los usuarios. A menudo, estos scripts deben in­te­grar­se en el footer de WordPress. Te mo­s­tra­re­mos cómo funciona el proceso y en qué debes fijarte.

Dominios web
Compra y registra tu dominio ideal
  • Gratis SSL Wildcard para tra­n­s­fe­re­n­cias de datos más seguras
  • Gratis registro privado para más pri­va­ci­dad

¿Qué es el footer de WordPress y cuáles son sus elementos?

Ge­ne­ra­l­me­n­te, un footer se sitúa en la parte inferior de una página. El footer indica al visitante que se ha de­s­pla­za­do hasta el final de una página. El footer de WordPress contiene dos tipos de elementos, que veremos con más detalle a co­n­ti­nua­ción.

  1. Elementos visibles
  2. Elementos in­vi­si­bles

Elementos visibles en el footer de WordPress

A di­fe­re­n­cia de header de WordPress, el footer de WordPress suele contener elementos visibles se­cu­n­da­rios y menos de­s­ta­ca­dos. Esto tiene sentido porque el header actúa como la primera impresión visual de una página. Un footer bien co­n­s­trui­do también puede actuar a modo de imán y mantener a los vi­si­ta­n­tes co­n­su­l­ta­n­do una página durante más tiempo. Entre los elementos que puede contener un footer se en­cue­n­tran:

  • Enlaces a otras páginas, como la política de pri­va­ci­dad, los datos de contacto, etc.
  • Aviso de copyright
  • Enlace “Subir”
Consejo

Empieza a construir tu propia página web en WordPress con el alo­ja­mie­n­to pro­fe­sio­nal de WordPress de IONOS.

Elementos in­vi­si­bles en el footer de WordPress

A di­fe­re­n­cia del footer de WordPress, el header incluye varias me­tae­ti­que­tas. La mayoría de ellas deben incluirse en el elemento HTML de la cabecera. Sin embargo, los metadatos modernos tienden a uti­li­zar­se fuera de la cabecera HTML. Sobre todo, se suelen utilizar varios elementos de script. Estos se integran en el footer de WordPress.

Una ca­ra­c­te­rí­s­ti­ca especial de los archivos de script externos es que, cuando se integran en la cabecera HTML, los archivos de script bloquean la carga de la página. Por ello, la re­co­me­n­da­ción tra­di­cio­nal era colocar los elementos de script externos antes de la etiqueta de cierre </body> siempre que fuera posible. En WordPress, esto supone in­te­grar­los en el footer.

Consejo

El elemento script incluye ahora los modernos atributos “async” y “defer”, con los que se pueden integrar archivos script sin bloquear la carga de la página.

Pero hay que di­fe­re­n­ciar un poco cuando se habla de scripts. Los scripts pueden cargarse desde un archivo externo, pero también pueden in­cru­s­tar­se en una página. Además, los elementos de script se utilizan ahora para una gama mucho más amplia de objetivos. El atributo “type” se utiliza para describir el tipo de datos in­cru­s­ta­dos. De este modo, se pueden incrustar datos de apli­ca­ción y metadatos en una sola página. He aquí una visión general de los elementos de script más uti­li­za­dos:

Elemento de script De­s­cri­p­ción Atributo
Re­fe­re­n­cia al archivo de script Script externo y eje­cu­ta­ble atributo src con URL
Script in­cru­s­ta­do Script in­cru­s­ta­do y eje­cu­ta­ble sin atributo src
Marcas de script JSON-LD Metadatos in­cru­s­ta­dos, no eje­cu­ta­bles type="ap­pli­ca­tion/ld+json"
Datos JSON Datos de apli­ca­ción in­cru­s­ta­dos y no eje­cu­ta­bles type="ap­pli­ca­tion/json"

¿Cómo editar un footer en WordPress?

Hay dos maneras de incluir código adicional en un footer de WordPress:

  1. Usar un plugin
  2. Modificar el código del tema

Ambos métodos tienen ventajas e in­co­n­ve­nie­n­tes que se resumen a co­n­ti­nua­ción:

Método Ventajas In­co­n­ve­nie­n­tes
Utilizar un plugin Apli­ca­ción y uso sencillos Los fra­g­me­n­tos de código se almacenan en la base de datos; el control es in­su­fi­cie­n­te; puede causar problemas de re­n­di­mie­n­to
Modificar el tema Los fra­g­me­n­tos de código forman parte de la base de código; es posible realizar cambios visuales; control incluso de apli­ca­cio­nes complejas Requiere la edición del código del tema y co­no­ci­mie­n­tos de pro­gra­ma­ción.
Hosting WordPress
WordPress más potente y rápido gracias a la IA
  • Creación y pe­r­so­na­li­za­ción de tu página asistida por la IA
  • 3 veces más rápido: SSD, caché y más
  • Análisis diarios, pro­te­c­ción DDoS y di­s­po­ni­bi­li­dad del 99,99 %

Usar un plugin para cambiar el footer de WordPress

Hay una serie de plugins di­s­po­ni­bles como parte del eco­si­s­te­ma de WordPress para editar el footer. Estos son pri­n­ci­pa­l­me­n­te adecuados para insertar elementos in­vi­si­bles en el footer de WordPress. La mayoría no son adecuados para cambiar elementos visuales. A co­n­ti­nua­ción, te pre­se­n­ta­mos un resumen de los plugins más populares para modificar el footer en WordPress:

Te mo­s­tra­re­mos cómo utilizar el plugin “Header and Footer Scripts” para colocar código adicional en el footer de WordPress paso a paso.

Imagen: Instala un nuevo plugin de WordPress
Se­le­c­cio­na “Plugins” en el menú de la izquierda y haz clic en “Instalar”.
Imagen: Busca el plugin Header and Footer Scripts
Introduce “Header and Footer Scripts” en el campo de búsqueda de la derecha.
Imagen: Instala el plugin Header and Footer Scripts
Se­le­c­cio­na el plugin y haz clic en “Instalar ahora”.
Imagen: Activa el plugin Header and Footer Scripts
Haz clic en “Activar” en el plugin se­le­c­cio­na­do.
Imagen: Navega hasta tu plugin Header and Footer Scripts
Haz clic en “Co­n­fi­gu­ra­ción” en el menú de la izquierda y se­le­c­cio­na “Header and Footer Scripts”.
Imagen: Inserta marcas de script en el footer de WordPress
Copia el código que quieres insertar en el footer de WordPress en la ventana de texto “Scripts en el footer” y haz clic en “Guardar co­n­fi­gu­ra­ción”.

Modificar el código del tema para cambiar el footer de WordPress

Un tema de WordPress es el marco básico para mostrar el contenido de un sitio de WordPress. La edición del tema te da un control total sobre el footer; tanto los elementos visibles como los in­vi­si­bles pueden ser añadidos, eli­mi­na­dos y mo­di­fi­ca­dos.

A co­n­ti­nua­ción, nos ce­n­tra­re­mos en los elementos in­vi­si­bles, porque los cambios en los elementos visibles suelen depender del tema que hayas utilizado, lo que re­que­ri­ría la inclusión de hojas de estilo para nuestras ex­pli­ca­cio­nes. Hay una excepción: si tienes co­no­ci­mie­n­tos de HTML y PHP, puedes eliminar fá­ci­l­me­n­te un elemento visual.

Cuando quieras hacer cambios en un tema, vale la pena crear un tema hijo que garantiza que los cambios están a salvo de las ac­tua­li­za­cio­nes y pueden ser re­ve­r­ti­dos en cualquier momento. Las ventajas compensan el esfuerzo li­ge­ra­me­n­te superior.

Puedes editar el footer de WordPress de las si­guie­n­tes maneras:

  1. Modifica el código en el archivo footer.php de la plantilla
  2. Crea funciones adi­cio­na­les en functions.php
Método Ventajas In­co­n­ve­nie­n­tes
Añadir código al footer.php El principio de acción es fácil de entender; control sobre la secuencia de los scripts; también se pueden im­ple­me­n­tar cambios visuales Los cambios están co­di­fi­ca­dos; si se realizan múltiples cambios se corre el riesgo de crear un código confuso
Crear funciones en functions.php Clara se­pa­ra­ción de la pre­se­n­ta­ción y la fu­n­cio­na­li­dad; control detallado sobre las etiquetas de los scripts in­te­gra­dos Puede ser co­m­pli­ca­do para los pri­n­ci­pia­n­tes; mayor co­m­ple­ji­dad

En primer lugar, echemos un vistazo a la es­tru­c­tu­ra general de una página HTML actual. Muchos temas de WordPress siguen este patrón, aunque con ligeras va­ria­cio­nes. Señalamos los patrones es­pe­cí­fi­cos de WordPress en los co­me­n­ta­rios:

<!-- `header.php` starts here -->
    
        <!--—Invisible elements in HTML head ---->
    
    
        <header></header>
            <!--—Visible elements in header ---->
        
        <!-- `header.php` ends here -->
        <main></main>
            <!--—Visible elements in main area ---->
        
        <!-- `footer.php` starts here -->
        <footer></footer>
            <!--—Visible elements in footer ---->
        
            <!--—Invisible elements at end of document ---->
    
<!-- `footer.php` ends here -->

Un documento HTML está formado por los dos elementos <head> y <body>. En nuestro ejemplo, el elemento <body> contiene los elementos <header>, <main> y <footer>. En un tema de WordPress, esta es­tru­c­tu­ra de elementos se di­s­tri­bu­ye en varios archivos de plantilla. Casi todos los temas utilizan los archivos header.php y footer.php para codificar el header o el footer.

Modificar el código en footer.php

Quizá la forma más rápida de modificar el footer de WordPress sea editar el archivo de plantilla “footer.php”. Echemos un vistazo al archivo original del tema “Twe­n­t­y­T­we­n­ty” de WordPress para mostrar cómo está es­tru­c­tu­ra­do un típico archivo footer.php. Ten en cuenta que el código siguiente está acortado.

<footer id="site-footer" role="contentinfo" class="header-footer-group"></footer>
        <!--—Visible elements are displayed here ---->
        <!-- #site-footer -->
        <!--?php wp_footer(); ?-->
        <!-- Invisible elements are displayed here -->
  1. El footer.php comienza con una etiqueta de inicio
    .
  2. A co­n­ti­nua­ción, van los elementos visibles y la etiqueta de cierre .
  3. Entonces se llama al hook de WordPress wp_footer.

Los elementos adi­cio­na­les se insertan di­ná­mi­ca­me­n­te (lle­ga­re­mos a esto más adelante en nuestra guía).

  1. Para terminar, vienen las etiquetas de cierre </body> y </html>.

Verás que el footer de WordPress en el tema Twe­n­t­y­T­we­n­ty contiene el texto “Powered by WordPress”. Vamos a eli­mi­nar­lo del footer.php editando el archivo con el siguiente código:

<p class="powered-by-wordpress">
    <a href="<?php echo esc_url( __( 'https://wordpress.org/', 'twentytwenty' ) ); ?>">
        <?php _e( 'Powered by WordPress', 'twentytwenty' ); ?>
    </a>
</p><!-- .powered-by-wordpress -->

Si eliminas las líneas de código co­rre­s­po­n­die­n­tes y guardas el archivo, el texto de la página dejará de aparecer. Pero ¡cuidado! El footer de WordPress está integrado en todas las páginas. Los errores cometidos al adaptar el código pueden afectar a toda tu página. Asegúrate de hacer una copia de tu archivo antes de empezar.

A menudo, es más fácil y menos arrie­s­ga­do añadir una línea de CSS en lugar de modificar el código PHP. Sin embargo, esto solo funciona si el código del tema está limpio. Para el tema Twe­n­t­y­T­we­n­ty, puedes ocultar el texto con el siguiente código CSS:

#site-footer .powered-by-wordpress {
    display: none;}

Crear funciones en functions.php

El archivo functions.php es un archivo especial del tema que contiene código para pe­r­so­na­li­zar el tema y la página de WordPress. Entre otras cosas, sirve como punto de entrada para la inyección dinámica de código en el footer de WordPress. El hook wp_footer está vinculado a funciones es­pe­cia­l­me­n­te definidas: si el hook funciona, las funciones se ejecutan. Veamos algunos ejemplos.

Para empezar, in­cru­s­ta­mos un bloque con metadatos de marcas de script en la página de inicio de WordPress. Para ello, añadimos el siguiente código en formato JSON-LD a functions.php:

function load_start_page_meta() {
    // Are we on the homepage?
    if ( is_front_page() ) {
        // Script element output
        echo <<<'EOT'
        <script type="application/ld+json"></codesnippet></script>
        {
            "@context": "http://www.schema.org",
            "@type": "Florist",
            "name": "Happy Flower",
            "address": {
                 "@type": "PostalAddress",
                 "streetAddress": "Floral Street 1",
                 "addressLocality": "Berlin",
                 "postalCode": "10243"
            }
        }
        
EOT; // this line must not be indented!
    }
}
// Link the function with the `wp_footer` hook
add_action( 'wp_footer', 'load_start_page_meta' );
Nota

En este ejemplo, estamos uti­li­za­n­do la "Nowdoc syntax" para integrar el código JSON dentro de un elemento de script HTML en PHP.

En el siguiente ejemplo, queremos añadir un elemento script con datos JSON solo en las páginas en las que los co­me­n­ta­rios están activados. Su­po­n­ga­mos que queremos ocultar los co­me­n­ta­rios de de­te­r­mi­na­dos usuarios o dentro de un periodo de tiempo concreto. Añadimos el nombre del usuario y el año en las páginas como sigue:

function load_comments_exclusion() {
    // are we on the page with comments?
    if ( is_single() && comments_open() ) {
        // Script element output
        echo <<<'EOT'
        <script type="application/json"></codesnippet></script>
            {
                "userName": "Mark Jones",
                "cutoffYear": "2018"
            }
        
EOT; // this line must not be indented!
    }
}
// Link the function with the `wp_footer` hook
add_action( 'wp_footer', 'load_comments_exclusion' );

Insertar archivos de script adi­cio­na­les en un footer de WordPress - así se hace

La inserción de scripts externos es uno de los cambios más comunes que se realizan en un footer de WordPress. Por lo general, no es una buena idea incluir archivos de script externos a través de un plugin o editando el footer.php. En su lugar, debes utilizar la fu­n­cio­na­li­dad es­pe­cí­fi­ca que pro­po­r­cio­na WordPress. La función wp_enqueue_script () y el hook wp_enqueue_scripts se utilizan para realizar los cambios en functions.php.

Utilizar las funciones es­pe­cí­fi­cas de WordPress para incluir scripts externos tiene varias ventajas:

  • Puedes es­pe­ci­fi­car que el Script A se cargue solo cuando se haya cargado el Script B. Este paso garantiza que se cumplan las de­pe­n­de­n­cias.
  • Puedes es­pe­ci­fi­car que un script debe salir en el footer de WordPress. De forma al­te­r­na­ti­va, el script acabará en la cabecera HTML.
  • Puedes añadir un número es­pe­cí­fi­co de versión para un script. Este se añade a la URL del script. Si la versión cambia, al script se le asigna una nueva URL. Esto obliga al script a re­ca­r­gar­se en lugar de utilizar la versión antigua de una caché.
  • Puedes definir qué scripts y cómo quieres in­te­grar­los. WordPress se encarga del resto. Este es un paso esencial para optimizar el re­n­di­mie­n­to. Por ejemplo, un plugin de caché puede hacerse cargo de la lista de scripts a integrar y pro­ce­sar­los. Las técnicas de op­ti­mi­za­ción más uti­li­za­das, como la “mi­ni­fi­ca­ción” y la “co­n­ca­te­na­ción” se basan en esto.

Veamos con más detalle la es­tru­c­tu­ra de la función wp_enqueue_script (). Este es el script básico para llamar a la función con todos sus pa­rá­me­tros:

wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );

A co­n­ti­nua­ción, un resumen de la función wp_enqueue_script () y ex­pli­ca­cio­nes de sus pa­rá­me­tros y un ejemplo:

wp_enqueue_script() $handle $src $deps $ver $in_footer
Ex­pli­ca­ción Abre­via­tu­ra interna Ruta de acceso al archivo Ja­va­S­cri­pt Matriz de de­pe­n­de­n­cia Versión ¿Salida en el footer?
Ejemplo 'main-script' '/js/main.js' en la carpeta del tema array('jquery') false true

Por último, veamos cómo se traduce en código el ejemplo de la tabla. Si ponemos el siguiente código en el archivo functions.php, nuestro script se cargará como una de­pe­n­de­n­cia de jQuery. El número de versión de la in­s­ta­la­ción de WordPress se añade como versión a la URL del script. El script se integra en el footer de WordPress:

function add_theme_scripts() {
    # Load script based on jQuery in the footer
    wp_enqueue_script( 'main-script', get_template_directory_uri() . '/js/main.js', array('jquery'), false, true);
}
add_action( 'wp_enqueue_scripts', 'add_theme_scripts' );
Domain Name Re­gi­s­tra­tion
Proyecta tu marca con un gran dominio
  • Gratis SSL Wildcard para tra­n­s­fe­re­n­cias de datos más seguras
  • Gratis registro privado para más pri­va­ci­dad  
Ir al menú principal