¿Qué es lo que significa "view =" en archivos CSS y JS? De qué manera emplear "grind

📑 Aquí podrás encontrar 👇

Control de ediciones de archivos de script CSS y Java: una forma de forzar actualizaciones de caché
¿Qué es el control de ediciones de ficheros y su propósito?
Versión dinámica: varios scripts para crearlos.
¿Qué sucede si quiero llevar a cabo cambios pero aún no he creado un sistema de control de ediciones?

Control de ediciones de archivos de script CSS y Java: una forma de forzar actualizaciones de caché

"Sé por qué andas aquí. Sé lo que haces. […] Es El problema que nos impulsa, Nuevo. Es problema Quien te trajo aquí, los conoces inconveniente De la misma yo ... "¿Cuáles son los complementos detrás de los ficheros CSS y JS, y qué tan recurrentes son últimamente? ¿Por qué razón estos complementos pésimos me previenen actualizar el CSS de la web en el momento en que uso WordPress?

Ok, quítate los guantes Trinidad En una conversación con el Neo Diremos que la contestación está ahí, en frente de tus ojos, siempre está ahí: estas son las llamadas Versión del fichero y se utiliza para forzar la actualización de la caché.

En el presente artículo, vamos a explicar de qué manera utilizarlo y por qué este procedimiento es tan popular recientemente, aunque como afirmamos en nuestro producto sobre "¿Qué es el almacenamiento en caché y por qué razón no se muestran los cambios?" Hay otras formas de forzar la actualización de la caché del navegador.

¿Qué es el control de ediciones de ficheros y su propósito?

Qué sabemos La agilidad de carga en el sitio es primordial.Asegurar la paciencia del usuario y el uso de datos en las conexiones móviles.

Tantas cosas desde Loopeando.com Nunca repetiremos que cada segundo que su cibersitio tarda en cargar es una pérdida de audiencia. Sin olvidar que la velocidad de carga es uno de los factores del posicionamiento web.

Para todo lo mencionado, disponga tanto de un servidor como de un navegador Los distintos sistemas guardan ciertos datos en cachés webEl objetivo no es más que Evite cargar continuamente los mismos datos en el momento en que visita la página.Si eso no cambia. Ese es el problema, algunos datos cambian y ... si el navegador o el servidor impide que los datos se actualicen, los cambios que hicimos no se van a ver reflejados en el usuario final.

Por eso se emplea la versión. La versión no es más que una pequeña extensión que agregamos en el final del fichero, y la cambiamos de forma frecuente o dinámicamente..

Por servirnos de un ejemplo:
Si tengo un fichero CSS, diga general.css. Si cambiamos un estilo, el cambio no tiene que reflejarse rápidamente en nuestra computadora o la PC del cliente. La caché que se muestra antes o después depende de la configuración de cada caché (caché del servidor y navegador individual para cada usuario).

Pero puedo "engañar" al sistema de caché, haciéndole pensar que el fichero CSS es de todos modos otro fichero nuevo. ¿De qué manera es? Tiene una extensión de artículo, una variable GET y una versión.

Mi fichero original:

</p>

Añadimos una versión a los próximos ficheros:

</p>

Con esto consigo dos cosas:

Como dije, el fichero no se guarda en caché y los cambios que hicimos se mostrarán inmediatamente.
Todo el código que usa este fichero proseguirá funcionando normalmente pues su nombre no cambió.

En verdad, si no vamos al archivo general.css cada vez, deberíamos cambiar su nombre (general2.css, general3.css, general4.css...) conseguiremos el mismo resultado, pero va a ser preciso un enorme esfuerzo para cambiar todas las referencias a esta en la web.

Versión dinámica: varios scripts para crearlos.

En este momento hay un gran problema: ¿De qué manera agrego una versión a un archivo? ¿Quiero escribir estas expresiones como nombre? Es viable, pero ciertamente no es práctico.

Si hacemos cambios con determinada frecuencia, o si CSS y JS se basan en un formulario que los individuos tienen la posibilidad de modificar a intención, la situación ideal es que estemos utilizando variables globales para modificar todos y cada uno de los archivos al unísono.

Ejemplo:

</p> <script type="rocketlazyloadscript" data-rocket-type="text/javascript" src="/js/codigo.js?v=$version" defer></script>

Así, si aplicamos la variable "versión" a ficheros modificados habitualmente o dinámicamente, todos se actualizarán después de cada cambio.

¿Y qué valor le asigno cada vez? Es la imaginación de todos. Los humanos contamos muchas opciones: podemos crear cambiantes incrementales o conceder datas o números al azar ...

Hete aquí ciertos ejemplos:

Utilice variables al azar en PHP:

</p> <br /> <script type="rocketlazyloadscript" src="js/visual.js?v=<?php echo(rand()); ? defer>" defer></script>

Utilice cambiantes al azar en el script Java:

</p> <p><script type="rocketlazyloadscript" data-rocket-type="text/javascript"> var estilos="js/visual.js?" + Math.random();</script>

Fecha y hora exactas del cambio:

</p> <p><script type="rocketlazyloadscript" data-minify="1" data-rocket-type="text/javascript" src="https://closermarketing.es/wp-content/cache/min/1/versiones-y-cache-web-como-utilizarlas-actualizar/visual.js?ver=1696580520" defer> </script>

Con .htaccess:

</p> <p><?php function autoVer($url) $path = pathinfo($url); $ver=".".filemtime($_SERVER['DOCUMENT_ROOT']. $ url). '.'; $ path zurückgeben['dirname']. '/'. str_replace ('.', $ ver, $ path['basename']); ?> <link rel="stylesheet" href="https://www.loopeando.com/versiones-y-cache-web-como-utilizarlas-actualizar/<?php echo autoVer("/private/css/visual.css'); ?> "/> <script type="rocketlazyloadscript" src="https://www.loopeando.com/versiones-y-cache-web-como-utilizarlas-actualizar/<?php echo autoVer("/private/js/visual.js'); ? defer>"></script> #Regla para el .htaccess RewriteRule ^ (private / (js | css | imgs) /) (. +) \. (. +) \. (Js | css | jpg | gif | png) $ 1 $ 3 $ 5 [L]

Caracteristicas Versión automática(($ URL)

$ ruta = Información en el camino(($ URL);;

$ Mira = ". '.Tiempo de archivo(($ _SERVE['DOCUMENT_ROOT'].$ URL).". ';;

volver $ ruta['dirname'].'/'.str_replace((". ', $ Mira, $ ruta['basename']);;

}

? >

# .Htaccess reglas

Reescribe las reglas ^((privado/.((js|CSS|imgs)/.)((.+)\..((.+)\..((js|CSS|jpg|gif|png)PS PS1 piezaPS3.PS5 [L]

¿Qué sucede si quiero llevar a cabo cambios pero aún no he creado un sistema de control de ediciones?

Situación actual: necesito modificar el CSS de WordPress. Acercamiento la línea y el papel de estilo donde están, voy al fichero, edito y listo. ¡tocar! ... Completamente no pasa nada. Limpié la caché web, el navegador, ... todavía no pasa nada.

¿Qué pasó? Por poner un ejemplo, estoy cambiando una hoja de trabajo llamada general.css, pero la hoja de trabajo que se expone en la página web es general.css. V2.3.

¿Dónde está general.css v2.3? No existe, no existe. Como dije, esta es una versión virtual generada en el papel de estilo real. No tengo ingreso a esta versión, por lo que no puedo ver estos cambios en la página web.

¿Yo no puedo? ¡como es natural que puede! Pero no a la vieja.

En WordPress CMS

Idealmente, debería usar las opciones proporcionadas por casi todos los temas de edición de CSS. Esta alternativa producirá CSS dinámico, por lo que se aplicarán los cambios realizados.

Por lo general a Apariencia-> CSS personalizado prender Apariencia-> Tema-> CSS personalizado

Si no puede editar así, tiene dos opciones:

Emplea complementos, como B. WP para añadir CSS personalizado
Rompieron la producción de la versión

Hay varios métodos para esto último. O functions.php del Tema Entonces ingrese el próximo código:

</p> <p>// Suprime el número de versión de los ficheros JavaScript y CSS en cola usando la función wp_enqueue_script () o wp_enqueue_style (). La función microdot_remove_scripts_styles_version ($ src) if (strpos ($ src, 'ver = ")) $ src = remove_query_arg (" ver', $ src); return $ src; // De el papel de estilo en cola (CSS) add_filter ('style_loader_src', 'microdot_remove_scripts_styles_version', 9999) eliminar versión; // Suprime la versión del fichero JavaScript en cola add_filter ('script_loader_src', 'microdot_remove_scripts_styles_version', 9999);

// Suprime el número de versión de los ficheros JavaScript y CSS

// Cola con `wp_enqueue_script ()` o `wp_enqueue_style ()`

Caracteristicas microdot_remove_scripts_styles_version(( PSsrc )

caso de que (( Marco(( PSsrc, 'Ver = " ) )

PSsrc = remove_query_arg(( "Campana', PSsrc );;

regresar PSsrc;;

}

// Elimina la versión de la hoja de estilo en cola (CSS).

Añadir filtro(( 'style_loader_src', 'microdot_remove_scripts_styles_version', 9999 );;

// Elimina la versión del fichero javascript en la cola

Añadir filtro(( 'script_loader_src', 'microdot_remove_scripts_styles_version', 9999 );;

O, podemos encontrar esta función y establecemos el cuarto factor ($ ver) en falso:

</p> <p>wp_enqueue_style (cadena $ identificador, cadena $ src = no, matriz $ deps = matriz (), cadena | bool | null $ ver = no, cadena $ media = "todos");

wp_enqueue_style(( Cadena PStratar con,

Cadena PSsrc = Incorrecto,

Un gran número PSDepartamento = Un gran número((),

Cadena|Booleano|cero PScampana = Incorrecto,

Cadena PSmedios = 'Todo' );;

O, tenemos la posibilidad de hacer otro fichero CSS clonando el fichero para editarlo y cargarlo utilizando la siguiente función:

</p> <p>wp_enqueue_style ('Number_del_Tema', get_stylesheet_directory_uri (). '/ style-ver-2.css');

wp_enqueue_style(("Nombre del tema", get_stylesheet_directory_uri(() . '/style-ver-2.css');;

En otros géneros de sitios

Tenemos la posibilidad de clonar el archivo CSS y mudarle el nombre a fin de que por el momento no exista en el feed de la versión, o podemos encontrar un formulario para agregar estos cambios a la novedosa versión de CSS, o podemos utilizar uno de los próximos comandos para hacer un CSS llamada: Los siguientes elementos se han cambiado en el "Versión activa: varios scripts para crearlos.

Incluso puedes emplear lo siguiente:

</p>

En cuanto a usted, ¿tiene alguna pregunta sobre las ediciones CSS y JS? ¡Cuéntenos su experiencia! Si ha podido arreglar el inconveniente, ¿cómo lo hizo?

Deja una respuesta Cancelar la respuesta