Come unire file Javascript e CSS in WordPress

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.

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

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.