wp_enqueue_scripts – Hook w WordPressie: przykład i implementacja

Funkcja wp_enqueue_scripts to przydatne narzędzie dla deweloperów WordPressa, umożliwiające efektywne ładowanie plików JavaScript na stronie. Dzięki jej zastosowaniu możesz mieć pewność, że skrypty są ładowane prawidłowo, bez problemów z zależnościami czy wersjami.

Poniżej znajduje się przykład użycia wp_enqueue_scripts w pliku functions.php:

// Dodaj skrypty i style za pomocą hooka wp_enqueue_scripts
function custom_scripts_and_styles() {
// Wyrejestruj domyślny skrypt jQuery core
wp_deregister_script('jquery-core');

// Zarejestruj jQuery z zewnętrznego źródła
wp_register_script('jquery-core', '//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js');

// Dodaj niestandardowy skrypt zależny od zarejestrowanego jQuery
wp_enqueue_script('custom-script', get_template_directory_uri() . '/js/custom-script.js', array('jquery'), '1.0', true);

// Dodaj domyślny skrypt jQuery
wp_enqueue_script('jquery');

// Dodaj niestandardowy styl
wp_enqueue_style('custom-style', get_stylesheet_directory_uri() . '/css/custom-style.css', array(), '1.0', 'all');
}
add_action('wp_enqueue_scripts', 'custom_scripts_and_styles');

Wyjaśnienie kodu:

W powyższym fragmencie kodu znajduje się funkcja custom_scripts_and_styles(), która została podpięta do akcji wp_enqueue_scripts w WordPressie. Oto szczegółowe omówienie:

• Wyrejestrowanie i rejestracja jQuery:
  • wp_deregister_script('jquery-core'): Funkcja ta usuwa domyślny skrypt jQuery core, aby uniknąć konfliktów lub nadmiarowości.
  • wp_register_script(...): Rejestruje jQuery z zewnętrznego źródła, w tym przypadku z Google CDN, w wersji 3.5.1.
• Dodanie własnego skryptu:
  • wp_enqueue_script(): Dodaje niestandardowy skrypt o nazwie 'custom-script’ z katalogu 'js’ motywu. Skrypt zależy od zarejestrowanego jQuery, ma wersję '1.0′ i jest ładowany w stopce strony dla lepszej wydajności.
• Dodanie domyślnego skryptu jQuery:
  • wp_enqueue_script('jquery'): Dodaje domyślny skrypt jQuery, zapewniając jego dostępność na stronie WordPress.
• Dodanie własnego stylu:
  • wp_enqueue_style(...): Dodaje niestandardowy arkusz stylów o nazwie 'custom-style’ z katalogu 'css’ motywu. Styl ma wersję '1.0′ i jest stosowany do wszystkich typów mediów (’all’).

Dzięki zastosowaniu hooka wp_enqueue_scripts wraz z funkcją wp_enqueue_script, możesz skutecznie zarządzać ładowaniem skryptów, zależnościami i wersjami, co przekłada się na lepszą wydajność strony.

Opanowanie hooka wp_enqueue_scripts oraz funkcji wp_enqueue_script jest kluczowe dla efektywnego zarządzania skryptami i stylami w WordPressie. Stosując dobre praktyki i właściwie wykorzystując te narzędzia, zapewnisz optymalne ładowanie zasobów i zwiększysz funkcjonalność strony. Wykorzystaj te techniki, by podnieść wydajność i jakość swojej witryny WordPress.