Come unire file Javascript e CSS in WordPress

Come unire file Javascript e CSS in WordPress

  1. blog Come unire file Javascript e CSS in WordPress
event_available
schedule

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.

check_circle

Leggi anche

Come creare sottomenu backend WordPress con add_submenu_page()
Scopri di più
Come creare pagina di amministrazione backend WordPress
Scopri di più
Cos'è il marketing mix
Scopri di più
Perché analizzare i competitor
Scopri di più
Come creare controlli personalizzati per Wp customizer
Scopri di più
Come inviare dati dei form con Ajax serialize() a php
Scopri di più
Elenco icone Google in un array in codice php
Scopri di più
Come usare le chiavi API Google
Scopri di più

Contattaci!

Preventivo sempre gratuito

perm_identity
alternate_email
phonelink_ring
message

Il tuo messaggio è stato inviato con successo!
Ti risponderemo a breve

Scrivi un commento

Il tuo indirizzo email non sarà pubblicato.

message
perm_identity
alternate_email

keyboard_arrow_up