VIDEO TRANSCRIPTION
Fooz
WordPress Gutenberg - prezentacja panelu zarządzania
Description generated by Skrybot
No description has been generated for this video.
Transcription generated by Skrybot
W tym krótkim filmie pokażę Ci, jak w prosty i szybki sposób przejść do edycji praktycznie każdej strony stworzonej na WordPressie. Aby to zrobić, trzeba być po pierwsze zalogowanym do tego serwisu. Zakładam, że już jesteś zalogowany, zalogowana do swojego WordPressa. I tak jak ja jestem zalogowany do tego WordPressa, który będzie służył nam jako przykład, zobaczysz na dole, bądź na górze, taki czarny pasek z różnymi opcjami. Te opcje mogą inaczej u Ciebie wyglądać, nie przejmuj się tym. Ważne jest to, żeby odszukać wśród tych wszystkich opcji tę, która prowadzi nas do edycji strony, na której jesteśmy. To, co ważne, przejdziemy teraz do edycji tej jednej pod strony. Ja teraz jestem na stronie głównej tego serwisu, który pokazujemy.
I po kliknięciu w Edit Page, też mała gwiazdka, ta nomenklatura może być w jakimś innym języku tutaj, ja mam stronę po angielsku, więc u Ciebie może być Edituj stronę. Więc po wejściu do Edit Page przejdę do panelu administracyjnego tej właśnie pod strony, czyli strony głównej w tym przypadku. Ja ją otworzę w nowej zakładce i tak polecam Ci działać, ponieważ jest to najprostszy, najsensowniejszy i najmniej zagmatwany sposób pracy z WordPressem, zwłaszcza na początku. Dlaczego? Otóż dlatego, że zwróć uwagę, ta strona otworzyła nam się w panelu administracyjnym, a tutaj mam stronę, którą widzą nasi internauci.
Różnice oczywiście są, bo internauci nie widzą tych wszystkich opcji na górze, jakiegoś sidebara z różnymi przełącznikami po prawej stronie, ale samo sedno tej strony jest takie samo bądź identyczne, bądź niemal identyczne. Wszystkie te bloki po kolei, teksty, zdjęcia pokazują się tak samo bądź prawie tak samo. Są oczywiście pewne różnice, które choćby możesz zauważyć teraz na przykładzie tych zdjęć, które w widoku dla internautów ładnie się przesuwają i zachodzi do taki efekt relaksy, natomiast w widoku panelu administracyjnego te zdjęcia są statyczne, po prostu jedno koło drugiego.
Takie różnice mogą występować dlatego, że nie ma sensu zwykle pokazywać różnych animacji albo efektów specjalnych gdzieś w panelu administracyjnym, bo tutaj tak naprawdę powinniśmy się skupić na tym, żeby dobrze dopracować teksty, dobrze przyciąć zdjęcia, wrzucić je w odpowiednim rozmiarze i tak dalej, tutaj nic nas nie powinno rozpraszać, co innego oczywiście w panelu administracyjnym, gdzie chcemy pokazać stronę z jak najlepszej strony, z wszystkimi możliwymi efektami. Więc takimi różnicami nie ma się co przejmować, a ważne jest to, że scrollując i panel administracyjny i stronę, którą widzą internauci, jesteś w stanie bardzo szybko wizualnie namierzyć miejsce, w którym możemy zmienić specjalny content, na przykład ten związany z tym blokiem, w którym są tutaj te… jest te 6 punktów jakiegoś tam procesu rekrutacyjnego.
Ten blok w panelu administracyjnym wygląda niemalże identycznie jak na stronie, którą widzą internauci, więc w bardzo szybki sposób, bardzo szybko i bardzo prosto jesteś w stanie namierzyć to miejsce po to, żeby wprowadzić tutaj jakieś zmiany. Po tym, jak mamy już otwartą stronę zarówno w widoku dla nas, czyli administracyjnym, jak i widoku dla internautów, pora przyjrzeć się temu, jak ona jest zbudowana. Na widoku dla internautów możemy na to nie zwrócić uwagi nawet na początku, że taka strona jest podzielona na pewne sekcje, pewne bloki, pewne moduły. Będzie to natomiast bardzo, bardzo wyraźne w widoku dla administratorów, czyli dla osób, które będą chciały cokolwiek na tej stronie zmienić.
Ma to o tyle znaczenie, że bardzo często te same bloki, na przykład taki blok tytułowy albo blok związany z jakimś takim zdjęciem hero image, albo blok z jakimś wypunktowaniem tekstu, albo blok ze zdjęciami, które przesuwają się obok siebie, będą używane na wielu różnych stronach i obsługa ich będzie identyczna wszędzie w obrębie całego serwisu, nie tylko na tej jednej podstronie. Ale przechodząc do panelu administracyjnego i klikając na któryś z tych miejsc, zwróć uwagę na to, co się stanie tutaj po tej prawej stronie w tym pasku administracyjnym. Kiedy kliknę na ten tytuł, on po pierwsze zostanie objęty, otoczony taką niebieską ranką, a po drugie tutaj pojawiły nam się opcje dla tego bloku, jego tytuł i jakieś różne, najróżniejsze rzeczy.
Tak samo jest w przypadku tego bloku związanego z hero image. Też mamy nazwę tego bloku i jakieś opcje z tym związane. Jeśli klikniemy sobie na ten blok z listą tych ikonek, to też mamy nazwę tego bloku, który brzmi header and bullets i jest tutaj lista różnych rzeczy, które są związane z administracją tego bloku. Na tej dokładnie tak prostej zasadzie działają wszystkie bloki, które możemy edytować w ramach serwisu opartego o WordPressa i Gutenberga. Zwróć też uwagę na to, że gdyby np.
doszło do takiej sytuacji, jak tutaj, że mamy duży blok, bardzo dużo różnego tekstu i ten tekst jest taki pościaśniany, dlatego że ten panel tutaj jest dosyć wąski, możemy zamienić miejscami podgląd tego bloku z opcjami do jego edycji i temu służy menu tutaj do tego bloku, menu, w którym jest ikonka ołówka. Kiedy tutaj nacisnę switch to edit albo przełącz się do edycji po polsku, cała ta tabela, która była do tej pory w sidebarze, przeskoczyła nam w to miejsce. W ten sposób będzie nam znacznie wygodniej edytować wszystkie te teksty, zwłaszcza gdyby ich było dużo, były długie albo były jakieś zagnieżdżone, skomplikowane.
Wtedy, kiedy już skończymy edycję tego wszystkiego, wystarczy się przełączyć na podgląd tego bloku i wrócimy znowu do tego wyjścia i tego ustawienia, które było na początku. Dokładnie na tej samej zasadzie działają wszystkie bloki, które składają się na stronę internetową opartą o WordPressa i Gutenberga. Bardzo polecam to, aby korzystać z tego przełącznika, bo on czasami naprawdę bardzo może pomagać np. w tym przypadku, kiedy mamy długą listę ikonek i jakiś podpisów, wystarczy, że przełączymy się tutaj na ołówkiem na edycję w tym miejscu i być może jest to dla niektórych osób albo na niektórych monitorach będzie znacznie prostsze i czytelniejsze do ogarnięcia niż gdyby trzeba było to wszystko zmieniać w tym panelu po prawej stronie.
Kiedy już potrafisz zalogować się do serwisu, wejść do edycji danej pod strony, rozumiesz, że składa się u nas bloków, potrafisz się po nich poruszać i nimi posługiwać, zajmijmy się zmianą jakiejś treści. Oczywiście można zmienić tutaj wszystko, od tekstów, poprzez zdjęcia, poprzez filmy wideo, które na niektórych podstronach być może się znajdują, galerie zdjęć, jakieś moduły związane z mediami społecznościowymi. Praktycznie wszystko powinno dać się zmienić poprzez panel administracyjny. Zajmijmy się najpierw jakimś prostym przykładem. Zajmijmy się zmianą tego nagłówka, career. Aby to zrobić, trzeba go namierzyć w widoku panelu administracyjnego, to akurat nie jest trudne, bo jest na samej górze.
Po tym jak go namierzyliśmy, zaznaczamy go, on się podświetli taką niebieską rameczką i kiedy jest podświetlony po prawej stronie pojawiają się różne opcje, które dotyczą tego bloku. Większość z nich jest zaprogramowana specjalnie dla tego serwisu, który służy nam tutaj trochę jako przykład, więc zwracaj uwagę na te mnóstwo różnych przycisków, które akurat zupełnie nie są w tym momencie wykorzystywane. Natomiast jedna z tych opcji na pewno już przykuła Twoją uwagę, a mianowicie to. Tutaj prawdopodobnie jeśli zmienimy ten tekst, to powinniśmy załatwić nasz problem, czyli zmienić tekst tego nagłówka. Spróbujmy. Po wpisaniu tekstu tutaj, on się natychmiast uaktualnił na naszym podglądzie, ale i to ważne, nie jest jeszcze widoczny na stronie dla internautów.
Ja ją teraz odświeżę i tutaj dalej mamy career tylko. Jest tak dlatego, że strony WordPress'ie działają trochę dokładnie tak samo jak dokumenty Worda albo Excela, czyli żeby te zmiany były trwałe, musimy je tutaj też zapisać. Do takiego zapisania służy przycisk Update albo Zapisz w wersji polskiej, czy też uaktualni, który znajduje się tutaj. Ja go teraz kliknę, strona się nam zupdajtuje i ta zmiana dla internautów od tego czasu jest już widoczna. Spróbujmy teraz zmienić coś trudniejszego, czyli na przykład zdjęcie. Zajmijmy się tym, tą fotografią, która jest w tym hero image w naszym serwisie, tym hero image, który wyświetla się praktycznie na każdej podstronie. I znowu musimy namierzyć blok, w którym znajduje się to zdjęcie w naszym panelu administracyjnym.
Nie będzie to trudne, dlatego że nie sposób się pomylić. To zdjęcie jest tutaj, w tym bloku, po tym jak kliknę na ten blok, on się podświetla, a po prawej stronie wyświetlają się jego opcje. I spodziewalibyśmy się, że to zdjęcie można zmienić tutaj z tego miejsca, natomiast jest to akurat taka specyficzna sytuacja, że w tym bloku używamy zdjęcia przypisanego niejako do tej strony, do tego postu w WordPressie. Każdy post, każda strona, każda oferta, każdy wpis w portfolio w WordPressie może posiadać takie jedno główne zdjęcie, jeden główny obrazek. I takiego głównego obrazka właśnie tutaj używamy. Ten główny obrazek zmienia się nie w zakładce blog, ale w zakładce page. I on jest tu akurat już podświetlony.
Gdyby nie był, to wyszukujesz go po tej nazwie i widzisz, że ten obrazek tutaj jest tym obrazkiem, który się wyświetla w naszym podglądzie oraz tym obrazkiem z puzzlami, który wyświetla się tutaj na samej górze. Żeby zmienić taki obrazek, po pierwsze usuniemy ten, który jest. Nic się tu jeszcze nie zmieniło, zaraz wyjaśnię dlaczego. Klikamy w tym miejscu, w którym był obrazek, po to żeby ustawić nowy. Otwiera nam się biblioteka zdjęć, które są już wgrane do tej strony internetowej, na której pracujemy. U Ciebie ta biblioteka zdjęć będzie wyglądała na 100% inaczej, albo nie będzie tu żadnych zdjęć. Do tego przykładu też za chwilę przejdę.
I teraz w zasadzie wystarczy wybrać z tej biblioteki zdjęć tę fotografię, którą chcemy zastąpić ten obrazek, który jest jeszcze wciąż na naszej stronie z puzzlami. Z tego, co pamiętam, będzie tutaj pasowało zdjęcie roweru, dlatego że ono jest również poziome i pod względem wymiaru całkiem nieźle pasuje. Dane dotyczące tego, jakie wymiary powinny mieć zdjęcia i jak bardzo się tym przejmować, a jak WordPress się tym będzie zajmował za Ciebie, otrzymasz od nas już w trakcie, kiedy będziemy pracować na Twoją stronę, bo w przypadku każdego serwisu jest to po prostu trochę inaczej. Natomiast tak samo wygląda sprawa dodania tego zdjęcia z biblioteki zdjęć. Po prostu go zaznaczam, wybieram i ono już tutaj się pojawia.
Nie pojawia się tutaj, dlatego że pewne mechanizmy odświeżania, jak świetnie działały w przypadku tych tekstów, co widzieliśmy, one się odświeżały praktycznie na bieżąco. W przypadku obrazków działają z pewnym opóźnieniem. Najpierw musimy tę stronę zapisać i teraz po odświeżeniu panelu administracyjnego tutaj już powinno być zdjęcie naszego roweru. I jest. Tak samo w widoku dla internautów po odświeżeniu strony to zdjęcie roweru już się znajduje w miejscu, w którym do tej pory było zdjęcie z puzzlami. Ale co w sytuacji, w której wspomniałem, kiedy w naszej bibliotece zdjęć nie mamy zdjęcia tego roweru, bo go jeszcze wcześniej nie użyliśmy, ani nikt go wcześniej za nas nie wgrał. Wtedy musimy zrobić to troszeczkę inaczej w równie prosty i banalny sposób.
Ja takie zdjęcia, którymi chciałbym się tutaj posłużyć, mam u siebie na dysku i chciałbym zdjęcie tego roweru zastąpić zdjęciem tym poziomem. Jak to zrobić? Po pierwsze, znowu usuwamy zdjęcie roweru z naszej strony i teraz klikając na ten przycisk, znowu trafiamy do biblioteki mediów, ale nie chcemy korzystać z biblioteki mediów, bo być może ona jest prosta, ale chcemy wgrać nasze zdjęcia do tej strony. W tym celu, zamiast w bibliotece mediów, musimy się znaleźć w uploadzie plików i tutaj albo klikając na select files czy wybierz pliki otworzy nam się okienko, za pomocą którego wybierzemy te pliki, albo tak jak ja, mając ten plik już w otwartym katalogu, po prostu mogę go przesunąć i wrzucić bezpośrednio do biblioteki zdjęć.
On się będzie przez moment wgrywał, ten moment może trwać kilku nawet do kilkunastu sekund. Jest to związane z tym, że WordPress w tym momencie przerabia sobie to zdjęcie na różne, najróżniejsze rozmiary, bo w niektórych miejscach strony będzie to zdjęcie potrzebne bardzo duże, w innych bardzo małe, to WordPress się już zajmuje tymi sprawami za siebie, nie musisz się tym martwić i jak skończy ono się pojawia w tym miejscu. Wystarczy teraz to zatwierdzić, zupdate'ować stronę i odświeżyć stronę dla internautów. Tutaj już ta fotografia się pojawia, dokładnie tak samo się pojawi, kiedy odświeżymy swój panel administracyjny. To wszystko, co było potrzebne do tego, aby to w tym miejscu zmienić.
W bardzo podobny sposób zmienia się zdjęcia na przykład już w takich blokach, które nie są powiązane z tym obrazkiem danej strony, czyli na przykład w tym bloku, w tym bloku związanym z tymi zdjęciami, które się tak w taki subtelny sposób jedno obok drugiego przesuwają. Zwróć uwagę na to teraz, że jeśli usunę jedno z tych zdjęć i będę chciał dodać jakieś następne, to po pierwsze mogę to zrobić już z tego poziomu, nie muszę przechodzić do jakiejś innej zakładki. Już tutaj mam informację o tym, że obrazek numer jeden możemy dodać właśnie z tego miejsca. Znowu otwiera nam się biblioteka mediów, z której znowu możemy wybrać jakieś zdjęcie, które pasuje tutaj, albo znowu możemy wybrać jakieś zdjęcie, które mamy gdzieś na swoim dysku.
Załóżmy, że chcemy na razie wykorzystać to, co mamy gdzieś tutaj w bibliotece mediów, znajdę jakieś pionowe zdjęcie. Może być to. I po tym, jak wybieram taką fotografię, ona się wgrywa tutaj, znowu się tutaj nie odświeżyło, nie przejmujemy się już tym. Update'uję stronę, po tym jak zupdate'owałem ją, przechodzę do strony widoku dla internautów i odświeżę ją, żeby sprawdzić, czy wszystko jest w porządku. I tak, jak najbardziej wszystko jest w najlepszym porządku, to zdjęcie nowe po lewej stronie się już pojawiło, a zdjęcie po prawej jest bez zmian. Dokładnie tak samo będzie, jak odświeżę panel administracyjny. Też mamy zdjęcie, które przed chwilą zmieniliśmy. .
S K R Y B O T
Skrybot. 2023, Video transcriptions from YouTube
By visiting or using our website, you agree that our website or the websites of our partners may use cookies to store information for the purpose of delivering better, faster, and more secure services, as well as for marketing purposes.