whatsapp   

Sabato

19

Marzo 2022

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.

library_books

Leggi anche

Come inviare dati dei form con Ajax serialize() a php
Scopri
Come usare le chiavi API Google
Scopri
come creare tipi di post personalizzati in wordpress
Scopri
Come creare template articoli personalizzato WordPress
Scopri
Come fare redirect in WordPress senza plugin
Scopri
Come recuperare utenti WordPress e dati senza plugin
Scopri
Variabili in CSS come usarle nei tuoi fogli di stile
Scopri
Recuperare l'ultimo elemento di un array in php
Scopri

Contattaci

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