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

8

Sé que de acuerdo con el proceso de arranque de Wordpress predeterminado, en primer lugar se llama a functions.php , después de eso desaparece todo el tema Pero actualmente voy a refactorizar mi tema completamente 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 cambiar el código de mayúsculas en functions.php para determinar la página. Y otro específico para cada página, porque esto no tiene sentido cargar un enorme archivo de estilo css con todos los estilos definidos.

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

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

Le agradecería cualquier ayuda.

    
pregunta CROSP 25.08.2016 - 19:27

3 respuestas

8

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

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.

    
respondido por el bynicolas 25.08.2016 - 20:28
3

" 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.

    
respondido por el zendka 25.08.2016 - 21:11
2

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' );
    
respondido por el Nate Allen 25.08.2016 - 20:03

Lea otras preguntas en las etiquetas