Cómo cargar scripts / estilos específicos para una página

Todo depende de la escala de tus personalizaciones y de cómo organizarás tus cosas. Pero hay 2 formas principales de hacerlo. functions.php y archivos de plantilla

La forma en que me gusta hacerlo es registrar todos mis scripts / estilos en functions.php, así que sé con qué trabajaré pero encolaré solo lo que Lo necesito cuando lo necesito.

Podrías poner en cola todo tu material de forma condicional dentro de tu archivo functions.php ( if( is_page( 'blah') { //... enqueue stuff } ) o podrías usar archivos de plantilla para diseñar categorías / etiquetas / publicaciones / páginas específicas, etc.

Luego, dentro de ese archivo de plantilla, debe llamar a los archivos de estilo / script encolar allí. Eso también hace que no sea una forma de entender en qué se carga.

Pero definitivamente, si desea dividir su hoja de estilo en archivos más pequeños, deberá utilizar

• wp_register_style
• wp_enqueue_style

La misma lógica se aplicaría al script con las correspondientes funciones de registro / puesta en cola

Además, tenga en cuenta la cantidad de solicitudes en su estrategia, si divide sus cosas en varios archivos, intente mantener baja la cantidad de archivos cargados para que no afecte negativamente la carga de la página de esa manera.

Hay otra cosa que puedes hacer para acelerar la carga de la página. Si le dice al navegador que almacene en caché sus hojas de estilo, entonces tal vez 1 (o unos pocos) tenga más posibilidades de ser cargado desde la memoria caché que si tiene varios archivos en todo el sitio y siempre deben ser recuperados desde el servidor porque es una nueva solicitud de archivo en cada nueva página que se carga. Así que ten esto en cuenta para.

Independientemente, el almacenamiento en caché de 1 o muchos activos es un buen enfoque y aumentará la capacidad de respuesta percibida de su sitio web en términos de velocidad del sitio.

Si necesita más orientación sobre cómo usar esas funciones, háganoslo saber.

EDIT

Las razones principales para registrar scripts son las siguientes

• Hace que sea más fácil llamar a un script / estilo cuando lo necesitamos
• Hace posible usar un estilo / script registrado como una dependencia para un archivo que necesitamos cargar.
• Evitamos que escribamos el mismo código más de lo que necesitamos, simplificando efectivamente nuestro código
• Más cosas en las que podría no estar pensando ahora

NOTE

Un script / estilo que se ha registrado no necesita ser puesto en cola si está listado como $deps del archivo que actualmente está poniendo en cola.

Un ejemplo (no necesariamente cómo debes hacerlo, pero para que entiendas el propósito)

Me he registrado

• common-style.css
• navigation.css
• buttons.css

Ahora esos estilos están registrados, así que si voy a una página específica y quiero aplicar un estilo diferente allí. Encolado en esa página (ya sea por una declaración condicional en functions.php o en mi plantilla de página) specific-style.css como eso.

add_action( 'wp_enqueue_scripts', 'my_specific_style' );
function my_specific_style(){
  wp_enqueue_style( 'specific-style', get_stylesheet_directory_uri() . '/path/to/specific-style.css', array( 'common-style', 'navigation', 'button') );
}

Tenga en cuenta que la matriz en wp_enqueue_style es una matriz de los controladores de los estilos ya registrados. WP cargará convenientemente los 4 archivos en el orden correcto para respetar la dependencia.

Puede crear una dependencia en cascada simplemente registrando cada script / estilo con la dependencia correcta

es decir, buttons.css depende de navigation.css que depende de common-style.css

Si me registro con esa lógica en mente, solo necesito poner en cola specific-style.css con buttons.css como una dependencia y WP encadenará en cadena la carga para respetar el orden.

" refactor ", " optimizar ", " escalable ", " elegante ". Grandes preocupaciones! Estás en el camino correcto. Sin embargo, dividir un archivo CSS en varios no es la respuesta a estas preocupaciones. He aquí por qué:

Los navegadores almacenan en caché los archivos CSS. Entonces, una vez que se cargue la primera página, el navegador no solicitará el mismo archivo CSS para la página siguiente. Sí, la carga de la primera página será un poco más lenta e imperceptiblemente. Pero el resto de las páginas se beneficiarán de esto.

Menos solicitudes es una de las formas más importantes para optimizar la velocidad del sitio web. (vea Steve Souders o este artículo ).

Una optimización adicional es reducir tu CSS. (consulte publicación de Google PageSpeed .) Gracias a @bynicolas por la sugerencia.

Claro que puedes decir, pero ¿qué pasa con la elegancia ? Aquí están las buenas noticias: Sass y LESS . Le permiten escribir menos código, dividirlo en varios archivos compilados en un archivo CSS y mucho más.

Ciertamente, podrías hacer un condicional para verificar en qué página está alguien y poner en cola una hoja de estilo específica para cada página, pero es mejor que apuntas la página con CSS.

En tu archivo header.php, asegúrate de que la función body_class esté en la etiqueta del cuerpo, de esta forma:

<body <?php body_class(); ?>>

Esto insertará clases en la etiqueta del cuerpo que puede usar para apuntar a características específicas de la página.

Por ejemplo, si quiero que el H1 en una página específica sea rojo, podría hacerlo:

body.page-id-12 h1 {
    color: #ff0000;
}

Por lo tanto, en la página con el ID 12, se aplicaría ese estilo.

Para segmentar una plantilla de página específica, puedes hacer:

body.page-template-template-about h1 {
    color: #ff0000;
}

Eso apuntaría a páginas con la plantilla "acerca de" aplicada. Solo mire las clases en la etiqueta del cuerpo en la página que desea diseñar.

Sin embargo, si aún desea encolar una hoja de estilo específica para una página específica, puede hacer esto:

function na35_enqueue_styles() {
    if ( is_page( 12 ) ) {
        wp_enqueue_style( 'page-12-styles', get_template_directory_uri() . '/css/page-12.css' );
    }
}
add_action( 'wp_enqueue_scripts', 'na35_enqueue_styles' );