Come caricare script / stili specifici per una pagina

So che, in base al processo di avvio predefinito di Wordpress, functions.phpviene innanzitutto chiamato, dopo che tutto va a tema. Ma al momento ho intenzione di riformattare completamente il mio tema per ottimizzarlo. La mia idea è di avere un file css di base per proprietà comuni, normalizzare, colori. O per mantenere un singolo file CSS, ma in questo caso ho bisogno di cambiare hard case functions.phpper determinare la pagina. E un altro specifico per ogni pagina, perché non ha senso caricare enormi file di stile CSS con tutti gli stili definiti.

Quindi la mia domanda è qual è il posto migliore da agganciare per caricare uno script / stile specifico?

Dovrebbe essere header-xxx.phpo un altro file? Forse c'è un modo per implementare questa idea in modo più scalabile ed elegante?

Le sarei grato per qualsiasi aiuto.

Tutto dipende dalla scala delle tue personalizzazioni e da come organizzerai le tue cose. Ma ci sono 2 modi principali per farlo. files.php e template

Il modo in cui mi piace farlo è registrare tutti i miei script / stili in Functions.php in modo da sapere con cosa lavorerò ma accoderò solo ciò di cui ho bisogno quando ne ho bisogno.

Potresti accodare tutte le tue cose in modo condizionale all'interno del tuo file Functions.php ( if( is_page( 'blah') { //... enqueue stuff }) oppure puoi usare i file modello per definire categorie / tag / post / pagine specifici ecc.

Quindi, all'interno di quel file modello, chiamate lì i vostri file di script / style accodati . Ciò rende anche necessario un modo per capire cosa viene caricato dove.

Ma sicuramente, se desideri scomporre il tuo foglio di stile in file più piccoli, dovrai usarlo

• wp_register_style
• wp_enqueue_style

La stessa logica si applicherebbe allo script con le corrispondenti funzioni di registro / accodamento

Inoltre, prendi in considerazione il numero di richieste nella tua strategia, se suddividi le tue cose in più file, prova a mantenere basso il numero di file caricati in modo da non influire negativamente sul caricamento della pagina in quel modo.

C'è un'altra cosa che puoi fare per accelerare il caricamento della pagina. Se dici al browser di memorizzare nella cache i tuoi fogli di stile, allora forse 1 (o pochi) avrebbe più possibilità di essere caricati dalla cache allora se hai più file su tutto il tuo sito e devono sempre essere recuperati dal server perché è una nuova richiesta di file su ogni nuova pagina che viene caricata. Quindi tienilo a mente.

Indipendentemente da ciò, la memorizzazione nella cache di 1 o più risorse è un buon approccio e aumenterà la reattività percepita del sito Web in termini di velocità del sito.

Se hai bisogno di ulteriori indicazioni su come utilizzare tali funzioni, faccelo sapere.

MODIFICARE

I motivi principali per la registrazione degli script sono i seguenti

• Semplifica la chiamata di uno script / stile quando ne abbiamo bisogno
• Permette di usare uno script / stile registrato come dipendenza per un file che dobbiamo caricare.
• Impediamo a noi stessi di scrivere lo stesso codice più del necessario, semplificando efficacemente il nostro codice
• Altre cose a cui potrei non pensare in questo momento

NOTA

Uno script / stile che è stato registrato non deve essere accodato se è elencato come uno $depsdei file che stai accodando.

Un esempio (non necessariamente come dovresti farlo, ma così capisci lo scopo)

Mi sono registrato

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

Ora quegli stili sono registrati, quindi se vado su una pagina specifica e voglio applicare uno stile diverso lì. Mi accedo a quella pagina (o per dichiarazione condizionale in Functions.php o nel mio modello di pagina) in questo specific-style.cssmodo.

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

Si noti che l'array in wp_enqueue_styleè un array degli handle di stili già registrati. WP caricherà convenientemente tutti e 4 i file nell'ordine corretto per rispettare la dipendenza.

Si potrebbe mettere in cascata la dipendenza semplicemente registrando ogni script / stile con la dipendenza corretta

cioè pulsanti.css dipende da navigation.css che dipende da common-style.css

Se mi registro con questa logica in mente, ho solo bisogno di accodare specific-style.css con pulsanti.css come dipendenza e WP eseguirà il collegamento a catena per rispettare l'ordine.

" refactor ", " ottimizzare ", " scalabile ", " elegante ". Grandi preoccupazioni! Sei sulla strada giusta. Tuttavia, suddividere un file CSS in più non è la risposta a queste preoccupazioni. Ecco perché:

I browser memorizzano nella cache i file CSS. Quindi, una volta caricata la prima pagina, il browser non richiederà lo stesso file CSS per la pagina successiva. Sì, il caricamento della prima pagina sarà leggermente, incredibilmente più lento. Ma il resto delle pagine ne trarrà beneficio.

Meno richieste è uno dei modi più importanti per ottimizzare la velocità del sito Web. (vedi Steve Souders o questo articolo ).

Un'ulteriore ottimizzazione è minimizzare il tuo CSS. (vedi il post di Google Page Speed .) Grazie a @bynicolas per il suggerimento.

Sicuro che puoi dire, ma per quanto riguarda l' eleganza ? Ecco la buona notizia: Sass e MENO . Ti consentono di scrivere meno codice, dividerlo in diversi file che vengono compilati in un file CSS e molto altro ancora.

Potresti certamente fare una condizione per controllare su quale pagina si trova qualcuno e accodare un foglio di stile specifico per ogni pagina, ma potresti fare meglio a scegliere come target la pagina con CSS.

Nel tuo file header.php, assicurati che la body_classfunzione sia nel tag body, in questo modo:

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

Ciò inserirà le classi nel tag body che è possibile utilizzare per scegliere come target funzioni specifiche della pagina.

Ad esempio, se voglio che l'H1 su una pagina specifica sia rosso, potrei fare:

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

Quindi sulla pagina con l'ID 12, applicherebbe quello stile.

Per scegliere come target un modello di pagina specifico, è possibile:

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

Questo avrebbe come target le pagine con il modello "about" applicato. Guarda le classi nel tag body sulla pagina che vuoi modellare.

Tuttavia, se vuoi ancora accodare un foglio di stile specifico per una pagina specifica, puoi farlo:

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