Quina és la millor manera d’afegir js externs personalitzats a wordpress

Tal com afirma la líder comunitària CMS, un 25% d’internet està utilitzant WordPress. Vist les tendències, no tenim més opció que creure-les, gairebé cada ²ⁿ bloc i cada quart lloc sembla que utilitzen el CMS aparentment més potent i fàcil d’utilitzar. Amb moltes ganes, les persones i els desenvolupadors han començat a canviar els seus llocs cap a la plataforma WordPress.

En aquest esforç per transformar el vostre lloc web dolç i senzill en un lloc CMS complex i d’alt rendiment, la gent es queda enganxada a un pas molt bàsic i es pregunta: Per amor, com puc obtenir aquest fitxer JavaScript extern (.js). treballant en aquest tema de WordPress? Ets tu també qui fa la mateixa pregunta? Bé amics, finalment esteu al lloc correcte: estic aquí per guiar-vos pas a pas per la manera més senzilla possible per aconseguir aquesta tasca.

Si suposem que ja teniu WordPress tot instal·lat i funcionat amb JS externs, anem a la tasca d’incloure el fitxer.

Nota: estic utilitzant el següent fitxer (testrun.js) per a aquest tutorial i el tema on estic treballant és el Twenty-Sixteen de WordPress .

alerta ('Hola');

Anem a començar!

Tots els scripts i fulls d'estils es carreguen des de funcions.php . Aquesta és la manera correcta de carregar-les a WordPress per evitar conflictes amb cap altre script que es carregui ja sigui pel propi WordPress o amb els vostres complements. Si deixeu que WordPress gestioni tots els fitxers inclosos, heu de comunicar-vos que voleu que s'inclogui aquest fitxer a la part de capçalera (inici) o peu de pàgina (final) del fitxer. Cada plantilla / tema té les seves funcions.php, de manera que seria difícil generalitzar el nom exacte de les funcions que inclouen tots els fitxers a incloure. Com que tinc vint-i-setze temes com a tema, a continuació es mostra la captura de com funcionen les meves funcions.php (utilitzada per incloure fitxers). Els vostres haurien d’assemblar en certa mesura a això:

La funció wp_enqueue_script enllaça un fitxer de script a la pàgina generada en el moment adequat segons les dependències de script, si encara no s'ha inclòs l'script i si s'han registrat totes les dependències. Podeu enllaçar un script amb un control registrat prèviament amb la funció wp_register_script () o proporcionar aquesta funció amb tots els paràmetres necessaris per enllaçar un script.

El wp_enqueue_script ($ handle, $ src, $ deps, $ ver, $ in_footer) té els següents paràmetres:

$ manejar

(cadena) (Obligatori) Nom del guió.

$ src

(string | bool) (opcional) Ruta al script del directori arrel de WordPress. Exemple: '/js/myscript.js'.

Valor per defecte: fals

despeses de $

(matriu) (Opcional) Depèn d'una matriu de gestions registrades que aquest script.

Valor per defecte: matriu ()

$ ver

(string | bool) (Opcional) Cadena que especifica el número de versió de script, si en té un. Aquest paràmetre s'utilitza per assegurar que la versió correcta s'envia al client independentment de la memòria cau i, per tant, s'ha d'incloure si un número de versió està disponible i té sentit per a l'escriptura.

Valor per defecte: fals

$ in_footer

(bool) (Opcional) Si voleu obtenir el guió abans o abans . Per defecte, "fals". Accepta "fals" o "veritable".

Valor per defecte: fals

Podeu ignorar la funció wp_register_script () d'aquest tutorial. El nostre propòsit és incloure només una JS externa. Hauria de funcionar bé sense ell!

Per tant, si vull anomenar el meu script com a "prova", recordeu que aquest paràmetre ($ handle) NO necessàriament és el nom del fitxer real, i el meu fitxer té una dependència externa respecte a jquery i la versió és 1.0 i es carrega abans de la càrrega de la pàgina. aleshores, la meva funció seria:

wp_enqueue_script ('tutorial', get_template_directory_uri (). '/js/testrun.js', matriu ('jquery'), '1.0', fals);

Si us adoneu, he utilitzat get_template_directory_uri (), per tant, la cadena concatenada després de la funció, és a dir " /js/testrun.js " és en realitat la ruta del fitxer amb el fitxer índex de la plantilla .

De manera que el vostre atribut $ src, que és la font del fitxer js es converteix en: get_template_directory_uri (). 'Path_to_js_wrt_index_of_template'.

Per tant, la funció final.php final sembla:

Mantingueu-vos allà, gairebé ho vàrem fer! Guardeu-ho ara i feu clic a actualitzar al vostre lloc web … hauríeu de veure el funcionament de la JS. Aquí és el meu:

Com que vam establir l'opció $ in_footer a falsa, el script es carrega abans que es carregui la pàgina, però després de carregar-se JQuery, ja que es va afegir com a dependència.

I .. Voila! Aquí aneu .. Heu inclòs amb èxit un fitxer JS personalitzat extern al vostre tema WP.

Happy Coding !!

Referència: Funció Enqueue: WordPress Codex