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

Todo depende de la escala de tus personalizaciones y cómo organices tus elementos. Pero hay dos 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 para saber con qué trabajaré, pero encolar solo lo que necesito cuando lo necesito.

Podrías encolar todo condicionalmente dentro de tu archivo functions.php (if( is_page( 'blah') { //... encolar elementos }) o podrías hacer uso de archivos de plantilla para estilizar categorías/etiquetas/entradas/páginas específicas, etc.

Luego, dentro de ese archivo de plantilla, llamas a tus archivos de script/estilo encolados allí. Eso también hace que sea una forma clara de entender qué se carga dónde.

Pero definitivamente, si deseas dividir tu hoja de estilos en archivos más pequeños, necesitarás usar:

• wp_register_style
• wp_enqueue_style

La misma lógica se aplicaría a los scripts con las funciones correspondientes de registro/encolado.

También, ten en cuenta el número de solicitudes en tu estrategia. Si divides tus elementos en múltiples archivos, intenta mantener bajo el número de archivos cargados para no afectar negativamente el tiempo de carga de la página.

Hay otra cosa que puedes hacer para acelerar la carga de la página. Si le dices al navegador que almacene en caché tus hojas de estilo, entonces tal vez 1 (o unos pocos) tendrían más posibilidades de cargarse desde la caché que si tienes múltiples archivos por todo tu 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 mente también.

Independientemente, almacenar en caché 1 o muchos recursos es un buen enfoque y aumentará la percepción de la capacidad de respuesta de tu sitio web en términos de velocidad.

Si necesitas más orientación sobre cómo usar esas funciones, solo déjanos saber.

EDITAR

Las principales razones para registrar scripts son las siguientes:

• Facilita llamar a un script/estilo cuando lo necesitamos
• Hace posible usar un script/estilo registrado como dependencia para un archivo que necesitamos cargar
• Evita que escribamos el mismo código más de lo necesario, simplificando efectivamente nuestro código
• Más cosas en las que podría no estar pensando en este momento

NOTA

Un script/estilo que ha sido registrado no necesita ser encolado si está listado como una $deps del archivo que estás encolando actualmente.

Un ejemplo (no necesariamente cómo deberías hacerlo, pero para que entiendas el propósito):

Tengo registrados:

• 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í. Encolo en esa página (ya sea por declaración condicional en functions.php o en mi plantilla de página) specific-style.css así:

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') );
}

Nota que el array en wp_enqueue_style es un array de los identificadores de estilos ya registrados. WP cargará convenientemente los 4 archivos en el orden correcto para respetar las dependencias.

Podrías encadenar dependencias 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, solo necesito encolar specific-style.css con buttons.css como dependencia y WP encadenará la carga para respetar el orden.