Implementació de JavaScript en una pàgina de WordPress dirigida
WordPress és una plataforma fàcil d'utilitzar que facilita la gestió i la personalització de llocs web. Tanmateix, alguns canvis poden ser difícils d'implementar, inclosa l'execució de JavaScript en una pàgina determinada. És possible que un script que hàgiu afegit a la secció "Capçalera" del vostre lloc web ara estigui present a cada pàgina. Aquesta és una dificultat típica per primer cop.
Entendre com aplicar condicionalment un fitxer JavaScript és crucial quan s'utilitza per orientar una pàgina específica. JavaScript pot tenir conseqüències inesperades i degradar la velocitat del vostre lloc web si s'utilitza a tot arreu. Aquesta és la raó per la qual és crucial limitar l'script a la pàgina necessària.
En aquest article us explicarem el procés de canvi de la configuració de WordPress perquè JavaScript només s'iniciï a les pàgines que necessiteu. La resposta també és comprensible per als no desenvolupadors; aquesta guia està pensada per a aquells que acaben de començar.
Hauríeu de sentir-vos còmode manipulant els scripts específics de la pàgina a WordPress quan acabeu aquesta lliçó. Us guiarem a través del codi i el procediment precisos necessaris per assegurar-vos que el vostre JavaScript només s'executa on hauria de ser, millorant el rendiment del vostre lloc web.
| Comandament | Exemple d'ús |
|---|---|
| is_page() | La funció coneguda com is_page() verifica si la pàgina actual de WordPress correspon a un ID de pàgina, títol o slug determinats. Per tal de garantir que els scripts només es carreguen en una pàgina específica, aquesta funció és essencial. Per exemple, si (és_pàgina(42)) {... } |
| wp_enqueue_script() | WordPress utilitza el wp_enqueue_script() mètode per carregar fitxers JavaScript. Garanteix que els scripts es carreguen a la capçalera o al peu de pàgina del lloc i s'incloguin correctament amb les seves dependències. wp_enqueue_script('custom-js', 'https://example.com/code.js') és un exemple d'això. |
| add_action() | Per connectar funcions personalitzades a esdeveniments de WordPress predefinits, com ara scripts de càrrega, utilitzeu el add_action() mètode. Això fa possible inserir scripts de manera dinàmica quan sigui necessari. 'wp_enqueue_scripts', 'load_custom_js_on_specific_page' són dos exemples d'accions per afegir.'); |
| add_shortcode() | WordPress us permet registrar un codi curt nou mitjançant el add_shortcode() funció. Això us permet afegir material dinàmic, com ara JavaScript, directament a l'editor de publicacions. Add_shortcode('custom_js', 'add_js_via_shortcode') és un exemple. |
| $.getScript() | Un cop carregada la pàgina, podeu utilitzar el mètode jQuery $.getScript() per carregar dinàmicament un fitxer JavaScript extern. L'aplicació de la lògica condicional a la càrrega d'scripts en funció de l'URL o d'altres criteris és un ús valuós. $.getScript('https://example.com/code.js'), per exemple |
| window.location.href | El window.location.href property returns the full URL of the current page. It can be used to check for specific URL patterns, making it useful for conditionally loading JavaScript on certain pages. Example: if (window.location.href.indexOf('specific-page-slug') > La propietat retorna l'URL complet de la pàgina actual. Es pot utilitzar per comprovar si hi ha patrons d'URL específics, per la qual cosa és útil per carregar condicionalment JavaScript en determinades pàgines. Exemple: if (window.location.href.indexOf('specific-page-slug') > -1) { ... } |
| get_header() | El fitxer de plantilla de capçalera el carrega WordPress mitjançant l' get_header() funció. Abans d'afegir el codi JavaScript, s'utilitza en plantilles de pàgines personalitzades per assegurar-se que l'estructura és adequada. Per exemple, |
| get_footer() | La plantilla de peu de pàgina de WordPress la carrega get_footer() funció, que assegura que JavaScript es carregui abans d'inserir-lo adequadament a la sortida de la pàgina. Per exemple, |
Entendre el paper de JavaScript en pàgines específiques de WordPress
La manera de posar l'script directament a la secció "Capçalera" pot fer que es carregui a cada pàgina quan necessiteu executar un JavaScript fitxer en una pàgina específica de WordPress. Pel que fa a l'experiència d'usuari i el rendiment, això no és ideal. Les opcions anteriors ofereixen una manera més eficaç de gestionar els scripts limitant-lo només a la pàgina especificada. Per exemple, podem utilitzar WordPress is_page() mètode per determinar si l'usuari està veient una pàgina determinada segons el seu identificador o slug. Aquesta és la tècnica principal utilitzada per assegurar-se que el fitxer JavaScript només es carregui quan sigui necessari.
El primer mètode fa ús d'etiquetes condicionals al fitxer funcions.php fitxer juntament amb wp_enqueue_script(). Aquesta tècnica utilitza una funció bàsica de WordPress que afegeix scripts de manera que garanteix una gestió adequada de les dependències i carrega l'script a l'àrea adequada de la pàgina. A través del wp_enqueue_scripts Enganxament d'acció, la funció JavaScript només s'afegirà quan WordPress processi una pàgina que compleixi els requisits is_page() requisit. A més de ser efectiu, això atura l'execució d'scripts inútils en llocs insignificants.
L'ús de codis curts forma part de la segona estratègia. Els codis curts de WordPress fan que sigui senzill afegir material dinàmic a una pàgina o publicació. add_shortcode() es pot utilitzar per crear un codi curt personalitzat, que us permetrà inserir condicionalment l'script a l'àrea de contingut segons sigui necessari. Això us ofereix més opcions si voleu utilitzar l'script en seccions concretes en lloc de la pàgina completa d'un lloc web o publicació. A més, és una opció més accessible per a les persones que no es troben còmodes fent canvis directes als fitxers PHP.
Un altre mètode és perfecte per carregar scripts dinàmicament a pàgines que tenen paràmetres específics a l'URL, ja que fa servir jQuery per buscar patrons particulars en URL. window.location.href i $.getScript() s'utilitzen en aquest enfocament per identificar si una cadena concreta s'inclou a l'URL i carregar el fitxer JavaScript de manera adequada. Aquest enfocament funciona bé en situacions com ara llocs de comerç electrònic o pàgines de destinació amb codis de seguiment únics on l'estructura de l'URL requereix l'ús d'un script. Totes aquestes tècniques són modulars, reutilitzables i asseguren que els scripts es carreguen només quan sigui necessari, la qual cosa millora l'experiència i el rendiment de l'usuari.
Afegir JavaScript a una pàgina específica de WordPress mitjançant etiquetes condicionals
Aquest enfocament carrega el fitxer JavaScript només a una pàgina seleccionada utilitzant les etiquetes condicionals integrades de PHP a WordPress. Aquesta tècnica està molt optimitzada per a WordPress.
// functions.php - Adding JavaScript to a specific WordPress pagefunction load_custom_js_on_specific_page() {// Check if we are on a specific page by page IDif (is_page(42)) { // Replace 42 with the specific page ID// Enqueue the external JavaScript filewp_enqueue_script('custom-js', 'https://example.com/code.js', array(), null, true);}}// Hook the function to wp_enqueue_scriptsadd_action('wp_enqueue_scripts', 'load_custom_js_on_specific_page');
Execució de JavaScript en una pàgina específica de WordPress mitjançant codis curts
Aquest mètode us ofereix llibertat sobre on s'utilitza l'script afegint JavaScript condicionalment a una pàgina determinada mitjançant codis curts de WordPress.
// functions.php - Using shortcodes to add JavaScript to a specific pagefunction add_js_via_shortcode() {// Return the script tag to be added via shortcodereturn '<script src="https://example.com/code.js" type="text/javascript"></script>';}// Register the shortcode [custom_js]add_shortcode('custom_js', 'add_js_via_shortcode');// Now, use [custom_js] in the page editor where the script should run
Càrrega de JavaScript basat en paràmetres d'URL mitjançant jQuery
Aquesta tècnica carrega JavaScript condicionalment i utilitza jQuery per identificar un patró d'URL determinat. Per a pàgines d'orientació dinàmica, és ideal.
<script type="text/javascript">jQuery(document).ready(function($) {// Check if the URL contains a specific query string or slugif (window.location.href.indexOf('specific-page-slug') > -1) {// Dynamically load the JavaScript file$.getScript('https://example.com/code.js');}});</script>
Afegir JavaScript a pàgines específiques mitjançant fitxers de plantilla
En afegir JavaScript directament a un fitxer de plantilla de pàgina de WordPress, aquest mètode fa que l'script només es carregui en aquesta pàgina específica.
// Inside page-specific template file (e.g., page-custom.php)<?php get_header(); ?><!-- Page Content --><script src="https://example.com/code.js" type="text/javascript"></script><?php get_footer(); ?>
Optimització de la càrrega de JavaScript a les pàgines de WordPress
El lloc on es carrega l'script és una consideració crucial quan s'utilitza JavaScript en pàgines concretes de WordPress. WordPress de manera predeterminada permet carregar scripts a la pàgina peu de pàgina o capçalera. Per raons de rendiment, normalment es recomana carregar l'script al peu de pàgina, sobretot quan s'utilitzen recursos externs. Això és perquè els usuaris puguin gaudir de càrregues de pàgines més ràpides posposant l'execució de JavaScript fins que s'acabi de carregar la pàgina.
Podeu canviar el wp_enqueue_script() mètode per carregar un script al peu de pàgina passant veritat com a paràmetre final. En fer això, podeu assegurar-vos que l'script es carregui abans de l'última etiqueta del cos i la resta del contingut de la pàgina. Com que els scripts menys crucials es retarden i els recursos més crucials tenen prioritat, aquesta tècnica ajuda a escurçar el temps de càrrega aparent. Tot i que aquesta optimització pot semblar poc per als novells, té un gran impacte en la velocitat i la funcionalitat d'un lloc de WordPress.
L'eliminació de la memòria cau i el control de versions són altres dos elements crucials. WordPress proporciona un mètode fàcil d'utilitzar wp_enqueue_script() funció per afegir un número de versió als scripts. Podeu assegurar-vos que els usuaris no obtinguin JavaScript obsolet de la memòria cau afegint un argument de versió. Això garanteix que la versió més recent de l'script es carregui constantment, cosa que és molt útil durant el desenvolupament o l'actualització d'un script. Aquest procediment redueix la possibilitat de conflictes d'scripts i millora la funcionalitat del lloc web.
Preguntes habituals sobre com afegir JavaScript a les pàgines de WordPress
- Com puc assegurar-me que un script només s'obre en una pàgina concreta?
- Per carregar condicionalment l'script en funció de l'identificador de la pàgina o del slug, utilitzeu el is_page() funció en el functions.php fitxer del vostre tema.
- Quina és la millor manera d'afegir JavaScript a WordPress?
- Per afegir JavaScript a WordPress, el wp_enqueue_script() La funció és la tècnica recomanada. Garanteix una gestió adequada de dependències i processament d'scripts.
- Puc carregar JavaScript al peu de pàgina?
- Sí, per carregar l'script al peu de pàgina per a un millor rendiment, passa true com a cinquè argument de wp_enqueue_script().
- Com puc gestionar la destrucció de la memòria cau per als fitxers JavaScript?
- Per assegurar-vos que s'ha carregat la versió més recent, afegiu un número de versió a l'URL de l'script mitjançant l'opció de versions a wp_enqueue_script().
- Puc utilitzar un codi curt per afegir JavaScript?
- Sí, podeu utilitzar add_shortcode() per construir un codi curt que us permetrà afegir JavaScript a àrees concretes d'una pàgina o publicació.
Consideracions finals sobre l'optimització de JavaScript per a pàgines de WordPress
El vostre codi JavaScript s'executarà millor i millorarà l'experiència de l'usuari al vostre lloc web si està orientat a una pàgina determinada. El vostre script només es carregarà on sigui necessari mitjançant funcions com ara is_page() i wp_enqueue_script(), que accelerarà els temps de càrrega d'altres àrees del vostre lloc web.
Si sou nou a WordPress i voleu gestionar els scripts de manera eficient sense saber molt de codi, aquests són els millors mètodes per a vosaltres. Recordeu que en restringir l'abast de l'execució del codi, implementar correctament JavaScript en pàgines concretes millora la seguretat a més de l'eficiència.
Referències i fonts de JavaScript a les pàgines de WordPress
- Els detalls sobre com posar scripts en cua a WordPress es van fer referència a la documentació oficial de WordPress. Més informació a Referència per a desenvolupadors de WordPress .
- La informació sobre l'ús d'etiquetes condicionals per orientar pàgines específiques es va obtenir del còdex de WordPress. Consulteu la guia oficial a Etiquetes condicionals de WordPress .
- D'aquest article es van obtenir pràctiques recomanades addicionals per carregar JavaScript al peu de pàgina: Smashing Magazine Consells d'optimització de JavaScript .