Wordpress: Modyfikacje kodu CSS

0:00Cześć! Witaj w kolejnej lekcji, w której zaczynamy dokładnie w tym miejscu, w którym skończyliśmy poprzednio.

0:04Wiesz już, jak wygląda anatomia WordPressa i teraz zajmijmy się tymi

0:08plikami HTML i CSS, konkretnie modyfikacją CSS motywu, która jest

0:12możliwa na poziomie edytora i dzięki temu będzie cały czas aktualna, nie będzie

0:16nadpisana przez nowe wersje motywu. To, co polecam Ci zrobić, aby odnaleźć właściwy fragment

0:20kodu, to kliknąć prawym przyciskiem w dowolnym miejscu lub na tym

0:24właściwym elemencie, który chcesz edytować. Prawy przycisk myszy i wybieramy polecenie Inspekcji

0:29w przeglądarce. Ja korzystam z narzędzi deweloperskich w przeglądarce

0:33Chrome, ale Ty możesz skorzystać z dowolnej innej przeglądarki. Wygląda

0:37to bardzo podobnie. Zwykle. I mamy taką sekcję, takie panele,

0:41które jeżeli jesteś tym trybie jeszcze z poprzednich lekcji, tym trybie Device,

0:46po prostu odkliknij się z niego. Mamy tutaj możliwość kliknięcia na tę

0:50małą ikonkę selekcji i zaznaczenia elementów. I możemy teraz jeździć sobie po

0:54naszej stronie - po najechaniu na konkretne elementy zostaną one podświetlone, po kliknięciu

0:58zostanie zaznaczony odpowiedni fragment kodu. W moim obecnym układzie - ten

1:02układ możesz sobie zmieniać tutaj, też inaczej dokować ten panel - generalnie w tym obecnym

1:06układzie mamy kod HTML, który jest wyświetlany tutaj, i kod

1:10CSS, który jest wyświetlany tutaj. HTML będzie to definicja tego,

1:15co znajduje się na naszej witrynie, że są to nagłówki, jakie treści są w środku. Natomiast

1:19CSS będzie definicją tego, jak one wyglądają, czyli jakie mają kolory,

1:23jaką mają grubość fonta, odstępy, marginesy, paddingi

1:27i tak dalej. Myślę, że każda osoba, która zajmuje się WordPressem, nawet w stopniu

1:31podstawowym, powinna opanować język HTML i CSS. T o jest bardzo proste

1:36i myślę, że pozwoli Ci w zdecydowanie inny sposób spojrzeć na

1:40to, jak możesz modyfikować i edytować motyw, z którego korzystasz. Okej. Kliknijmy

1:44teraz na pierwszym elemencie, na tytule. I zobaczmy, w jakim znajduje się on tagu. Jest to

1:49znacznik a, czyli po prostu link. Wyżej znajduje się coś takiego jak h1, który

1:53jest oznaczony klasą site-title, czyli to jest ten tytuł strony.

1:58Poniżej, pod tym nagłówkiem, mamy akapit, który jest oznaczony klasą site-description. Wygląda

2:02więc na to, że dwa te elementy, klasa site-title i site-description, to są

2:06właśnie te, na których chcemy operować. Teraz jak możemy te elementy ukryć z

2:11poziomu CSS? Możemy sprawdzić, czy przypisując do tego elementu odpowiednią

2:15instrukcję w CSS, czyli w tej sekcji element.style, jeśli na niej kliknę, zostanie

2:20ten element ukryty. Wybierzmy sobie polecenie display: none, które

2:24odpowiada po prostu w CSS-ie za ukrywanie elementów. I wygląda na to, że tytuł nam

2:28zniknął. To samo moglibyśmy zrobić dla akapitu, czyli dla

2:33description, czyli dać tutaj display: none. Z pomocą

2:37tabulatora po prostu zatwierdzam te podpowiedzi. No i to jest dokładnie to, czego

2:41potrzebujemy. Problem polega na tym, że style, które

2:45przypisaliśmy w tym momencie, są przypisane bezpośrednio do tego elementu HTLM, czyli

2:50bezpośrednio tutaj, w tym akapicie p, mamy dodane coś takiego

2:54jak style i display: none. Taka zmiana wymagałaby

2:58nie tyle modyfikacji, czyli dodania dodatkowego kodu CSS, co modyfikacji na

3:02poziomie HTML-a, żeby  dodać ten kolejny atrybut style i tutaj go wpisać. Więc

3:07zamiast tego, czyli zamiast element.style, my będziemy korzystali z

3:11odwołania do tej klasy. Bo klasa jest właśnie czymś, co pozwala wprowadzić modyfikacje nie do HTML-a, a

3:17do CSS-a. I w ten sposób właśnie odnieść

3:21się do elementu, tego elementu p. Czyli mamy tutaj klasę site-description,

3:25możemy ją skopiować. I ja teraz ukryłem

3:30sobie tę regułę display: none, czyli po prostu ją odkliknąłem i znów mój opis jest

3:34widoczny. Ale mogę przejść do kodu CSS i mogę użyć odniesienia

3:38tej referencji do tej klasy CSS site-description, czyli wpisać ją tutaj. Natomiast

3:43referencja do klasy musi być poprzedzona kropką. Czyli stawiamy kropkę

3:47bez żadnych spacji tutaj i odnosimy się do site-description, a następnie

3:51otwieramy nawias klamrowy. On automatycznie zostanie domknięty przez WordPressa. Wchodzimy

3:55do środka Enterem i tutaj możemy dokonać blok instrukcji. Podobnie jak

3:59jest tutaj - otwarcie i domknięcie nawiasu klamrowego i potrzebujemy tutaj wpisać display: none. Nawet

4:06WordPress nam podpowiada te reguły, więc możesz sobie przeglądać

4:11te listy. Zobacz, że te zmiany są też na bieżąco wykonywane i podgląd

4:15mamy od razu widoczny. Udało nam się z powodzeniem ukryć ten element. To samo zrobimy tutaj. Ukryję

4:21ten element style, który dodałem w CSS-ie i po prostu zrobię to z pomocą klasy. Klasa

4:26tym przypadku to site-title. Kopiujemy sobie tę klasę. Stawiamy kropkę,

4:30żeby się odnieść do klasy, znów nawiasy klamrowe, wchodzimy do środka i możemy

4:34skopiować i wkleić po prostu tę linię drugą, czyli fragment, który nam ukryje również tytuł. I to

4:39wszystko. Te zmiany do CSS-a zostały automatycznie zastosowane. Mogę zamknąć sobie już na

4:43moment konsolę. Co ważne, zmiany, które wprowadzisz w tym dodatkowym CSS-ie, będą

4:47zawsze priorytetowe, będą zawsze znajdowały zastosowanie, nawet kiedy będą

4:51w konflikcie z tymi CSS-ami, które domyślnie były w szablonie. Tutaj

4:56to, co wpiszesz, powinno zwykle zadziałać. Możemy teraz to opublikować. Mamy

5:00jeszcze do dyspozycji taki mały trybik tutaj, czyli możemy od razu nie opublikować

5:04tego, ale na przykład zaplanować publikację o konkretnej godzinie albo

5:08zapisać to jako szkic. Możemy alternatywnie też porzucić zmiany. Ja zapiszę

5:12to jako szkic, czyli nie będę jeszcze wdrażał tych zmian do konkretnego szablonu

5:16dla odwiedzających, ale są one już zapisane. I teraz chciałbym pokazać Ci jeszcze

5:20jedną rzecz. Mówiłem Ci i pokazywałem przy okazji wpisów, przejdźmy do sekcji Wszystkie wpisy

5:24i do edycji Domowej Granoli, że znajduje się tutaj coś takiego, co umożliwi

5:29nam modyfikację czy dodanie czegoś do kogo HTML lub CSS. Przykładowo

5:33jeżeli zaznaczyłbym tę sekcję z nagłówkiem Sposób przygotowania,

5:37mogę przejść do sekcji Blok i opcji zaawansowanych. I mam tutaj dwie

5:41możliwości. Pierwsza to Kotwica HTML. Jeżeli dodamy tutaj kotwicę

5:46i wpiszemy na przykład w niej "przygotowanie", zatwierdzimy tę

5:50zmianę. To teraz przykładowo możemy z tego

5:54miejsca, z dowolnego miejsca w innej części tej samej strony możemy utworzyć sobie

5:58link. Wybiorę polecenie Cmd czy Ctrl+K i to, co muszę podać w tym linku, to

6:03jest specyficzny znak, czyli hashtag. Znajduje się on nad trójką, czyli Shift+3,

6:07i teraz wpisać nazwę tej kotwicy, czyli "przygotowanie".

6:12Jeżeli tak to zrobię i zatwierdzę ten link, to teraz, po

6:16zaktualizowaniu tego wpisu, wybiorę opcję Podejrzyj, będę

6:20mógł kliknąć na ten link dlatego właśnie i zostanę przeniesiony automatycznie

6:25na tą część strony, do której prowadzi kotwica. Czyli kotwica będzie jak gdyby w

6:29tym momencie przypięta na górze. W ten sposób działają kotwice w HTML-u, ale nie

6:33są one dostępne dla wszystkich bloków. Jeśli przykładowo zaznaczę ten blok z galerią i przejdę do opcji

6:37zaawansowanych, mam tutaj tylko możliwość dodania dodatkowej klasy CSS. Jeśli zaznaczę

6:41blok z tekstem - to samo. Czyli jak widzisz, dla nagłówków można dodać kotwice, a dla

6:46tekstu mamy tylko na przykład opcję dodatkowe klasy CSS. Co

6:50to znaczy, że możemy dodać tutaj dodatkową klasę CSS? To znaczy, że

6:54tylko i wyłącznie do tego bloku możemy dopisać jakąś dedykowaną klasę,

6:58z pomocą której będziemy mogli zaraz ostylować ten fragment. No właśnie. Na

7:02przykład dodam tutaj klasę fragment - ten fragment tekstu - i zatwierdzę. Ta

7:07klasa została dodana wyłącznie do tego fragmentu tekstu. Nawet jeśli gdzieś poniżej

7:11też mam blok tekstowy, to w sekcji Zaawansowane nie mam już tej klasy. Czyli będę

7:15mógł z pomocą tej klasy sformatować tylko i wyłącznie ten jeden konkretny blok. Więc przenieśmy

7:20się teraz znów do sekcji Wyglądu i przejdźmy do opcji Dostosuj. Muszę

7:25jeszcze zaktualizować wpis. Wygląd > Dostosuj. Przejdźmy

7:29na stronę tego wpisu Domowa Granola i teraz przejdziemy

7:33sobie do dodatkowego kodu CSS. Znów s korzystałem z nazwy klasy, a więc

7:37po kropce mogę wpisać jej nazwę, czyli fragment. I tutaj może znaleźć się kod

7:41CSS odpowiedzialny za formatowanie tego fragmentu. Popularne rzeczy, z

7:45których być może będziesz chciał skorzystać, to na przykład kolor. I możesz tutaj podać

7:49kolor, na przykład wpisując nazwę red, czyli czerwony. I zobacz, że ten

7:53tekst został pokolorowany na czerwono. Mogę też użyć font i wybrać

7:58na przykład font-weight i sformatować to tak, żeby był ten tekst

8:02pogrubiony na przykład - bold. Mogę też wybrać opcję font-size,

8:07jeżeli chciałbym zmienić rozmiar tego jednego akapitu tekstu, mogę tutaj

8:11wpisać rozmiar tekstu, na przykład w pikselach, powiedzmy 24 piksele. Jeśli

8:16uznam, że ten tekst jest za duży, mogę wrócić na przykład do 20 pikseli i mieć ten tekst pogrubiony. Także

8:21te zmiany już znalazły tutaj zastosowanie. To, co jest istotne, to te zmiany

8:25są zastosowane wyłącznie do tego jednego fragmentu, czyli do jednego bloku. Gdybym

8:29stworzył nowy wpis, to nawet jakbym dodał kolejny blok tekstowy,

8:33te zmiany nie są do niego stosowane. Czyli w ten sposób możemy indywidualnie wskazać

8:39konkretny blok w konkretnej stronie czy wpisie i w jakiś sposób go sformatować.

8:43Jeżeli jednak chcielibyśmy, żeby zmiany zostały zastosowane globalnie,

8:47do wszystkich bloków tekstu albo na przykład do wszystkich tytułów, to musielibyśmy

8:51już skorzystać z tych narzędzi inspekcji. Klikam prawym przyciskiem myszy na tym

8:55nagłówku Domowa Granola i patrzę, jak on tutaj wygląda. I jest to nagłówek h2,

9:00ogólnie jest to taki element header, który ma jakąś

9:04klasę, i ma przypisane jakieś style CSS. Następnie mamy entry-title,

9:10czyli właśnie ten nagłówek h2. Skopiuję nazwę tej klasy, a następnie odniosę się

9:14do niej w CSS-ie - po kropce oczywiście - i w środku sformatuję ją w

9:18taki sposób, że zmienię jej tło, czyli background, na kolor żółty - yellow. Problem

9:22polega tym, że chciałbym, żeby ten kolor,

9:27to tło, pojawiły się wyłącznie jako takie częściowe podkreślenie tego elementu,

9:31a nie na cały ten element h2. Być może mógłbym zaadresować w

9:35takim razie sam ten znacznik a w jakiś sposób? No,

9:40ale niestety tutaj, w tym znaczniku a, nie mamy żadnej przypisanej klasy. Moglibyśmy

9:44ogólnie odnieść się już w tym momencie bez kropki do wszystkich znaczników a, no i to

9:49poniekąd trochę działa, ale zobacz, że formatuje nam to ogólnie wszystkie

9:53linki na stronie. Bo a to właśnie jest odniesienie do linku, więc

9:57wszystkie elementy dostały teraz to żółte tło. Czyli będziemy musieli

10:01skorzystać z trochę innej opcji. I w zasadzie to, co byłoby

10:05tutaj konieczne, to dodanie czegoś w HTML-u. Jak możemy

10:09dodać coś w HTML-u tutaj - jak sama nazwa wskazuje, jest to sam CSS,

10:14więc nie będziemy mogli żadnego bloku dodać do HTML-a. Moglibyśmy wejść do

10:18pliku single.php, tam gdzie jest generowany ten cały dokument HTML dla

10:22pojedynczego wpisu. Tam znaleźlibyśmy te nagłówki header, h2

10:26i moglibyśmy tutaj wpisać jakiś dowolny element HTML, na przykład nowy

10:31nagłówek albo jakiś div, albo sekcję, albo element span, który byśmy mogli sformatować. Ale

10:36to wymagałoby zmiany tego core pliku szablonu - tak, żeby dodać ten HTML. Istnieje

10:41jeszcze jeden sposób, który chcę Ci przedstawić jako taka wskazówka, że

10:45gdybyś chciał coś dodać z poziomu CSS-a do HTML-a, jest to tak naprawdę możliwe. Skorzystam

10:52znów z tej klasy entry-title po to, żeby zaadresować ten element, a następnie

10:56skorzystam z czegoś takiego jak pseudoklasa, czyli po dwukropku, bez żadnych spacji

11:00znów, wpiszę sobie tutaj albo before, albo after. Mogę

11:05skorzystać z after po to, żeby po tej klasie entry-title,

11:09czyli po tym nagłówku dodać coś

11:13do HTML-a, dodać pewien element do HTML-a i teraz ten

11:17element mogę ostylować. Będę potrzebował pewnych podstawowych

11:22rzeczy, które tutaj muszą się znaleźć, czyli muszę wpisać coś takiego jak

11:26content, czyli jaka treść ma się znaleźć w HTML-u. W tym

11:30przypadku zostały po prostu puste cudzysłowy. Zobacz, że pojawiła

11:34ta pseudoklasa after w tym miejscu. Jeżeli bym coś wpisał, to zobacz, że ja

11:38jestem w stanie dodać do HTML-a po prostu jako ta pseudoklasa, z pomocą tej pseudoklasy,

11:44dodatkową treść, dodatkowy tekst. Ale ja nie chcę tutaj nic dodawać, jeśli

11:48chodzi o tekst, więc zostawię te cudzysłowy puste, ale musi się tutaj to znaleźć. Następnie

11:53będę musiał nadać temu rozmiary, czyli wybiorę

11:57sobie wysokość tego elementu, na przykład 200 pikseli - a, to będzie za dużo -

12:0120 pikseli i szerokość tego elementu, czyli width wybierzemy

12:05na przykład na 200 pikseli. Teraz będę chciał

12:09sformatować tło jako ten kolor żółty, czyli background wybiorę

12:13jako yellow. Problem polega na tym, że ten element nie jest jeszcze widoczny, dlatego

12:18że jest on elementem liniowym. Tak jak domyślnie jest to tekst w HTML-u.

12:22Jeżeli tego nie rozumiesz, to po prostu zapamiętaj, że należy tutaj dodać jeszcze

12:27taką właściwość jak display i ustawić jej wartość na block. Wtedy

12:32będziemy mogli z powodzeniem formatować to zgodnie z wysokością

12:36i szerokością, którą sobie założymy, ale musimy mieć ten display: block. No i te wszystkie

12:40elementy są konieczne do tego, żeby stworzyć takie przykładowe podkreślenie. T o,

12:44co będę jeszcze chciał zrobić, to umieścić je we właściwym miejscu i dodać mu w związku

12:49z tym margines. Będę chciał dać margines od góry, ale nie

12:53będę chciał tego jeszcze bardziej od góry odsuwać, na przykład na 20 pikseli, a raczej będę chciał

12:57użyć marginesu negatywnego, żeby to wciąć bardziej w tekst. Jeżeli wybiorę

13:01teraz -20 pikseli, to zobacz, że zaczyna to wyglądać dokładnie

13:06tak, jak sobie założyłem. Po każdej właściwości CSS będziemy

13:10chcieli mieć tutaj po jej wartości średnik. I w zasadzie

13:14można powiedzieć, że moja praca jest skończona. Pokazałem Ci parę bardzo istotnych elementów.

13:18Wiesz już, jak możesz modyfikować jeden konkretny element, któremu

13:22możesz nadać klasę podczas tworzenia wpisu. Wiesz też, jak formatować wszystkie

13:26takie same elementy na stronie z pomocą klas CSS, które wydłubiesz

13:30tutaj z opcji inspekcji, a następnie dopisać je jako dodatkowy CSS. Jeśli

13:36chodzi o ten fragment, wydaje mi się że ma on jeszcze zbyt dużą interlinię. Więc podam Ci

13:40jeszcze jedną wskazówkę odnośnie jednej reguły CSS. Jest

13:44to line-height, czyli wysokość linii. Oryginalnie ta wysokość była ustawiona na

13:48około moim zdaniem 1.8 czy 1.9, a ja chcę ją troszeczkę zmniejszyć

13:53i ustawić tutaj na przykład 1.7 lub 1.6. Wydaje mi

13:57się, że nadal jest to dobrze czytelne i udało nam się troszeczkę miejsca

14:01oszczędzić, trochę tę interlinię zmniejszyć. I teraz możemy już zamiast zapisywać szkic

14:05po prostu opublikować taki wpis. Wybieram polecenie Opublikuj. W ten sposób wszystkie

14:10te zmiany już są widoczne na moim blogu. Na teraz to wszystko. Do

14:14usłyszenia w kolejnej lekcji!