{"id":233797,"date":"2023-02-22T19:01:00","date_gmt":"2023-02-22T16:01:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233797"},"modified":"2022-11-11T12:27:55","modified_gmt":"2022-11-11T09:27:55","slug":"wszystko-o-dodawaniu-stylow-i-skryptow-w-wordpress","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pl\/wszystko-o-dodawaniu-stylow-i-skryptow-w-wordpress\/","title":{"rendered":"Wszystko o dodawaniu styl\u00f3w i skrypt\u00f3w w WordPress"},"content":{"rendered":"\n

WordPress oferuje wiele metod dodawania styl\u00f3w i skrypt\u00f3w dla frontendu i administratora, zar\u00f3wno do dodawania plik\u00f3w, jak i bezpo\u015bredniego wyprowadzania zmiennych \/ danych wyj\u015bciowych. Ten post zawiera szczeg\u00f3\u0142owe informacje z przyk\u0142adami kodu, jak prawid\u0142owo dodawa\u0107 skrypty i style do WordPressa.<\/p>\n

Skrypty i style mo\u017cna rejestrowa\u0107 i umieszcza\u0107 w kolejce, definiuj\u0105c unikalne uchwyty (identyfikatory przypominaj\u0105ce \u015blimaka), dzi\u0119ki czemu WordPress mo\u017ce wyeliminowa\u0107 duplikaty, takie jak wiele bibliotek jQuery, oraz obs\u0142ugiwa\u0107 zale\u017cno\u015bci (kt\u00f3ry styl lub skrypt nale\u017cy za\u0142adowa\u0107 przed tym i innym) .<\/p>\n

Je\u015bli nie ma szczeg\u00f3lnej potrzeby rejestrowania styl\u00f3w lub skrypt\u00f3w, mo\u017cesz je od razu umie\u015bci\u0107 w kolejce, pomijaj\u0105c rejestracj\u0119. Mo\u017cliwe jest r\u00f3wnie\u017c wyrejestrowanie lub usuni\u0119cie z kolejki styl\u00f3w i skrypt\u00f3w (wp_dequeue_script<\/code>i wp_dequeue_style<\/code>) poprzez odwo\u0142anie si\u0119 do uchwytu. Zwykle pomaga dodanie wy\u017cszej liczby w priorytecie haka (sprawiaj\u0105c, \u017ce b\u0119dzie on uruchamiany po haku, w kt\u00f3rym elementy zosta\u0142y umieszczone w kolejce).<\/p>\n

PS: Dodawanie styl\u00f3w i skrypt\u00f3w do Gutenberga (zar\u00f3wno blok\u00f3w administratora, jak i frontendu) jest wyja\u015bnione w moim po\u015bcie Gutenberg: Podstawy<\/a>.<\/p>\n

Dodawanie skrypt\u00f3w i styl\u00f3w do frontendu<\/h2>\n

Aby doda\u0107 style i skrypty tylko do frontendu, u\u017cyj hooka wp_enqueue_scripts<\/code>. Pomimo nazwy haka, jest on u\u017cywany zar\u00f3wno do skrypt\u00f3w, jak i styl\u00f3w. Oto przyk\u0142ad kolejkowania arkusza styl\u00f3w i pliku javascript w motywie:<\/p>\n

add_action('wp_enqueue_scripts', function() {\n    \/\/ Styles\n    wp_enqueue_style('main-style', get_stylesheet_directory_uri().'\/style.css', [], '1.0');\n\u00a0\n    \/\/ Scripts\n    wp_enqueue_script('main-script', get_stylesheet_directory_uri().'\/assets\/js\/main.js', ['jquery'], '', true);\n});<\/code><\/pre>\n
Trzecim argumentem zar\u00f3wno styl\u00f3w, jak i skrypt\u00f3w jest tablica z zale\u017cno\u015bciami. Np. w przypadku skrypt\u00f3w mo\u017cesz chcie\u0107 za\u0142adowa\u0107 bibliotek\u0119 jQuery przed plikiem skryptu. Uwaga<\/strong>: Instalacje WordPress zawieraj\u0105 kilka popularnych bibliotek skrypt\u00f3w (na przyk\u0142ad jQuery, jQuery UI, Backbone i Underscore). Dop\u00f3ki dodasz kt\u00f3rykolwiek z tych uchwyt\u00f3w<\/a> jako zale\u017cno\u015b\u0107 w swoim enqueue_script, WordPress b\u0119dzie je umieszcza\u0142 w kolejce, wi\u0119c nie musisz dodawa\u0107 w\u0142asnych plik\u00f3w dla tych bibliotek.<\/p>\n
Pi\u0105tym argumentem dla skrypt\u00f3w jest to, czy skrypt powinien by\u0107 \u0142adowany na ko\u0144cu <body><\/code>(w stopce), a nie wewn\u0105trz <head><\/code>tagu.<\/p>\n
Aby u\u017cy\u0107 we wtyczce, musisz u\u017cy\u0107 innych metod, aby uzyska\u0107 adres URL do pliku lokalnego, na przyk\u0142ad plugin_dir_url(__FILE__)<\/code>.<\/p>\n
Dodawanie skrypt\u00f3w i styl\u00f3w do administratora<\/h2>\n
WordPress oferuje kolejny haczyk, admin_enqueue_scripts<\/code>, do dodawania styl\u00f3w i skrypt\u00f3w tylko dla administratora. U\u017cyj tych samych metod, co powy\u017cej, aby zarejestrowa\u0107, umie\u015bci\u0107 w kolejce i zlokalizowa\u0107 skrypty i style:<\/p>\n
add_action('admin_enqueue_scripts', function() {\n    global $pagenow, $post_type;\n    \/\/ Example: $hook == 'edit.php'\n    \/\/ Example: $post_type == 'post'\n    \/\/ wp_enqueue_style or wp_enqueue_script\n});<\/code><\/pre>\n
Dodawanie skrypt\u00f3w i styl\u00f3w do strony logowania<\/h2>\n
Poniewa\u017c \u017caden z powy\u017cszych zaczep\u00f3w nie pojawia si\u0119 na ekranie logowania administratora, WordPress oferuje w tym celu osobny zaczep, login_enqueue_scripts<\/code>.<\/p>\n
add_action('login_enqueue_scripts', function() {\n    \/\/ wp_enqueue_style or wp_enqueue_script\n});<\/code><\/pre>\n
Wyprowadzanie zmiennych JavaScript<\/h2>\n
Do wyprowadzania zmiennych JavaScript (np. pobierania \u015bcie\u017cek, przet\u0142umaczonych \u0142a\u0144cuch\u00f3w lub innych zmiennych mo\u017cna u\u017cy\u0107 wp_localize_script. Ta funkcja wymaga uchwytu skryptu umieszczonego w kolejce. Drugim parametrem by\u0142aby nazwa zmiennej, a trzecim jej warto\u015b\u0107. Warto\u015b\u0107 mo\u017ce by\u0107 tablic\u0105, tak jak :<\/p>\n
add_action('wp_enqueue_scripts', function() {\n    \/\/ wp_enqueue_script('main-script');  \/\/ Must exist!\n    $variable_to_js = [\n        'ajax_url' => admin_url('admin-ajax.php')\n    ];\n    wp_localize_script('main-script', 'Theme_Variables', $variable_to_js);\n});<\/code><\/pre>\n
Wewn\u0105trz skryptu masz dost\u0119p do przekazywanych zmiennych, na przyk\u0142ad:<\/p>\n
jQuery(document).ready(function($) { \n    console.log(Theme_Variables.ajax_url);\n});<\/code><\/pre>\n
W tym haczyku mo\u017cesz uzyska\u0107 dost\u0119p do zmiennych globalnych $pagenow<\/code>i $post_type<\/code>dok\u0142adniej okre\u015bli\u0107, gdzie chcesz umie\u015bci\u0107 swoje style i skrypty w kolejce.<\/p>\n
Wyprowadzanie styl\u00f3w wbudowanych<\/h2>\n
Je\u015bli chcesz wyprowadzi\u0107 style wbudowane, na przyk\u0142ad dla zmiennych motywu skonfigurowanych w programie Customizer (np. za pomoc\u0105 get_theme_mod<\/code>), mo\u017cesz je wyprowadzi\u0107 za pomoc\u0105 wp_add_inline_style<\/code>funkcji. Dzia\u0142a bardzo podobnie do wyprowadzania zmiennych JavaScript, w kt\u00f3rych musisz poda\u0107 uchwyt stylu umieszczonego w kolejce:<\/p>\n
add_action('wp_enqueue_scripts', function() {\n    \/\/ wp_enqueue_style('main-style');  \/\/ Must exist!\n\u00a0\n    $color = get_theme_mod('my-custom-color');  \/\/ e.g. #FF0000\n    $custom_css = \"\n        body {\n            background: {$color};\n        }\";\n        wp_add_inline_style('main-style', $custom_css);\n});<\/code><\/pre>\n
Dodawanie tag\u00f3w asynchronicznych do skrypt\u00f3w<\/h2>\n
Niestety nie ma bezpo\u015bredniej funkcji ani filtra, kt\u00f3ry mo\u017cna by doda\u0107 async<\/code>do tag\u00f3w skryptu, ale mo\u017cemy to osi\u0105gn\u0105\u0107, manipuluj\u0105c ci\u0105giem znak\u00f3w, kt\u00f3rego WordPress u\u017cywa do wyprowadzania tag\u00f3w skryptu dla wszystkich umieszczonych w kolejce skrypt\u00f3w, tak jak to (pami\u0119taj, aby okre\u015bli\u0107 sw\u00f3j skrypt za pomoc\u0105 jego uchwytu):<\/p>\n
add_filter('script_loader_tag', function($tag, $handle, $src) {\n    if ('main-script' != $handle) {\n        return $tag;\n    }\n    return str_replace('<script', '<script async', $tag);\n}, 11, 3);<\/code><\/pre>\n
Przydatne linki do dokumentacji<\/h2>\n