Wordpress: Zaawansowana Edycja CSS

0:00Cześć! Witaj w kolejnej lekcji! Nasz blog jest prosty i czysty, ale no nie prezentuje się

0:04zbyt atrakcyjnie, jeśli chodzi o stronę główną. Po prostu znajduje się na niej jakiś pierwszy wpis

0:08i menu, więc chciałbym to zmienić. Chciałbym stworzyć nową stronę,

0:13która będzie statyczną stroną główną dla mojego bloga. Wybieram polecenie Strony,

0:17a następnie Dodaj nową. I nadam jej tytuł, który będzie

0:21po prostu sprowadzał się do tego, że przywitamy się z kimś, kto odwiedzi naszego bloga -

0:25Witaj na moim blogu! Możemy dodać tutaj jakąś machającą

0:30łapkę, a następnie wkleję w kolejnym bloku - mamy powitanie na blogu. Teraz

0:34jeszcze dodam tutaj obrazek. Wybieram obrazek i zanim go wrzucę, muszę ten

0:39obrazek znaleźć. Przechodzę na Pexels. I wpiszę po prostu frazę food.

0:43Zobaczymy, co się znajdzie ciekawego. No i fajnie. Pierwszy

0:47lepszy obrazek, który mi w miarę pasuje. Pobieram ten obrazek z pomocą opcji Free Download

0:52i teraz przechodzę do Figmy, a następnie po prostu z Eksploratora

0:56Windows upuszczam go do Figmy. Za chwilę zostanie tutaj załadowany. Jak

1:00widzisz, ma on dość duże rozmiary, ale możemy zawsze zmniejszyć tutaj widok, a następnie

1:05go przyciąć. Zaznaczam ten obrazek. I opcje przycinania w Figmie znajdują się tutaj. Znów

1:10pokazuję Ci Figmę, bo jest naprawdę super szybka, super łatwo można te opcje

1:14dostosować. Chciałbym przyciąć ten obrazek w taki dość nietypowy sposób,

1:18czyli zrobię to, o, właśnie tak. Teraz z pomocą Entera

1:23mogę zatwierdzić zmiany. A przy okazji, jak byłem w opcjach przycinania, zobacz, że

1:27możemy ten obrazek jeszcze dostosować w Figmie, na przykład zmienić jego nasycenie, saturację,

1:31ewentualnie dopasować kontrast, ekspozycję, czyli rozjaśnić go lub przyciemnić i

1:35jeszcze kilka dodatkowych opcji. Więc takie podstawowe przynajmniej ustawienia

1:40obrazów będziemy mogli spokojnie tutaj zrobić. Teraz chciałbym wyeksportować

1:44ten obraz, czyli wybieram plus, eksportuję go i tutaj

1:48już niestety SVG mi nie pomoże, dlatego że ten obraz jest

1:52bitmapą - sam w sobie jest zdjęciem zrobionym przez aparat, więc muszę wybrać albo PNG, albo

1:56JPG. Wybieram JPG, zapisuję i wracam do WordPressa. Teraz

2:00wybieram Bibliotekę mediów, następnie Dodaj pliki. Ten obrazek ma bardzo

2:05dużą rozdzielczość i duży rozmiar, ale już wcześniej pokazywałem Ci, jak optymalizować obrazy,

2:09więc teraz powinieneś wcześniej to zrobić. A ja po prostu wybieram go i wstawiam

2:13do tej strony. Teraz spróbujmy tą stronę opublikować. Wybieram

2:17polecenie Opublikuj. I mając taką stronę, przejdę do sekcji Wyglądu > Dostosuj,

2:21a następnie znów przejdę do opcji Ustawienia strony głównej i zmienię

2:26tą stronę główną na stateczną witrynę. Wybiorę ją na Witaj na moim blogu! Wybierzmy

2:31ustawienie Opublikuj. W tym momencie strona główna jest już statyczna. Mamy

2:37Witaj na moim blogu!, a pod spodem pojawiają się widgety. No

2:41właśnie. Nie chcielibyśmy tutaj mieć widgetów. Chcielibyśmy, żeby widgety pojawiały się

2:46wyłącznie we wpisach. Jak w związku z tym można je selektywnie wyłączyć? Ustawienia widgetów

2:51w naszym szablonie nie dają mam takiej możliwości. Możemy po prostu dostosować

2:55ustawienia widgetów w stopce, ale stopka sama w sobie wyświetla się

3:00na każdej naszej i stronie, i wpisie. W związku z tym,

3:04gdybyśmy teraz przeszli do edycji do edytora wyglądu,

3:09moglibyśmy zobaczyć, jak to wygląda. Możemy podejrzeć sobie stopkę,

3:13możemy z niej to usunąć. Możemy też w ogóle nie wyświetlać stopki na

3:17stronach - Pojedyncza strona, czyli na page.php. I wtedy

3:21była ona by dostępna na wpisach, ale na żadnej stronie nie byłaby wyświetlana. W naszym

3:26przypadku chcemy się pozbyć tego elementu, ale selektywnie - tylko dla tej strony

3:30głównej. Dlatego będziemy musieli skorzystać z wtyczki. Wybieram polecenie Dodaj

3:34nową. Szukam wtyczki, która nazywa się Widget Context. Ta

3:39wtyczka pozwoli Ci selektywnie właśnie włączyć czy wyłączyć

3:43widgety w różnych obszarach, w różnych miejscach Twojej strony. Przechodzę

3:47znów do sekcji Wygląd i albo do Widgety, albo do Dostosuj. Będzie to to samo, ponieważ stąd, z

3:52sekcji Dostosuj, tak czy inaczej przejdę do Widgetów > widgetów w stopce i

3:56będę mógł wyedytować właściwości każdego z tych widgetów z  pomocą

4:01dodatkowej opcji Widget Context. Domyślnie mamy Show widget everywhere. Pokazywany

4:05jest ten widget wszędzie, ale możemy go pokazywać tylko na wybranych miejscach, ewentualnie

4:09ukryć w wybranych miejscach lub też ukryć wszędzie. Chcemy go ukryć w

4:13wybranych miejscach. Tutaj mamy do dyspozycji nawet takie opcje jak targetowanie

4:17po konkretnym URL-u strony albo - jeśli ma więcej słów dany

4:21wpis, przykładowo niż x, to nie będziemy go wyświetlać - ale dla nas najprostsza będzie opcja Global, gdzie

4:26możemy ukryć ją na przykład na wszystkich stronach albo tylko na stronie głównej. Czyli ukrywamy

4:30ten widget na stronie głównej i to powinno nam wystarczyć. Teraz mogę

4:34zwinąć opcje tego pierwszego widgetu. Jeśli chodzi o drugi, zrobimy to samo - Hide

4:39on front page. I jeżeli chodzi o trzeci, powtórzymy tę operację

4:44Ukryj na stronie głównej/front page. Teraz publikuję te

4:48zmiany i proszę, nie sugeruj się podglądem tutaj, ponieważ dalej się tutaj wyświetlają

4:52te widgety, ale jeśli wejdziesz na stronę i odświeżysz ją, zobaczysz,

4:57że są one teraz niedostępne. Natomiast gdybyśmy przeszli do sekcji Inspiracje

5:01i przykładowo zobaczyli, czy tu są dostępne - są na stronach kategorii, czyli

5:05na archiwach. Możemy też je stąd wyłączyć selektywnie i też gdy

5:09przejdziemy do wpisu, również są na samym dole dostępne. Po odświeżeniu i powrocie

5:14do sekcji Personalizacji, jak widzisz, już te zmiany są zastosowane. I są

5:18wyszarzone również widgety, które na danej stronie, którą oglądamy, są w tym momencie nieaktywne.

5:23Przenieśmy się raz jeszcze do sekcji Dodatkowy CSS. I teraz chciałbym pokazać Ci kilka

5:27prostych cssowych trików. Znów nie musisz tutaj znać

5:31wszystkich właściwości i poleceń CSS. Bardziej chcę, żebyś zobaczył to jako pewną inspirację

5:35do tego, co można zrobić, jako pewne demo. Ale też nie traktuj tego aż

5:39tak bardzo poważnie jako część kursu, ponieważ tak naprawdę gdybyśmy

5:43robili ten szablon sami, chcieli aż tak mocno go modyfikować, prawdopodobnie

5:48trzeba było zrobić osobny motyw. To, co będę robił, to jedynie jak gdyby nadpisywanie

5:52tego, co już istnieje, więc nie jest to być może taka najlepsza i bardziej

5:56poprawne semantycznie metoda. To, co będziesz czasem chciał zrobić, to

6:00dostosować konkretny element na właściwej, pojedynczej stronie. Jeśli

6:04zerkniemy przykładowo na logo i to, jak prezentuje się ono wewnątrz szablonu,

6:08to mamy ogólne style, które nadpisaliśmy dla logo, co spowoduje

6:12jego wyświetlanie na środku w każdym miejscu w naszym motywie. Gdybyśmy

6:16jednak chcieli zastosować te zmiany tylko do strony głównej, to

6:21możemy poszukać w kodzie HTML czegoś takiego, co pozwoli nam stworzyć

6:25tę regułę bardziej specyficzną - ten selektor konkretnie cssowy

6:29bardziej specyficzny - tak aby zaadresował tylko stronę główną, a nie logo wszędzie.

6:33No i taka możliwość jest w WordPressie. W większości

6:37motywów mamy coś takiego jak body class, czyli na nadrzędnym elemencie

6:42jest taka klasa, która oznacza, że ona jest tutaj na przykład home - że to jest strona

6:46główna. I możemy skorzystać z tej klasy, czyli możemy skorzystać z klasy home,

6:50tak naprawdę zapisując tutaj body.home, tym razem bez spacji,

6:54a następnie przenosząc się bezpośrednio do moje-logo w

6:59ten sposób. I te właściwości, które chcemy nadpisać tylko

7:04i wyłącznie dla strony głównej, powinny się znaleźć tutaj. Czyli przykładowo jeżeli chcielibyśmy

7:08zmienić margines z prawej strony z auto na, przykładowo, 100 pikseli, ale

7:12tylko dla strony głównej, możemy zrobić następujący wpis i jak widzisz,

7:16to zadziałało. Teraz szybko sobie to publikujemy. Patrzymy, jak to

7:21wygląda. Na stronie głównej mamy logo po prawej stronie, ale na stronach archiwów

7:25czy wpisów dalej jest na środku. Okej. To już wiemy, jak to zrobić. Teraz spróbujmy

7:29się zająć tym obrazkiem. Prawy przycisk myszy, opcje inspekcji i sprawdzamy, gdzie

7:33on tutaj siedzi. Mamy taki ogólny znacznik figure, ale to by nam sformatowało

7:38wszystkie obrazki na WordPressie. Ale w znaczniku img jest taka specjalna klasa wp-image-241.

7:43No i wygląda na to, że będzie ona dedykowana dla tego tylko i wyłącznie obrazka. Jeżeli

7:48chcemy mieć pewność, to możemy dołożyć body.home jeszcze i spację na początku. Ale

7:53myślę, że to spokojnie wystarczy. Teraz spróbujmy sformatować ten obrazek. I co chcemy

7:57z nim zrobić? Spróbujmy w ogóle w jakiś ciekawy sposób go

8:01przemieścić tutaj, umieścić go z lewej strony, na górze. W

8:05związku tym skorzystamy z szybkiego triku position: fixed,

8:09czyli zafiksujemy go tak, aby nie skrolował się z całą

8:13stroną. Następnie top ustalimy na 0, żeby go przyciągnąć do górnej krawędzi. I left

8:19ustalimy na 0, żeby go dodatkowo przyciągnąć do lewej krawędzi. A żeby

8:23jeszcze go rozciągnąć na całą wysokość, użyjemy właściwości height,

8:28czyli wysokość. I użyjemy czegoś takiego jak to 100vh czyli

8:32100 vertical hight, czyli po prostu wysokość całego okna przeglądarki. Jest

8:37prawie spoko. Mamy tutaj jeszcze taki problem, że tekst teraz nam włazi pod obrazek.

8:42CSS też ma na to radę. Możemy skorzystać z takiej właściwości z-index

8:46i ustawiać te rzeczy tak jak warstwy w Figmie. Te z-indeksy

8:50mamy od ujemnych wartości do dodatnich, czyli to, co będzie miało mniejszą

8:54wartość, na przykład -1, a tekst jeśli ma przykładowo zero, to

8:58będzie się pojawiało pod nim. No i mamy wszystko rozegrane tak, jak chcieliśmy.

9:02Natomiast ja jeszcze chciałbym teraz sprawdzić cały ten blok tekstu, czyli

9:07co my tutaj mamy. Mamy coś takiego jak content i site-content. Może skorzystajmy

9:11z tego, z tej klasy, ale tutaj koniecznie

9:15dodamy body.home, żeby to działało tylko i wyłącznie na tej stronie, którą edytujemy, Czyli body.home,

9:19site-content i zróbmy też taki manewr polegający na tym,

9:23że cały ten site-content umieścimy, damy mu pozycję absolute. To

9:28też pozwoli go po prostu dosunąć do jakiejś krawędzi. I dosuniemy

9:32go do krawędzi prawej, czyli right i wybierzemy 0. Wyłączę

9:38sobie na razie te rzeczy i wygląda to już coraz lepiej. Mamy z

9:42prawej strony ten element. Dodatkowo możemy ustalić zmienną

9:46szerokość tego elementu. Width, powiedzmy, ustalmy na 60%. Wtedy

9:50będziemy mieli zawsze to na 60% okna przeglądarki. Można

9:54powiedzieć, że gdzieś tam wstępnie mamy tą treść ustawioną. No ale zostało nam

9:58jeszcze menu i to menu w footerze. Spróbujmy w pierwszej kolejności namierzyć

10:03to menu, czyli prawy klik na dowolnym elemencie i opcje inspekcji. Co

10:07my tu mamy? Mignęło nam ul, czyli ten element, który jest całą listą z menu. Ma

10:11on identyfikator i klasę main-menu. Dobra, to skorzystajmy z tej klasy, a

10:15następnie upewnijmy się, że będziemy to edytować wyłącznie dla

10:20tej strony głównej, na której jesteśmy. Okej, w porządku. Może zrobię tutaj kilka Enterów

10:24na dole, żebyś to trochę lepiej widział. Czyli mamy na stronie głównej menu i

10:28co z nim chcemy zrobić? No, w zasadzie chcemy zrobić z nim prawie to samo, co zrobiliśmy z

10:32tym fragmentem tekstu, czyli spozycjonować je absolutnie do

10:36prawej strony. Width może zmienimy na 50%,

10:4152%, 53%, 51%. Wygląda na to, że wygląda

10:45całkiem nieźle. I to też będzie rozszerzało się razem z naszą stroną. Więc

10:49jest całkiem w porządku. Musimy jeszcze albo wypozycjonować to menu

10:53w footerze, albo generalnie się go pozbyć. Możemy kliknąć na ikonkę z ołówkiem po

10:57to, żeby do niego przejść - do Footer Menu. Co to jest? To jest

11:01menu, które się wyświetla tutaj na stałe. To nie tak, jak widget, który byśmy mogli ukryć z

11:06pomocą naszego nowego fajnego pluginu. Więc to, co będziemy musieli zrobić z takim gagadkiem,

11:10to po prostu zaznaczyć go prawym przyciskiem myszy i znów przejść do opcji inspekcji. Mamy

11:16tutaj po prostu cały footer i możemy skopiować

11:21tę nazwę klasy site-footer. Znów skopiujemy body.home, spacja, kropka, żeby

11:25upewnić się, że będziemy to robić tylko dla footera na stronie głównej. I

11:30wpiszemy po prostu display: none. Znów mało elegancki

11:34zabieg, ale działa. Po prostu ukryje nam ten footer. I spróbujmy teraz

11:38opublikować i zobaczyć, co się stało na naszej stronie. Na stronie głównej, którą odświeżę

11:42- Ctrl czy Cmd+R. Wygląda to zupełnie inaczej! Całkiem

11:47nieźle udało nam się te elementy spasować, ale już na

11:51poszczególnych podstronach nic się nie zmieniło. Strona archiwum, przejdźmy do Inspiracji,

11:56czy strony poszczególnych wpisów wyglądają dokładnie tak, jak wyglądały wcześniej. To

12:01jest ten efekt, który chcieliśmy osiągnąć, właśnie dodając tutaj tę specyficzność

12:05selektorów, które adresują wyłącznie stronę główną. Nie jest

12:10jakoś idealnie, dlatego że gdybyśmy przeszli do opcji inspekcji i

12:14spróbowali przejść tutaj. Wejdź sobie w ten podgląd na przykład mobilny czy

12:18tabletowy, to okazuje się, że gdzieś już odtąd... dotąd

12:23wygląda to nawet całkiem nieźle. I zobaczysz, że skroluje się tylko ta część,

12:27w której znajduje się tekst, obrazek jest zafiksowany, czyli nie będzie się skrolował. Więc

12:31to jest dodatkowy fajny efekt. Ale już gdy zaczynamy

12:35zjeżdżać poniżej pewnej rozdzielczości, mamy problem, bo to wjeżdża nam

12:39na obrazek. Zobacz, jaka jest ta szerokość. Mamy 1002 piksele, jedziemy w

12:43dół, w dół, w dół, w dół i już zaczyna być niezbyt okej. Więc można powiedzieć, że dla

12:47nas taką granicą, gdzie się zaczyna coś psuć, jest 1000 pikseli. Teraz

12:53CSS potrafi zrobić coś takiego z pomocą tak zwanego media

12:57query, gdzie możemy wpisać media all and i zaadresować

13:01rozdzielczości, które na przykład są poniżej tysiąca pikseli. Czyli wpiszemy

13:06max-width: 1000 pikseli. Teraz

13:10w nawiasach klamrowych możemy podać wszystkie reguły CSS, które mają znaleźć zastosowanie

13:14poniżej 1000 pikseli. Zacznijmy od wp-image. Możemy

13:18skopiować cały ten selektor - to nazywa się w CSS-ie selektor - a

13:22następnie powiedzieć mu na przykład visibility: hidden, czyli

13:27po prostu chciałbym cię ukryć w momencie, kiedy będzie mniej niż 1000 pikseli. Kolejno

13:32możemy skopiować sobie tę całą sekcję dotyczącą site-content. I

13:36chcemy przywrócić te wartości do jakby domyślnych, czyli position - domyślne

13:41to static. Jeśli chodzi o wartości right i width,

13:45możemy użyć takiej wartości inherit, czyli wartości dziedziczenia po

13:50to, aby przywrócić te wartości do domyślnych. I tak naprawdę to samo

13:54możemy zrobić do main-menu. Też musimy je przywrócić do

13:58tych domyślnych wartości. Możemy albo sobie to skopiować stąd

14:03i wkleić, albo nawet podać to po przecinku tutaj - jakby całą

14:08tę klasę można by było zrobić przecinek i podać tutaj, ale być może to

14:12jest troszkę bardziej czytelne, co macie teraz. No i można spróbować zapisać

14:16taką stronę, opublikować ją. Przejść tutaj, odświeżyć

14:20i zobaczmy. Mamy te szerokości większe,

14:24gdzie wszystko poprawnie się wyświetla. No i dochodzimy do tej szerokości 1000

14:28pikseli i mamy przełączenie się na pełną szerokość i

14:32wyłączenie obrazka. Super. Moim zdaniem wygląda okej. I oczywiście

14:37tak, jak wspomniałem, nie jest to jakaś super poprawna metoda robienia tego, taka - można

14:41powiedzieć - trochę partyzancka metoda zalepiania gotowych fragmentów CSS-a jakimiś innymi. Ale

14:46chciałem pokazać Ci, że rzeczywiście się da i chciałem zainspirować Cię

14:50do tego, żebyś zainteresował się też nauką HTML-a i CSS-a. To

14:55wszystko na teraz. W kolejnej lekcji jeszcze wyświetlimy na tej stronie głównej dodatkowy element

14:59na dole. Do usłyszenia!