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
Warning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 43
Warning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 43
Czyli wywołanie typu
odpowiedzsrc="<? 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().Warning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 60
Warning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 60
Nie jest to jakoś super błędne, ale zaleca się stosowanie bezpośrednich funkcji (faktycznie
bloginfo( 'template_url' )
wypisujeget_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…
odpowiedzWarning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 60
Warning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 60
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ę. :-)
odpowiedzWarning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 60
Warning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 60
W przypadku WP 90% wtyczek korzysta z jQuery więc raczej nie ma sensu pisanie czegokolwiek w czymś innym.
odpowiedzWarning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 43
Warning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 43
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.
odpowiedzWarning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 60
Warning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 60
Jasna sprawa, kolejna część to właśnie „rejestr, kolejka i obszar działania”. Dzięki za trafną sugestię i odnośnik do strony.
odpowiedzWarning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 43
Warning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 43
Kolejna ciekawa kwestia, czekam na wpis z jej zastosowaniem! (mam nadzieje, że będzie wykonalne dla mniej wtajemniczonych). Pozdrawiam
odpowiedzWarning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 60
Warning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 60
Dzięki Jakub! Ja też mam taką nadzieję :-).
odpowiedzWarning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 43
Warning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 43
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
odpowiedzWarning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 60
Warning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 60
Dzięki za motywację!
odpowiedzWarning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 43
Warning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 43
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!
odpowiedzWarning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 43
Warning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 43
Szymonie, usychamy z tęsknoty za kolejnymi częściami. Prawdę mówiąc to ja i mój projekt. Pozdrawiam
odpowiedzWarning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 60
Warning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 60
Dzięki Kuba za przypomnienie. Druga część powinna pojawić się w przyszłym tygodniu.
odpowiedzWarning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 43
Warning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 43
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?
odpowiedzDziękuję
Warning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 60
Warning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 60
Mógłbyś zamieścić tu swój kod?
odpowiedzWarning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 60
Warning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 60
Nie wiem czemu ale nie wkleił się w poprzednim wpisie kod, chodzi mi o:
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.
odpowiedzWarning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 60
Warning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 60
Nie wkleił się, bo WP domyślnie wycina taki kod jako obronę przed „HTML injection”…
Opisane jest to bardzo dokładne na Kodeksie. :)
odpowiedzWarning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 60
Warning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 60
A jest jakiś sposób by obejść i nie instalować niepotrzebnych pluginów? w tym przypadku Ultimate TinyMCE.
odpowiedzWarning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 60
Warning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 60
Ale co Ty chcesz właściwie osiągnąć, bo nie rozumiem?
odpowiedzWarning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 60
Warning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 60
Po prostu na stronie a nie we widgecie chciałem wkleić kod html ze stylem css (css zewnętrzny).
odpowiedzWarning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 60
Warning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 60
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.
odpowiedzWarning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 60
Warning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 60
Chodzi Ci o to że wpisując kod html to razem z nim podaję styl css a nie do zewnętrznego .css ?
odpowiedzCoś takiego -> http://jsfiddle.net/fTtUT/
Warning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 60
Warning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 60
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.
odpowiedzCoś takiego -> http://jsfiddle.net/QLRmN/
Warning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 60
Warning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 60
Aha, a dane stylu
odpowiedz———
.mojabardzofajnaklasa {
color: red;
}
———
dopisuję do głównego pliku style.css ?
O to chodziło?
Warning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 60
Warning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 60
Tak, tak najprościej.
odpowiedzWarning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 60
Warning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 60
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.
odpowiedzWarning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 60
Warning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 60
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. :)
odpowiedzWarning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 60
Warning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 60
Możesz podać link lub pełna nazwę tej wtyczki wp-mu, chciał bym przetestować.
odpowiedzWarning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 60
Warning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 60
https://codex.wordpress.org/Must_Use_Plugins
odpowiedzWarning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 43
Warning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 43
3 miesiące minęły i nadal nie ma drugiej części… doczekamy się kiedyś? :P
odpowiedzWarning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 43
Warning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 43
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ę.
odpowiedzWarning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 43
Warning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 43
Kiedy druga część? Trochę nie ogarniam tematu:P
odpowiedzWarning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 43
Warning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 43
Szkoda, że nie ma dalszego ciągu…
odpowiedzWarning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 43
Warning: Undefined variable $user_ID in /home/klient.dhosting.pl/wpn/wpninja.pl/public_html/wp-content/themes/wpninja/comments.php on line 43
…obiecanki cacanki.
odpowiedzDodaj własny komentarz