\n\n\n\n\n\n\n\n
¿Qué es jQuery?<\/h2>\n
jQuery es una librería de JavaScript utilizada para crear componentes front-end dinámicos, como sliders giratorios. Su código ligero permite a los desarrolladores web manipular elementos HTML y validar datos más eficientemente.<\/p>\n <\/div>\n\n\n\n<\/p>
¿Por qué utilizar jQuery?<\/h2>
Además de su ecosistema de plugins, otras razones para utilizar la librería jQuery en WordPress son: <\/p>
- \n
- Apto para principiantes: <\/strong>gracias a su formato de texto corto y simple, el código jQuery es fácil de leer y escribir. <\/li>\n\n\n\n
- Compacto: <\/strong>por lo general <\/strong>un archivo de jQuery es más pequeño que un JavaScript<\/a> simple, permitiéndote realizar las mismas tareas con menos caracteres. <\/li>\n\n\n\n
- Compatibilidad entre navegadores: <\/strong>entre <\/strong>los navegadores populares que soportan jQuery están Google Chrome, Microsoft Edge, Mozilla Firefox, Safari<\/strong> y Opera<\/strong>. <\/li>\n\n\n\n
- Soporte AJAX: <\/strong>los desarrolladores pueden implementar AJAX para crear una web fácil de usar y responsiva. <\/li>\n\n\n\n
- Uso de ancho de banda bajo: <\/strong>jQuery puede ejecutar efectos de animación directamente en el navegador del usuario, lo cual resulta en un uso bajo de ancho de banda. <\/li>\n<\/ul>
Cómo utilizar jQuery en WordPress<\/h2>
Hay dos formas de añadir scripts de jQuery en un sitio web de WordPress: manualmente o utilizando un plugin de WordPress. <\/p>
Comencemos con el método manual. <\/p>
Añadir jQuery manualmente<\/h3>
Si tienes experiencia con desarrollo JavaScript y WordPress, sigue estos pasos:<\/p>
1. Cambia al modo de compatibilidad<\/strong><\/p>
Antes de comenzar a usar tus propios scripts de Jquery en WordPress, es vital que entiendas el modo de compatibilidad de jQuery. <\/p>
Por defecto, jQuery utiliza el signo $ <\/strong>como atajo:<\/p>
$(document) .ready (function() {\n$(\"button\") .click (function () {<\/pre>Sin embargo, otras librerías de JavaScript en tu web también implementan el signo del dólar en su sintaxis. Para evitar conflictos, ingresa el modo compatibilidad al reemplazar el signo $ <\/strong>con jQuery<\/strong>.<\/p>
Echa un vistazo al siguiente código:<\/p>
jQuery(document) .ready (function() {\njQuery(\"button\") .click (function () {<\/pre>El único problema con este modo es que pueden haber scripts sobrecargados, ya que escribir jQuery en lugar del atajo significa añadir más caracteres.<\/p>
Para resolver este problema elige un nuevo nombre de variable para reemplazar el signo del dólar. El más común es $j. <\/strong><\/p>
Simplemente añade este código al principio de tus scripts jQuery:<\/p>
var $j = jQuery.noConflict()<\/pre>
2. Crea un archivo script<\/strong><\/p>
Luego, crea un archivo script personalizado con la extensión .js. Los usuarios de Hostinger pueden seguir los siguientes pasos: <\/p>
\n\n\n\n
¡Importante! <\/strong>Para principiantes recomendamos crear primero un tema hijo de WordPress<\/a>. De esta manera, puedes personalizar el diseño, estilo, parámetros y scripts sin cambiar el directorio del tema padre.<\/p><\/div>\n\n\n\n<\/p>
- \n
- Accede a hPanel <\/strong>→ Hosting → Administrar.<\/strong><\/li>\n\n\n\n
- En el menú izquierdo, selecciona Archivos → Administrador de archivos.<\/strong><\/li>\n\n\n\n
- Ingresa a public_html → wp-content.<\/strong><\/li>\n<\/ol>
![\"Carpeta](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2023\/04\/administrador-archivos-hpanel.png\/public\")
<\/figure>- \n
- Abre la carpeta Themes <\/strong>y selecciona uno de los temas instalados. <\/li>\n\n\n\n
- En el menú izquierdo, haz clic en Nueva carpeta <\/strong>y nombrala .js<\/strong>.<\/li>\n\n\n\n
- Haz clic en Nuevo archivo <\/strong>para crear un nuevo archivo .js, por ejemplo: nuevo_script.js<\/strong>. <\/li>\n<\/ol>
![\"Carpeta](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2023\/04\/ejemplo-archivo-hpanel.png\/public\")
<\/figure>- \n
- Añade scripts jQuery al archivo. <\/li>\n\n\n\n
- Repite los mismos pasos para personalizar plugins de WordPress.<\/li>\n<\/ol>
3. Añade código dentro del archivo functions.php<\/strong><\/p>
Antes de añadir scripts en línea a WordPress, localiza el archivo functions.php <\/strong>en la carpeta del tema. <\/p>
![\"Archivo](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2023\/04\/archivo-functions-php.png\/public\")
<\/figure>Abre el archivo y agrega la siguiente función jQuery al comienzo:<\/p>
function add_my_scripts() {\n wp_enqueue_script( ‘new-script', get_template_directory_uri() . '\/js\/new_script.js', array( 'jquery' ), '1.0.0', true );\n}\nadd_action( 'wp_enqueue_scripts', 'add_my_scripts' )<\/pre>Asegúrate de reemplazar new-script <\/strong>y new_script.js <\/strong>con los nombres actuales de los archivos. <\/p>
Al agregar la función wp_enqueue_script <\/strong>dentro del código PHP, los usuarios pueden añadir un script personalizado e informar a WordPress que se basa en jQuery.<\/p>
También ayuda a WordPress a localizar el script y personalizar el tema basado en tus scripts jQuery.<\/p>
\n![\"\"](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2024\/06\/ES-New-WP_in-text-banner.png\/public\")
<\/a><\/figure><\/div>Añadir jQuery a través de un plugin de WordPress<\/h3>
Si añadir scripts en WordPress manualmente es muy técnico para ti, te recomendamos utilizar plugins jQuery de WordPress. <\/p>
A continuación cómo hacerlo:<\/p>
1. Elige un plugin<\/strong><\/p>
WordPress ofrece varios plugins para crear sitios web interactivos con jQuery. Aquí nuestra elección de los mejores plugins para diferentes usos: <\/p>
- \n
- jQuery Updater<\/a>: aunque jQuery viene pre-instalado con WordPress, la plataforma viene a menudo con una versión desactualizada. jQuery Updater asegura que tu sitio web instale automáticamente la última versión de la librería de JavaScript. <\/li>\n\n\n\n
- Advanced Custom Fields<\/a>: esta herramienta es ideal para añadir campos personalizados en entradas y páginas. Algunos de sus campos basados en jQuery incluyen selector de color, mapa de Google, selector de fecha y hora.<\/li>\n\n\n\n
- jQuery Validation For Contact Form 7<\/a>: este plugin te permite mostrar mensajes de error cuando los usuarios ingresen información incorrecta en Contact Form 7. Puedes crear reglas de confirmación para URLs, fechas, tarjetas de crédito y números telefónicos. <\/li>\n\n\n\n
- jQuery Post Splitter<\/a>: compatible con la mayoría de temas de WordPress, este plugin te permite dividir artículos y páginas dentro de sliders. <\/li>\n<\/ul>
A pesar de que instalar estos plugins<\/a> simplifique el proceso de diseño de una página web, sigue siendo necesario tener conocimiento básico de las librerías jQuery y JavaScript para usarlas.<\/p>
\n\n\n\n
\nLecturas recomendadas<\/h4>\n
¿Qué es jQuery?<\/a><\/p>
Editor de temas de WordPress<\/a><\/p>
- Advanced Custom Fields<\/a>: esta herramienta es ideal para añadir campos personalizados en entradas y páginas. Algunos de sus campos basados en jQuery incluyen selector de color, mapa de Google, selector de fecha y hora.<\/li>\n\n\n\n
- jQuery Updater<\/a>: aunque jQuery viene pre-instalado con WordPress, la plataforma viene a menudo con una versión desactualizada. jQuery Updater asegura que tu sitio web instale automáticamente la última versión de la librería de JavaScript. <\/li>\n\n\n\n
- En el menú izquierdo, haz clic en Nueva carpeta <\/strong>y nombrala .js<\/strong>.<\/li>\n\n\n\n
- En el menú izquierdo, selecciona Archivos → Administrador de archivos.<\/strong><\/li>\n\n\n\n
- Compacto: <\/strong>por lo general <\/strong>un archivo de jQuery es más pequeño que un JavaScript<\/a> simple, permitiéndote realizar las mismas tareas con menos caracteres. <\/li>\n\n\n\n