¿Agregó un slider pesado en todo el sitio solo para una animación en la página de inicio? Docenas de kilobytes innecesarios se cargan en cada página: publicaciones internas, contactos, el mapa del sitio. Los visitantes esperan y Google baja sus puntuaciones de Core Web Vitals.

El problema no son los plugins ni el tema. El problema es que WordPress no distingue entre páginas al registrar scripts por defecto. Una sola línea wp_enqueue_script en functions.php y el archivo se carga en todas partes: la página de inicio, el panel de administración y la página de acceso.

A continuación, tres métodos funcionales para encolar scripts y estilos estrictamente para la página de inicio. Sin plugins de optimización. Solo PHP y etiquetas condicionales de WordPress.

💡 Resumen rápido:

• Identifique su tipo de página de inicio: página estática o últimas entradas, porque la etiqueta condicional depende de ello
• Use is_front_page() para una página de inicio estática e is_home() para la página del blog
• Coloque el código en el functions.php de su tema hijo o mediante el plugin Code Snippets
• Verifique en DevTools → Red que los scripts no se cargan en las páginas internas

Paso 1. Identifique su tipo de página de inicio

WordPress distingue dos conceptos: Portada, lo que el visitante ve en la URL raíz del sitio, y Página de entradas, la página que muestra las entradas del blog. Pueden ser la misma (inicio = feed de entradas) o diferentes (inicio = página estática, mientras el blog reside en una URL separada).

Abra el panel de administración: Ajustes → Lectura. En la sección «Su página de inicio muestra»:

• «Sus últimas entradas»: la página de inicio y la página del blog son la misma. En código, use is_home() o is_front_page(); ambas devolverán true.
• «Una página estática» con una página de inicio seleccionada: use is_front_page(). Aquí is_home() devolverá true solo en la página del blog (si se asigna una por separado).

Si no está seguro, opte por is_front_page(). Es más fiable porque se activa en la página de inicio independientemente de la configuración.

Paso 2. Encole el script solo para la página de inicio

El código va en el archivo functions.php de su tema hijo. Si no tiene un tema hijo, use el plugin Code Snippets (paso 5): la edición del functions.php del tema padre se sobrescribirá en la próxima actualización.

El siguiente ejemplo encola un archivo JavaScript en el pie de página solo cuando el visitante está en la página de inicio:

1
/**
2
 * Enqueues a custom script only on the front page.
3
 * Hook location: child theme's functions.php or Code Snippets.
4
 */
5
add_action('wp_enqueue_scripts', function () {
6
    if (! is_front_page()) {
7
        return;
8
    }
9
 
10
    wp_enqueue_script(
11
        'my-frontpage-script',                         // handle — unique name
12
        get_template_directory_uri() . '/js/frontpage.js', // path to file
13
        array(),                                       // dependencies (jquery, etc.)
14
        '1.0.0',                                       // version for cache busting
15
        true                                           // true = in footer, false = in head
16
    );
17
});

Esto es lo que sucede. El hook wp_enqueue_scripts es el lugar correcto para registrar scripts del front-end (no init, no wp_head). is_front_page() verifica que estamos en la página de inicio. La función wp_enqueue_script añade el archivo a la cola y el propio WordPress inserta la etiqueta <script> en el pie de página, antes del cierre de </body>.

Nota: get_template_directory_uri() devuelve la URL de la carpeta del tema padre. Si el archivo está en el tema hijo, sustitúyalo por get_stylesheet_directory_uri().

Paso 3. Encole estilos de la misma manera

Para un archivo CSS la lógica es idéntica: etiqueta condicional + wp_enqueue_style. El código va en la misma función que los scripts; no se necesita un hook separado.

1
if (is_front_page()) {
2
    wp_enqueue_style(
3
        'my-frontpage-styles',
4
        get_template_directory_uri() . '/css/frontpage.css',
5
        array(),
6
        '1.0.0'
7
    );
8
}

El quinto parámetro de wp_enqueue_style es el tipo de medio. Por defecto es 'all'. Si los estilos son solo para pantallas de más de 768px, especifique 'screen and (min-width: 768px)'.

Combine scripts y estilos en una sola función. De esta manera evita comprobaciones redundantes:

1
add_action('wp_enqueue_scripts', function () {
2
    if (! is_front_page()) {
3
        return;
4
    }
5
 
6
    wp_enqueue_script(
7
        'my-frontpage-script',
8
        get_template_directory_uri() . '/js/frontpage.js',
9
        array(),
10
        '1.0.0',
11
        true
12
    );
13
 
14
    wp_enqueue_style(
15
        'my-frontpage-styles',
16
        get_template_directory_uri() . '/css/frontpage.css',
17
        array(),
18
        '1.0.0'
19
    );
20
});

Un return temprano al inicio de la función es más limpio que bloques if anidados. El código es más largo, pero se lee más rápido.

Paso 4. Caso especial: página de inicio y página del blog

Si Ajustes → Lectura está configurado como «Sus últimas entradas», is_front_page() e is_home() funcionan de manera idéntica. Pero si la página de inicio es una página estática y el blog reside en /blog/, necesita una doble comprobación.

Para encolar un script SOLO en la página del blog (no en la página de inicio estática), use is_home():

1
if (is_home()) {
2
    // Code will only run on the posts page
3
}

Para encolar tanto en la página de inicio COMO en la página del blog, combínelas:

1
if (is_front_page() || is_home()) {
2
    // Code will run on both "home" pages
3
}

Para ver la lista completa de etiquetas condicionales, consulte la documentación oficial de WordPress. Allí también encontrará is_page (página por slug), is_single (entrada individual), is_category (archivo de categoría) y docenas de otras comprobaciones para un control granular de la carga.

Paso 5. Sin editar functions.php: el plugin Code Snippets

Si prefiere no tocar los archivos del tema, instale el plugin gratuito Code Snippets del directorio de WordPress.org. Añade una sección Fragmentos → Añadir nuevo en el panel de administración: pegue su código, elija ejecutarlo «en el front-end» y guarde. El efecto es el mismo que functions.php, pero el código sobrevive a un cambio de tema.

Otra ventaja de Code Snippets: si comete un error de sintaxis, el plugin captura el error fatal y le permite revertir el cambio. Al editar functions.php a través del panel de administración, un solo corchete faltante derriba todo el sitio. Haga siempre una copia de seguridad completa antes de editar los archivos del tema.

Verificación del resultado

Abra su sitio, presione F12 → la pestaña Red y actualice la página. En la lista de solicitudes, encuentre su script (frontpage.js o como lo haya nombrado). Ahora navegue a cualquier página interna y actualice; el script no debería aparecer en la lista.

Si el script aún se carga en todas partes, compruebe lo siguiente:

• ¿El hook es definitivamente wp_enqueue_scripts y no init? init se activa antes de que se determine el contexto de la página, por lo que las etiquetas condicionales pueden devolver resultados incorrectos.
• ¿El archivo está en el functions.php del tema hijo? Es posible que el tema padre haya anulado el hook.
• ¿Hay algún plugin de optimización cacheando? Límpielo.

⁉️🤔 Preguntas frecuentes

¿En qué se diferencia is_front_page() de is_home()?

is_front_page() devuelve true en la página de inicio del sitio bajo CUALQUIER configuración, ya sea que muestre las últimas entradas o una página estática. is_home() devuelve true solo en la página de entradas del blog. Si Ajustes → Lectura está configurado como «Sus últimas entradas», ambas etiquetas devuelven true. Si la página de inicio es una página estática, is_home() se activa solo en /blog/ (si se asigna una).

¿Por qué no funciona mi código en functions.php?

Tres razones más comunes. Primera: usar el hook init en lugar de wp_enqueue_scripts, porque las etiquetas condicionales aún no están definidas en init. Segunda: el functions.php del tema padre fue sobrescrito por una actualización; use siempre un tema hijo o Code Snippets. Tercera: la ruta del archivo es incorrecta. get_template_directory_uri() apunta a la carpeta del tema padre, mientras que get_stylesheet_directory_uri() apunta a la carpeta del tema hijo. Verifique imprimiendo el valor y abriendo la URL en un navegador.

¿Puedo encolar un script en varias páginas específicas?

Sí. Sustituya is_front_page() por is_page(array('about', 'contact')) y el script se cargará en las páginas con los slugs about y contact. O use is_single('post-slug') para una entrada específica. La lista completa de etiquetas condicionales está en developer.wordpress.org.

¿Cuál es la diferencia entre get_template_directory_uri() y get_stylesheet_directory_uri()?

La primera devuelve la URL de la carpeta del tema padre; la segunda devuelve la URL de la carpeta del tema hijo. Si está trabajando en un tema hijo y el archivo está almacenado allí, use get_stylesheet_directory_uri(). Si el archivo está en el tema padre (o solo tiene un tema, sin hijo), use get_template_directory_uri(). Una ruta incorrecta es la razón número uno por la que un script no se carga.

¿Debería usar $_SERVER['REQUEST_URI'] para la comprobación?

No. $_SERVER['REQUEST_URI'] falla con parámetros de consulta: /?utm_source=twitter ya no equivale a /. Además, algunos servidores incluyen la ruta completa con el subdirectorio en REQUEST_URI. Las etiquetas condicionales de WordPress son más fiables y funcionan de inmediato.

Conclusiones: tres líneas que mejoran la velocidad de carga

En la práctica, la mayoría de los sitios solo necesitan un único is_front_page() y un par de llamadas a wp_enqueue_script/wp_enqueue_style.

La carga condicional de scripts no es una microoptimización. Un solo plugin de slider «pesado» que pese 300 KB, encolado en todo el sitio para una animación en la página de inicio, añade medio segundo al tiempo de carga de cada página interna. Multiplique eso por su número de visitantes y obtendrá posiciones de búsqueda perdidas.

La regla es simple: un archivo se carga donde se usa. Para la página de inicio, is_front_page(). Para el blog, is_home(). Para una página específica, is_page('slug').

• Si tiene una página de inicio estática, use is_front_page() y manténgalo simple.
• Si la página de inicio es el feed de últimas entradas, cualquiera de las dos etiquetas funcionará.
• Si los scripts y estilos se repiten en varias páginas, extraiga las condiciones en un array y compruebe con in_array().

Comience con una auditoría: abra DevTools → Cobertura (tres puntos en Red → Más herramientas → Cobertura), actualice la página y vea cuántos kilobytes de JS y CSS no se utilizan. La cifra le sorprenderá. ¿Qué técnica de carga condicional utiliza? Compártala en los comentarios.