4. Jak dodać style i skrypty

---

Dodano 2016-12-01 16:35:59 przez Daniel

---

Wstęp

W poprzednich trzech częściach stworzyliśmy elementy stałe dla każdej strony, jednakże do tej pory nie wygląda to zbyt konkretnie. Teraz nadszedł czas aby dodać własne arkusze stylów określające wygląd poszczególnych elementów strony oraz skrypty JavaScript dzięki którym można nieco pobudzić naszą stronę i wywołać dowolne zachowanie elementów.

Zasada dodawania stylów i skryptów jest taka sama i całkiem analogiczna jak w przypadku rejestracji sidebara w poprzedniej części kursu. Tym razem także stworzymy funkcję, w której zawrzemy inne funkcje odpowiedzialne za konkretne czynności, oraz którą następnie podepniemy pod odpowiedni Zaczep.

Podczepiamy funkcję

Na początek powtórzmy analogię z poprzedniej części. Tworzymy własną funkcję o indywidualnej nazwie (w tym przypadku będzie to zwp_add_scripts_and_styles()), którą następnie zaczepiamy pod hak odpowiedzialny za ładowanie skryptów i styli. Ogólnie do obu tych czynności służy jeden zaczep i jest to wp_enqueue_scripts . 

 

function zwp_add_scripts_and_styles() {
    //Tutaj dodajemy nasze skrypty i style
}
add_action( 'wp_enqueue_scripts', 'zwp_add_scripts_and_styles' );

Teraz możemy utworzyć nowy katalog w lokalizacji szablonu o nazwie js, który będzie zawierał skrypty javascript. Jeśli planujemy większą ilość plików ze stylami możemy utworzyć dodatkowy katalog o nazwie css.

Załączamy style

Kolejnym krokiem będzie podczepienie arkuszy stylów określających wygląd elementów. W tym celu wykorzystujemy funkcję

wp_enqueue_style( 'nasza-nazwa', get_stylesheet_uri() );

Funkcja ta pobiera kilka argumentów, z których najważniejsze są dwa pierwsze. Pierwszy to nasza indywidualna nazwa stylu a druga to ścieżka do pliku ze stylami. W tym przypadku została wykorzystana funkcja get_stylesheet_uri(), która zwraca lokalizację głównego pliku o nazwie style.css, który stworzyliśmy na początku.

Jeśli chcemy umieścić dodatkowe pliki możemy wykorzystać funkcję

get_template_directory_uri()

Która zwraca lokalizację naszego szablonu. Dla przykładu utworzymy sobie dodatkowy plik w katalogu css dodamy do naszego szablonu.

 

function zwp_add_scripts_and_styles() {
    wp_enqueue_style( 'zwp-first-css', get_stylesheet_uri() );
    wp_enqueue_style( 'zwp-second-css', get_template_directory_uri() . '/css/second.css');
}

Teraz aby przetestować działanie naszego kodu dodamy trochę kodu css do plików style.css w katalogu głównym i second.css w nowo utworzonym katalogu css.

W pliku style.css zawierającym główne style wyśrodkujemy zawartość całej strony.  W tym celu umieszczamy kod:

body {
    text-align: center;
}

Następnie w pliku dodatkowym css/second.css zmienimy kolor tła całej strony na srebrny (silver). W tym celu należy umieścić w tym pliku następujący kod:

body {
    background-color: silver;
}

Jako końcowy efekt powinniśmy uzyskać stronę z wyśrodkowaną treścią i zmienionym kolorem. Wprawdzie nie wygląda to najlepiej ale oznacza że wszystko działa w porządku. Efekt na obrazku poniżej.

Dodajemy skrypty

Teraz skoro już wiemy jak dodać style ze skryptami także powinno pójść łatwo ponieważ istnieje tu pewna analogia. Ogólnie skrypty ładujemy przeważnie w tej samej funkcji.

Do dodania skryptu JavaScript wykorzystujemy funkcję
wp_enqueue_script( string $handle, string $src = ”, array $deps = array(), string|bool|null $ver = false, bool $in_footer = false )

Jak widać pobiera ona pięć argumentów, z których obowiązkowy jest tylko pierwszy gdzie podajemy nazwę skryptu, ale aby nasz kod działał podana nazwa musi być wcześniej zarejestrowana. WordPress udostępnia wiele takich nazw, z których zapewne „jquery” okaże się najbardziej przydatna. Jednakże ponieważ WordPress udostępnia w tym miejscu tyle możliwości że można by napisać z tego książkę to w tym miejscu skupimy się na dodaniu własnego skryptu.

W przypadku dodawania własnego skryptu najbardziej interesuje nas drugi parametr $src , gdzie podajemy lokalizację pliku. W tym przypadku okazuje się przydatna wcześniej wykorzystana funkcja do dodania własnego pliku stylów czyli get_template_directory_uri(), kolejne zmienne może są mniej istotne. $deps opcjonalnie może pobrać nazwy skryptów, które mają zostać załadowane z bieżącym, $ver określa wersję. bardziej istotny może się okazać parametr $in_footer który wskazuje na to gdzie skrypt ma być dołączony, na początku czy na końcu dokumentu. Ogólnie jak mamy okazję to $in_footer ustawiamy na TRUE i umieszczamy skrypty na końcu, wtedy najpierw wczytuje się strona a na końcu skrypty a nie odwrotnie, co może wpłynąć pozytywnie na działanie.

Teraz do naszej funkcji dołączmy jedną linijkę:

 

function zwp_add_scripts_and_styles() {
    wp_enqueue_style( 'zwp-first-css', get_stylesheet_uri() );
    wp_enqueue_style( 'zwp-second-css', get_template_directory_uri() . '/css/second.css');
    wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/script.js', array(), '1.0.0', true );
}

Zaś do naszego pliku js/script.js dodajemy niezwykle prosty kawałek kodu wykorzystywany najczęściej przy wyszukiwaniu błędów w skryptach.

 

console.log("zwp test");

Teraz aby sprawdzić działanie naszego skryptu otwieramy konsolę JavaScript w przeglądarce. W większości przeglądarek wygląda to podobnie a najprościej jest nacisnąć kombinację klawiszy ctrl + shift + I lub po prostu myszką na stronie prawym i zbadaj. Wtedy powinny się pojawić narzędzia programistyczne, z zakładkami. Z zakładek wybieramy Console. Jeśli wynik wygląda podobnie jak na obrazku poniżej oznacza to że wszystko jest ok i poprawnie dołączyliśmy nasz plik.

No i to tyle z dzisiejszej części. Stan szablonu po tej części można pobrać zwp4