Wczytywanie plików CSS i JS
autor: Robert
22 października 2014
Zacznę od opisu chyba najważniejszego pliku, który znajduje się w folderze naszego motywu. Jest to plik „functions.php”, który pozwala na dodawanie do naszej strony wbudowanych funkcji WordPressowych, wczytywanie zewnętrznych styli CSS i skryptów JS, aktywowanie menu czy miniatur postów, uruchamianie filtrów itp. Plik ten jest wykonywany tylko dla danego motywu i tylko jeśli dany motyw jest włączony.
Ładowanie stylów i plików JS
Gdy tworzymy stronę internetową opartą o sam HTML to style CSS importujemy w sekcji <head> naszej strony a pliki JS w zależności od potrzeby albo również w nagłówku albo przed zamknięciem sekcji <body>.
W WordPressie takie działanie jest niezalecane i zostały stworzone do tego odpowiednie funkcje wp_enqueue_style oraz wp_enqueue_script.
Stworzymy sobie funkcję, która będzie nam importować wszystkie potrzebne pliki oraz łatwo będziemy mogli dodać kolejny arkusz stylów czy bibliotekę JavaScript.
Zaczniemy od stworzenia sobie funkcji load_styles_and_scripts() { ... } i wewnątrz umieścimy „hooki” WordPressowe umożliwiające import plików CSS i JS do naszego motywu
Style CSS możemy importować na 2 sposoby: z serwerów zewnętrznych lub z z katalogu na naszym serwerze.
Importowanie pliku CSS z zewnętrznego serwera
Dokonujemy tego poprzez funkcję wp_enqueue_style( $handle, $src ); gdzie $handle to przyjazna dla nas nazwa identyfikatora (np. style-bootstrap) a $src to ścieżka do zewnętrznego arkusza stylów np 'http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css'
Importowanie pliku CSS z katalogu na naszym serwerze
Tutaj zasada jest bardzo podobna, znów korzystamy z wp_enqueue_style( $handle, $src ); gdzie $handle to przyjazna dla nas nazwa identyfikatora (np. style-motywu). Pewna modyfikacja dotyczy $src. Najpierw wpisujemy get_template_directory_uri(), funkcja ta zwróci nam ścieżkę do folderu naszej templatki czyli np http://wordpress.kursbootstrap.pl/wp-content/themes/kursbootstrap-v2, następnie korzystamy z „łącznika” czyli kropki . , która w PHP służy do łączenia zmiennych tekstowych a na koniec dopisujemy nazwę naszego głównego arkusza stylów czyli '/style.css'.
Oczywiście możemy mieć więcej plików CSS. Możemy stworzyć sobie w katalogu naszej skórki folder o nazwie css i umieścić w nim plik. Wtedy zamiast '/style.css' wpiszemy '/css/inny.css'
Pliki JS możemy importować na 2 sposoby: z serwerów zewnętrznych lub z z katalogu na naszym serwerze. Możemy też zadecydować czy pliki mają się importować w sekcji head lub na końcu body.
Importowanie pliku JS z zewnętrznego serwera
Import plików czy bibliotek JS wykonujemy za pomocą wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ); gdzie:
- $handle – nasza przyjazna nazwa identyfikatora (np. bootstrap-js)
- $src – jak w przypadku CSS, podajmy ścieżkę do zewnętrznego serwera (np
'http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js') - $deps – zależności (póki co nie interesuje nas ten parametr, wpisujemy
'false') - $ver – wpisujemy wersję naszej biblioteki czy pliku (np 3.2.0)
- $in_footer – może przyjąć 2 wartości ‚true|false’ w zależności od tego czy chcemy by skrypt ładował się przed zamknięciem body lub w sekcji head.
Importowanie pliku JS z katalogu na naszym serwerze
Podobnie jak w przypadku innych stylów CSS dobrze zrobić sobie oddzielny katalog w katalogu naszego motywu. Unikniemy dzięki temu zamieszania w głównych plikach templatki i zawsze będziemy wiedzieli gdzie są nasze skrypty. Ustalmy więc, że stworzyliśmy sobie katalog /js
Import plików czy bibliotek JS wykonujemy za pomocą wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ); gdzie:
- $handle – nasza przyjazna nazwa identyfikatora (np. skrypty-motywu)
- $src – jak w przypadku importu CSS z naszego katalogu. Najpierw wpisujemy
get_template_directory_uri(), funkcja ta zwróci nam ścieżkę do folderu naszej templatki czyli nphttp://wordpress.kursbootstrap.pl/wp-content/themes/kursbootstrap-v2, następnie korzystamy z „łącznika” czyli kropki., która w PHP służy do łączenia zmiennych tekstowych a na koniec dopisujemy nazwę naszego pliku ze skryptem JS czyli'/js/moj-skrypt.js'. - $deps – zależności (póki co nie interesuje nas ten parametr, wpisujemy
'false') - $ver – wpisujemy wersję naszej biblioteki czy pliku (np 1.0)
- $in_footer – może przyjąć 2 wartości ‚true|false’ w zależności od tego czy chcemy by skrypt ładował się przed zamknięciem body lub w sekcji head.
Na koniec zamykamy naszą funkcję load_styles_and_scripts() i dopisujemy kolejną linijkę, która uruchomi naszą funkcję. Ma ona postać add_action('wp_enqueue_scripts', 'load_styles_and_scripts'); gdzie ‚load_styles_and_scripts’ jak już pewnie zauważyliście to nazwa naszej funkcji importującej style i skrypty.
Dzięki temu zabiegowi nasz motyw zawsze wczyta sobie przeznaczone dla niego arkusze stylów i skrypty JS.
Przejdź do przykładowej stronyKomentarze: 3 komentarze
Robert 22 grudnia 2014 o 09:02
Kod wklejałem z szablonu i tam on działa więc zapewne albo nie wkleiłeś nawiasu klamrowego zamykającego funkcję, albo średnika po add_action. Konsola w przeglądarce służy do wyświetlania błędów JavaScriptu a nie PHP, aby wyświetlić błędy PHP wklej w pliku wp-config.php linijkę define( 'WP_DEBUG', true );. Daj znać czy pomogło i pokazało Ci gdzie jest błąd:)
