Wordpress: Logo i pliki SVG

0:00Cześć! Witaj w kolejnej lekcji, w której chciałbym spersonalizować naszą witrynę poprzez

0:04dodanie logo. Podstawowa rzecz. W związku z tym jest ona też dostępna

0:08w sekcji Tożsamość witryny. Dla naszego motywu możemy po prostu wybrać

0:12jakieś logo. Problem polega tym, że to logo jeszcze nie jest stworzone,

0:16więc musimy teraz zająć się jego zrobieniem. Nie będę oczywiście tłumaczył tutaj, jak wykonać

0:21logo. Odpowiednie kursy znajdziesz też na eduwebie, ale istnieją

0:25też fajne narzędzia, które pozwalają Ci na szybko zaczerpnąć jakichś ciekawych inspiracji albo

0:29nawet stworzyć jakieś takie automatycznie wygenerowane logo. Nasz blog będzie się

0:33nazywał Blog od Kuchni i wystarczy wprowadzić tutaj na stronie My brand new

0:38logo nazwę, następnie slogan, jeśli go potrzebujemy. Jeśli nie - zostawiamy

0:42puste. Następnie wpisujemy słowa kluczowe, na przykład cooking, chef, blog. I wybieram

0:48polecenie Next oraz kolory. Chcemy na przykład kolor żółty czy pomarańczowy, no

0:53i chwilę później dostajemy już propozycje wygenerowanego logo z różnymi

0:57jakimiś ciekawymi ikonkami. Możemy wybrać sobie taką propozycję, która

1:01najbardziej przypadła nam gustu, a następnie ją trochę zmodyfikować. Może

1:06nie są one jakieś fantastyczne, ale czasem uzyskamy w miarę dobre wyniki. Możemy

1:11też zmienić layout, to jak się wyświetla taki slogan,

1:15możemy przejść do rozmiaru i na przykład zmodyfikować

1:19go w ten sposób. Wybieramy polecenie Ok. Możemy wybrać sobie jakieś

1:23tło, wypełnienie i tak dalej. Więc z pomocą tego generatora możemy naprawdę

1:27sporo wyczarować tutaj, jeśli chodzi o logo. Jeżeli

1:31chcielibyśmy skorzystać z jakichś gotowych szablonów i jeszcze bardziej je zmodyfikować, możemy

1:37także skorzystać ze strony canva.com. Tutaj jest masa gotowych

1:41szablonów logo, które możesz użyć. Z drugiej strony niestety canva na

1:46każdym kroku prosi nas o to, żebyśmy jednak przyszli na wersję płatną. Jeśli

1:50chodzi o wygenerowanie tego z pomocą tego My brand new logo, tutaj też wydaje mi się, że

1:54będziemy musieli skorzystać z wersji płatnej, gdybyśmy chcieli pobrać to we wszystkich odpowiednich formatach. W

1:58związku z tym zamiast koncentrować się na tych gotowcach, proponuję,

2:03żebyśmy spróbowali stworzyć proste logo sami. Będę chciał zrobić to

2:07z pomocą oprogramowania Figma. Figma jest darmowa dla

2:11kilku projektów. Spokojnie Ci wystarczy, więc możesz się zarejestrować na

2:15stronie figma.com, po przejściu do Twojego konta, wybrać małe ikonkę z plusem

2:19po to, aby stworzyć nowy plik. I w tym momencie mamy

2:23do dyspozycji pusty canvas Figmy. Możemy tutaj stworzyć

2:27sobie nowy frame, czyli wybieram polecenie F. Tworzę po prostu sobie ramkę, w

2:31której będzie znajdowało się moje logo. Następnie skorzystam z narzędzia tekstu. To

2:36jest to proste narzędzie, którym możemy narysować sobie ramkę tekstową i wpisać

2:40tutaj nazwę naszego bloga - Blog od Kuchni. Możemy małymi literami. Teraz

2:45chciałbym sformatować to fontem Playfair, ale niestety nie mam

2:50go na liście. Tutaj z prawej strony jest lista wszystkich fontów. A to dlatego, że nie jest zainstalowany

2:54u mnie lokalnie na komputerze. Jeżeli jeszcze masz otwarty Google Fonts i

2:58wybraną tę rodzinę Playfair, będziesz musiał skorzystać z tego guzika Download

3:03i po prostu pobrać, a następnie rozpakować font. I ponieważ ja jestem

3:07na Macu, to rozpakuję go, a następnie umieszczę w Font Booku.

3:11Zobaczmy te wszystkie fonty. Zaznaczam i po prostu przeciągam, a następnie upuszczam

3:15na moją listę fontów w Font Booku. Na Windowsie po prostu przejdź

3:20do katalogu na Twoim dysku, gdzie jest zainstalowany Windows, do folderu Windows > Fonts

3:24i tam przerzuć te pliki. W tym momencie będę już mógł korzystać w

3:28aplikacjach takich jak Figma czy Photoshop, czy innych, które mam zainstalowane na komputerze z

3:32tego fonta. Czyli wybiorę sobie Playfair

3:36Display. Jak widzisz, ten font jest już dostępny. Teraz trzeba

3:41wybrać większy krój pisma. Mogę to zrobić strzałkami na klawiaturze

3:45z Shiftem, przechodząc w to pole rozmiaru albo po prostu wpisać odpowiedni rozmiar. I w momencie

3:50gdy wybierzemy odpowiedni rozmiar, mam jeszcze do dostosowania interlinię. To

3:54jest wysokość linii, którą chcę znacznie zmniejszyć i zrobić w taki

3:58sposób to, żeby nawet może trochę nachodziło to na siebie. Jednak gdy to wyrównamy,

4:03wygląda naprawdę całkiem okej. Teraz jeszcze pod spodem stworzę

4:07taki element graficzny, będzie to prostokąt. Wybieram R na klawiaturze

4:11i rysuję prostokąt w ten sposób. Teraz zmienię jego wypełnienie i

4:16skorzystam z koloru żółtego, a następnie umieszczę ten

4:20żółty kolor pod spodem. W ten sposób. I trochę dopasuję pomocą z pomocą kursorów

4:24jego położenie. Możemy zaznaczyć jeszcze cały tekst, font,

4:28a następnie odpowiednio go wyrównać i sprawdzić,

4:33czy przypadkiem od wariantu Regular nie pasowałby nam bardziej na przykład wariant

4:37Bold lub też Black. W tym przypadku chyba możemy zostać

4:41przy wariacie Bold. W związku z tym można powiedzieć, że logo mam już gotowe. Znajduje

4:46się ono na tym frame. To, co będę chciał zrobić teraz, to zapisać to jako

4:50grafikę. Wystarczy zaznaczyć dwa te elementy. Warto je zgrupować. Cmd+ G

4:54pozwoli nam stworzyć grupę. Mogę nazwać tę grupę, dwukrotnie klikając na niej,

4:58i mu powiem, że to jest logo. Następnie przejdę do sekcji Eksportu. Zaznaczę

5:02z pomocą plusa format eksportu. I to jest to miejsce, w którym Figma będzie głównie

5:06różnić się od tych wszystkich Canv bezpłatnych i tak dalej. Pozwoli po prostu Ci wyeksportować

5:11logo w wysokiej jakości, w dowolnym formacie jakiego potrzebujesz, również z

5:16przezroczystym tłem. W naszym przypadku - ponieważ będziemy korzystać z logo, które

5:20jest wektorowe - chcemy umieścić je na stronie internetowej, to najlepszym formatem

5:24do tego zastosowania jest format SVG. Wybieram więc SVG i

5:28wybieram polecenie Export logo, a następnie, jak widzisz, zostało już ono

5:32zapisane w odpowiednim formacie na moim dysku. I można by było powiedzieć, że już, już

5:36witamy się z gąską, ale niestety nie. WordPress nie pozwoli nam na upload

5:41plików SVG do biblioteki mediów. Pozwoli tylko na upload plików PNG czy JPG - tych

5:45podstawowych formatów. Ale z SVG nie chce działać, dlatego

5:49pójdziemy do Wtyczek. Wybierzemy polecenie Dodaj nową i wpiszemy SVG. I

5:54zainstalujemy wtyczkę Save SVG. Wybieram Zainstaluj teraz

5:58i będę jeszcze chciał ją aktywować. Pozwoli mi ta wtyczka na

6:02wrzucanie właśnie bezpośrednie do biblioteki mediów plików z rozszerzeniem SVG. Przejdźmy

6:08teraz bezpośrednio do Media i wybierzmy polecenie Dodaj nowe. Wybieram plik z

6:13logo - logo.svg. Wybieram polecenie Otwórz. I został on poprawnie dodany

6:17w bibliotece mediów, już się tutaj znajduje. Możemy z powrotem przejść do Wygląd >

6:21Dostosuj. Przechodzimy do Tożsamość witryny, następnie wskazujemy

6:25logo nasze i wybieramy polecenie Wybierz. Zobaczmy, co się stanie.

6:29Otóż WordPress chce to przyciąć, ale nijak nie da się

6:33ominąć proporcji kwadratu, więc musielibyśmy przyciąć to do proporcji kwadratu. Ale

6:38niestety przycinanie i tak nie działa na plik SVG, więc tak czy inaczej nam

6:42to się nie uda. Dobra, będziemy musieli się jeszcze trochę pomęczyć. W momencie gdy wybieram

6:46logo, okazuje się, że sugerowane wymiary obrazu to 190 x 190

6:51pikseli. Okej, to jest konkretna wskazówka. Mogę przejść z powrotem do Figmy,

6:55mogę stworzyć nowy frame, narysować w dowolnych rozmiarach i zmienić je w

6:59tym miejscu na 190 x 190 pikseli. Teraz

7:04zaznaczę sobie może najpierw tekst. Jeszcze kliknę na nim prawym przyciskiem myszy po

7:08to, żeby wybrać opcję Flatten. Spłaszczę ten tekst, będę w ten sposób pewien,

7:12że będzie on zamieniony na krzywe. Nikt nie będzie musiał mieć tego fontu zainstalowanego,

7:17aby go oglądać. A mi jednocześnie będzie zdecydowanie łatwiej to skalować. Bo

7:21w momencie gdy skopiuję, zaznaczę, skopiuję i wkleję tutaj to logo, będę

7:25mógł z Shiftem, czyli zachowując proporcje, po prostu je przeskalować

7:29i może umieśćmy je na środku tego kwadratu. Teraz nazwę tę

7:33ramkę logo190, a następnie wyeksportuję

7:38znów w formacie SVG. Wybieram polecenie Export i teraz mogę

7:42przejść i dodać pliki. Wybieram i uploaduję plik, tym

7:46razem logo190. No i zobaczmy - ten obrazek jest już w dobrych

7:51rozmiarach, więc być może nie będę musiał go przycinać. Rzeczywiście, został

7:55poprawnie dodany do szablonu. Problem polega na tym, że jest zupełnie beznadziejnie

7:59w tym szablonie wyświetlany, czyli wpisany w jakieś kółko, które dodatkowo ma jakiś

8:03hover. I teraz jak to wykombinować, żeby to zmienić i

8:08na przykład powiększyć w ogóle to logo. I tutaj znów musielibyśmy

8:12przejść sobie do Dodatkowego CSS-a i próbować sami coś zmieniać w CSS-ie. Prawy

8:17klik na logo, wybieram polecenie inspekcji i zobaczymy,

8:21co tutaj w ogóle jest. Okazuje się, że jest tak: obrazek - img, mamy

8:26też jakiś span, mamy jakiś link - oczywiście link, który prowadzi

8:30do naszej strony po kliknięciu na logo. W końcu mamy taki kontener,

8:34który wygląda jak to, co chcemy, czyli site-logo. Ma on jakieś marginesy,

8:38ma on pozycję, ma on też przekalkulowaną pozycję od góry.

8:42Więc moglibyśmy ewentualnie zacząć to zmieniać, przykładowo na jakieś

8:46ujemne wartości -40, -50 i tak dalej. Ustawi

8:51nam rzeczywiście to logo na górze. Jak je przeskalować? Moglibyśmy

8:55skorzystać z takiej opcji, która nazywa się transform w CSS-ie. Ta

9:00opcja pozwoli nam po prostu z pomocą skali... Bierzemy sobie

9:04transform: scale, a następnie w nawiasie mówimy, ile razy chcemy

9:08to powiększyć, na przykład trzy razy. No i już. Powiedzmy, że zaczyna

9:12to wyglądać tak odrobinę lepiej, ale szczerze mówiąc, jakbyśmy

9:16mieli teraz męczyć te wszystkie istniejące już właściwości, próbować

9:20to jakoś ustawić od prawej strony z jakimiś kalkulacjami, później jeszcze pozbyć

9:24się tej ramki, która teraz wygląda nie za dobrze, to szczerze mówiąc, czasem

9:28jest po prostu lepiej nie korzystać z tych wbudowanych opcji szablonu i spróbować

9:33coś dodać samemu. Zobaczmy, jak wygląda ten element. To jest obrazek, który

9:37po prostu dodaje nasze logo w postaci SVG. Ja skopiuję sobie cały

9:41ten fragment tekstu. Następnie przejdę z powrotem do Tożsamość

9:45witryny. Usunę to logo stąd. Nie będę się nim przejmował i na

9:49razie tak opublikuję witrynę, ale zamknę też edytor i przejdę do tego edytora

9:54kodu. Czyli wybieramy polecenie Wygląd, następnie Edytor. Chciałbym

9:59to logo dodać na sztywno - to mogę na moment zamknąć -w stronie nagłówka.

10:03Czyli mamy header.php - znowu do niego przechodzimy. No i zobaczmy, jak wygląda ten

10:07kod HTML. Otóż jest coś takiego jak div, który ma identyfikator page,

10:12site i tutaj wygląda na to, że znajdują się te nasze nagłówki, w tym

10:16ten site-branding-container, który tam znaleźliśmy. I zawiera on nasze logo. Okej. To

10:21teraz, nie przejmując się za bardzo kodem, który tutaj jest, bo nie jest to naszym zadaniem, po

10:25prostu wklejmy we w miarę właściwe miejsce ten kawałek kodu, który tam skopiowaliśmy. Jest to

10:30obrazek, który linkuje do logo, które powinno być teoretycznie osadzone prawidłowo. Następnie

10:35mamy jakąś klasę też przypisaną do tego. Mogę ją zmienić na

10:39moje-logo. Zaraz się będę do tej klasy odnosił. Nazwa

10:44alternatywna jest i dodatkowe wszystkie właściwości, jakieś różne

10:48rozmiary i tak dalej po prostu możemy sobie podarować. Upewnijmy się tylko,

10:52że zakończymy na odpowiednim cudzysłowie i w mojej ocenie to wystarczy,

10:56żeby przynajmniej gdzieś teraz wrzucić i osadzić to logo. Zobaczmy

11:01na blogu, jak to wygląda. Rzeczywiście, logo zostało tutaj

11:06osadzone. Ja teraz muszę wrócić do Wyglądu i wybrać polecenie Dostosuj

11:10po to, żeby ten dodatkowy kod CSS sobie tak zmodyfikować, żeby

11:14odnieść się do tej klasy, którą stworzyliśmy, czyli do klasy moje-logo, a następnie

11:19zarządzić jego położeniem. Cała operacja będzie sprowadzała się do tego, aby nadać

11:23mu automatyczne marginesy od lewej i prawej strony i tym samym wycentrować tak, aby zawsze

11:27ten element znalazł się na środku naszej strony. To, co musimy zrobić, to użyć

11:31takiego polecenia jak display:block. Ta właściwość pozwoli nam traktować

11:36ten element tak, żeby można było przypisać do niego w ogóle marginesy, które zadziałają. Wybieramy

11:41sobie margines od lewej strony. Po prostu ustawiamy go automatycznie. W

11:45ten sposób zostanie on dopasowany. Jeszcze musimy też

11:49zrobić margines z prawej strony na analogicznych zasadach, czyli auto. I

11:54te trzy linie kodu pozwalają Ci wyśrodkować taki obrazek w

11:58CSS względem całej strony. On zawsze teraz w poziomie będzie

12:02na środku. O to mi chodziło. Ewentualnie mogę jeszcze dostosować jego

12:06wielkość, wielkość tego logo, używając albo width, albo height. Możemy

12:11tutaj wpisać na przykład width: 140 pikseli i tym samym

12:15zmniejszymy trochę nasz obrazek. Może wybierzmy 150. Wydaje mi się, że

12:19tak jest porządku. Gdybyś chciał dodać przykładowo jeszcze jakiś margines, możesz zrobić

12:23margin-bottom i dodać margines na dole, powiedzmy 10 pikseli albo

12:2730 pikseli, jeszcze bardziej odsunąć tę treść. Może powiększmy to do 180 i

12:32wygląda całkiem okej. Zawsze to logo będzie na środku, więc w ten

12:36sposób udało nam się zmodyfikować kod HTML naszego szablonu, umieścić

12:41w nim logo w postaci pliku SVG. Dlaczego tak namęczyłem się z tym plikiem SVG? Ponieważ

12:45teraz, jeżeli będę dokonywał takich zmian, że będę to powiększał, wyświetlał

12:50na - przykładowo - wyświetlaczach Retina z bardzo dużą gęstością pikseli, na telefonach,

12:54to zobacz, że to logo skaluje się automatycznie i jest zawsze idealnie ostre. To

12:59jest efekt, który uzyskasz tylko z plikami SVG. Pliki PNG czy JPG będą kiepsko

13:03wyglądały na dobrej jakości wyświetlaczach, kiedy będziemy mieli większe rozdzielczości - będą

13:07rozmyte, rozpikselowane, nie mówiąc już o tym, że są zdecydowanie

13:12szybsze do ładowania takie pliki SVG jak ten, z którego skorzystaliśmy. Teraz opublikuję

13:16nasze zmiany. I to wszystko, co chciałem pokazać Ci w tej lekcji. Do usłyszenia za chwilę!