publikacja: 25 lipca 2012, autor: Szymon Skulimowski, komentarze 34 https://wpninja.pl/artykuly/dodawanie-css-js-do-wordpressa-wprowadzenie/

Dodawanie CSS / JS do WordPressa – wprowadzenie

Dodawanie zewnętrznych arkuszy stylów CSS i skryptów JavaScript może wydawać się banalną sprawą, ale jeśli nie wykorzystujesz do tego funkcji wp_enqueue_style i wp_enqueue_script to strzelasz sobie w stopę.

Edycja plików header.php i footer.php

Jednym z najczęściej spotykanych błędów popełnianych przez młodych adeptów jest dodawanie odwołań do zewnętrznych stylów / skryptów bezpośrednio w plikach motywu – header.php i footer.php.

Wiem, bo sam tak robiłem a moja stopa oberwała z tego powodu dziesiątki razy.

Mój kod wyglądał następująco:

header.php:

<!DOCTYPE HTML>
<html <?php language_attributes(); ?>>
<head>
   <meta charset="<?php bloginfo( 'charset' ) ?>" />
   <title><?php wp_title( '|', true, 'right' ); ?><?php bloginfo( 'name' ); ?></title>
   <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" type="text/css">
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
   <script src="<?php echo get_stylesheet_directory_uri(); ?>/js/scripts.js"></script>
   <?php wp_head(); ?>
</head>
<body>

footer.php:
```
<?php wp_footer(); ?>
</body>
</html>
```

kod HTML:

<!DOCTYPE HTML>
<html dir="ltr" lang="pl-PL">
<head>
   <meta charset="UTF-8" />
   <title>Moja strona</title>
   <link rel="stylesheet" href="http://moja-strona.pl/wp-content/themes/moj-motyw/style.css" type="text/css">
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
   <script src="http://moja-strona.pl/wp-content/themes/moj-motyw/js/scripts.js"></script>
</head>
<body>
   <!-- (...) -->
</body>
</html>

Początkowo sądziłem, że wszystko jest w porządku – skoro działa to po co drążyć temat i przeczesywać czeluści dokumentacji?

Wystarczy jednak aktywacja prostej wtyczki do zarządzania ankietami (WP Polls) żeby przekonać się jak bardzo byłem w błędzie (pominąłem część nieistotnego kodu, aby zwiększyć czytelność):

kod HTML:

<!DOCTYPE HTML>
<html dir="ltr" lang="pl-PL">
<head>
   <meta charset="UTF-8" />
   <title>Moja strona</title>
   <link rel="stylesheet" href="http://moja-strona.pl/wp-content/themes/moj-motyw/style.css" type="text/css">
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
   <script src="http://moja-strona.pl/wp-content/themes/moj-motyw/js/scripts.js"></script>
   <link rel='stylesheet' id='wp-polls-css'  href='http://moja-strona.pl/wp-content/plugins/wp-polls/polls-css.css?ver=2.63' type='text/css' media='all' />
   <script type='text/javascript' src='http://moja-strona.pl/wp-includes/js/jquery/jquery.js?ver=1.7.2'></script>
</head>
<body>
   <!-- (...) -->
   <script type='text/javascript' src='http://moja-strona.pl/wp-content/plugins/wp-polls/polls-js.js?ver=2.63'></script>
</body>
</html>

Ałć! – dwa wywołania jQuery. Ponadto, to drugie jest w trybie bezkonfliktowym co oznacza, że moje skrypty właśnie poleciały na orbitę.

W pewnym momencie zacząłem sobie z tym „radzić” poprzez całkowite usuwanie funkcji wp_head i wp_footer, które dają wtyczkom możliwość dołączania własnych stylów i skryptów. Oczywiście w efekcie prowadziło to do jeszcze większych problemów…

Powstaje więc pytanie – czy można to zrobić lepiej? Jasne i wcale nie jest to takie trudne.

Wykorzystanie wp_enqueue_style / wp_enqueue_script

Niezależnie od tego czy tworzysz motyw czy wtyczkę, czy jest to indywidualny projekt czy też publiczny – zawsze powinieneś wykorzystywać odpowiednie funkcje w celu dodania zewnętrznych plików CSS (wp_enqueue_style) / JS (wp_enqueue_script).

Największe korzyści z ich stosowania to:

zabezpieczenie przed duplikowaniem:
wykluczanie sytuacji, w której jednakowe pliki są ładowane po kilka razy
ustawianie zależności:
kontrolowanie kolejności wczytywania poszczególnych plików
jQuery w trybie bezkonfliktowym:
możliwe jednoczesne działanie wielu bibliotek (jQuery, prototype, mootools itp.)
wersjonowanie plików:
większa kontrola nad wyglądem strony w przeglądarce
odporność na aktualizacje:
korzystanie ze skryptów dostarczanych razem z WordPressem
trzymanie wszystkich odwołań w jednym miejscu:
większa czytelność kodu
automatyczne wykrywanie https:
adresy odnośników dostosowują się do ustawionego protokołu HTTP

Tyle jeśli chodzi o teorię. W kolejnym artykule pokaże jak używać wspomnianych funkcji.

tagi: tworzenie motywów, wp_enqueue_script, wp_enqueue_style

Komentarze

Damian 12 lat temu:
Czyli wywołanie typu src="<? bloginfo('template_url'); ?> też jest błędne? Btw, po co używać jQuery i Prototype na raz, a nawet już ich używamy razem, to normalnie w jQuery używa się noConflict().
odpowiedz
1. Szymon Skulimowski 12 lat temu:
  Nie jest to jakoś super błędne, ale zaleca się stosowanie bezpośrednich funkcji (faktycznie bloginfo( 'template_url' ) wypisuje get_bloginfo( 'template_url' ), które wywołuje funkcję get_template_directory_uri()).
  Używanie kilku różnych bibliotek JS na raz to nigdy nie jest dobry pomysł, ale nie zawsze to zależy od nas. Ostatnio, gdy szukałem kogoś do napisania dosyć zaawansowanego pokazu slajdów to zgłosiła się osoba, która wszystko chciała napisać w mootools…
  odpowiedz
2. Damian 12 lat temu:
  No to miała tę swoją galerię w MooTools i już nie trzeba było zaprzęgać innych bibliotek. Jakby mi klient jeszcze mówił jakich bibliotek mam używać (i nie byłaby to jQuery) to bym po prostu podziękował mu za współpracę. :-)
  odpowiedz
3. Szymon Skulimowski 12 lat temu:
  W przypadku WP 90% wtyczek korzysta z jQuery więc raczej nie ma sensu pisanie czegokolwiek w czymś innym.
  odpowiedz
Krzysiek Dróżdż 12 lat temu:
Nie zapominaj jeszcze o tym, że dobrze byłoby include’owanie rozbić na zarejestrowanie skryptu, a dopiero potem zakolejkowanie go.
Tu masz też fajny artykuł na ten temat: http://scribu.net/wordpress/optimal-script-loading.html, choć miejscami chyba trochę przesadny.
odpowiedz
1. Szymon Skulimowski 12 lat temu:
  Jasna sprawa, kolejna część to właśnie „rejestr, kolejka i obszar działania”. Dzięki za trafną sugestię i odnośnik do strony.
  odpowiedz
Jakub Strawa 12 lat temu:
Kolejna ciekawa kwestia, czekam na wpis z jej zastosowaniem! (mam nadzieje, że będzie wykonalne dla mniej wtajemniczonych). Pozdrawiam
odpowiedz
1. Szymon Skulimowski 12 lat temu:
  Dzięki Jakub! Ja też mam taką nadzieję :-).
  odpowiedz
pibe 12 lat temu:
Witam,
Proszę szybko pisać o tym, bo właśnie jest mi to potrzebne :)
Przy okazji, fajne artykuły o WP, chciałoby się więcej, o więcej też proszę :)
Pozdrawiam
odpowiedz
1. Szymon Skulimowski 12 lat temu:
  Dzięki za motywację!
  odpowiedz
Paweł Kula 12 lat temu:
Gratuluję pomysłu i zawartości strony – zaczynam dopiero swoją przygodę z WordPress i przeszukując sieć natrafiłem pod ten adres i powiem jedno: REWELACJA. Brawo panie Szymonie, tak trzymać dalej!
odpowiedz
Jakub 12 lat temu:
Szymonie, usychamy z tęsknoty za kolejnymi częściami. Prawdę mówiąc to ja i mój projekt. Pozdrawiam
odpowiedz
1. Szymon Skulimowski 12 lat temu:
  Dzięki Kuba za przypomnienie. Druga część powinna pojawić się w przyszłym tygodniu.
  odpowiedz
Marek 12 lat temu:
Witam
Kiedy pojawi się artykuł napisany zrozumiale dla laika jak wstawiać prawidłowo to co jest tu opisane?
Mam cały działający kod tego co robię z wykorzystaniem właśnie:
Cały kod który posiadam ma być umieszczony na stronie lecz nie działa ale gdy go wkleję w Widget HTML działa bez problemu, można prosić o pomoc?
Dziękuję
odpowiedz
1. Szymon Skulimowski 12 lat temu:
  Mógłbyś zamieścić tu swój kod?
  odpowiedz
2. Marek 12 lat temu:
  Nie wiem czemu ale nie wkleił się w poprzednim wpisie kod, chodzi mi o:
```
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
```
  chyba że znowu się nie wyświetli, po wpisaniu go do tworzonej strony w zakładce HTML i zapisaniu zmian, po prost znika, ale po zainstalowaniu wtyczki „Ultimate TinyMCE” jest ok.
  odpowiedz
3. marsjaninzmarsa 12 lat temu:
  Nie wkleił się, bo WP domyślnie wycina taki kod jako obronę przed „HTML injection”…
  Opisane jest to bardzo dokładne na Kodeksie. :)
  odpowiedz
4. Marek 12 lat temu:
  A jest jakiś sposób by obejść i nie instalować niepotrzebnych pluginów? w tym przypadku Ultimate TinyMCE.
  odpowiedz
5. marsjaninzmarsa 12 lat temu:
  Ale co Ty chcesz właściwie osiągnąć, bo nie rozumiem?
  odpowiedz
6. Marek 12 lat temu:
  Po prostu na stronie a nie we widgecie chciałem wkleić kod html ze stylem css (css zewnętrzny).
  odpowiedz
7. marsjaninzmarsa 12 lat temu:
  W takim razie nadal robisz to według kodeksu, tylko że stylujesz element w treści wpisu (warto mu nadać odpowiednią klasę albo id), zamiast widżeta.
  odpowiedz
8. Marek 12 lat temu:
  Chodzi Ci o to że wpisując kod html to razem z nim podaję styl css a nie do zewnętrznego .css ?
  Coś takiego -> http://jsfiddle.net/fTtUT/
  odpowiedz
9. marsjaninzmarsa 12 lat temu:
  Nie, chodziło mi raczej o to, że dodajesz klasę do elementu, który chcesz ostylować, i dopisujesz w arkuszu skórki kod, który działa na ten element.
  Coś takiego -> http://jsfiddle.net/QLRmN/
  odpowiedz
10. Marek 12 lat temu:
  Aha, a dane stylu
  ———
  .mojabardzofajnaklasa {
  color: red;
  }
  ———
  dopisuję do głównego pliku style.css ?
  O to chodziło?
  odpowiedz
11. marsjaninzmarsa 12 lat temu:
  Tak, tak najprościej.
  odpowiedz
12. Marek 12 lat temu:
  Bardzo dziękuję za podpowiedź i pomoc, o tym nawet nie pomyślałem by dać to do głównego stylu, cóż dopiero się uczę WP.
  odpowiedz
13. marsjaninzmarsa 12 lat temu:
  Wiesz, jest to jeden z bardziej „chałupniczych” sposobów, pewnie najlepiej by było wsadzić to w zewnętrzny arkusz, który byłby importowany tylko na określonej podstronie, a całość opakować we wtyczkę wp-mu, ale… to też działa. I w większości przypadków nie będzie z tym najmniejszego problemu. :)
  odpowiedz
14. Marek 12 lat temu:
  Możesz podać link lub pełna nazwę tej wtyczki wp-mu, chciał bym przetestować.
  odpowiedz
15. marsjaninzmarsa 12 lat temu:
  https://codex.wordpress.org/Must_Use_Plugins
  odpowiedz
marsjaninzmarsa 12 lat temu:
3 miesiące minęły i nadal nie ma drugiej części… doczekamy się kiedyś? :P
odpowiedz
Tomek S. 12 lat temu:
I skończyło się na artykule z wprowadzeniem – czy coś przeoczyłem? A bardzo mnie ten temat zainteresował i z chęcią bym poczytał kontynuację.
odpowiedz
Krzysiek Borowy 12 lat temu:
Kiedy druga część? Trochę nie ogarniam tematu:P
odpowiedz
Emi 11 lat temu:
Szkoda, że nie ma dalszego ciągu…
odpowiedz
Grześ 9 lat temu:
…obiecanki cacanki.
odpowiedz

Dodawanie CSS / JS do WordPressa – wprowadzenie

Edycja plików header.php i footer.php

Wykorzystanie wp_enqueue_style / wp_enqueue_script

Komentarze

Dodaj własny komentarz