publikacja: 25 lipca 2012, autor: , komentarze: 35 http://wpninja.pl/artykuly/dodawanie-css-js-do-wordpressa-wprowadzenie/

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.

Komentarze

  1. Damian 4 lata 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 4 lata 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 4 lata 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 4 lata temu:

      W przypadku WP 90% wtyczek korzysta z jQuery więc raczej nie ma sensu pisanie czegokolwiek w czymś innym.

      odpowiedz
  2. Krzysiek Dróżdż 4 lata 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 4 lata 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
  3. Jakub Strawa 4 lata temu:

    Kolejna ciekawa kwestia, czekam na wpis z jej zastosowaniem! (mam nadzieje, że będzie wykonalne dla mniej wtajemniczonych). Pozdrawiam

    odpowiedz
    1. Szymon Skulimowski 4 lata temu:

      Dzięki Jakub! Ja też mam taką nadzieję :-).

      odpowiedz
  4. pibe 4 lata 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 4 lata temu:

      Dzięki za motywację!

      odpowiedz
  5. Paweł Kula 4 lata 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
  6. Jakub 4 lata 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 4 lata temu:

      Dzięki Kuba za przypomnienie. Druga część powinna pojawić się w przyszłym tygodniu.

      odpowiedz
  7. Marek 4 lata 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 4 lata temu:

      Mógłbyś zamieścić tu swój kod?

      odpowiedz
    2. Marek 4 lata 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 4 lata 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 4 lata temu:

      A jest jakiś sposób by obejść i nie instalować niepotrzebnych pluginów? w tym przypadku Ultimate TinyMCE.

      odpowiedz
    5. marsjaninzmarsa 4 lata temu:

      Ale co Ty chcesz właściwie osiągnąć, bo nie rozumiem?

      odpowiedz
    6. Marek 4 lata temu:

      Po prostu na stronie a nie we widgecie chciałem wkleić kod html ze stylem css (css zewnętrzny).

      odpowiedz
    7. marsjaninzmarsa 4 lata 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 4 lata 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 4 lata 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 4 lata temu:

      Aha, a dane stylu
      ———
      .mojabardzofajnaklasa {
      color: red;
      }
      ———
      dopisuję do głównego pliku style.css ?
      O to chodziło?

      odpowiedz
    11. marsjaninzmarsa 4 lata temu:

      Tak, tak najprościej.

      odpowiedz
    12. Marek 4 lata 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 4 lata 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 4 lata temu:

      Możesz podać link lub pełna nazwę tej wtyczki wp-mu, chciał bym przetestować.

      odpowiedz
  8. marsjaninzmarsa 4 lata temu:

    3 miesiące minęły i nadal nie ma drugiej części… doczekamy się kiedyś? :P

    odpowiedz
  9. Tomek S. 3 lata 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
  10. Krzysiek Borowy 3 lata temu:

    Kiedy druga część? Trochę nie ogarniam tematu:P

    odpowiedz
  11. Emi 3 lata temu:

    Szkoda, że nie ma dalszego ciągu…

    odpowiedz
  12. Grześ 1 rok temu:

    …obiecanki cacanki.

    odpowiedz

Dodaj własny komentarz

Odnośniki z innych stron

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

  1. 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. […]