WordPress – Sync-Defer-Tag in wp_enqueue_style CSS-Dateien hinzufügen

Ich muss hinzufügen synchronisieren oder verschieben Attribut in der CSS-Datei von Stylesheets, die durch die Verwendung eingebunden werden wp_enqueue_style.

Mein Code ist unten.

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');

Jetzt möchte ich das Sync- oder Defer-Attribut in verschiedenen CSS-Stylesheets hinzufügen. Bitte helfen Sie mir, wie ich ein Synchronisierungs- oder Verzögerungsattribut hinzufüge. Ich möchte Attribute nur in CSS-Dateien hinzufügen, nicht in JavaScript-Dateien.

Jede Hilfe wird geschätzt.

Danke.

Probieren Sie diesen Code aus

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 );

Eine andere Lösung, die einen anderen Filter verwendet, der verwendet werden kann, um auf ein bestimmtes Skript-Handle abzuzielen:

 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 );

Ich hoffe, dass dies Ihnen bei der Lösung Ihrer Probleme hilft.

Danke

Dies ist das Skript, das ich zur Steuerung von Stil- und Skriptattributen verwende:
Enqueue-Skript

Dadurch können Sie Stylesheets und Skripten selektiv Defer, Async und Lazy Load hinzufügen. Eine perfekte Möglichkeit, Google PageSpeed ​​glücklich zu machen, LOL.

Durch die ordnungsgemäße Minimierung, das Caching und das verzögerte Laden von Bildern sowie die Verwaltung der Stile und Skripte mit diesem Skript änderte sich unser PageSpeed-Score von 60 für Mobilgeräte / 88 für Desktops auf 74 für Mobilgeräte und 96 für Desktops.