¿Quieres dominar cómo agregar código jQuery en WordPress? Continúe leyendo para aprender más.

A pesar del hecho de que WordPress ha estado disponible durante un tiempo, y la adición de scripts de temas y complementos también ha existido durante un tiempo, todavía hay cierta confusión sobre qué método usar. use para agregar scripts en WordPress.

Así que intentaremos aclarar las cosas.

Dado que jQuery es el marco de JavaScript más utilizado, le mostraremos cómo agregarlo a un tema o una Plugin de WordPress.

Pero antes, si nunca has instalado WordPress, descubre Cómo instalar un blog de WordPress en 7 pasos et ¿Cómo encontrar, instalar y activar un tema de WordPress en tu blog 

Luego de vuelta a por qué estamos aquí.

Modo de compatibilidad JQuery

Antes de comenzar a agregar scripts en WordPress, exploremos el modo de compatibilidad de jQuery. WordPress viene con una copia de jQuery, que puede usar con su código. Cuando se carga WordPress jQuery, usa el modo de compatibilidad, que es un mecanismo para evitar conflictos con otras bibliotecas.

Averigüe si él ¿Debería eliminarse jQuery de sus temas y complementos? WordPress ?

Esto significa que no puede usar el signo de dólar directamente como lo haría en otros proyectos. Al escribir jQuery en WordPress, debe usar jQuery en su lugar.

Eche un vistazo al siguiente código para ver a qué me refiero:

/ * Modo normal * / $ ('. Hideable'). On ('click', function () {$ (this) .hide ();}) / * Modo de compatibilidad * / jQuery ('. Hideable'). On ('clic', función () {jQuery (esto) .hide ();})

Lo que necesita saber es que con algunas modificaciones, puede usar el signo de dólar nuevamente. Usar cada vez que "jQuery" en todo su código complicará mucho la escritura.

Echa un vistazo a 10 editores de código para los desarrolladores de WordPress

Solo para recapitular, si conoce jQuery, el signo $ es solo un alias para jQuery (), luego un alias para una función. La sintaxis básica es: $ (Selector) .action () :

• Un signo de dólar para definir jQuery
• Un (selector) para "buscar" elementos HTML
• Una acción jQuery () para realizar en estos elementos

Si carga su script en el pie de página, podrá ajustar su código en una función anónima. He aquí cómo hacerlo:

(función ($) {$ ('. hideable'). on ('click', function () {$ (this) .hide ();})}) (jQuery);

Si desea agregar su secuencia de comandos en el encabezado (lo que debes evitar si es posiblePuede ajustarlo en una función que se ejecuta cuando el documento está listo.

Descubre también por cierto Cómo fácilmente código en WordPress sin romper su sitio web

jQuery (documento) .ready (function ($) {$ ('. hideable'). on ('click', function () {$ (this) .hide ();})});

Cómo vincular sus scripts a jQuery

Ahora que puede escribir un código jQuery válido en WordPress, vincularemos nuestro trabajo a nuestro sitio web. En WordPress, el proceso se llama ' encolamos "(sistema de cola). Para un sitio web HTML normal, deberíamos usar la etiquetaguión> para agregar scripts.

WordPress puede hacer lo mismo, pero utilizaremos las características especiales de WordPress para lograrlo. De esta manera, WordPress gestiona todas nuestras dependencias por nosotros.

Si está trabajando en un tema, puede usar la función wp_enqueue_script () dentro de su archivo functions.php archivo. Así es como puede hacerlo:

function my_theme_scripts () {wp_enqueue_script ('my-great-script', get_template_directory_uri (). '/js/my-great-script.js', array ('jquery'), '1.0.0', verdadero); } add_action ('wp_enqueue_scripts', 'my_theme_scripts');

La función toma cinco argumentos. El primero que puede usar para hacer referencia a la secuencia de comandos, el segundo es la ubicación del archivo de secuencia de comandos, el tercer parámetro es una matriz de dependencias.

Agregué jQuery como dependencia porque el script lo usa. Si crea una secuencia de comandos que depende de "mi-gran-script Debe agregarlo a la lista de dependencias para que WordPress sepa qué archivos necesita cargar primero.

Descubrir también Cómo cargar JavaScript en WordPress

El cuarto parámetro es un número de versión y el quinto le permite a WordPress saber dónde colocar el script. De forma predeterminada, los scripts se cargarán en el encabezado, lo cual es una mala práctica, ya que ralentiza la carga de la página de su sitio web (los navegadores detienen la carga de todas las páginas, siempre que un bloqueo est rencontré). Debe cargar todos sus scripts en el pie de página, si es posible haciendo el quinto parámetro " verdadero ".

Cómo agregar una secuencia de comandos en el salpicadero

También puede agregar scripts en el salpicadero. Las funciones utilizadas son exactamente las mismas, solo necesita utilizar un " Gancho. "diferente. Eche un vistazo al siguiente ejemplo:

function my_admin_scripts () {wp_enqueue_script ('my-great-script', plugin_dir_url (__FILE__). '/js/my-great-script.js', array ('jquery'), '1.0.0', verdadero); } add_action ('admin_enqueue_scripts', 'my_admin_scripts');

En lugar de usar wp_enqueue_scripts debemos usar Admin_enqueue_scripts, y es todo !

El uso de etiquetas condicionales

Use etiquetas condicionales para que solo cargue sus scripts cuando sea necesario. Esto se usa con mayor frecuencia en el tablero, donde le gustaría usar un script solo en una página específica. Esto ahorra ancho de banda y tiempo de procesamiento, lo que significa tiempos de carga más rápidos para su sitio web.

Descubre también nuestro Complementos de 10 WordPress para mejorar la velocidad de carga de tu blog

Echa un vistazo a los admin_enqueue_scripts documentación en el Codex de WordPress para más información.

Descubre también algunos complementos premium de WordPress  

Puedes usar otros plugins de WordPress para dar una apariencia moderna y optimizar el manejo de tu blog o sitio web.

Aquí le ofrecemos algunos complementos premium de WordPress que lo ayudarán a hacerlo.

1. Mapas interactivos del mundo

Mapas del mundo interactivos es un Plugin de WordPress que te ayuda a crear tantos mapas como quieras, con marcadores, continentes, países o regiones interactivos y de colores.

Es totalmente compatible con la nueva versión de WordPress y Visual Composer. Gracias a este complemento, puede mostrar varios tipos de regiones, tales como: un mapa de todo el mundo, un continente o un subcontinente (África, Europa, América, Asia, Oceanía y todos sus subcontinentes), un país, un país dividido por sus regiones, un estado de los Estados Unidos, Estados Unidos dividido por áreas metropolitanas, un estado de los Estados Unidos dividido por áreas metropolitanas.

Descargar | Demo | alojamiento web

2. Formulario de contacto AJAX con seguimiento

Ce Plugin de WordPress le permite agregar fácilmente formularios de contacto o comentarios a su blog de WordPress. Viene con un administrador de configuración al que se puede acceder directamente a través del panel de control de WordPress.

Sus principales características son entre otras: a fPara correo electrónico, el soporte de CAPTCHA matemática sobre formas, personalización y configuración a través del panel de WordPress, la posibilidad de ddefina un autoresponder personalizado, soporte para CSS personalizado y más

Descargar | Demo | alojamiento web 

3. Gateway de pago estándar de PayPal para formularios Ninja

La pasarela estándar de PayPal para formularios Ninja le permite crear formularios que se integran perfectamente con la pasarela de pago de PayPal. 

Podrá crear formularios de pedido personalizados y recibir pagos utilizando cuentas estándar de Paypal. Sus principales características son: integración fácil y rápida, integración IPN, la posibilidad de activar / desactivar la pasarela de PayPal en formularios individuales, soporte para pagos regulares, etc.

Descargar | Demo |  alojamiento web

Otros recursos recomendados

También lo invitamos a consultar los recursos a continuación para avanzar en el control y agarre de su sitio web y blog.

• Cómo utilizar con eficacia categorías y etiquetas en WordPress
• Cómo crear un menú sensible para WordPress móvil
• Cómo crear una intranet de WordPress para su organización
• Cómo instalar un plugin en WordPress

Conclusión

Listo ! Eso es todo por este tutorial. Espero que ahora sepa cómo agregar un script a WordPress. no dude en comparte el consejo con tus amigos en tus redes sociales.

Sin embargo, también podrá consultar nuestra Recursos, si necesita más elementos para llevar a cabo sus proyectos de creación de sitios de Internet, consulte nuestra guía sobre Creación de blog de WordPress.

Pero, mientras tanto, cuéntenos sobre su comentarios y sugerencias en la sección dedicada.

...