Cómo agregar correctamente JavaScripts y estilos en WordPress

En este artículo veremos cómo agregar correctamente JavaScripts y Styles en WordPress .

Hay muchos nuevos desarrolladores de WordPress a quienes les gusta escribir código y desarrollar complementos exclusivamente para sus propios sitios web o para venderlos en varios mercados y obtener un buen rendimiento.

Hay varias formas de escribir un código, pero solo hay formas seleccionadas de escribir código de manera eficiente.

Si puede escribir un código en dos líneas en lugar de diez, está ahorrando mucho procesamiento y memoria.

Si puede no importar para un sitio web pequeño y liviano, pero para un sitio web pesado, podría significar mucho.

Si no escribe un código nítido y utiliza los recursos disponibles de manera eficiente, creará muchos conflictos para otros programas.

Por ejemplo, hay varias formas de cargar Javascript externo listo para usar en WordPress para su complemento.

Pero si no sigue el estándar adecuado, todos los complementos activados pueden atascarse gravemente.

Este artículo es principalmente para nuevos desarrolladores de WordPress que estén dispuestos a desarrollar temas y complementos de WordPress.

A menos que codifique correctamente, su código será poco profesional y cualquier producto que haya hecho, sin importar cuán bueno sea el concepto, nunca será aceptado.

Por lo tanto, es mejor saber cómo agregar correctamente JavaScripts y Styles en WordPress .

Los errores de agregar JavaScript

Algunos de ustedes pueden estar al tanto del hecho de que WordPress tiene una función llamada wp_head que lo ayuda a cargar cualquier cosa en la sección de encabezado del sitio web.

Todo lo que necesita hacer es agregar las siguientes líneas de código en su archivo de script, y todo aparecerá en el encabezado.

add_action('wp_head', 'wpb_bad_script');
función wpb_bad_script() {
echo 'jQuery va aquí';
}

Este es un atajo bastante para agregar cosas, pero no es la mejor manera. Debe seguir el estándar adecuado para deshacerse de los atajos, y ese es el objetivo de esta ilustración.

Por ejemplo, carga JQuery manualmente en su complemento y otro desarrollador también carga el mismo JQuery manualmente o mediante el estándar adecuado. Si una persona ha activado ambos complementos, entonces JQuery se cargará dos veces en la memoria, lo cual es un desperdicio.

Además, si JQuery cargado difiere en la versión, habría muchos fallos en los complementos debido a conflictos. Debe saber cómo agregar correctamente JavaScripts y Styles en WordPress antes de escribir cualquier código.

¿Cómo evitar tales errores: el concepto de la función Enqueue?

Como sabrá, la comunidad de desarrolladores de WordPress es grande y fuerte. Hay literalmente miles y miles de desarrolladores que desarrollan nuevos temas y complementos todos los días.

Pero lo que están haciendo para asegurarse de que nunca haya ningún conflicto con el método de codificación de los demás es mediante la función de secuencia de comandos en cola.

Esta es la función responsable de agregar correctamente JavaScripts y Styles en WordPress para que nunca haya conflictos ni bloqueos innecesarios de memoria.

Asegura una forma sistemática de cargar JavaScripts y Styles. La función qp_enquque_function le dice a Wordless cuándo cargar esos JavaScripts y Styles, dónde cargarlos y especialmente bajo qué condiciones.

Con la ayuda de estos, no tiene que cargar JQuery y cosas por el estilo manualmente y, por lo tanto, nunca habrá una condición de bloqueo de memoria debido a la carga de los mismos archivos una y otra vez.

La razón de esto es el hecho de que la función Enqueue le permite usar las bibliotecas integradas que vienen con WordPress. También reducirá la carga del tiempo de carga lento de la página debido a la ausencia de carga manual de JavaScripts.

Pasos para agregar correctamente JavaScripts y estilos en WordPress-

1. Poner en cola los scripts en WordPress

Las siguientes líneas de código cargan el paquete de JavaScript incorporado que viene con WordPress. Debe colocar estas líneas en el archivo de complementos cuando esté creando complementos o debe colocarlas en functions.php si está creando un tema.

función wpb_agregar_scripts() {
wp_register_script('my_amazing_script', plugins_url('amazing_script.js', __FILE__), array('jquery'),'1.1', true);
wp_enqueue_script('mi_guion_maravilloso');
}
add_action('wp_enqueue_scripts', 'wpb_adding_scripts'); 

Explicación del código

El script se registra a través de la función wp_register_script() que tiene cinco parámetros diferentes.

1. $handle: es un nombre único para el script. Aquí está 'my_amazing_script'.

2. $src: define la ubicación de su script. La función de biblioteca plugins_url obtiene la URL adecuada de su carpeta de complementos. Una vez que se obtiene, comenzará a buscar el archivo amazing_script.js dentro de él.

3. $deps – Define dependencia. Debe agregarlo cuando le pida a WordPress que cargue un script de biblioteca como Jquery.

Si los scripts ya están cargados en la memoria, no se volverá a cargar y se producirá una nueva carga. Esto asegura que no haya conflicto, bloqueo de memoria y pérdida de tiempo.

4. $ver – Define el número de versión del script. No es obligatorio.

5. $in_footer: se utiliza para cargar el script en el pie de página. Si desea cargar el script en el encabezado, debe mantenerlo en falso.

Una vez que todo está definido, simplemente llama al script con wp_enqueue_script().

2. Estilos en cola en WordPress

Al igual que JavaScript, debe poner en cola las hojas de estilo. Use el siguiente fragmento de código en su archivo de complemento o en el archivo functions.php para la creación de temas.

función wpb_agregar_estilos() {
wp_register_script('my_stylesheet', plugins_url('my-stylesheet.css', __FILE__));
wp_enqueue_script('mi_hoja de estilo');
}
add_action('wp_enqueue_scripts', 'wpb_adding_styles'); 

Los códigos anteriores son adecuados mientras crea un complemento. Cuando está creando un tema, debe cambiar plugins_url() a get_template_directory_uri(). El resto de las cosas seguirán siendo exactamente iguales.

función wpb_agregar_scripts() {
wp_register_script('my_amazing_script', get_template_directory_uri() . '/js/amazing_script.js', array('jquery'),'1.1', true);
wp_enqueue_script('mi_script_increíble');
}
add_action('wp_enqueue_scripts', 'wpb_adding_scripts'); 

Si está creando un tema secundario, debe usar get_stylesheet_direcroy_uri() en lugar de get_template_directory_uri().

Esta es la forma estándar de agregar correctamente JavaScripts y Styles en WordPress.

Si su complemento o tema tiene fallas, debe modificar el código de ellos con las líneas de código mencionadas anteriormente, y tal vez las fallas se resuelvan.

Siga siempre los estándares de codificación que se siguen en todo el mundo para estar en sintonía con otros desarrolladores exitosos.