necesito agregar sincronizar o aplazar atributo en el archivo CSS de hojas de estilo que se incluyen mediante el uso wp_enqueue_style
.
Mi código está abajo.
function my_scripts() {
wp_enqueue_style('bootstrap', get_template_directory_uri() . '/css/bootstrap.css', array(), '4.4.2');
wp_enqueue_style('my-style', get_stylesheet_uri());
wp_enqueue_style('about-page', get_template_directory_uri() . '/css/about-styles.css', array(), '4.4.3');
wp_enqueue_script('bootstrap-min', get_template_directory_uri() . '/js/bootstrap.min.js', array(), '20151112', true);
wp_enqueue_script('jquery-scrollto', get_template_directory_uri() . '/js/jquery-scrollto.js', array(), '20112', true);
wp_enqueue_style('details-pages', get_template_directory_uri() . '/css/details-pages.css', array(), '4.4.3');
wp_enqueue_style('owl-carousel-css', get_template_directory_uri() . '/css/owl/owl.carousel.css', array(), '4.4.2');
wp_enqueue_script('owl-carousel-js', get_template_directory_uri() . '/css/owl/owl.carousel.min.js', array(), '202', true);
wp_enqueue_script('scripts-js', get_template_directory_uri() . '/js/scripts.js', array(), '20151112', true);
}
add_action('wp_enqueue_scripts"https://stackoverflow.com/questions/53882613/,"my_scripts');
Ahora quiero agregar atributos de sincronización o aplazamiento en diferentes hojas de estilo CSS. Entonces, por favor, ayúdenme a agregar atributos de sincronización o aplazamiento. Quiero agregar atributos solo en archivos CSS, no en archivos JavaScript.
Cualquier ayuda será apreciada.
Gracias.
Vel
Prueba este código
function add_custom_attr( $tag, $handle, $src ) {
$scriptArr = array('bootstrap','my-style','about-page','bootstrap-min','jquery-scrollto','details-pages','owl-carousel-css','owl-carousel-js','scripts-js');
if (in_array($handle, $scriptArr)) {
$tag = str_replace( 'src="https://stackoverflow.com/questions/53882613/,"sync="false" src=", $tag );
}
return $tag;
}
add_filter( "script_loader_tag"https://stackoverflow.com/questions/53882613/,"add_custom_attr', 10, 3 );
Otra solución que usa un filtro diferente, que se puede usar para apuntar a un identificador de secuencia de comandos específico:
function frontend_scripts(){
wp_enqueue_script( 'my-unique-script-handle"https://stackoverflow.com/questions/53882613/,"path/to/my/script.js' );
}
add_action( 'wp_enqueue_scripts"https://stackoverflow.com/questions/53882613/,"frontend_script' );
function make_script_async( $tag, $handle, $src ){
if ( 'my-unique-script-handle' != $handle ) {
return $tag;
}
return str_replace( '<script"https://stackoverflow.com/questions/53882613/,"<script async', $tag );
}
add_filter( 'script_loader_tag"https://stackoverflow.com/questions/53882613/,"make_script_async', 10, 3 );
Espero que esto te ayude a resolver tus problemas.
Gracias
Este es el script que uso para controlar el estilo y los atributos del script:
secuencia de comandos en cola
Esto le permite agregar selectivamente Defer, Async y Lazy Load a hojas de estilo y scripts. Una manera perfecta de hacer feliz a Google PageSpeed LOL.
La aplicación adecuada de minificación, almacenamiento en caché y carga diferida de imágenes, junto con la gestión de estilos y secuencias de comandos con esta secuencia de comandos, cambió nuestra puntuación de PageSpeed de 60 móvil/88 escritorio a 74 móvil y 96 escritorio.
mira este enlace matthewhorne.me/defer-async-wordpress-scripts
– Vela
21 de diciembre de 2018 a las 10:37
Las etiquetas async y defer no funcionan para los estilos…
– OctaviaLo
30 de septiembre de 2019 a las 14:13