Sabato
19
Marzo 2022
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:
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.
Scrivi un commento