Cómo cargar diferentes archivos CSS para diferentes páginas

Question

Cómo cargar diferentes archivos CSS para diferentes páginas

8 ene 2018, 14:44:13

Vistas: 13.8K

Votos: 3

Tengo varias páginas diferentes. Cada una de ellas tiene enlaces CSS distintos. Aunque los enlaces CSS son diferentes, todos los demás elementos en la sección head son iguales en estas páginas. Necesito mover esos elementos head a header.php para poder incluirlos usando get_header().

¿Cómo puedo cargar diferentes archivos CSS para diferentes páginas? Tengo alrededor de 20 páginas diferentes, por lo que cargar archivos después de verificar condiciones me parece un poco desordenado.
¿Existe algún enfoque mejor que este?
Si es posible, sugieranme cómo resolver este problema usando un plugin personalizado.

página 1:

<html lang="es">
<head>
     <link rel="stylesheet" href="css/uno.css" />
     .......
 </head>

página 2:

<html lang="es">
<head>
     <link rel="stylesheet" href="css/dos.css" />
     .......
 </head>

LogicalAnt

131

plugins desarrollo de plugins wp enqueue style wp head

Comentarios

¿Probaste si esto realmente es beneficioso? Supondría que combinarlos y tener el archivo en caché sería más rápido que solicitar 20 archivos diferentes

kero

8 ene 2018 14:46:10

Todas las respuestas a la pregunta

Andrew 919 · Answer 1 · 2018-01-08T15:07:00Z

Puedes lograr esto usando condicionales dentro de la función que encola tus estilos.

function wpdocs_theme_name_scripts() {
    wp_enqueue_style( 'global', get_stylesheet_uri() );

    if ( is_page(5) ) {
      wp_enqueue_style( 'page-five', get_stylesheet_uri() . '/page-five-styles.css' );
    }
}
add_action( 'wp_enqueue_scripts', 'wpdocs_theme_name_scripts' );

Si quisieras tener más control tanto sobre el marcado de tu página como sobre los archivos CSS que cargas, podrías usar la jerarquía de plantillas de WordPress y crear una plantilla de página o algo más específico como page-5.php. Llamando a wp_enqueue_scripts desde dentro de estos archivos de plantilla solo se cargarán los recursos para esas páginas.

Andrew

919

8 ene 2018 15:07:00

Liam Stewart 997 · Answer 2 · 2018-01-09T02:16:36Z

Si deseas hacerlo en tu plantilla, puedes hacer lo siguiente.

Puedes aprender más sobre la función is_page aquí: https://developer.wordpress.org/reference/functions/is_page/

<html lang="es">
<head>
     <?php if ( is_page(1) ): //Cambia este número por el ID de la página ?> 
     <link rel="stylesheet" href="css/one.css" />
     <?php endif; if ( is_page(2) ): //Cambia este número por el ID de la página ?>
     <link rel="stylesheet" href="css/two.css" />
     <?php endif; ?>
 .......
</head>

Liam Stewart

997

9 ene 2018 02:16:36

Dharmishtha Patel 713 · Answer 3 · 2018-01-19T08:49:53Z

<html lang="es">
    <head>
<?php global $post;
if( $post->ID == 346) { ?>
       <link rel="stylesheet" href="css/one.css" />
<?php } ?>
    elseif ( $post->ID == 342){ ?> 
         <link rel="stylesheet" href="css/two.css" />
         <?php } else{ //Cambia este número por el ID de la página ?>
         <link rel="stylesheet" href="css/three.css" />
         <?php } ?>
     .......
    </head>

Dharmishtha Patel

713

19 ene 2018 08:49:53