Minifikacja CSS i JavaScript w WordPressie za pomocą funkcji PHP
Objaśnienie
Aby przyspieszyć ładowanie swojej strony WordPress, możesz zminimalizować pliki CSS i JavaScript. Minifikacja oznacza usunięcie zbędnych spacji, komentarzy i znaków z Twojego kodu, co zmniejsza rozmiar pliku i przyspiesza czasy ładowania.
Oto jak to działa:
- Minifikacja CSS: Funkcja ta usuwa komentarze i dodatkowe spacje z Twojego pliku CSS, co sprawia, że jest on mniejszy i ładowany szybciej.
- Minifikacja JavaScript: Podobnie, ta funkcja porządkuje Twój plik JavaScript, usuwając zbędne elementy, co zapewnia szybsze ładowanie.
Jak używać:
- Kod odczytuje pliki CSS i JavaScript Twojego motywu.
- Następnie stosuje funkcje minifikacji do tych plików.
- Na koniec dodaje zminimalizowane wersje, co oznacza, że informuje WordPress, aby używał tych zoptymalizowanych plików zamiast oryginalnych.
To podejście to ręczny sposób optymalizacji Twojej strony bez użycia wtyczki. To świetna opcja, jeśli chcesz mieć większą kontrolę nad wydajnością swojej strony.
Kod
<?php
// Function to minify CSS
function wp_dudecom_minify_css($css) {
// Remove comments, whitespace, and unnecessary characters
$css = preg_replace('/\/\*.*?\*\//s', '', $css);
$css = preg_replace('/\s*([{}|:;,])\s+/', '$1', $css);
$css = preg_replace('/\s\s+(.*)/', '$1', $css);
$css = str_replace(';}', '}', $css);
return trim($css);
}
// Function to minify JavaScript
function wp_dudecom_minify_js($js) {
// Remove comments, whitespace, and unnecessary characters
$js = preg_replace('/\/\*.*?\*\//s', '', $js);
$js = preg_replace('/\s*([{}|:;,])\s+/', '$1', $js);
$js = preg_replace('/\s\s+(.*)/', '$1', $js);
return trim($js);
}
// Hook to minify CSS and JS files
function wp_dudecom_enqueue_minified_assets() {
// Get the theme directory URI
$theme_uri = get_template_directory_uri();
// Minify and enqueue CSS
$css_file = file_get_contents($theme_uri . '/style.css');
$minified_css = wp_dudecom_minify_css($css_file);
wp_register_style('wp-dudecom-minified-style', false);
wp_enqueue_style('wp-dudecom-minified-style');
wp_add_inline_style('wp-dudecom-minified-style', $minified_css);
// Minify and enqueue JavaScript
$js_file = file_get_contents($theme_uri . '/script.js');
$minified_js = wp_dudecom_minify_js($js_file);
wp_register_script('wp-dudecom-minified-script', false);
wp_enqueue_script('wp-dudecom-minified-script');
wp_add_inline_script('wp-dudecom-minified-script', $minified_js);
}
add_action('wp_enqueue_scripts', 'wp_dudecom_enqueue_minified_assets');
?>
Instrukcja
Lokalizacja pliku: Dodaj kod do pliku functions.php
swojego motywu lub stwórz plik niestandardowej wtyczki.
Wymagania wstępne: Upewnij się, że masz dostęp do plików motywu WordPress oraz podstawową wiedzę na temat ich edytowania.
Kroki wdrożenia:
- Dostęp do plików motywu: Użyj klienta FTP lub menedżera plików swojego dostawcy hostingu, aby przejść do katalogu instalacji WordPress.
- Znajdź
functions.php
: Przejdź dowp-content/themes/nazwa-twojego-motywu/
i znajdź plikfunctions.php
. - Edytuj
functions.php
: Otwórz plikfunctions.php
w edytorze tekstu. - Wstaw kod: Skopiuj podany kod PHP i wklej go na końcu pliku
functions.php
. - Zapisz zmiany: Zapisz plik
functions.php
i prześlij go z powrotem na serwer, jeśli używasz klienta FTP. - Zweryfikuj wdrożenie: Odwiedź swoją stronę internetową i sprawdź, czy pliki CSS i JavaScript zostały zminimalizowane. Możesz użyć narzędzi dewelopera w przeglądarce, aby sprawdzić załadowane zasoby.
Jeśli napotkasz jakiekolwiek problemy lub potrzebujesz dalszej pomocy, rozważ skontaktowanie się z wp-dude.com w celu uzyskania fachowej pomocy przy wdrożeniu lub bardziej zaawansowanej funkcjonalności.