¿Quieres saber cómo cargar JavaScript en WordPress?

Todo tema de WordPress generalmente se compone de archivos PHP, HTML, CSS y JavaScript. JavaScript es un lenguaje de programación popular entre los desarrolladores. tema de WordPress. Es un lenguaje que hace que una página HTML sea interactiva y también puede permitirle interactuar con el servidor.

Saber cómo usarlo en tu sitio web será una gran ventaja.

Para utilizar JavaScript de verdad, debe saber cómo cargarlo en su sitio web.

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

Luego de vuelta a por qué estamos aquí.

Cómo cargar JavaScript WordPress

Demos un paso atrás y echemos un primer vistazo a cómo WordPress carga scripts y estilos. Aprendió que al crear los archivos JavaScript, puede agregarlos a su página en la sección de encabezado o en el pie de página.

Descubra también nuestro tutorial sobre Cómo comprimir tus archivos CSS, HTML y Javascript

WordPress hace exactamente lo mismo, pero no puedes simplemente colocar estas etiquetas de script en el archivo de encabezado o pie de página de tu tema de WordPress. WordPress utiliza un mecanismo de carga inteligente llamado " encolamos ".

Este mecanismo es necesario para dar sentido a las dependencias. Si está escribiendo código jQuery para su tema de WordPress, entonces jQuery debe cargarse primero.

Usted escribe código que se basa en un complemento jQuery. En este caso, jQuery debe cargarse primero, luego el complemento jQuery, luego su código.

Cómo "poner en cola" secuencias de comandos (agregar a la cola)

Puede poner en cola los scripts en su carpeta de temas de WordPress o en su Plugin de WordPress. Aquí está el código completo para incluir un script que se base en jQuery:

my_theme_scripts de function () {

 wp_enqueue_script ('mi-script ", get_template_directory_uri ().' /js/my-script.js ', array (' jquery '),' 1.0.0 ', verdadero);

}

add_action ('wp_enqueue_scripts', 'my_theme_scripts');

En primer lugar, una función debe ser " enganchado En WordPress (El uso de ganchos de WordPress). El primer argumento de la función. add_action () le dice a WordPress dónde se deben colocar estos scripts:

• En el espacio publico
• Sobre el tablero

Si usas " wp_enqueue_scripts Se cargarán en el espacio público, si usa " Admin_enqueue_scripts Se cargarán en el tablero de instrumentos.

En la función « add_action Puedes usar " wp_enqueue_script Para agregar los scripts que necesita. La función toma un parámetro requerido y cuatro parámetros opcionales:

• El primer parámetro es el nombre de su script. Puedes elegir lo que quieras, pero asegúrate de usar un nombre único.
• El segundo parámetro debe contener la ubicación del archivo en su tema de WordPress o Plugin de WordPress.
• El tercer parámetro contiene una serie de dependencias. En el ejemplo anterior, dije que jQuery es una dependencia. Todas las dependencias se cargan antes que el script en cuestión.
• El cuarto parámetro es un número de versión
• El quinto y último parámetro indica si desea cargar el script en el encabezado o en el pie de página. Utilice "verdadero" para cargar en el pie de página o "falso" para cargar la secuencia de comandos en el encabezado (tampoco puedes llenar este parámetro).

Dependencias

WordPress ofrece una copia de jQuery, por lo que puede agregarlo como una dependencia sin problemas. Hay una gran cantidad de otros scripts y complementos de jQuery que ofrece WordPress. Si su código depende de uno de ellos, no tiene que usar una de sus copias, simplemente agréguelo como una dependencia. aquí es una lista de scripts que WordPress ofertas.

Si incluye varios scripts independientes, puede agregarlos como dependencias exactamente de la misma manera. Eche un vistazo al siguiente ejemplo:

my_theme_scripts de function () {

 wp_enqueue_script ("mi script base", get_template_directory_uri (). '/js/my-base-script.js', array ('jquery'), '1.0.0', verdadero);

 wp_enqueue_script ("mi-extensión-script", get_template_directory_uri (). '/js/my-script-extension.js', array ("mi-script-base '),' 1.0.0 ', verdadero);

}

add_action ('wp_enqueue_scripts', 'my_theme_scripts');

Como el primer script depende de jQuery, el siguiente script también depende de él. Por lo tanto, no necesita agregar jQuery como una dependencia para ambos. Esto facilita la gestión de dependencias.

Cargando condicional

A veces querrá utilizar su secuencia de comandos en cada página, pero muchas veces querrá cargar una secuencia de comandos en una página específica. Esto es especialmente cierto cuando se considera agregar scripts al tablero. Un buen ejemplo es el uso de códigos cortos. Los códigos cortos permiten a los usuarios crear pantallas avanzadas en el editor de texto visual utilizando algunos trucos simples.

my_theme_scripts de function () {

 wp_register_script ('mi-script', get_template_directory_uri (). '/js/my-script.js', array ('jquery'), '1.0.0', verdadero);

 wp_enqueue_script ('mi-script');

}

add_action ('wp_enqueue_scripts', 'my_theme_scripts');

Hemos guardado el script para que WordPress aprenda sobre el script, pero usamos el " En cola ". De esta forma, el script solo se agrega a la página si se usa el shortcode en esta página.

Otro método de cargar scripts con condiciones es usar funciones condicionales. Si desea cargar un script en todas las páginas de archivo de la categoría, puede usar la función is_category ().

Por ejemplo, puede crear un carrusel de imágenes que los usuarios pueden agregar al artículo de esta manera: [carrusel ids = '42,124,123,331,90, XNUMX ′]. Se creará un carrusel en la página del artículo utilizando las imágenes designadas por sus ID.

Para hacer esto, debe crear un archivo " carousel.js Que se basa en jQuery. Aquí hay un código para llegar allí (no crea un carrusel, pero le permite ver cómo ocurre el proceso de carga):

add_action ('wp_enqueue_scripts', 'my_theme_scripts');

my_theme_scripts de function () {

 wp_register_script ('mi-carrusel', get_template_directory_uri (). '/js/my-carousel.js', array ('jquery'), '1.0.0', verdadero);

}

add_shortcode ('carrusel', 'mi_carousel');

Función my_carousel ($ args) {

 $ atts = shortcode_atts (array (

 'Ids' => ",

 ), $ Atts, 'carrusel');

 wp_enqueue_script ('mi-carrusel');

 // Código para mostrar el carrusel aquí

}

Extracción y sustitución de las secuencias de comandos

Este es, con mucho, un escenario común, pero a veces es posible que deba eliminar o reemplazar un script. Caí en situaciones en las que un script agregado por un complemento (pero no usado por el tema) estaba causando problemas de compatibilidad. "Retirar" fue la mejor opción, ya que el error desapareció por completo.

También puede reemplazar jQuery con una versión más nueva si está probando algo para asegurarse de que sea compatible con versiones más nuevas.

En estas situaciones las funciones wp_deregister_script () "Y" wp_dequeue_script () Son útiles Aquí se explica cómo editar el código ya agregado en WordPress.

my_theme_scripts de function () {

 wp_deregister_script ('jquery');

 wp_enqueue_script ('jquery', get_template_directory_uri (). '/js/jquery3.0.0.js', array (), '3.0.0', verdadero);

 wp_enqueue_script ('mi-script', get_template_directory_uri (). '/js/my-script.js', array ('jquery'), '1.0.0', verdadero);

}

add_action ('wp_enqueue_scripts', 'my_theme_scripts');

reflexiones finales

Este método de carga en WordPress es excelente porque le permite agregar sus scripts de forma modular. Esto le permitirá asegurarse de que las dependencias se agreguen de forma modular.

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. Premium SEO Pack

Premium SEO Pack es un Plugin de WordPress que optimiza tu SEO y comprime CSS para mejorar la velocidad de carga de tu sitio web.

El complemento también le permite administrar el diseño de su sitio web con unos pocos clics. Sus funcionalidades son, entre otras: compresión CSS y JS, integración de sitemaps de video y fragmentos, formateo de archivos HTML y XML, redireccionamiento de páginas 404 y 301, uso compartido en redes sociales, provisión de 'Etiqueta ALT, diseño altamente personalizable

Descargar | Demo | alojamiento web

2. Recogedor de tiempo de entrega Woocommerce para envío

El selector de tiempo de entrega de Woocommerce para envío es una extensión de WooCommerce que permite a los clientes elegir la fecha y hora de entrega en la página de pago. 

Los clientes podrán seleccionar el tiempo de entrega del paquete en casa. El tiempo de entrega será visible para los administradores del sitio web y también se enviará por correo electrónico a los administradores del sitio web o la tienda en línea.

Descargar | Demo | alojamiento web

3. héroe menú

Este complemento le permite crear su propio menú personalizado de WordPress en unos pocos pasos bastante sencillos. En particular, le permite crear fácil e intuitivamente un menú de WordPress elegante y profesional. 

Desde el mega menú más complejo lleno de funciones, hasta el menú más simple con menú desplegable, el complemento de WordPress HeroMenu configura cualquier tipo de menú y lo pone en funcionamiento en minutos.

En términos de características que ofrece, entre otras: operación perfecta en PC, tableta y teléfono inteligente, desde CSS personalizado para agregar sus propios estilos al menú, un generador de megamenús, varios navegadores compatibles: Chrome, Firefox, Safari, Opera, IE9 y más.

Descargar | Demo | alojamiento web

Recursos recomendados

Consulte otros recursos recomendados que lo ayudarán a resolver otros errores comunes de WordPress. 

• Cómo corregir los errores de redireccionamiento en WordPress
• Cómo crear un diseño personalizado con Elementor
• Cómo crear una intranet de WordPress para su organización
• Cómo crear una página de inicio de sesión en WordPress

Conclusión

Listo ! Eso es todo por este tutorial, espero que te haya ayudado a comprender cómo cargar JavaScript en WordPress. No dudes en compartirlo con tus amigos en tu las redes sociales preferido. 

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éntanos sobre tu comentarios y sugerencias en la sección dedicada.

...