autor: Szymon Skulimowski http://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

Podobał się artykuł? Dodaj kanał RSS / Atom do swojego czytnika lub zapisz się na bezpłatny newsletter i dołącz do grona stałych czytelników.

Podobne artykuły

wp_head i wp_footer – dwie funkcje, o których zawsze powinieneś pamiętać (24)
wp_head i wp_footer to jedne z najważniejszych elementów motywu WordPressa. Niestety są one zadziwiająco często pomijane czego efektem są późniejsz...
Pliki szablonów WordPressa – część 2 – Pierwsze spojrzenie na pętlę (14)
Jak już dowiedzieliście się z poprzedniej części, na podstawowy szablon WordPressa składaja się: index.php oraz style.css. Ten drugi zawiera inform...
Theme Test Drive czyli wygodniejsza praca nad nowym szablonem (10)
Theme Test Drive - wtyczka dzięki, której testowanie i dostosowywanie nowego szablonu na istniejącym blogu jest łatwiejsze niż kiedykolwiek wcześni...
WordPress – własny przycisk w wizualnym edytorze (32)
Miałeś kiedyś problem z nadmierną ilością shortcode zdefiniowanych w swojej skórce? By nie musieć pamiętać nazw ich wszystkich, możemy dodać je jak...

Komentarze (32)

Damian
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
  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
  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
  W przypadku WP 90% wtyczek korzysta z jQuery więc raczej nie ma sensu pisanie czegokolwiek w czymś innym.
  odpowiedz
Krzysiek Dróżdż
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
  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
Kolejna ciekawa kwestia, czekam na wpis z jej zastosowaniem! (mam nadzieje, że będzie wykonalne dla mniej wtajemniczonych). Pozdrawiam
odpowiedz
1. Szymon Skulimowski
  Dzięki Jakub! Ja też mam taką nadzieję :-).
  odpowiedz
pibe
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
  Dzięki za motywację!
  odpowiedz
Paweł Kula
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
Szymonie, usychamy z tęsknoty za kolejnymi częściami. Prawdę mówiąc to ja i mój projekt. Pozdrawiam
odpowiedz
1. Szymon Skulimowski
  Dzięki Kuba za przypomnienie. Druga część powinna pojawić się w przyszłym tygodniu.
  odpowiedz
Marek
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
  Mógłbyś zamieścić tu swój kod?
  odpowiedz
2. Marek
  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
  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
  A jest jakiś sposób by obejść i nie instalować niepotrzebnych pluginów? w tym przypadku Ultimate TinyMCE.
  odpowiedz
5. marsjaninzmarsa
  Ale co Ty chcesz właściwie osiągnąć, bo nie rozumiem?
  odpowiedz
6. Marek
  Po prostu na stronie a nie we widgecie chciałem wkleić kod html ze stylem css (css zewnętrzny).
  odpowiedz
7. marsjaninzmarsa
  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
  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
  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
  Aha, a dane stylu
  ———
  .mojabardzofajnaklasa {
  color: red;
  }
  ———
  dopisuję do głównego pliku style.css ?
  O to chodziło?
  odpowiedz
11. marsjaninzmarsa
  Tak, tak najprościej.
  odpowiedz
12. Marek
  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
  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
  Możesz podać link lub pełna nazwę tej wtyczki wp-mu, chciał bym przetestować.
  odpowiedz
15. marsjaninzmarsa
  http://codex.wordpress.org/Must_Use_Plugins
  odpowiedz
marsjaninzmarsa
3 miesiące minęły i nadal nie ma drugiej części… doczekamy się kiedyś? :P
odpowiedz
Tomek S.
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
Kiedy druga część? Trochę nie ogarniam tematu:P
odpowiedz

Dodaj własny komentarz

Odnośniki z innych stron (1)

Lista innych stron, które w jakiś sposób odnoszą się do opublikowanej tutaj treści:

Tworzenie szablonów do WordPressa. Część I. - damianc.pl
Aby w szablonie użyć arkusza CSS lub skryptu JavaScript użyj specjalnych funkcji WordPressa – wp_enqueue_style() i wp_enqueue_script(). Lektura na ich temat do poczytania na blogu WPNinja. [...]