email

Come unire file Javascript e CSS in WordPress

Ti trovi in:
  1. blog Come unire file Javascript e CSS in WordPress

Pubblicato il , aggiornato il 19 Novembre 2021

Come unire file Javascript  e CSS in WordPress all’interno di uno unico? Se utilizzi molti plugin avrai di conseguenza un’abbondanza di file CSS e Javascript  separati.

Questo non è il massimo per il tuo sito web perché viene rallentato dalle numerose richieste di dati dei file esterni.

La soluzione non è installare un altro plugin per snellire quelli già installati ma affidarsi ad una semplice funzione in php molto veloce.

Per prima cosa vediamo dove metterla, cioè nel file functions.php del tuo tema child.

code

Come unire file Javascript  e CSS in WordPress

Apri il file functions.php del tuo tema child e inserisci questa funzione:

add_action('wp_enqueue_scripts', 'ekw_concat_scripts', 100);

function ekw_concat_scripts() {
if (!is_user_logged_in()) {

   global $wp_styles;
   $content = '';

   foreach (wp_styles()->registered as $style) {
     if (wp_style_is($style->handle, 'printed') || wp_style_is($style->handle)) {

       if (file_get_contents($style->src)) {
         $content .= file_get_contents($style->src);
         $content .= "\n\n";
         wp_dequeue_style($style->handle);
       } else if (file_get_contents(ABSPATH . $style->src)) {
         $content .= file_get_contents($style->src);
         $content .= "\n\n";
         wp_dequeue_style($style->handle);
       }

     }
   }

   file_put_contents("my_new_css.css", $content);

  }
}

Analizziamola insieme:

  • agganciamo questa funzione all’hook di WordPress “wp_enqueue_scripts”, cioè il momento in cui vengono stampati a video stili e script.
  • Richiamiamo l’oggetto “global $wp_styles” in cui sono registrati tutti gli stili
  • Verifichiamo che lo stile sia attivo su questa pagina con “wp_style_is”.
  • Estrapoliamo il contenuto con la funzione “file_get_contents”.

Ora non ci resta che inserire in un file esterno il contenuto recuperato nella variabile “$content”.

Questa funzione tiene conto anche di eventuali risorse esterne agganciate dai plugin e le combina nel nuovo file.

Ora non ti resta che creare un nuovo file CSS e richiamarlo all’interno della pagina.

Per eseguire lo stessa funzione con i file JS allora dovrai cambiare il tuo ciclo foreach in questo modo:

   foreach (wp_scripts()->registered as $script) {
     if (wp_script_is($script->handle, 'printed') || wp_script_is($script->handle)) {
       echo $script->handle.'<br>';
       echo $script->src;

       if (file_get_contents($script->src)) {
         $content .= file_get_contents($script->src);
         $content .= "\n\n";
         wp_dequeue_script($script->handle);
       } else if (file_get_contents(ABSPATH . $script->src)) {
         $content .= file_get_contents($script->src);
         $content .= "\n\n";
         wp_dequeue_script($script->handle);
       }
     }
   }
code

Risoluzione problemi

Utilizzando questa funzione potresti incorrere nell’errore Call to undefined function is_user_logged_in() e, nel caso, ho scritto una guida per aiutarti a risolverlo.

Se qualche stile o Javascript  crea problemi puoi stampare a video l’url e l’handle inserendo questo codice all’interno del ciclo foreach:

echo $style->handle.'<br>';
echo $style->src.'<br>';

Se vuoi sapere come recuperare l’elenco handle dei file CSS e Javascript  di WordPress ti lascio una guida che fa al caso tuo, disponibile a questo link.

Contattaci!

Preventivo sempre gratuito

Fabio Fresia, fondatore e titolare di Eureka Web di Asti

perm_device_information366 - 400 9542       emailinfo@agenziawebeureka.it

perm_identity
alternate_email
phonelink_ring
message