Wordpress: Motywy w WordPress

0:00Hej! Witaj w kolejnej lekcji, w której zajmiemy się wyglądem naszego bloga, ale tym razem kompleksowo. Czyli

0:05nie będziemy zmieniać po jednej rzeczy, a od razu zmienimy cały motyw. Czyli

0:09przejdziemy do sekcji Wyglądu, do sekcji Motywy. Motywy to są po prostu takie skórki

0:13na WordPressa. Jednak mogą one zdecydowanie więcej niż ubrać

0:17naszego WordPressa w nowe ubranko, czyli zmienić na przykład kolory, fonty i tak

0:21dalej. Taki motyw może zawierać masę wbudowanych funkcji, które tak

0:26naprawdę nie były dostępne w żadnym innym motywie, czyli może mieć na przykład koszyk, jeśli

0:30jest to jakiś system e-commerce, może mieć przykładowo jakąś dodatkową sekcję,

0:34z której możemy skorzystać, czy dodatkową przestrzeń na widgety lub

0:38też autor takiego motywu mógł do niego dopisać dedykowaną funkcjonalność,

0:42która przykładowo zmieni naszego bloga w jakiś motyw portfolio i będziemy mogli

0:46tam dodawać i wyświetlać w fajny sposób galerie, które otwierają się na full screen,

0:51mają jakąś ciekawą nawigację i tak dalej. Jak widzisz, wyobraźnia może iść

0:55tutaj bardzo daleko. Jeśli chodzi zainstalowane, preinstalowane tak zwane motywy,

0:59czyli te, które przychodzą razem z instalacją  WordPressa, są one różne w zależności od

1:03wersji WordPressa. Dla mnie najbardziej aktualną wersją jest ta wersja 2019. W

1:08związku tym tutaj mam odpowiedni motyw do niej, ale mam też dostępne motywy

1:1217 i 16. I teraz tak. Mogę stąd kliknąć w szczegóły motywu,

1:16przeczytać o nim więcej informacji, co jest ciekawe, bo tutaj mam też różne

1:20funkcje, które wspiera ten motyw, na przykład informację o tym, że jest gotowy na przetłumaczenie. Nie

1:25wiadomo, czy jest przetłumaczony na polski, czy trzeba go będzie przetłumaczyć, ale generalnie ma

1:29takie opcje jakieś wbudowane. Ma własne kolory, własne tło. Będziemy mogli zrobić

1:33takie customowe menu i tak dalej, i tak dalej. Więc generalnie to jest tak, że te wbudowane

1:38funkcje WordPressa będą tutaj wyszczególnione, ale oprócz tego taki motyw może zawierać

1:42masę jakichś dodatkowych rzeczy, które są napisane przez jego autorów,

1:46na przykład w postaci widgetów czy jeszcze innej... w postaci innej funkcji. To,

1:50co możemy zrobić, to aktywować ten motyw. Wtedy automatycznie zmieni się on dla wszystkich,

1:54którzy oglądają naszą stronę. Możemy też go usunąć, no i możemy też wybrać opcję

1:59podglądu na żywo. Jeśli wybierzemy tę opcję, to będziemy mogli zobaczyć nasz blog

2:03tak, jakby wyświetlał się zgodnie z tym motywem, ale jednak dla odwiedzających jeszcze

2:07na produkcji nie jest on automatycznie zmieniany. Więc możemy teraz sobie go customizować, czyli

2:12możemy zmieniać różne opcje dotyczące na przykład kolorystyki. Jeżeli chcielibyśmy

2:16zmienić to i odwrócić kolory, przykładowo zrobić kolor

2:20tła, to jest kolor tej ramki - możemy go zmienić na przykład na jaśniejszy,

2:24biały, a sam kolor tła strony zmienimy sobie na taki ciemny. Musielibyśmy

2:29też zmienić kolor odnośników, może na trochę jaśniejszy. I chciałbym

2:33też zmienić kolor podstawowy tekstu na biały oraz drugorzędny kolor tekstu na jaśniejszy

2:37kolor szary. W ten sposób zmieniliśmy, w zasadzie odwróciliśmy kolory

2:41i mogliśmy to dowolnie sobie dostosować. Ponadto możemy skorzystać

2:45z podstawowych zestawów kolorów i też spojrzeć sobie na przykład na domyślny

2:50ciemny motyw albo szary, albo czerwony lub też dostosować

2:54tę opcję według naszego uznania. Mamy też możliwość wyboru

2:58każdej z tych opcji, gdzie znajduje się ołówek. Czyli jeśli klikniemy sobie na

3:02ołówek, to akurat tutaj weszliśmy w ustawienia tego konkretnego

3:06widgetu, gdzie mamy mapkę Google. Możemy dostosować masę rzeczy

3:10w szablonie. Część z tych rzeczy jest dynamiczna na tej zasadzie, że niektóre

3:15szablony będą miały te rzeczy dostępne, niektóre nie. Niektóre mają swoje

3:19własne edytory, które zastępują ten edytor wordpressowy i pozwalają

3:23tam zmieniać jeszcze więcej różnych opcji, ale w to już nie będziemy wchodzić. Jeśli

3:27wybierzemy polecenie Aktywuj i opublikuj, wtedy nasz szablon

3:32z tymi ustawieniami zostanie zastosowany na stronie. Jeżeli wybierzemy x, to

3:37w tym momencie wyjdziemy bez stosowania tych zmian. Ja teraz ziksuję sobie też

3:41ten szablon. No i najciekawsza opcja to ta, która pozwala nam na dodanie

3:45nowego motywu. Możemy zrobić to na kilka sposobów. Możemy skorzystać z tego guzika

3:49Dodaj nowy motyw i przeszukiwać całe repozytorium darmowych motywów WordPressa. Możemy

3:53też wyjść z naszego WordPressa i przejrzeć Internet w poszukiwaniu zarówno

3:58darmowych, jak i płatnych skórek, które też będzie można doinstalować. No i w końcu trzecia

4:02droga - możemy stworzyć sami swoją własną skórkę, zakodować

4:06ją do HTML, CSS i przygotować pod to, aby działała w WordPressie. Tym

4:10zajmiemy się w kursie zaawansowanym WordPressa. Tymczasem sprawdźmy te dwie

4:14pierwsze metody, o których wspomniałem. Po pierwsze, dodawanie nowego motywu z poziomu

4:18WordPressa jest niezwykle proste. Będziemy mogli przeglądać sobie po różnych

4:22kategoriach - wszystkie te motywy są darmowe, więc to jest ich ogromna

4:26zaleta. Możemy tutaj przeszukać te, które nam się podobają, możemy zobaczyć jakieś

4:30ulubione, możemy dodać do ulubionych każdy z tych motywów, możemy też filtrować ich

4:34właściwości. To jest ciekawe, bo jeśli przykładowo robimy blog kulinarny, będziemy mogli

4:38zaznaczyć tutaj sobie jedzenie i picie i jeszcze ewentualnie zawęzić to o jakieś właściwości, na

4:43przykład możliwość edycji własnego tła, jakieś widgety, stopki i tak dalej,

4:47jak również układ - czy chcemy mieć jedną, dwie, trzy czy cztery kolumny, czy chcemy mieć

4:52panel boczny po lewej czy po prawej. Ja nie będę aż tak wybredny, tylko wybiorę polecenie

4:56Zastosuj filtry i teraz mamy wyświetlone tylko i wyłącznie motywy, które związane

5:00są z tym jedzeniem i piciem. Możemy sobie je podejrzeć, na przykład wybierając opcję Zobacz na

5:04tym szablonie Foodoholik i przejrzeć, jak to wygląda. Nie mamy tutaj jeszcze tych

5:09rzeczywistych naszych prawdziwych danych. A to dlatego, że ten motyw nie jest

5:13jeszcze zainstalowany w WordPressie. To, że klikniemy Zainstaluj, nie oznacza jednak, że od razu

5:17zmienimy tą naszą aktywną skórkę na tą, która jest instalowana. Teraz po prostu,

5:21po instalacji, zostanie on dodany do naszych motywów. Przechodzę

5:25do Wygląd > Motywy i znajduję się tutaj. Mogę wybrać opcję Podgląd

5:29żywo jeszcze przed jego aktywacją, no i dzięki temu będę już miał te rzeczywiste

5:33dane naszego z bloga, czyli ten wpis Domowa Granola. Niestety widzę,

5:39że mimo tego, że mam polskiego WordPressa, ten motyw nie jest dobrze

5:43zlokalizowany, przetłumaczony polski, bo na przykład zamiast Kontynuuj czytanie ma

5:47tutaj coś takiego jak Continue reading. No i to może być pierwszy sygnał

5:52do tego, abyśmy zastanowili się nad tym, czy w ogóle takiego motywu

5:57używać. Jeżeli nie jest on spolszczony, a my chcemy po polsku pisać na naszym

6:01blogu, to jego lokalizacja oczywiście jest możliwa i przetłumaczenie, ale

6:06nie jest to aż takie proste. Musielibyśmy poświęcić na to odpowiednio dużo czasu, więc być

6:10może znajdziemy jakiś inny, fajniejszy motyw, który będzie

6:14spełniał wszystkie nasze wymagania, czyli będzie przetłumaczony. Zauważ, że tutaj

6:18wygląd posta jest podobny, ale ma akurat ten sidebar trochę inne

6:23fonty, inną prezentację cytatów jak również tagów.

6:27No i na przykład tutaj, jak widzisz, odpowiedzi nie są aż tak wyraźnie zaznaczone. Są

6:31delikatnie wcięte, ale widzisz, że te zmiany nie są aż tak drastyczne

6:36w porównaniu z naszym szablonem. To, czym może wyróżniać się taki motyw, są to dodatkowe

6:40opcje, które dostępne są w lewej szpalcie. Na przykład w tych podstawowych motywach

6:44nie mieliśmy czegoś takiego jak Reset all links albo Theme options. A tutaj możemy wejść

6:48w jakieś dodatkowe ustawienia tego motywu, no i stosunkowo więcej rzeczy sobie

6:52po prostu wyklikać. Przykładowo gdybyśmy chcieli mieć jakieś ustawienia

6:57strony głównej, możemy na tej stronie głównej wyświetlać tylko i wyłącznie posty

7:01z jednej kategorii wybranej albo z wszystkich kategorii, albo przykładowo tylko

7:05z Inspiracji. I wtedy ta nasza strona główna się zmieniła i tam mielibyśmy tylko

7:09posty z Inspiracji. Więc tutaj dużo opcji może być dodanych, wystawionych jak gdyby

7:13przez autorów tego motywu do naszej edycji bez konieczności grzebania

7:17gdzieś tam w kodzie. Natomiast też sporo tych opcji, na przykład jeśli przejdziemy

7:22do Featured Slider, okej, jest on dostępny, a Food Menus niestety nie. Żeby

7:26włączyć tę opcję, musielibyśmy przejść na jakiś pro plugin

7:30albo musielibyśmy zainstalować pro wersję tego szablonu. No i niestety to

7:35jest taka bolączka tych motywów, które wybiera się z biblioteki WordPressa - że co

7:39prawda są one darmowe, ale najczęściej zawierają taki guzik Upgrade.

7:43No i nie wszystko możemy w nich zrobić, a żeby zrobić to, co chcemy,

7:47jakąś zaawansowaną funkcję włączyć, często będziemy musieli go upgrade'ować, czyli

7:52po prostu za niego zapłacić. Także przeglądając te darmowe skórki, musisz

7:56się z tym liczyć. Poza tym warto jeszcze sprawdzić oprócz tego, czy na przykład nasz

8:00motyw jest zlokalizowany na język polski. Warto sprawdzić, jak wygląda on

8:04w różnych rozdzielczościach ekranu. Teraz jesteśmy w wersji desktopowej, czyli

8:08tak, jak prezentuje się na ekranie komputera. Ale warto sprawdzić przynajmniej

8:12wersję tabletową, jak również telefonową, czyli zobaczyć,

8:16jak prezentują się wszystkie treści w momencie, gdy wejdziemy do wpisu, jak wyświetla

8:20się w takiej wersji telefonowej na przykład menu i czy to jest dla nas satysfakcjonujące. I

8:25również tę wersję tabletową, tutaj też możemy podejrzeć sobie menu i wpis. Zobaczyć,

8:30czy wszystko jest czytelne, czy wszystko dobrze, poprawnie się wyświetla. Natomiast są to tylko

8:34takie trzy typowe, można powiedzieć, rozdzielczości. Żeby sprawdzić to

8:38jeszcze lepiej, warto aktywować sobie już wtedy ten motyw,

8:42czyli wybieramy polecenie Aktywuj i opublikuj. Ziksuję się tutaj po

8:46to, żeby teraz podejrzeć sobie w nowym oknie motyw, a następnie

8:51wybiorę prawy przycisk myszy i opcję Inspekcji. Może

8:55przejdę do jakiegoś wpisu. Tutaj znajduje się taki wariant responsywny, Toggle device

9:00toolbar, i możemy to włączyć. Jest teraz zaświecony na niebiesko i możemy

9:05zmieniać szerokość okna przeglądarki, na przykład w ten sposób. Ale też

9:09pojawiają się tutaj takie różne rozmiary. Czyli możemy z tej wersji

9:13mobilnej przejść na wersję tabletową, stąd na laptopa i na

9:17przykład większego laptopa, mniejszego - możemy podejrzeć to sobie w ten sposób. Co więcej, mamy

9:21tutaj suwak z prawej strony, który pozwoli nam zmienić szerokość okna

9:25a zarazem to tak, jakbyśmy przełączali się na urządzenie, które po prostu ma

9:29mniejszą czy większą rozdzielczość. Więc w ten sposób możemy bardzo łatwo to sprawdzić. Możemy

9:34zobaczyć sobie, o, takie małe przykładowo okno i w widoku, powiedzmy,

9:38horyzontalnym i wertykalnym na tablecie zobaczyć, jak to wygląda, bądź dopasować

9:42się bezpośrednio do jakiegoś konkretnego urządzenia, które tutaj jest. Przykładowo

9:47do iPada Pro i zobaczyć, jak na nim to będzie wyświetlane, mimo że ten iPad Pro nawet

9:51może mieć i większą rozdzielczość niż to urządzenie, na którym tylko

9:55podglądamy. Dzięki temu podglądowi zostanie ono automatycznie zeskalowane, ale

9:59mimo wszystko będzie to wyglądać tak, jak powinno prezentować się na iPadzie. Także

10:03polecam Ci ten wariant, czyli tę opcję Inspekcji bezpośrednio w przeglądarce

10:07i przeglądanie z pomocą opcji Device Toolbar. To wszystko,

10:11co chciałem pokazać Ci w tej lekcji, ale w kolejnej jeszcze będziemy pracować z szablonami, bo powiem Ci,

10:15jak można jeszcze znaleźć i zainstalować własne dodatkowe szablony. Do

10:19usłyszenia!