homefinance blog
Este artículo aborda cómo incluir archivos JavaScript y CSS en WordPress. Es un capítulo de nuestro notable curso de WordPress, en funcionamiento. Si desea convertirse en un desarrollador experimentado de WordPress, en funcionamiento es la mejor y más clara forma de llegar allí.
¡La mejor manera de aprender el desarrollo de WordPress y ejecutar hoy!
En funcionamiento está nuestro curso completo “Aprende el desarrollo de WordPress”. Ahora, en la tercera edición actualizada y extendida, ha ayudado a cientos de compradores felices a aprender el desarrollo de WordPress de una manera rápida, inteligente y completa.
Esto es lo que uno de ellos tenía que decir:
“Creo que cualquiera está interesado en aprender el desarrollo de WordPress necesita este curso. Ver videos era como si estuvieran muchas luces encendidas “. -Jason, desarrollador de WordPress
Despierta y corre ahora
Ahora, sigue leyendo.
Recomendaciones clave:
La forma correcta de incluir archivos JavaScript y hojas de estilo CSS en WordPress es poniéndolas en enqueue. Esto permite flexibilidad y personalización que agregar estos archivos directamente al encabezado de su sitio no.
La función de poner en la cola una hoja de estilo se llama Enquaue wp_enqueue_style (). La función de poner un archivo JavaScript en la cola se llama Enqueue wp_enqueue_script (). Ambas funciones se conectan más comúnmente a un gancho de acción de WordPress llamado wp_enqueue_scripts.
La introducción correcta en el Encyue de scripts y estilos, y la conexión con los recursos de tema y complementos en general, requiere el conocimiento adecuado de las funciones de conexión de URL de WordPress, que cubre este capítulo.
En este capítulo, cubriremos uno de los conjuntos más utilizados de características de WordPress: las funciones que consumen los archivos en la cola que se incluirán en un sitio de WordPress. Hay dos tipos de consumo que se pueden colocar en la cola, que vale la pena discutir:
Archivos JavaScript: agregan funcionalidad personalizada al sitio de WordPress una vez que se entrega al navegador del usuario. JavaScript se usa muy comúnmente para crear efectos visuales dinámicos, como diapositivas de imágenes interactivas, estilo Pinterest flexible o “mampostería”, etc. Tiene muchos, muchos otros usos.
Hojas de estilo CSS: las hojas de estilo CSS le dicen a un sitio web cómo mirar. Cada tema de WordPress tiene un estilo. CSS y muchos también tienen hojas de estilo adicionales. Muchos complementos también tienen una o más hojas de estilo CSS que suilan los elementos específicos que los complementos agregan en el sitio.
Los archivos CSS son absolutamente cruciales para cualquier sitio web decente, y los archivos JS son a menudo los mismos. Este capítulo se refiere a la adición de JS o CSS personalizado a su sitio de WordPress.
No agregue CSS y JavaScript directamente a su encabezado primero, no agregue CSS y JavaScript directamente al archivo Header.php u otros archivos de plantilla. Estamos a punto de cubrir la ruta correcta hacia un script DD en la cabeza de WordPress (y las hojas de estilo) y no es para ponerlos directamente en esos archivos.
¿Por qué no? Porque agregar JavaScript y estilos a las páginas de WordPress en “Modo WordPress” le permite hacer muchas cosas útiles en el camino. Por ejemplo, suponga que desea agregar una nueva hoja de estilo, solo en páginas. Es bastante fácil de hacer en WordPress, con las funciones de wp_enqueue_ () que cubriremos en este capítulo y un poco de magia condicional.
Sin embargo, si tiene el hábito de tirar sus hojas de estilo directamente a su forro, WordPress no puede “hablar” en absoluto con esas hojas de estilo. Estoy completamente fuera del proceso de “fábrica” de WordPress, simplemente se sientan allí. Por lo tanto, no hay una buena manera de comunicar la lógica “Cargue esta hoja de estilo solo para páginas”, y su objetivo de ser una hoja de estilo condicional se vuelve mucho más difícil. Hay muchas otras formas de discutir por qué pegar archivos JS y CSS directamente en el encabezado.php es una mala idea, pero la conclusión real es simplemente: no.
La forma correcta de conectarse a los recursos del tema y los complementos no asume nada sobre las rutas de archivo en WordPress: no codifique las URL.
Supongamos que tenemos una hoja de estilo especial, New.CSS, guardado en el director raíz de nuestro tema. ¿Cómo nos conectamos a él? En otras palabras, ¿cómo le decimos a WordPress exactamente dónde se encuentra esa hoja de estilo en la estructura del director? Esta pregunta surge más inmediatamente en el uso de wp_enqueue_ (), pero saber la respuesta es muy útil en otras situaciones. Lo primero que debe saber es: no asuma nada sobre las rutas de archivo en WordPress. En otras palabras, no codifique las URL. Nunca escriba manualmente como http://yourdomain.com/wp-content/themes/my-theme/new.css- queme o no usa wp_enqueue_ (). El motivo es que todo podría cambiar. Su sitio podría algún día dejar de estar en YourDomain.com- o alguien más podría usar algún día su tema en su sitio web con otro nombre de dominio. Del mismo modo, el nombre del director de contenido de WP, los temas y el thema están sujetos a cambios, y si sucede algo, sus enlaces codificados se romperán.
Use las características de WordPress WordPress tienen funciones mágicas para cada URL, excepto el nombre del archivo.
En la URL anterior, solo el nombre del archivo en sí, new.css, es relativamente estable. Afortunadamente, WordPress tiene funciones mágicas para usar para la pieza de las direcciones de URL. Masteralos y nunca querrás volver a escribir URL manualmente.
Cómo conectarse a los recursos temáticos para conectarse a un recurso que forma parte de un tema, lo esencial es llegar a la carpeta raíz del tema o al director de la raíz:
Para hacer esto, usará una función de WordPress llamada get_stylesheet_directory_uri (), que devuelve la URL absoluta correcta para el activo WordPress y el tema en ejecución. = ” <img src =" <? Php echo get_stylesheet_direction_uri ();?
get_stylesheet_directory_uri () indicará el tema activo sin importar qué. Esto significa que indicará el tema de ejecutar (“padre”) si no hay tema infantil y sobre el tema de un niño que se ejecuta si existe. Esto suele ser lo que desea, porque si trabaja en el tema de un niño, esto suele ser lo que desea cambiar. Sin embargo, si desea consultar los archivos de tema en el padre específicamente, puede usar una función llamada get_template_directory_uri (). Se comporta casi exactamente como get_stylesheet_directory_uri (), pero siempre está vinculado a la raíz del tema principal, ya sea que haya un niño en funcionamiento o no.
Una forma nueva e interesante de conectarse a los recursos temáticos: get_theme_file_ () comenzando con WordPress 4.7, get_theme_file_uri () ha simplificado sustancialmente la posibilidad de temas secundarios para anular los elementos del padre. Comenzando con WordPress 4.7, ha habido una nueva función que hace que sea sustancialmente simple dejar que los temas secundarios sobrescriban la versión del tema principal: get_theme_file_uri (). Aquí hay un ejemplo de uso: <img src = "”> y aquí está: primero busque el recurso referido en el niño. En este ejemplo, buscaría la imagen del niño photo.jpg en la carpeta de imagen. Si encuentra lo que está buscando, este es el URI que regresa.
Si no encuentra lo que está buscando, consulte el tema de los padres para ver el mismo recurso, buscando el padre. JPG Imágenes del padre Imágenes del padre.
¡Get_theme_file_uri () es ideal para los temas de los padres! Significa: “Puse esto aquí, pero será fácil para mi hijo pasar por la cabeza”, que es el propósito de los temas para los niños.
El uso generoso de esta función puede salvar a las personas que extienden su tema con un tema de trabajo infantil, como los recursos CSS y JS que tiene que cambiar y no puede sobrescribirlos de forma predeterminada. Usaremos esta función muy útil varias veces en el próximo capítulo. Recapitulando las funciones que se conectan con los recursos temáticos solo para ser claros, aquí hay una breve recapitulación de las tres funciones que hemos nombrado para conectarse con los recursos del tema y cómo se comportan:
Get_stylesheet_directory_uri (): siempre devuelva la URL raíz al niño si hay uno en ejecución. (Devuelve la URL raíz del padre si no hay un tema infantil). Útil para indicar los recursos del niño. Útil para construir piezas de un tema principal que no desea que el tema infantil lo supere fácilmente.
Get_theme_file_uri (): enlaces al archivo con el tema principal y, si hay un archivo con nombre idéntico en el niño, se conecta automáticamente a él. Introducido en WordPress 4.7. Muy útil para crear un ligero patrimonio después de los temas de los niños.
Todos estos son útiles cuando desea agregar CSS o agregar JavaScript a funciones.php wordpress.php u otras formas de crear enlaces. Pero salto una pequeña pistola.
Cómo conectarse a los recursos de complemento Si escribe un complemento y desea conectarse a algo dentro de él, usará una función de WordPress llamada plugin_dir_url (). Esta función de retorno raíz del director raíz del complemento desde el que se llama. La sintaxis es un poco inusual, pero te acostumbrarás:
“> <img src =" <?
Los dos enlaces resultantes del código anterior se verán así:
Puede usar esta sintaxis como se escribe anteriormente cada vez que desee conectarse a otro recurso en el mismo complemento que escribe.
Cómo cargar hojas de estilo y archivos de script en WordPress: Presentación de wp_enquee_ () Ahora que sabemos cómo conectarnos con los recursos de temas y complementos, nos encargaremos de la adición de scripts y estilos correctamente. La adición de estos scripts y estilos se llama cola. Funciona de la siguiente manera:
Cada proceso de hacer cola los scripts o estilos utiliza el gancho de acción wp_enqueue_scripts.
La función de poner un archivo JavaScript en la cola se llama wp_enqueue_script ().
La función de poner una hoja de estilo CSS en la cola se llama wp_enqueue_style ().
Esto se volverá más claro con los ejemplos a continuación.
El primer ejemplo: la cola de style.css de un tema de functions.php style.css El script PHP a continuación pone en la cola.css de un tema. ¡Sin este código, un tema no tendrá estilo!
/ * Entorno: estamos en funciones.php */ function wpshout_theme_andt_and_style_include () {wp_enqueue_style (‘wpshout-style’, get_stylesheet ()); } add_action (‘wp_enqueue_scripts’, ‘wpshout_theme_cript_and_style_inclder’);
Esto es lo que pasa:
Función wpshout_theme_script_and_style_includer () {} Podemos elegir los nombres de nuestras funciones, y es wpshout_theme_cript_and_style_inclder. No tiene argumentos, entonces () están vacíos.wp_enqueue_style (); Dividiremos esta línea en varias piezas. En primer lugar, saber que llamamos a la función wp_enqueue_style () con dos argumentos.
‘WPShout-Style’ es el primero de los dos argumentos de wp_enquee_style (). Es un texto de babosa, un apodo, que elegimos para esta hoja de estilo, que el resto de WordPress puede usar para referirse a la hoja de estilo.
Get_stylesheet_uri () Este es el segundo de los dos argumentos de wp_enqueue_style (). Es muy importante: así es como le dijimos a WordPress dónde encontrar la hoja de estilo que queremos poner en la cola. Para esta situación, utilizamos una función de WordPress muy especializada, get_stylesheet (), cuyo único propósito es devolver la URL para el tema actual de style.css.
add_action (‘wp_enqueue_scripts’, ‘wpshout_theme_cript_and_style_inclder’); Esta sección es nuestros ganchos, acciones y filtros de WordPress estándar: qué hacen y cómo funcionan Siempre que wp_enqueue_scripts () (como el encabezado de la página se construye solo), también ejecuta wpshout_thiti_and_style_inccler () y así nuestro archivo style.css se pone en cuanto e insertado en nuestro HTML.
El resultado final
¿Ver? En la página de inicio de style.css, aparece el estilo de nuestro tema, debido al código anterior en functions.php.
Este ejemplo es necesario solo para los temas de los padres, este guión no es necesario para los temas infantiles, cuyo estilo.css se pone en cuanto. Cubriremos los temas secundarios más adelante (en la comprensión y el uso de los temas de los niños de los niños), pero sabemos que el script anterior es solo para temas de los padres. El segundo ejemplo: poner en la cola de otros scripts y estilos temáticos de las funciones.php /* ambiente : Estamos en funciones.php */ function wpshout_theme_and_scriper () {wp_enqueue_style (‘wpshout-outle’, get_theme_file_ (‘css/ wpshout-ostom.css’),); wp_enqueue_script (‘wpShout-NEEDED-JS’, get_theme_file_ (‘js/wpShout-needed-js.js’), array (‘jQuery’)); } add_action (‘wp_enqueue_scripts’, ‘wpshout_theme_cript_and_style_inclder’);
Si comprende el primer ejemplo antes, solo hay algunas cosas que aprender en él:
Esta vez, utilicé get_theme_file_ () para llegar a la raíz del tema. Se conectará al archivo en nuestro tema principal o, si hay un archivo con el mismo nombre en el tema infantil, se conectará automáticamente a él, para un reemplazo muy fácil por el tema infantil.
Esta vez, agregamos un archivo js, wpshout-needed-js.js. Observe cómo podemos hacer múltiples scripts y estilos, todo en una función conectada, solo necesitamos recordar cuándo llamar wp_enqueue_style () y cuándo llamar wp_enqueue_script ().
Esta vez, tanto el script como nuestro estilo están en los subdirectores dentro de nuestro tema: nuestra hoja de estilo CSS está en una carpeta / CSS /, y nuestro archivo JS está en una carpeta / JS /. Observe lo fácil que es indicar estos subdirectores, simplemente agregándolos a la forma en que especificamos como un argumento único para get_theme_file_ (). El tercer ejemplo: Encuesta de escrituras y estilos de un archivo de complemento es cómo cargar una sola hoja de CSS Estilo y dos archivos JavaScript, hechos de un archivo PHP en un complemento:
/ * Entorno: estamos en un archivo php en un complemento */ function wpshout_plogin_andt_and_style_include (/ * style and scripts en el complemento root directy */ wp_enqueue_style (‘our-plugin-exame’, plugin_dir_url (__file__). -Esexample-style.css ‘); wp_enqueue_script (‘nuestro-plugin-exame-js’, plugin_dir_url (__file__). ‘nuestro-plugin-exame-js.js’, array (‘jQuery’)); / * Un script en un subdirectorio */wp_enqueue_script (‘nuestro-plugin-more-js’, plugin_dir_url (__file__). ‘Js/nuestro-plugin-more-js.js’, array (‘jquey’)); } add_action (‘wp_enqueue_scripts’, ‘wpshout_plogin_cindt_and_style_inclder’);
Lo único nuevo que debe aprender aquí es el funcionamiento de la función Plugin_dir_url (). Si no obtiene el __file __filemmam Constanta del PHP, le aconsejamos que no piense demasiado en ello y solo sepamos que lo anterior funcionará.
Puse en una enquosto con adicción, una cosa que aún no hemos explicado es el tercer argumento en la mayoría de nuestro JavaScript: Array (‘jquey’).¿Lo que esto significa?Esto significa que declaramos a JQuey como adicción: algo que nuestro propio archivo JavaScript debe usar para funcionar correctamente.La adicción es importante en dos situaciones: si desea que se cargue una hoja de estilo después de otra hoja de estilo, porque los estilos posteriores reemplazan los anteriores.
Si el archivo JavaScript se basa en otro archivo JS para ejecutarse correctamente en JQuey.
Este segundo caso es el más común y es la razón por la que mencionamos las adicciones. Si los archivos de JavaScript usan la sintaxis jquey, es mejor declarar jquey como adicción, como sigue: wp_enqueue_script (‘ejemplo-js’, get_theme_file_uri (‘ejemplo-js.js’), array (‘jQuery’)); Aquí, completé el tercer argumento de wp_enquee_criut (): sus adicciones. Este argumento debe ser una matriz y es una matriz “Slugs” (apodo) de los archivos JavaScript en los que depende nuestro nuevo archivo. En nuestro caso, la matriz solo tiene una cosa: ‘jQuery’, el trabajo para el archivo jquey.js que WordPress cobra automáticamente. Nuevamente, puede hacer lo mismo para las hojas de estilo wp_enqueue_style (), con una serie de babosas CSS como adicciones. La razón principal para hacer esto es asegurarse de que la hoja de estilo se cargue más tarde (y, por lo tanto, reemplace) los otros archivos CSS. La mayoría de las veces, sin embargo, no tendrá que molestar con esto, porque las hojas de estilo con el tema del niño generalmente sobrescriben lo que deben hacer por defecto. Lo que he aprendido las funciones de Enqueue se encuentran entre las más utilizables y útiles de WordPress. Con este conocimiento bloqueado, puede agregar con confianza JavaScript a las páginas de WordPress, puede cambiar y completar CSS y más. Simplemente sabiendo cómo usar estas funciones, en lugar de pegar scripts y estilos en el encabezado de WordPress, mejorará significativamente la calidad de su trabajo en WordPress.
Resumen Limerick Si realmente sabes lo que estás haciendo, entonces agregarás scripts y estilos poniendo encuidad. Serán atraídos, a la letra, al encabezado (sótano o) desde cada página que sus usuarios visualizan. ¡La hora de la prueba!
No debe agregar scripts y estilos directamente al encabezado de su sitio porque:
Elimina esos scripts y estilos de la flexibilidad y personalización de la “fábrica” de WordPress.
No funcionará en navegadores más antiguos
Esto hace que la página se cargue más lentamente que wp_enquee_ ()
Para acceder al archivo del complemento-exame-style.css desde el director raíz de un complemento, use:
get_stylesheet_directory_uri (). ‘/Plogin-EXample-Style.css’
plugin_dir_url (__file__). ‘plugin-exame-style.css’
plugin_dir_url (__file__). ‘/Plogin-EXample-Style.css’
Para acceder a WPShout-NEEDED-JS.JS en la carpeta / js / desde el director raíz del tema activo, use:
get_stylesheet_directory_uri (). ‘/js/wpshout-needed-js.js’
get_template_directory_uri (). ‘/js/wpshout-needed-js.js’
get_template_directory_uri (). ‘JS/WPShout-NEEDED-JS.JS’
Respuestas y explicaciones
A. La unión manual en scripts y estilos evita que WordPress, por ejemplo, elimine estos scripts y estilos, los cargue o para programar los scripts en el sótano para reducir los tiempos de carga.
B. plugin_dir_url es la función correcta y no requiere a /.
A. get_stylesheet_directory_uri () siempre indica el director de directorio, incluso si es un tema infantil; get_template_directory_uri () indica al director del tema principal si el tema actual es un tema infantil. Tenga en cuenta que se necesita un js / antes.
