Veremos en este artículo. cómo agregar correctamente JavaScript y estilos en WordPress.
Hay muchos nuevos desarrolladores de WordPress a los que les gusta escribir código y crear complementos exclusivamente para sus propios sitios web o venderlos en diferentes mercados y obtener un rendimiento atractivo.
Hay diferentes formas de escribir código, pero solo algunas de las formas de escribir código de manera efectiva.
Si puede escribir código en dos líneas en lugar de diez, ahorra mucho procesamiento y memoria.
Si no le importa a un sitio pequeño y ligero sino a un sitio pesado, puede significar mucho.
Si no escribe un código claro y utiliza los recursos disponibles de manera eficiente, creará muchos conflictos para otros programas.
Por ejemplo, hay muchas formas de cargar código JavaScript externo prefabricado en WordPress para su complemento.
Pero si no sigue el estándar apropiado, todos los enchufes activados pueden atascarse fuertemente.
Este artículo es principalmente para nuevos desarrolladores de WordPress que buscan crear temas y complementos de WordPress.
Si no codifica correctamente, su código será poco profesional y cualquier producto que cree, sin importar cuán buena sea la idea, nunca será aprobado.
Así que mejor saber cómo agregar correctamente JavaScript y estilos en WordPress.
Errores al 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 de su sitio web.
Todo lo que necesita hacer es agregar las siguientes líneas de código a su archivo de script y todo aparecerá en el encabezado.
add_action('wp_head', 'wpb_bad_script');
function wpb_bad_script() {
echo 'jQuery goes here';
}
Es más un atajo para agregar cosas, pero no es la mejor manera. Tienes que apegarte al estándar correcto eliminando abreviaturas, y ese es el punto central de esta ilustración.
Por ejemplo, carga JQuery manualmente en un complemento y otro desarrollador también carga el mismo JQuery manualmente o mediante un estándar adecuado. Si alguien ha activado ambos complementos, JQuery se cargará en la memoria dos veces, lo cual es un desperdicio.
Además, si el JQuery cargado difiere en la versión, los complementos tendrán muchos errores en conflicto. Debes saber cómo agregar correctamente JavaScript y estilos en WordPress antes de escribir cualquier código.
¿Cómo evitar tales errores: el concepto de la función de cola?
Como probablemente sepa, la comunidad de desarrolladores de WordPress es grande y sólida. Hay literalmente miles de desarrolladores que desarrollan nuevos temas y complementos todos los días.
Pero lo que hacen para asegurarse de que nunca haya un conflicto con sus métodos de codificación es una función de script en cola.
Esta es la función responsable de: agregar JavaScript y estilos correctamente en WordPress para que nunca haya conflictos ni bloqueos innecesarios de memoria.
Proporciona una forma sistemática de cargar JavaScript y estilos. La función qp_enquque_function le dice a Wordless cuándo cargar estos JavaScript y estilos, dónde cargarlos y especialmente bajo qué condiciones.
Con su ayuda, no tiene que cargar manualmente JQuery y ese tipo de cosas, por lo que nunca obtendrá un estado de bloqueo de memoria debido a la carga de los mismos archivos una y otra vez.
La razón de esto es que la función Enqueue le permite usar bibliotecas integradas que vienen con WordPress. También reducirá la carga de la carga lenta de la página debido a la falta de carga manual de scripts de JavaScript.
Pasos para agregar correctamente scripts y estilos de JavaScript en WordPress-
1. Pon tus scripts en una cola en WordPress
Las siguientes líneas de código cargan el paquete de JavaScript incorporado que se envía con WordPress. Debe poner estas líneas en el archivo de complementos cuando cree sus complementos, o debe ponerlas en functions.php si está creando un tema.
function wpb_adding_scripts() {
wp_register_script('my_amazing_script', plugins_url('amazing_script.js', __FILE__), array('jquery'),'1.1', true);
wp_enqueue_script('my_amazing_script');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );
Explicación del Código
El script se registra con la función wp_register_script(), que tiene cinco parámetros diferentes.
1. $ handle: este es el nombre único del script. Aquí está «my_amazing_script».
2. $ src: especifica la ubicación de su secuencia de comandos. La función plugins_url obtiene la URL correcta de la carpeta de complementos. Después de la descarga, comenzará a buscar el archivo amazing_script.js en él.
3. $ deps: define la 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án a cargar y se volverán a cargar. Esto garantiza que no haya conflictos, bloqueos de memoria ni pérdida de tiempo.
4. $ ver: especifica 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 establecerlo en falso.
Una vez que todo está definido, simplemente invoca el script con wp_enqueue_script().
2. Estilos de 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 archivo functions.php para crear su tema.
function wpb_adding_styles() {
wp_register_script('my_stylesheet', plugins_url('my-stylesheet.css', __FILE__));
wp_enqueue_script('my_stylesheet');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_styles' );
Los códigos anteriores son relevantes al crear un complemento. Cuando crea un tema, necesita cambiar plugins_url () a get_template_directory_uri (). El resto de las cosas permanecerán exactamente igual.
function wpb_adding_scripts() {
wp_register_script('my_amazing_script', get_template_directory_uri() . '/js/amazing_script.js', array('jquery'),'1.1', true);
wp_enqueue_script('my_amazing_script');
}
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 hacer agregar correctamente scripts y estilos de JavaScript en WordPress.
Si su complemento o tema encuentra fallas, debe modificar su código con las líneas de código mencionadas anteriormente y tal vez las fallas se resuelvan.
Siga siempre los estándares de codificación utilizados en todo el mundo para estar en sintonía con otros desarrolladores exitosos.
