Wordpress: Własne Widgety

0:00Cześć! Witaj w kolejnej lekcji, w której chciałbym powiedzieć Ci trochę więcej o widgetach. Tak

0:04jak widziałaś wcześniej w sekcji Wyglądu, w widgetach mamy akurat w naszym szablonie

0:08możliwość umieszczenia widgetów tylko w jednym miejscu, czyli w stopce. Fajnie by było

0:12móc również umieścić je - zarówno te gotowe, jak i ewentualnie takie, które

0:16stworzymy - na przykład w prawej szpalcie witryny albo na górze witryny. Niestety

0:21jest to zależne od motywu, a zatem ten motyw ma zdefiniowane wyświetlanie

0:25widgetów wyłącznie w jednym miejscu i jest to stopka. Możemy jednak

0:29skorzystać z wtyczek i zainstalować sobie nową wtyczkę z pomocą polecenia Dodaj

0:33nową. Teraz znajdę wtyczkę, która nazywa się Content Aware Sidebars i

0:38dodam ją do naszego WordPressa. Zainstalujemy ją i dzięki

0:42niej będziemy mogli po aktywacji dodawać własne sidebary, czyli własne

0:47takie przestrzenie, gdzie będziemy mogli na przykład definiować różne

0:51widgety. I teraz ja, na razie przynajmniej, wybiorę opcje Skip. Zobacz, że mamy

0:55tutaj nową sekcję Paski boczne i domyślnie jestem w zakładce Wszystkie paski

0:59boczne. Wybiorę polecenie Dodaj nowy. Teraz wprowadzę tytuł tego paska.

1:04Powiedzmy, że będzie to Newsletter i gdzie

1:08ma się ten pasek pojawiać. Wybieramy na przykład Wszystkie wpisy,

1:12czyli wybieram Wpisy. Jeżeli chcesz, żeby pojawiał się jeszcze gdzieś, na przykład

1:16na wszystkich stronach, bardzo proszę, możesz wybrać Wszystkie strony. Więc tutaj

1:20mamy i będzie się pojawiał tu i tu i tu. I teraz mamy możliwość

1:24nawet publikowania tego paska tylko i wyłącznie w jakieś określone dni, w

1:28określone godziny. Mam możliwość dopasowania jego designu, na

1:32przykład tła i tak dalej. Ale nie będziemy się teraz na tym koncentrować. Bardzo

1:36ważna jest sekcja, która znajduje się tutaj, czyli Opcje. To, co będziemy tutaj

1:40mogli zrobić, to albo zastąpić istniejącą sekcję, która

1:44w tym przypadku jest - automatycznie wybrałem - czyli że zastąpimy tym newsletterem naszą

1:49stopkę albo będziemy mogli na przykład scalić czy też wymusić

1:53zamianę tej stopki na ten nasz element. Ja proponuję wybrać opcję Scal,

1:57tak aby dorzucić to do tego sidebara, który jest zdefiniowany w szablonie, a

2:01jest to tylko sidebar Stopka. I możemy albo dorzucić to nad

2:06stopką, czyli Góra, albo pod stopką, czyli Dół. Wybierzmy polecenie Góra. Możemy

2:10też zawęzić to nawet widocznością do niektórych tylko użytkowników. No,

2:14ale dalej, tak jak widzisz, jest to możliwe tylko i wyłącznie w tym sidebarze, który

2:18już jest w tym regionie, który już jest zdefiniowany jako region na

2:22widgety w danym naszym motywie. Na razie zostawmy to tak, jak

2:26jest, czyli zostawimy stopkę. Jeszcze za moment do tego wrócimy. Zanim zaktualizuję

2:31ten sidebar, jeszcze chciałbym wejść do ustawień i zaznaczyć

2:35opcję Negate condition. W przypadku niektórych motywów jest to

2:39potrzebne. Na wszelki wypadek ją włączmy i zaktualizujmy. Teraz pasek boczny

2:43powinien już zostać dodany. I w sekcji Wyglądu, gdy wejdziemy do Widgetów, pojawi

2:47się dodatkowa sekcja Newsletter. Możemy ją teraz rozwinąć. Nie ma tutaj na

2:51razie żadnych dostępnych elementów, ale my możemy wybrać sobie dowolną rzecz, przykładowo

2:55weźmy kalendarz i dorzućmy tutaj po prostu kalendarz. Nadam mu nazwę, a następnie

3:00to zapiszę. W tym momencie powinniśmy mieć możliwość już przejść

3:05do naszej strony i jak widzisz, ten kalendarz się pokazuje na odpowiedniej pozycji,

3:09czyli na górze tego regionu, w którym wyświetlane

3:13są w szablonie widgety. No i w sumie wszystko jest okej, ale w zasadzie działanie

3:18tego jest identyczne jak mielibyśmy sam ten jeden region

3:22i dodawali do niego elementy i reorganizowali. No i tutaj naszym problemem

3:26jest to, że w zasadzie w naszym motywie chcielibyśmy wyświetlić

3:30to gdzieś tutaj z boku, z prawej strony. Natomiast miejsce,

3:34czyli ten region zdefiniowany na widgety, jest tylko jeden. Tego nie jesteśmy w stanie ominąć

3:38tym pluginem Paski boczne i właśnie z tego powodu chciałbym pokazać Ci alternatywny sposób - taki,

3:43który wymaga modyfikacji kodu naszego motywu, ale da nam

3:47najwięcej możliwości. Zatem zapomnimy na chwilę o tym pluginie, który

3:51doinstalowaliśmy i przejdźmy do sekcji Wygląd > Edytor. Wspominałem Ci już o tej sekcji.

3:55Tutaj możesz edytować wszystkie pliki szablonu, tak jakbyś to robił z Eksploratora

3:59Windows na przykład. Są tutaj pliki takie jak na przykład functions.php, czyli

4:04ten plik, w którym dodajemy nasze własne funkcje. Przypominam jeszcze raz, że

4:08gdybyś aktualizował szablon, możesz wszystkie te modyfikacje stracić, więc warto zachować

4:13sobie na przykład kopię zapasową tego pliku functions.php i w razie gdyby on został

4:17nadpisany aktualizacją, wtedy przywrócić te nasze zmiany. Te zmiany dokonujemy

4:21zawsze w dolnej części i zrobimy sobie tutaj kilka wolnych

4:26linii, a następnie wkleimy kawałek kodu. Jest to kawałek kodu bezpośrednio z codex'a,

4:30który pozwala zarejestrować sidebar albo właśnie taki widgetized area,

4:34czyli tę przestrzeń na widgety. Jest to bardzo prosta składnia,

4:38kilka dosłownie rzeczy. Mamy tutaj też nazwę, którą

4:42sobie zmienię na Newsletter, jak również

4:46identyfikator, który też jest ważny. On powinien zawierać

4:51podkreślania na przykład zamiast spacji i możemy go sobie

4:55też zmienić na newsletter, ale zrobimy to newsletter-right - w taki

4:59sposób, małymi literami. A następnie skopiuję

5:04ten identyfikator, wybiorę polecenie Zaktualizuj plik i to jeszcze

5:08niewiele zmieniło, przynajmniej w wyglądzie naszej witryny. Ale

5:12jeśli przeniesiemy się do sekcji Widgetów, zobaczymy, że już ten

5:17obszar został przynajmniej zarejestrowany. I my możemy do tego obszaru

5:21teraz coś wrzucić, czyli przykładowo będziemy mogli wrzucić

5:26na przykład Najnowsze komentarze. W ten sposób. Wpisać, że są to

5:30komentarze i wyświetlić pięć czy tam trzy

5:35najnowsze komentarze. Wybieram polecenie Zapisz. Problem polega na tym, że w tym

5:39momencie jeszcze nigdzie nam się to nie wyświetla w szablonie, ponieważ żeby

5:44to zrobić, będziemy musieli znowu w Edytorze wskazać jakieś

5:48miejsca na naszej stronie, gdzie ten element ma być w ogóle wyświetlany. Standardowo

5:53motywy mają pliki nazwane w sposób analogiczny do tego, co

5:57tak naprawdę jest jaką częścią strony. Przykładowo tutaj mamy strony z archiwami. Mamy

6:01też stronę z komentarzami, czyli tę sekcję komentarzy, która jest doklejana, czy to do

6:06stron, czy do wpisów. Mamy też plik footer. Prawdopodobnie

6:10właśnie w tej stopce motywu, czyli w pliku footer, gdzieś jest generowany

6:14ten właśnie dodatkowy element, który jest przestrzenią

6:19na widgety. Nie mamy natomiast strony takiej, która często

6:23występuje w motywach i nazywa się sidebar.php, czyli tej

6:27części witryny, która jest zawsze wyświetlana z prawej strony. Jeśli

6:32jej nie mamy, możemy w zasadzie stworzyć sobie taką nową stronę i przykładowo nazwać

6:36ją sidebar.php albo sidebar-nowy.php i wtedy

6:40wywołać ją w odpowiednim miejscu z pomocą podobnego polecenia, na przykład php wp_sidebar, czy

6:46w ten sposób gdzieś dokleić to na stronę, ale myślę, że to już

6:50trochę bardziej zaawansowana edycja. W związku z tym pokażę Ci, jak

6:54można to dokleić do istniejącego miejsca jakiegoś. I przykładowo wybierzmy sobie

6:58nawet header, czyli nagłówek motywu. On będzie pojawiał się na każdej stronie - nie jest

7:02ważne, czy to jest wpis, czy to jest strona. I spróbujemy gdzieś tutaj

7:07dokleić wyświetlanie tej przestrzeni na

7:11widgety, którą przed stworzyliśmy. To doklejanie jest

7:15bardzo proste. Wystarczy, że wkleisz sobie taki fragment kodu, który

7:19też Ci podrzucam, i że zrobisz to w odpowiednim miejscu. W tym przypadku mamy

7:23tutaj coś takiego jak body, czyli znacznik, który definiuje otwarcie całego

7:27dokumentu, więc możemy zaraz pod body gdzieś to zarejestrować i wkleić

7:31właśnie ten kawałek kodu. Jedyne co będziemy musieli tutaj

7:35zmienić, to identyfikator naszego sidebara. Najpierw ta linia kodu sprawdza,

7:39czy w ogóle taki identyfikator istnieje i będzie to nasz identyfikator

7:43newsletter, czyli to ID newsletter-right. Od

7:48razu to sobie skopiuję, ponieważ jeżeli taki sidebar

7:52jest aktywny, czyli znajduje się w ogóle zarejestrowany w naszym WordPressie, to za

7:57jego wyświetlenie odpowiedzialna jest ta linia 26, czyli po prostu dynamiczny sidebar

8:01wyświetlamy sobie, który... czyli znów przekazujemy tutaj ten identyfikator newsletter-right.  Jeżeli

8:07zaktualizuję ten plik, to już teraz będę mógł przenieść się do

8:11mojej witryny. I zobacz, że te komentarze są tutaj wyświetlane. Ponieważ wrzuciłem je

8:15bezpośrednio do body,  bez żadnego stylowania, bez żadnego umiejscowienia

8:20na stronie, no to wyświetlają się zawsze na samej górze, od razu, nawet nad menu. W

8:24związku z tym moglibyśmy teraz, choć nie jest to oczywiście zakresem

8:28tego kursu, spróbować wstawić go w jeszcze inne, lepsze miejsce, ewentualnie

8:33z pomocą jakichś stylów CSS ustawić go na naszej stronie. Więc ja mogę dopisać

8:37sobie tutaj jakieś proste style. Tu jest div, czyli taki element HTML-a, w

8:42którym będzie ten sidebar nam się pojawiał. Mogę na sztywno przypisać

8:46do niego umiejscowienie z pomocą takiego znacznika style - tutaj po prostu przekazuje

8:50się style CSS. I możemy go zarejestrować na pozycji, czyli wpisać

8:54position, ja tutaj wpiszę fixed. To znaczy, że będzie cały czas w

8:58tej samej pozycji na stronie, nawet mimo skrolowania. Teraz możemy z

9:02pomocą właściwości takich jak right, left, top czy bottom

9:06ustawić go w odpowiednim miejscu. Chciałbym go ustawić z prawej strony

9:11i mogę to zrobić na pikselu 0, czyli wtedy przesunę go skrajnie

9:15do prawej krawędzi. Ale mogę też od tej prawej krawędzi na przykład odsunąć go o jakieś

9:1920 pikseli. No i jeszcze odsuniemy go od góry też o 20

9:23pikseli. Myślę że już takie zmiany pozwolą Ci

9:28zobaczyć, jak to wygląda. Wybieramy polecenie Cmd+R, odświeżamy. No

9:32i okazuje się, że te komentarze cały czas są tutaj ładnie z prawej strony. Wyświetlają

9:36się o 20 pikseli z prawej i o 20 pikseli od góry naszego szablonu. Rzecz

9:41jasna to jest tylko przykład. Pokazuję Ci, jak można to szybko zrobić, ale gdybyś chciał

9:46zrobić to porządnie, należałoby się zastanowić, czy przypadkiem nie stworzyć pliku sidebara,

9:50czy nie zarejestrować tego gdzieś w lepszym miejscu. No, ale generalnie na

9:54razie działa. To, co jeszcze chciałbym tutaj zrobić, to przejdź do Widgetów, no i mamy

9:58w Newsletterze najnowsze komentarze. To, co chciałbym wstawić, to pole

10:02zapisu na newsletter. Moglibyśmy dodać sobie tutaj własny HTML i jakoś

10:08go obsłużyć. Czyli w tym polu HTML wpisać sobie, że to jest newsletter i

10:12tutaj na przykład zrobić takie pole . Input to jest po prostu pole,

10:16które pozwoli komuś wpisać jakieś dane, no i obsłużyć to, że jest tu wpisywany

10:20adres e-mail. On gdzieś nam się tam dodaje i na przykład w pliku functions dodalibyśmy całą

10:25obsługę tego newslettera. Ale oczywiście w WordPressie mamy

10:29możliwość też skorzystania z jakichś gotowców. W związku z tym polecam Ci

10:33przejść z powrotem do Wtyczek. Spróbujmy dodać sobie nową

10:37wtyczkę. Tym razem znajdę wtyczkę, która nazywa się Newsletter Sign-Up.

10:43I tę wtyczkę możemy sobie zainstalować. Jest to może jakaś mniej popularna wtyczka,

10:47ale na tyle prosta, że będziemy mogli szybko skonfigurować sobie takie

10:51zapisywanie do newslettera. Ja teraz tę wtyczkę aktywuję i będę chciał przejść do

10:55jej właściwości. Jest ona włączona. Wybieram Settings. Przechodzimy do, jak

11:00widzisz, nowej zakładki i mamy tutaj do wyboru listę mailingową, z

11:04której korzystamy, czyli providera. Niestety ta lista jest ograniczona do kilku

11:08providerów, ale jeśli przykładowo masz listę maili na MailChimpie, możesz ją

11:13wybrać. Nie będę tutaj przyglądał się reszcie ustawień. Po prostu je

11:17zapiszę, a następnie przejdę znów Wyglądu i do Widgetów. I okazuje się, że

11:21ten nowo dodany plugin ma swój customowy widget, więc możemy teraz

11:25rozwinąć newsletter  i wrzucić sobie tutaj ten widget Newsletter Sign-up:

11:30Zapisz się na Newsletter. Tutaj

11:34jeszcze możemy dodać jakiś tekst przed formularzem, czyli "Wpisz swój

11:39email!" na przykład. Następnie na przykład "Dziękuję" po formularzu

11:44i możemy wybrać polecenie Zapisz. W tym

11:48momencie, jeśli przejdziemy do naszej strony i odświeżymy, zamiast tej sekcji

11:52wcześniejszej pojawi się nagłówek Zapisz się na newsletter, wpisz swój email. Jeżeli

11:56ktoś wpisze tutaj adres e-mail i wybierze polecenie Sign up, to

12:01wtedy ta wtyczka zadziała tak, że połączy się z naszym MailChimpem  i dopisze

12:05tam tego subskrybenta. Rzecz jasna możesz korzystać z innych list,

12:09czyli z jakiegoś Getresponse'a albo przykładowo Freshmaila. W zależności

12:14od tego, z czego korzystasz, prawdopodobnie będziesz szukał odpowiednich wtyczek. Bo

12:18bardzo dużo tych wtyczek jest do WordPressa. Albo jeżeli takiej wtyczki nie znajdziesz, no,

12:22będziesz musiał spróbować napisać to sam. W każdym razie jest to możliwe i

12:27poza obsługą takich popularnych mailingów, będziesz mógł także, nawet

12:31nie posiadając żadnego dodatkowego systemu do mailowania, wgrać

12:36sobie cały taki CMS do maili na WordPressa. Jest wiele takich pluginów, które

12:40zarządzają po prostu w pełni naszą listą i pozwalają z panelu WordPressa

12:45bezpośrednio tworzyć nowe maile, mailować do osób, które się zapisują, i właśnie na przykład

12:49rejestrować tego typu widgety. Jest to poza zakresem tego kursu, ale, jak

12:53widzisz, możliwości są duże i polecam Ci tutaj poeksperymentować. To wszystko

12:58na teraz. Ja wyłączę za chwilę wyświetlanie tego widgetu, żeby nam dalej nie przeszkadzał i przejdę

13:02do kolejnych lekcji. Do usłyszenia!