Si es un desarrollador de WordPress, ha o\u00eddo hablar de palabras como wp_enqueue_script, wp_enqueue_style y wp_enqueue_scripts. Estos son los m\u00e9todos que deber\u00edamos utilizar para incluir JavaScript y CSS en WordPress.<\/p>\n
Cuando se trata de WordPress, no se deben usar etiquetas de script y enlace para agregar archivos JavaScript y CSS.<\/p>\n
Para un sitio web, es com\u00fan utilizar diferentes tipos de efectos, animaciones para mejorar la experiencia del usuario. Hay muchos complementos listos para usar disponibles en Internet que nos permiten agregar controles deslizantes, formularios de contacto, carrusel, etc.en su sitio web. Cuando usamos estos recursos externos, necesitamos usar archivos JS y CSS proporcionados por ellos. Al usar los m\u00e9todos proporcionados por WordPress, podemos controlar las p\u00e1ginas en las que dichos complementos solo pueden usar. Por ejemplo, si mostramos el control deslizante en la p\u00e1gina de inicio, no es necesario incluir los archivos JS y CSS del control deslizante en otra p\u00e1gina. Siempre es una buena pr\u00e1ctica incluir JS y CSS solo cuando sea necesario. Esta es una buena pr\u00e1ctica que se utiliza para mejorar el rendimiento del sitio y hacer que nuestro sitio se cargue m\u00e1s r\u00e1pido.<\/p>\n
Supongamos que tenemos archivos custom.js y custom.css que deben agregarse a nuestro sitio. Para esto, necesitamos colocar el c\u00f3digo debajo.<\/p>\n
add_action('wp_enqueue_scripts', 'include_js_css');\nfunction include_js_css() {\n\u00a0\u00a0\u00a0\u00a0wp_register_script('my-custom-script', get_stylesheet_directory_uri(). '\/js\/custom.js', array('jquery'), false, true);\n\u00a0\u00a0\u00a0\u00a0wp_enqueue_script('my-custom-script');\n\u00a0\n\u00a0\u00a0\u00a0\u00a0wp_register_style( \"my-custom-style\", get_stylesheet_directory_uri(). \"\/css\/custom.css\", array(), false, \"all\" );\n\u00a0\u00a0\u00a0\u00a0wp_enqueue_style( \"my-custom-style\" );\n}<\/code><\/pre>\nNota<\/strong>: El tercer par\u00e1metro de la funci\u00f3n wp_register_script. Pasamos array (‘jquery’) lo que significa que nuestro custom.js depende del archivo jquery.js. Puede crear una matriz emapy aqu\u00ed si su secuencia de comandos no tiene dependencias.<\/p>\nEl \u00faltimo par\u00e1metro se establece en verdadero, lo que significa incluir el archivo custom.js en un pie de p\u00e1gina (antes del final de la etiqueta del cuerpo).<\/p>\n
Explicaci\u00f3n de los par\u00e1metros de la funci\u00f3n wp_register_script ()<\/h3>\n
$ handle<\/strong> (obligatorio): nombre del script. Deber\u00eda ser \u00fanico.
\n$ src<\/strong> (obligatorio): URL completa del script o ruta del script relativa al directorio ra\u00edz de WordPress.
\n$ deps<\/strong> (Opcional): una matriz de secuencias de comandos registradas maneja esta secuencia de comandos.
\nValor predeterminado: array ()
\n$ ver<\/strong> (Opcional): Cadena que especifica el n\u00famero de versi\u00f3n del script, si tiene uno, que se agrega a la URL como una cadena de consulta para fines de prevenci\u00f3n de cach\u00e9. Si la versi\u00f3n se establece en falso, se agrega autom\u00e1ticamente un n\u00famero de versi\u00f3n igual a la versi\u00f3n actual de WordPress instalada. Si se establece en nulo, no se agrega ninguna versi\u00f3n. El valor predeterminado es falso
\n$ in_footer<\/strong> (Opcional): si se debe poner en cola el script antes del cierre de la etiqueta del cuerpo en lugar de en el encabezado. Por defecto ‘falso’.<\/p>\nExplicaci\u00f3n de los par\u00e1metros de la funci\u00f3n wp_register_style ()<\/h3>\n
$ handle<\/strong> (obligatorio): nombre de la hoja de estilo. Deber\u00eda ser \u00fanico.
\n$ src<\/strong> (obligatorio): URL completa de la hoja de estilo o ruta de la hoja de estilo relativa al directorio ra\u00edz de WordPress.
\n$ deps<\/strong> (Opcional): una matriz de hojas de estilo registradas maneja esta hoja de estilo depende.
\nValor predeterminado: array ()
\n$ ver<\/strong> (Opcional): Cadena que especifica el n\u00famero de versi\u00f3n de la hoja de estilo, si tiene una, que se agrega a la URL como una cadena de consulta para fines de prevenci\u00f3n de cach\u00e9. Si la versi\u00f3n se establece en falso, se agrega autom\u00e1ticamente un n\u00famero de versi\u00f3n igual a la versi\u00f3n actual de WordPress instalada. Si se establece en nulo, no se agrega ninguna versi\u00f3n. Valor predeterminado: false
\n$ media<\/strong>(Opcional): el medio para el que se ha definido esta hoja de estilo. Acepta tipos de medios como ‘todos’, ‘imprimir’ y ‘pantalla’, o consultas de medios como ‘(orientaci\u00f3n: retrato)’ y ‘(ancho m\u00e1ximo: 640 px)’. Valor predeterminado: ‘todos’.<\/p>\nSe trata de c\u00f3mo incluir JavaScript y CSS en WordPress. Si tiene alguna pregunta o sugerencia, deje sus comentarios a continuaci\u00f3n.<\/p>\n