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

Sé que según el proceso de arranque predeterminado de Wordpress, en primer lugar functions.phpse llama, después de eso va todo el tema. Pero actualmente voy a refactorizar mi tema por completo para optimizarlo. Mi idea es tener un archivo css base para propiedades comunes, normalizar, colores. O para mantener un solo archivo css, pero en este caso necesito codificar la caja del interruptor functions.phppara determinar la página. Y otro específico para cada página, porque no tiene sentido cargar un gran archivo de estilo CSS con todos los estilos definidos.

Entonces, mi pregunta es ¿cuál es el mejor lugar para conectar para cargar un script / estilo específico?

¿Debería ser header-xxx.phpu otro archivo? ¿Quizás hay una manera de implementar esta idea de una manera más escalable y elegante?

Apreciaría cualquier ayuda.

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

La forma en que me gusta hacerlo es registrar todos mis scripts / estilos en functions.php para que sepa con qué trabajaré pero pondré en cola solo lo que necesito cuando lo necesite.

Puede poner en cola todas sus cosas condicionalmente dentro de su archivo functions.php ( if( is_page( 'blah') { //... enqueue stuff }) o puede hacer uso de archivos de plantilla para diseñar categorías / etiquetas / publicaciones / páginas específicas, etc.

Luego, dentro de ese archivo de plantilla, llama a sus archivos de secuencia de comandos / estilo en cola allí. Eso también hace que sea una buena forma de comprender qué se carga y dónde.

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

• wp_register_style
• wp_enqueue_style

La misma lógica se aplicaría al script con las correspondientes funciones de registro / 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 puede hacer para acelerar la carga de la página. Si le dice al navegador que guarde en caché sus hojas de estilo, entonces tal vez 1 (o unas pocas) tenga más posibilidades de cargarse de la memoria caché que si tiene varios archivos en todo su sitio y siempre necesitan ser recuperados del servidor porque es una nueva solicitud de archivo en cada nueva página que se carga. Así que ten esto en cuenta.

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.

EDITAR

Las principales razones para registrar scripts son las siguientes

• Hace que sea más fácil llamar a un guión / estilo cuando lo necesitamos
• Hace posible utilizar un guión / estilo registrado como una dependencia para un archivo que necesitamos cargar.
• Evitar 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 en este momento

NOTA

No es necesario poner en cola un guión / estilo que se haya registrado si aparece como parte $depsdel archivo que está poniendo en cola actualmente.

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

he registrado

• common-style.css
• navigation.css
• botones.css

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

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_stylees una matriz de los controladores de estilos ya registrados. WP cargará convenientemente los 4 archivos en el orden correcto para respetar la dependencia.

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

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

Si registro con esa lógica en mente, solamente necesito enqueue específica-style.css con buttons.css como una dependencia y WP se cadenita la carga de respetar la orden.

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

Los navegadores almacenan en caché los archivos CSS. Entonces, una vez que se carga 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á levemente, notablemente más lenta. 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. (Ver Steve Souders o este artículo ).

Otra optimización es minimizar tu CSS. (vea la publicación Google PageSpeed ). Gracias @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 que se compilan en un archivo CSS y mucho más.

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

En su archivo header.php, asegúrese de que la body_classfunción esté en la etiqueta del cuerpo, como esta:

<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 hacer:

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

Entonces, en la página con la ID 12, se aplicaría ese estilo.

Para orientar una plantilla de página específica, puede hacer:

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

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

Sin embargo, si aún desea poner en cola 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' );