{"id":1473,"date":"2019-06-19T06:19:38","date_gmt":"2019-06-19T11:19:38","guid":{"rendered":"https:\/\/wpbody.com\/?p=1473"},"modified":"2024-09-12T02:58:02","modified_gmt":"2024-09-12T07:58:02","slug":"insertar-javascript-css-wordpress-correctamente","status":"publish","type":"post","link":"https:\/\/wpbody.com\/insertar-javascript-css-wordpress-correctamente\/","title":{"rendered":"C\u00f3mo Insertar Javascript y CSS en WordPress Correctamente"},"content":{"rendered":"

Cualquier tema y plugin que usas en tu sitio web utiliza c\u00f3digo CSS y Javascript para dar una presentaci\u00f3n visual a su contenido o secciones, o a\u00f1adir nuevas funcionalidades en tu sitio web, por lo tanto, es necesario para casi todos los componentes que a\u00f1ades, incluir su propio estilo y caracter\u00edsticas de la forma estandarizada que ofrece WordPress. Hoy te mostraremos c\u00f3mo insertar Javascript y CSS en tu sitio de forma correcta.<\/p>\n

Insertar Javascript y CSS<\/h2>\n

Cuando instalas un tema o un plugin en tu sitio web, con ello agregas archivos de estilo CSS adicional y Javascript para que funcionen adecuadamente. Sin embargo, cada plugin inserta sus propios archivos o c\u00f3digo.<\/p>\n

Hay miles de desarrolladores en la comunidad alrededor del mundo, que crean temas y plugins para WordPress, y cada uno de ellos viene con sus archivos y c\u00f3digo de Javascript y CSS para un funcionamiento correcto.<\/p>\n

Por tanto, para que todos estos componentes puedan funcionar de forma coherente, es necesario usar un m\u00e9todo est\u00e1ndar para insertar Javascript y CSS en el lugar correcto, y con la misma versi\u00f3n de librer\u00edas, y evitar posibles incompatibilidades.<\/p>\n

\u00bfC\u00f3mo Insertar Javascript y CSS en WordPress?<\/h3>\n

Antes de entrar en la parte pr\u00e1ctica para mostrar c\u00f3mo insertar Javascript y CSS en el ecosistema del sitio web, vamos a ver qu\u00e9 m\u00e9todo nos ofrece WordPress para hacerlo.<\/p>\n

Para que WordPress se asegure de que todo funcionan en harmon\u00eda, y que ning\u00fan archivo est\u00e1 alterando el funcionamiento del otro, existen unas herramientas en forma de funciones que proporcionan una forma sistem\u00e1tica y estandarizada para cargar archivos Javascript y CSS que son wp_enqueue_script<\/code> que le informa al c\u00f3digo de WordPress cuando cargar un archivo, y el lugar preciso, y en qu\u00e9 condiciones.<\/p>\n

Para cargar o insertar Javascript y CSS en un lugar determinado, debes crear una funci\u00f3n propia que enlista todos los archivos de CSS y Javascript, WordPress entonces crea una ruta para encontrar el archivo incluido y si tiene dependencias como librer\u00eda jQuery, y utiliza un gancho hook que inserta el estilo CSS y Javascript en su apropiada ubicaci\u00f3n.<\/p>\n

\r\nfunction wpbody_insertar_js_css() {\r\n\twp_enqueue_style( 'slider', get_template_directory_uri() . '\/css\/slider.css', array(), '1.1', 'all');\r\n\twp_enqueue_script( 'script', get_template_directory_uri() . '\/js\/script.js', array ( 'jquery' ), 1.1, true);\r\n}\r\nadd_action( 'wp_enqueue_scripts', 'wpbody_insertar_js_css' );\r\n<\/pre>\n
En este c\u00f3digo insertamos dos archivos de Javascript, para lanzarlos con el hook wp_enqueue_script<\/code> cuando se necesitan. F\u00edjate que utilizamos dos funciones para cada tipo de archivo.<\/p>\n
La primera funci\u00f3n wp_enqueue_style()<\/code> est\u00e1 dedicada para archivos de tipo CSS mientras que la segunda, wp_enqueue_script()<\/code> se usa generalmente para insertar Javascript en el entorno del sitio.<\/p>\n
\r\nwp_enqueue_script( $handle, $src, $deps, $ver, $in_footer);\r\n<\/pre>\n
En esta l\u00ednea aparece la funci\u00f3n y las variables que se deben incluir en ella. Detallamos abajo cada uno de los posibles valores que puede contener la funci\u00f3n, para que tengas una idea clara del c\u00f3digo de arriba.<\/p>\n