Accentsconagua

JS condizionale e CSS accodamento nelle pagine front-end

Codice
Share

L'abbiamo letto numerose volte: un buon cittadino di WordPress carica solo il suo JavaScript dove è necessario. Questa pratica riduce al minimo i tempi di caricamento del sito e si scontra con altri script. Tuttavia, la maggior parte degli articoli parla solo dell'uso di wp_enqueue_script per il caricamento condizionale di JavaScript nel contesto dell'amministratore di WordPress, delle pagine di amministrazione del plugin o delle pagine front-end nel loro complesso. Ma per quanto riguarda l'isolamento del nostro JavaScript in un particolare fine frontale pagina? Potremmo potenzialmente essere fantasiosi con Se dichiarazioni, ma WordPress fornisce una utile API con un filtro per gestire solo questo genere di cose senza Se - quindi diamo un'occhiata sotto il cofano.

"un buon cittadino di WordPress carica solo il suo JavaScript dove è necessario"

Sotto il cappuccio


Caricatore di modelli

Quando una pagina di WordPress viene richiesta da un lettore, il caricatore di template di WordPress controlla se esiste il modello corretto e una funzione chiamata get_query_template è chiamato. Questa funzione individua il modello corretto in base alla richiesta della pagina WordPress e restituisce il percorso completo al modello. Tuttavia, prima di restituire il percorso, consente di modificare l'output utilizzando il $ Type _template filtro. $ Type è il nome file del modello senza l'estensione.


get_query_template Funzione

Quindi se un lettore stava richiedendo un singola pagina post su un sito che utilizzava il tema Twenty Eleven, $ Type valuterà a 'Single' e potremmo usare un filtro chiamato 'Single_template' per cambiare il percorso del modello di post singolo prima che fosse restituito per essere caricato da WordPress. Questo filtro sarebbe simile a questo:

add_filter ('single_template', 'benchpress_single_template'); function benchpress_single_template ($ template_path) // fa qualcosa qui restituisce $ template_path;

e ci fornisce esattamente ciò di cui abbiamo bisogno: un modo per indirizzare ogni specifico tipo di pagina / file modello al fine di isolare il nostro JavaScript in particolari pagine front-end di WordPress. Ora qualsiasi file di pagina / modello può essere preso di mira semplicemente utilizzando un filtro con il nome del file modello. Eccezionale!

Ora mettiamolo insieme passo dopo passo.

Mettendolo insieme

Passaggio 1 Aggiungi il filtro appropriato a functions.php

Ricorda, il nome del filtro sarà il nome del file del modello senza l'estensione. Quindi, utilizzando il tema Twenty Eleven e desiderando di indirizzare il nostro JavaScript al autore solo pagine, aggiungeremo il seguente codice al nostro functions.php file:

add_filter ('author_template', 'benchpress_author_template');

Passaggio 2 Accodare i nostri file JavaScript (e CSS) nella funzione di callback del filtro

function benchpress_author_template ($ template_path) wp_enqueue_script ('nome univoco per lo script', get_stylesheet_directory_uri (). 'percorso / a / script'); wp_enqueue_style ('nome univoco per stylesheet', get_stylesheet_directory_uri (). 'percorso / a / stylesheet'); return $ template_path;

Si noti che il filtro passa il valore del percorso del modello alla nostra richiamata e si ritorna $ template_path incolume perché non abbiamo bisogno di cambiarlo.

Che dire del caricamento condizionale di JavaScript che viene generato nel mio PHP?

Ho visto questa domanda posta e mentre non sono sicuro che questo sia il migliore modo, ecco un modo per gestire questo.

Aggiungi la seguente riga alla funzione di callback del filtro:

add_action ('wp_head', 'benchpress_dynamic_js');

Quindi aggiungere la funzione di callback per il wp_head filtro:

function benchpress_dynamic_js () if (! is_admin ()) echo '';

Quindi il codice completo sarà simile a:

add_filter ('author_template', 'benchpress_author_template'); function benchpress_author_template ($ template_path) wp_enqueue_script ('nome univoco per lo script', get_stylesheet_directory_uri (). 'percorso / a / script'); wp_enqueue_style ('nome univoco per stylesheet', get_stylesheet_directory_uri (). 'percorso / a / stylesheet'); add_action ('wp_head', 'benchpress_dynamic_js'); return $ template_path;  function benchpress_dynamic_js () if (! is_admin ()) echo '';

Sommario

Riferimenti in questo articolo

Funzioni di WordPress

  • wp_enqueue_script
  • get_query_template
  • add_filter
  • wp_enqueue_style
  • is_admin

Filtri WordPress

  • $ Type _template
  • wp_head

File modello WordPress

  • single.php
  • author.php
Codice
×