Wordpress: Podstawy edytora

0:00Cześć! Witaj w kolejnej lekcji, w której już dodamy pierwszy w miarę sensowny wpis, więc wybieram

0:04polecenie Dodaj nowy a następnie wyłączę własne pola. Przypominam, że możesz

0:08to znaleźć w pasku narzędzi na górze, w opcjach. Wyłączamy własne

0:12pola. Skoro już jesteśmy w tym panelu Opcje, zobaczmy, co tu jeszcze jest ciekawego. Możesz

0:17włączyć czy wyłączyć samouczek, również weryfikację przed publikacją, czyli po kliknięciu Opublikuj

0:22będziemy mieli tutaj dodatkową checklistę do sprawdzenia. To jest bardzo fajna opcja. Możesz w

0:26końcu włączyć czy wyłączyć panele. Przykładowo - jeśli chcesz wyłączyć dyskusję,

0:31ponieważ zawsze i tak mamy włączone komentowanie wpisów i pingbacki, możesz to zrobić. Tak

0:36samo możesz zrobić z każdym kolejnym elementem, na przykład jeśli nie używasz obrazka

0:41wyróżniającego, dlaczego by go nie ukryć? Zamykamy te Opcje. Jeżeli chodzi

0:45o same właściwości edytora, jest on bardzo intuicyjnie skonstruowany. Mamy

0:49właściwości dokumentu i właściwości poszczególnych bloków. Ponieważ bloki

0:53to właśnie to, z czego składa się nasz wpis - będzie to

0:57albo tekst, albo obrazek, albo galeria. Te bloki możemy sobie

1:01przesuwać, zarządzać ich kolejnością. W ten sposób z tych bloków będziemy budować wpisy. Jeśli

1:06zaznaczymy dokument, czyli odklikniemy się z dowolnego bloku, w sekcji Dokument

1:11będziemy mogli ustawiać opcje. Natomiast sekcja Blok jest niedostępna. W

1:15momencie gdy wybierzemy jakiś blok, jak widzisz, atrybuty dla tego bloku, czyli jego

1:19właściwości, są tutaj wyświetlane. Zacznijmy od dodania tytułu, w

1:23naszym przypadku będzie to pierwszy przepis, czyli Domowa Granola. I możesz

1:28taką treść skopiować sobie z dowolnego miejsca, w którym masz ją

1:32wcześniej przygotowaną. To samo możemy zrobić z pierwszym, domyślnie przygotowanym blokiem, do

1:37którego ja teraz wklejam po prostu wcześniej już skopiowany tekst. I teraz

1:41ten tekst został sformatowany w pewien sposób, czyli został tutaj stworzony

1:46blok, który domyślnie wyświetla się jako akapit. Możemy jednak typ

1:50tego bloku zmienić. Jeśli przejdziemy do tej opcji, możemy zmienić jego rodzaj,

1:54rodzaj bloku, i przekształcić go w jeden z innych bloków, ale wyłącznie

1:58tekstowych. Ponieważ znajduje się tutaj tekst, mamy do wyboru zawężoną

2:02listę opcji. Nie mamy obrazków i tak dalej, mamy wyłącznie tekst. Natomiast możemy

2:07zmienić to ze zwykłego akapitu w nagłówek i

2:11tutaj operować jeszcze różnymi typami nagłówków, które są dostępne w

2:15szablonie. Mamy też do dyspozycji cytat, który jest w pewien

2:19sposób sformatowany, a my możemy jeszcze wybrać jego warianty - jeden i drugi.

2:23Możemy też zrobić z tego listę. Mamy także możliwość preformatowania

2:28tego. Wróćmy do akapitu na chwilę. Tekst preformatowany,

2:32czyli taki, w którym możemy używać różne odstępy, tabulatory,

2:36możemy stylizować tekst wewnątrz tego elementu. Możemy

2:40też wrócić do akapitu i wybrać jeszcze sobie ostatni typ, czyli werset. Będzie to tekst w

2:44jednej linii. To, co jest najciekawsze, to to, że tak jak wygląda to w

2:48edytorze Gutenberg, tak naprawdę będzie wyglądało na stronie

2:52naszego wpisu, czyli wszystkie style z motywu są tutaj aplikowane, dzięki

2:56czemu widzisz dokładnie, jak będzie prezentował się Twój artykuł. To nie znaczy, że nie możesz

3:00dokonać tutaj pewnych zmian, takich jak standardowo opcje wyrównanie tekstu, pogrubienie,

3:04pochylenie, możliwość dodania linku - i tutaj odnośnik będzie dodawany

3:09do tego pola, które jest.. do tego słowa, które jest aktualnie aktywne, lub

3:13też do zaznaczenia. Jeżeli wybierzemy zaznaczenie - i od razu nauczę Cię skrótu Cmd+K

3:17czy Ctrl+K na pececie - żeby dodać link, będziemy mogli tutaj go wkleić. Ewentualnie

3:22zacząć pisać po to, żeby móc wyszukać we wszystkich

3:27naszych wpisach oraz na przykład stronach i podlinkować konkretny

3:31element, który znajduje się we wnętrzu WordPressa. Więc możemy podlinkować tutaj tą stronę O Autorze,

3:35wybrać Zastosuj i w tym momencie już ten nasz link będzie prowadził,

3:39chociaż jest zupełnie bez sensu. Jeśli chodzi o kolejne ustawienia,

3:43mamy te możliwość przejść do sekcji bloku. I w spadku akapitu ma on

3:47jakieś konkretne ustawienia. Te ustawienia dotyczą rozmiaru liter, gdzie możemy

3:51nadpisać cały styl, który jest zdefiniowany w

3:56motywie. Taki motyw powinien mieć różne style, które możemy tutaj wybrać. Możemy

4:00też sami zmienić wielkość fonta w ten sposób. Wybiorę

4:05sobie tutaj wielkość Normal, a następnie możemy też dodać inicjał, który

4:09jest bardzo fajny, ponieważ pozwala na takie wyróżnienie pierwszej litery, ewentualnie

4:13zmienić kolory. Znów jest to super intuicyjne. Możemy ustawić zarówno

4:17kolor tła dla takiego elementu lub też możemy zmienić

4:21kolor tekstu. Co ciekawe, jeżeli nasze wybrane

4:26kolory nie spełniają standardów dostępności, czyli mogą być trudne

4:30w czytaniu dla osób z... na przykład niedowidzących czy z trudnościami w rozróżnianiu kolorów, mamy tutaj

4:35informację od WordPressa, że może warto zastanowić się nad bardziej kontrastującymi kolorami. Jeśli

4:40już nie pamiętasz, jakie mieliśmy domyślnie kolory, wystarczy, że klikniesz na Wyczyść

4:44jeden i drugi element, a będzie to domyślne z tym, co mamy w szablonie. W

4:48tej sekcji Zaawansowane mamy możliwość dodania dodatkowej klasy CSS, którą tutaj dopiszemy. I

4:53dzięki temu będziemy w kodzie CSS, czyli kodzie stylów naszego szablonu, mogli

4:57zmieniać rozmaite ustawienia, ale do tego jeszcze zdążymy sobie w tym kursie

5:01później dojść. Na razie to są te podstawowe ustawienia dla bloku

5:05akapitu. Ale zwróć uwagę na to, że jeżeli przekształcimy ten blok akapitów w

5:10dowolny inny element, to każdy z nich ma już swoje właściwości, czyli

5:14przykładowo dla cytatu możemy zdefiniować jeden z dwóch stylów. Przykładowo - jeśli

5:19zmienimy sobie to na jeszcze inny element, czyli przykładowo listę, tutaj

5:24z kolei na przykład nic nie ma, możemy tylko dodać sobie klasę CSS. Więc zmieńmy

5:28to z powrotem na akapit i spróbujmy dodać nowy blok. Można to zrobić na kilka sposobów. Albo

5:33z wykorzystaniem tego przycisku Dodaj blok, albo możemy kliknąć na

5:37istniejącym bloku i go na przykład zduplikować. Możemy także wstawić

5:42blok powyżej lub poniżej i na razie wstawmy po prostu blok poniżej.

5:46Chciałbym do tego kolejnego bloku dodać instrukcję przygotowywania naszej

5:51granoli, ale najpierw będzie nam potrzebna lista składników. W związku z

5:55tym wklejamy sobie listę i teraz zobacz: w momencie kiedy ja wkleiłem

6:00listę, a miałem skopiowane to z dokumentu Worda, w którym była też lista, automatycznie

6:04WordPress rozpoznał, że to jest element listy i przekształcił to w listę. Rzecz jasna

6:10taką listę możemy zmienić na akapit. Ale zwróć uwagę na to, co się teraz stało. W zasadzie

6:14nie mamy jednego akapitu, tylko każdy element listy został przekształcony na osobny

6:18blok. Ogólnie jest to też fajna sztuczka, którą czasem stosuję, polegająca

6:22tym, że jeżeli chcesz stworzyć od razu kilka różnych bloków,

6:26to możesz to zrobić, po prostu tworząc wypunktowaną listę, a następnie

6:31zmieniając rodzaj bloku na akapit. Teraz wybrałem Ctrl+Z czy

6:35Cmd+Z na Macu po to, aby cofnąć tę zmianę. No i zauważ, że mamy

6:39po najechaniu teraz na każdy z bloków możliwość złapania

6:44tego bloku i zmiany jego kolejności. W momencie gdy przeniesiemy

6:48go i zapali się takie niebieskie podkreślenie, będziemy mogli ten blok upuścić.

6:52Ewentualnie możemy korzystać ze strzałek, żeby przenosić o jedną

6:56pozycję dół czy w górę taki blok. No i teraz jak tutaj dodać przykładowo

7:00nagłówek, że jest to lista składników? Otóż nie staramy się tego zrobić

7:04w tym istniejącym bloku, nie ma to większego sensu. Tylko po prostu wybieramy

7:08opcję Wstaw blok powyżej i w tym kolejnym bloku wpisujemy,

7:12że jest to lista składników. Teraz to

7:17właśnie ten blok będziemy chcieli sformatować jako nagłówek. I możemy to zrobić jako

7:21nagłówek nie drugiego, ale na przykład czwartego typu. Dzięki temu, dzięki

7:25takiej strukturze bloków będziemy mogli bardzo łatwo i intuicyjnie zarządzać treścią, jak

7:29również nie będziemy mieli skomplikowanego formatowania w ramach, w obrębie

7:34jednego bloku. Jeszcze jednym alternatywnym sposobem na dodanie bloku jest

7:38najechanie na istniejący blok i kliknięcie tej ikonki, która znajduje się na górze, ikonki

7:42Dodaj blok, Będziemy mogli tutaj wybrać spośród najczęściej używanych bloków,

7:46albo to zwinąć i zobaczyć sobie i przejrzeć wszystkie bloki, którymi

7:50zresztą też później się zajmiemy. Możemy też kliknąć w to puste miejsce

7:54i po prostu zacząć pisać. Nie musimy wcale wybierać typu bloku. Ja

7:59mam przygotowany tekst w schowku, który chciałbym tutaj wkleić. I znów jest to tekst z Worda,

8:03który był preformatowany listą. Ta lista automatycznie została

8:07przeniesiona. Możemy zmienić ją z numerowanej listy na punktory i w

8:12zasadzie to jest prawie wszystko, co chciałbym umieścić tym wpisie poza

8:16tym, że chciałbym teraz skopiować sobie i wkleić tutaj ten nagłówek. Czyli

8:20mogę w zasadzie skorzystać z opcji bloku i opcji zduplikowania. Wybieram

8:26polecenie Duplikuj, teraz przeniosę sobie ten blok w odpowiednie

8:30miejsce, czyli potrzebuję go przenieść tutaj. I tu będzie Sposób przygotowania. Można

8:36powiedzieć, że taka podstawowa struktura naszego posta jest gotowa, natomiast ten wpis jest

8:40niezbyt ciekawy. Nie wygląda atrakcyjnie. Powinniśmy do niego dodać jakieś

8:44zdjęcia, media. To będziemy robić w kolejnych lekcjach, ale pamiętaj jeszcze

8:48o tym, że możesz spróbować też dodać bloki, które nie

8:53są tymi standardowymi akapitami, listami. Przykładowo w sekcji Układ

8:57strony znajdziesz blok, który pozwoli podzielić to na kolumny, czyli

9:02możemy w poziomie umieszczać bloki, które będą występowały obok siebie. W ten

9:06sposób możemy do tej pierwszej części wyciąć i wkleić pierwszą

9:11część listy i do drugiej wyciąć i wkleić drugą część listy. Teraz

9:15ten pozostały blok, który nie jest nam potrzebny, wystarczy, że usuniemy w ten sposób. I teraz

9:19to już prezentuje się trochę lepiej. Mamy zagnieżdżone dwie listy wewnątrz

9:24bloku kolumna. Ten blok kolumna, który jest zaznaczony, możemy modyfikować, zmieniając

9:28ilość kolumn lub też rozszerzając go trochę albo rozszerzając na

9:32całą szerokość wpisu. W tym przypadku nie będzie to zbyt ciekawie wyglądało, więc po

9:36prostu tę opcję wyłączę. I pamiętaj, że zawsze masz możliwość dodania jeszcze jakichś

9:40elementów, takich ozdobników, które są blokami, ale

9:44tak naprawdę nie są tekstem czy obrazem. Przykładowo w sekcji Układ strony możemy

9:48wstawić separator i takim separatorem może być krótka linia albo

9:53linia długa. Ewentualnie możemy wejść sobie w Style i na przykład to

9:57zmienić i ustawić tutaj kropki tak, aby mieć rozdzieloną listę składników

10:01i sposób przygotowania od opisu właśnie w ten sposób. To

10:05wszystko jeśli chodzi o formatowanie tekstu, ale kolejnych lekcjach pokażę Ci, jak

10:09można dodawać jeszcze ciekawe, atrakcyjne elementy do naszych wpisów. Do usłyszenia!