La guía para desarrolladores sobre JavaScript y CSS libres de conflictos en WordPress

 

 

 

  • Clase magistral de diseño para una interfaz de usuario compleja, con Vitaly Friedman
  • ¡Registro!

  • Índice
    1. ¿Qué salió mal?
    2. Evitar el problema
  • Registrar JavaScript
    1. Ejemplos
    2. ¡No has logrado nada!
  • Salida del HTML de JavaScript
  • Registro de hojas de estilo
    1. Comentarios condicionales
  • Salida de la hoja de estilo HTML
  • ¿Cuál es el punto de?
    1. Marcos de WordPress
  • Una ligera limitación
  • Un único punto de registro
  • Usando el CDN AJAX de Google
  • Poniendolo todo junto
    1. Otras lecturas
  • En este artículo, Peter Wilson explica cómo eliminar posibles conflictos de JavaScript de su tema o complemento de WordPress.

     

    Imagina que estás jugando al último juego de hashtags en Twitter cuando ves este amigable tweet:

    “Es posible que desees consultar tu sitio #WP. Incluye dos copias de jQuery. No hay nada roto, pero el tiempo de carga será más lento”.

    Verifica su código fuente y, efectivamente, ve esto:

    script src="/wp-includes/js/jquery/jquery.js?ver=1.6.1" type="text/javascript"/scriptscript src="/wp-content/plugins/some-plugin/jquery.js"/script

    ¿Qué salió mal?

    La primera copia de jQuery se incluye a la manera de WordPress, mientras que some-pluginincluye jQuery como lo haría en una página HTML estática.

    WordPress incluye varios marcos de JavaScript de forma predeterminada, entre los que se incluyen:

    • Scriptáculo,
    • jQuery (ejecutándose en modo noConflict ),
    • el núcleo de jQuery UI y los widgets seleccionados,
    • Prototipo.

    Se puede encontrar una lista completa en el Codex . En la misma página hay instrucciones para usar jQuery en modo noConflict .

    Evitar el problema

    WordPress incluye estas bibliotecas para que los autores de complementos y temas puedan evitar este problema utilizando las funciones PHP wp_register_scripty wp_enqueue_scriptpara incluir JavaScript en el HTML.

    Registrar un archivo por sí solo no afecta la salida de su HTML; solo agrega el archivo a la lista de scripts conocidos de WordPress. Como verá en la siguiente sección, registramos archivos desde el principio en un tema o complemento donde podemos realizar un seguimiento de la información de versiones.

    Para enviar el archivo al HTML, debe poner el archivo en cola. Una vez que haya hecho esto, WordPress agregará la etiqueta de secuencia de comandos requerida al encabezado o pie de página de la página generada. Se proporcionan más detalles más adelante en este artículo.

    Registrar un archivo requiere un código más complejo que poner los archivos en cola; por lo tanto, analizar rápidamente el archivo es más difícil cuando revisas tu código. Poner en cola el archivo es mucho más sencillo y puedes analizar fácilmente cómo se ve afectado el HTML.

    Para que estas técnicas funcionen, el archivo header.php del tema debe incluir la línea ?php wp_head(); ?justo antes de la /headetiqueta, y el archivo footer.php debe incluir la línea ?php wp_footer(); ?justo antes de la /bodyetiqueta.

    Registrar JavaScript

    Antes de registrar su JavaScript, deberá decidir sobre algunos elementos adicionales:

    • el identificador del archivo (es decir, el nombre por el cual WordPress conocerá el archivo);
    • otros scripts de los que depende el archivo (jQuery, por ejemplo);
    • el número de versión (opcional);
    • donde aparecerá el archivo en el HTML (el encabezado o pie de página).

    Este artículo se refiere a la creación de un tema, pero los consejos se aplican igualmente a la creación de un complemento.

    Ejemplos

    Usaremos dos archivos JavaScript para ilustrar el poder de las funciones:

    El primero es base.js , que es un conjunto de herramientas de funciones utilizadas en nuestro sitio web de ejemplo.

    function makeRed(selector){ var $ = jQuery; //enable $ alias within this scope $(function(){ $(selector).css('color','red'); });}

    El archivo base.js depende de jQuery, por lo que jQuery puede considerarse una dependencia.

     

    Esta es la primera versión del archivo, versión 1.0.0, y no hay ningún motivo para ejecutar este archivo en el encabezado HTML.

    El segundo archivo, custom.js , se utiliza para agregar las bondades de JavaScript a nuestro sitio web.

    makeRed('*');

    Este archivo custom.js llama a una función en base.js , por lo que base.js es una dependencia.

    Al igual que base.js , custom.js es la versión 1.0.0 y se puede ejecutar en el pie de página HTML.

    El archivo custom.js también depende indirectamente de jQuery. Pero en este caso, base.js podría editarse para que sea autónomo o dependa de otro marco. No es necesario que jQuery aparezca como una dependencia de custom.js .

    Ahora es simplemente cuestión de registrar su JavaScript usando la función wp_register_script. Esto toma los siguientes argumentos:

    • $handleUna cuerda
    • $sourceUna cuerda
    • $dependanciesUna matriz (opcional)
    • $versionUna cuerda (opcional)
    • $in_footerVerdadero/falso (opcional, el valor predeterminado es falso)

    Al registrar scripts, es mejor utilizar el initgancho y registrarlos todos a la vez.

    Para registrar los scripts en nuestro ejemplo, agregue lo siguiente al archivo funciones.php del tema:

    function mytheme_register_scripts() { //base.js – dependent on jQuery wp_register_script( 'theme-base', //handle '/wp-content/themes/my-theme/base.js', //source array('jquery'), //dependencies '1.0.0', //version true //run in footer ); //custom.js – dependent on base.js wp_register_script( 'theme-custom', '/wp-content/themes/my-theme/custom.js', array('theme-base'), '1.0.0', true ); } add_action('init', 'mytheme_register_scripts');

    No es necesario registrar jQuery, porque WordPress ya lo tiene. Volver a registrarlo podría generar problemas.

    ¡No has logrado nada!

    Todo este registro de archivos JavaScript a la manera de WordPress, hasta ahora, no ha logrado nada. No se enviará nada a sus archivos HTML.

    Para que WordPress genere el HTML relevante, debemos poner en cola nuestros archivos. A diferencia de los comandos relativamente largos necesarios para registrar las funciones, este es un proceso muy simple.

    Salida del HTML de JavaScript

    Agregar las scriptetiquetas a su HTML se realiza con la wp_enqueue_scriptfunción. Una vez registrado un script, necesita un argumento, el identificador del archivo.

    La adición de JavaScript al HTML se realiza en el wp_print_scriptsgancho con el siguiente código:

    function mytheme_enqueue_scripts(){ if (!is_admin()): wp_enqueue_script('theme-custom'); //custom.js endif; //!is_admin } add_action('wp_print_scripts', 'mytheme_enqueue_scripts');

    De nuestros dos archivos JavaScript registrados ( base.js y custom.js ), solo el segundo agrega funcionalidad JavaScript al sitio web. Sin el segundo archivo, no es necesario agregar el primero.

    Después de haber puesto en cola custom.js para la salida al HTML, WordPress descubrirá que depende de que base.js esté presente y que base.js , a su vez, requiere jQuery. El HTML resultante es:

     

    script src="/wp-includes/js/jquery/jquery.js?ver=1.6.1" type="text/javascript"/scriptscript src="/wp-content/themes/my-theme/base.js?ver=1.0.0" type="text/javascript"/scriptscript src="/wp-content/themes/my-theme/custom.js?ver=1.0.0" type="text/javascript"/script

    Registro de hojas de estilo

    Ambas funciones para agregar JavaScript a nuestro HTML tienen funciones hermanas de PHP para agregar hojas de estilo al HTML: wp_register_styley wp_enqueue_style.

    Al igual que con el ejemplo de JavaScript, usaremos un par de archivos CSS a lo largo de este artículo, empleando la metodología móvil primero para el diseño web responsivo. zsh themes - all about z shell and oh-my-zsh themes

    El archivo mobile.css es el CSS para crear la versión móvil del sitio web. No tiene dependencias.

    El archivo desktop.css es el CSS que se carga solo para dispositivos de escritorio. La versión de escritorio se basa en la versión móvil, por lo que mobile.css es una dependencia.

    Una vez que haya decidido los números de versión, las dependencias y los tipos de medios, es hora de registrar sus hojas de estilo usando la wp_register_stylefunción. Esta función toma los siguientes argumentos:

    • $handleUna cuerda
    • $sourceUna cuerda
    • $dependanciesUna matriz (opcional, el valor predeterminado es ninguno)
    • $versionUna cadena (opcional, el valor predeterminado es el número de versión actual de WordPress)
    • $media_typeUna cadena (opcional, el valor predeterminado es todo)

    Nuevamente, lo mejor es registrar sus hojas de estilo usando la initacción.

    Al funciones.php de tu tema , agregarías esto:

    function mytheme_register_styles(){ //mobile.css for all devices wp_register_style( 'theme-mobile', //handle '/wp-content/themes/my-theme/mobile.css', //source null, //no dependencies '1.0.0' //version ); //desktop.css for big-screen browsers wp_register_style( 'theme-desktop', '/wp-content/themes/my-theme/desktop.css', array('theme-mobile'), '1.0.0', 'only screen and (min-width : 960px)' //media type ); /* *keep reading* */ } add_action('init', 'mytheme_register_styles');

    Hemos utilizado consultas de medios CSS3 para evitar que los navegadores móviles analicen nuestra hoja de estilo de escritorio. Pero las versiones 8 y posteriores de Internet Explorer no comprenden las consultas de medios CSS3 y, por lo tanto, tampoco analizarán el CSS del escritorio.

    IE8 tiene sólo dos años, por lo que debemos apoyar a sus usuarios con comentarios condicionales.

    Comentarios condicionales

    Al registrar CSS utilizando las funciones de registro y puesta en cola, los comentarios condicionales son un poco más complejos. WordPress utiliza el objeto $wp_stylespara almacenar hojas de estilo registradas.

    Para envolver su archivo en comentarios condicionales, agregue información adicional a este objeto.

    Para Internet Explorer 8 y versiones anteriores, excluyendo IE móvil, debemos registrar otra copia de nuestra hoja de estilo de escritorio (usando el tipo de medio all) y envolverla en comentarios condicionales.

     

    En el ejemplo de código anterior, se reemplazaría por lo siguiente:/* keep reading */

    global $wp_styles; wp_register_style( 'theme-desktop-ie', '/wp-content/themes/my-theme/desktop.css', array('theme-mobile'), '1.0.0' ); $wp_styles-add_data( 'theme-desktop-ie', //handle 'conditional', //is a conditional comment '!(IEMobile)(lte IE 8)' //the conditional comment );

    Desafortunadamente, no existe un equivalente para empaquetar archivos JavaScript en comentarios condicionales, probablemente debido a la concatenación de JavaScript en la sección de administración.

    Si necesita envolver un archivo JavaScript en comentarios condicionales, deberá agregarlo a header.php o footer.php en el tema. Alternativamente, puedes usar los ganchos wp_heado wp_footer.

    Salida de la hoja de estilo HTML

    Generar la hoja de estilo HTML es muy similar a generar el HTML de JavaScript. Usamos la función de puesta en cola y la ejecutamos en el wp_print_stylesgancho.

    En nuestro ejemplo, podríamos salirnos con la nuestra diciéndole a WordPress que ponga en cola sólo las hojas de estilo que tengan los identificadores theme-desktopy theme-desktop-ie. WordPress luego generaría la versión mobile/ allmedia.

    Sin embargo, ambas hojas de estilo aplican estilos al sitio web más allá de un reinicio básico: mobile.css crea el sitio web para teléfonos móviles y desktop.css se basa en eso. Si hace algo y lo he registrado, debería ponerlo en cola. Ayuda a realizar un seguimiento de lo que está pasando.

    Aquí está el código para generar el CSS en HTML:

    function mytheme_enqueue_styles(){ if (!is_admin()): wp_enqueue_style('theme-mobile'); //mobile.css wp_enqueue_style('theme-desktop'); //desktop.css wp_enqueue_style('theme-desktop-ie'); //desktop.css lte ie8 endif; //!is_admin } add_action('wp_print_styles', 'mytheme_enqueue_styles');

    ¿Cuál es el punto de?

    Quizás se pregunte cuál es el punto de realizar todo este esfuerzo adicional cuando podríamos simplemente generar nuestro JavaScript y hojas de estilo en el header.php del tema o usando el wp_headgancho.

    En el caso de CSS en un tema independiente, es un punto válido. Es un trabajo extra sin mucha recompensa.

    Pero con JavaScript, ayuda a evitar conflictos entre complementos y temas cuando cada uno usa una versión diferente de un marco de JavaScript. También hace que los tiempos de carga de la página sean lo más rápidos posible al evitar la duplicación de archivos.

    Marcos de WordPress

    Este grupo de funciones puede resultar más útil cuando se utiliza un marco para la tematización. En mi agencia, Soupgiant , hemos creado un marco para acelerar nuestra producción de sitios web.

    Como ocurre con la mayoría de las agencias, tenemos convenciones internas para nombrar archivos JavaScript y CSS.

    Cuando creamos un tema de WordPress personalizado para un cliente, lo desarrollamos como un tema hijo de nuestro marco. En el propio marco, registramos una serie de archivos JavaScript y CSS de acuerdo con nuestra convención de nomenclatura.

    En el tema secundario, simplemente ponemos en cola los archivos para generar el HTML.

     

    function clienttheme_enqueue_css() { if (!is_admin()): wp_enqueue_style('theme-mobile'); wp_enqueue_style('theme-desktop'); wp_enqueue_style('theme-desktop-ie'); endif; //!is_admin } add_action('wp_print_styles', 'clienttheme_enqueue_css'); function clienttheme_enqueue_js() { if (!is_admin()): wp_enqueue_script('theme-custom'); endif; //!is_admin} add_action('wp_print_scripts', 'clienttheme_enqueue_js');

    Agregar CSS y JavaScript a nuestros temas a la manera de WordPress nos permite realizar un seguimiento de exactamente lo que sucede de un vistazo.

    Una ligera limitación

    Si utiliza un marco de JavaScript en su tema o complemento, entonces se quedará con la versión que se incluye con la versión actual de WordPress, que a veces se queda una o dos versiones por detrás de la última versión oficial del marco. (Actualizar a una versión más nueva del marco es técnicamente posible, pero esto podría causar problemas con otros temas o complementos que esperan la versión que viene con WordPress, por lo que omití esta información en este artículo).

    Si bien esto le impide utilizar cualquier característica nueva del marco que se agregó después de la versión incluida en WordPress, la ventaja es que todos los autores de temas y complementos saben qué versión del marco esperar.

    Un único punto de registro

    Registre sus estilos y scripts en un solo bloque de código, de modo que cuando actualice un archivo, pueda regresar y actualizar el número de versión fácilmente.

    Si usa código diferente en diferentes partes del sitio web, puede ajustar la lógica a los scripts de puesta en cola.

    Si, por ejemplo, sus páginas de archivo utilizan JavaScript diferente al resto del sitio web, entonces puede registrar tres archivos:

    • JavaScript base (registrado como theme-base),
    • archivar JavaScript (registrado como theme-archive),
    • JavaScript general (registrado como theme-general).

    Nuevamente, el JavaScript base no agrega nada al sitio web. Más bien, es un grupo de funciones predeterminadas en las que se basan los otros dos archivos. Luego podrías poner en cola los archivos usando el siguiente código:

    function mytheme_enqueue_js(){ if (is_archive()) { wp_enqueue_script('theme-archive'); } elseif (!is_admin()) { wp_enqueue_script('theme-general'); }} add_action('wp_print_scripts', 'mytheme_enqueue_js');

    Usando el CDN AJAX de Google

    Si bien el uso de JavaScript a la manera de WordPress le evitará el problema de que las bibliotecas comunes entren en conflicto entre sí, es posible que prefiera servir estas bibliotecas desde el servidor de Google en lugar del suyo propio.

    Usar el complemento Usar bibliotecas de Google de Jason Penny es la forma más sencilla de hacerlo. El complemento mantiene automáticamente jQuery en modo noConflict.

    Poniendolo todo junto

    Una vez que haya comenzado a registrar y generar sus scripts y estilos a la manera de WordPress, encontrará que administrar estos archivos se convierte en una serie de pasos lógicos:

    1. Registro para gestionar:
      • números de versión,
      • dependencias de archivos,
      • tipos de medios para CSS,
      • colocación de código para JavaScript (encabezado o pie de página);
    2. Poner en cola/enviar archivos a HTML:
      • lógica que dirige la salida a páginas específicas de WordPress,
      • WordPress automatizando dependencias.

    Eliminar posibles conflictos de JavaScript de su tema o complemento de WordPress lo libera para continuar con cosas más importantes, como hacer un seguimiento de las oportunidades de ventas o volver a ese juego de etiquetas hash que fue tan bruscamente interrumpido.

    Otras lecturas

    • Cómo acelerar su sitio web de WordPress
    • Cómo utilizar AJAX en WordPress
    • Bibliotecas JavaScript útiles y complementos jQuery
    • Una guía para principiantes para crear un sitio web de WordPress

    (al, señor)Explora más en

    • WordPress
    • Flujo de trabajo
    • javascript
    • Mantenimiento
    • Técnicas (WP)





    Tal vez te puede interesar:

    1. ¿Deberían abrirse los enlaces en ventanas nuevas?
    2. 24 excelentes tutoriales de AJAX
    3. 70 técnicas nuevas y útiles de AJAX y JavaScript
    4. Más de 45 excelentes recursos y repositorios de fragmentos de código

    La guía para desarrolladores sobre JavaScript y CSS libres de conflictos en WordPress

    La guía para desarrolladores sobre JavaScript y CSS libres de conflictos en WordPress

    Clase magistral de diseño para una interfaz de usuario compleja, con Vitaly Friedman ¡Registro! Índice

    programar

    es

    https://pseint.es/static/images/programar-la-guia-para-desarrolladores-sobre-javascript-y-css-libres-de-conflictos-en-wordpress-781-0.jpg

    2024-04-04

     

    La guía para desarrolladores sobre JavaScript y CSS libres de conflictos en WordPress
    La guía para desarrolladores sobre JavaScript y CSS libres de conflictos en WordPress

    Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

     

     

    Top 20