WordPress 5.3 – jak zbudować stronę firmową na motywie Twenty Twenty?

Host webinaru i opiekun produktów WordPressowych w linuxpl.com. WordPress developer na pół etatu. Współorganizuje WordCampy, na których czasem też występuje w charakterze prelegenta.

21 listopada 2019

W zeszłym tygodniu WordPress został zaktualizowany do wersji 5.3, a niedługo minie rok od kiedy edytor blokowy zastąpił klasyczny w domyślnej instalacji WordPressa.

Postanowiłam sprawdzić czy w końcu da się stworzyć prostą stronę dla firmy na domyślnym motywie, bez instalowania dodatkowych wtyczek i bez edytowania kodu. TL;DR – da się 🙂 Demo można zobaczyć tutaj >>

Brakowało mi tego wcześniej w WordPressie. Aby od razu po zainstalowaniu WordPressa można było szybko stworzyć prostą stronę firmową bez szukania, instalowania, testowania przeróżnych wtyczek.

I choć instalowanie wtyczek to nic złego, pozwalają wszakże rozszerzyć funkcjonalność WordPressa, ale wymagają też późniejszego utrzymania. Wtyczki trzeba na bieżąco aktualizować, o czym większość osób zapomina i naraża się m.in. na zautomatyzowany haking.

Instalowanie nadmiernej liczby wtyczek, czy jakiegoś bardzo rozbudowanego motywu, to jest często niepotrzebny koszt dla firmy. Nawet jeśli wtyczki są bezpłatne, to pozostaje koszt późniejszego utrzymania, czy też koszty, które trzeba ponieść kiedy coś się zepsuje po aktualizacji lub ataku hakerskim.

Z mojego doświadczenia, w małej, a szczególnie jednoosobowej firmie, jest to po prostu niepotrzebne. Większość tego typu stron można dziś zbudować praktycznie na „gołym” WordPressie. Spróbuję Wam to pokazać w tym artykule.

Opcje motywu Twenty Twenty

Motyw Twenty Twenty nie ma zbyt wielu opcji, ale w łatwy sposób dostosujemy kolory do naszych potrzeb.

W kokpicie WordPressa wchodzimy w Wygląd -> Dostosuj i przechodzimy do zakładki Kolory. Wybieramy kolor tła dla treści (ja ustawiam #ededed) oraz kolor tła nagłówka i stopki (ustawiam #910000). Dodatkowo możemy wybrać kolor wiodący.

Następnie przechodzimy do zakładki Opcje motywu (nadal jesteśmy w personalizacji Dostosuj). Odznaczam opcję “Pokaż wyszukiwarkę w nagłówku”, ponieważ na małej stronie firmowej wyszukiwarka nie będzie potrzebna. Następnie zaznaczam aby na stronach archiwów pokazywać wypisy.

Kolejną zakładką w personalizacji jest Szablon z okładką. Jest to specjalny szablon ze zdjęciem w tle nagłówka, który możemy później wskazać dla wybranych stron. Zobaczymy to w akcji za chwilę. Na razie zostawiam zaznaczoną opcję “Stałe położenie tła”. Kolor tła nakładki ustawiam na #910000, kolor tekstu nakładki na #ffffff, a przeźroczystość nakładki na ok. 70-80%.

I to byłoby na tyle opcji motywu. Będzie nam to musiało wystarczyć.

Czas zabrać się za tworzenie poszczególnych podstron. Będę tworzyć stronę dla centrum języka chińskiego (fikcyjną). Poza stroną główną, planuję opublikować 5 podstron: Kursy, Zajęcia kulturowe, Wizy, Blog i Kontakt.

Treści tworzymy w edytorze blokowym

Zacznijmy od stworzenia strony głównej. Tworzymy nową stronę w Strony -> Dodaj nową, w tytule wpisujemy nazwę firmy, w moim przypadku Centrum j. chińskiego 你好. W zakładce Dokument, znajdującym się z prawej strony edytora, dodajemy obrazek wyróżniający, a w sekcji Atrybuty strony wybieramy Szablon z okładką.

Bezpośrednio pod tytułem strony wstawimy krótkie zajawki prezentujące ofertę firmy. Wykorzystam do tego 3 bloki: NagłówekAkapit oraz Kolumny. Ten ostatni, w nowej wersji WordPressa, otrzymał nowe opcje. Przede wszystkim kolumny nie muszą już być równej szerokości, możemy wskazać procentowo jaką szerokość ma zajmować każda z kolumn. Jest to jedna z funkcjonalności, na którą chyba wszyscy czekali.

Wewnątrz bloku Kolumny wstawiam zdjęcie, tytuł oferty oraz krótki opis. Powtarzam tą czynność dla każdej kolumny. Dla bloku Kolumny ustawiam dodatkowo opcję Zwiększoną szerokość, dzięki czemu treść bardziej wypełni szerokość ekranu.

W następnej sekcji wykorzystamy blok Okładka. Posłuży nam on za tło rozciągnięte na całą szerokość strony. Wewnątrz Okładki znów wykorzystamy bloki NagłówekKolumny oraz dodamy odstęp od góry sekcji za pomocą bloku Odstęp. Wewnątrz każdej kolumny dodamy kilka Akapitów. Następnie scalimy paragrafy w nowy blok Grupa, dzięki czemu będziemy w stanie ustawić dla całej tej grupy jednolite tło.

Przyjrzyjmy się bliżej grupowaniu bloków, gdyż jest to nowość, która moim zdaniem będzie bardzo przydatna. Grupę bloków można utworzyć na 2 sposoby.

  • poprzez ikonę plus – z zakładki Układ strony wybieramy blok Grupa
  • poprzez zaznaczenie kilku bloków, które chcemy zgrupować – z menu bloków wybieramy opcję Grupa

Następnie całej grupie możemy przypisać wspólny styl. Obecnie dostępny jest tylko wybór tła. Ale myślę, że z czasem doczekamy się wtyczek, które poszerzą nam gamę dostępnych stylów.

Następnie zbudujmy sekcję 3, do której dodamy bloki Nagłówek, Kolumny oraz Cytat.

Inne nowości w WordPressie 5.3

Pozostałe podstrony budujemy w podobny sposób. Spójrzmy jeszcze na kilka nowości, które zostały dodane przy najnowszej aktualizacji WordPressa.

Blok Galeria

Możemy teraz w łatwy sposób ustawiać kolejność zdjęć w galerii. Na każdym zdjęciu mamy strzałki, którymi możemy przesuwać obrazy na odpowiednią pozycję.

Blok Okładka

Dla bloku Okładka możemy teraz wybrać jednolity kolor tła, a nie tylko obraz i video, jak to było we wcześniejszych wersjach. Dodatkowo, mamy możliwość ustawienia wysokości całej sekcji z okładką.

Nawigacja między blokami

W najnowszej wersji WordPressa doświadczymy znacznie lepszego user experience jeśli chodzi o nawigację między blokami. Ci, którzy od początku korzystają z edytora blokowego, pamiętają jak uciążliwe bywało zaznaczanie bloków-kontenerów, zewnętrznych bloków (np. bloku kolumny, gdy wewnątrz mieliśmy inne bloki). Obecnie zostało to naprawione i nie ma już żadnych problemów z przeklikiwaniem się pomiędzy blokami zewnętrznymi a wewnętrznymi.

Dodatkowo, przesuwanie bloków towarzyszy teraz efekt ruchu, przez co wyraźnie widać kiedy i gdzie przesuwamy dany blok.

Podsumowanie

W kilka godzin udało mi się stworzyć w miarę przyzwoitą stronę typu biznesowego, którą z powodzeniem można by wykorzystać w małej firmie (stronę można obejrzeć tutaj). I to na domyślnym motywie, bez instalowania ani jednej wtyczki oraz bez modyfikowania kodu. Nigdy wcześniej to nie było możliwe w WordPressie. Moim zdaniem jest to ogromna zmiana na plus.

Polecam Wam wypróbować edytor blokowy, nawet jeśli wcześniej mieliście złe doświadczenia. Mam wrażenie, że edytor w końcu zaczyna osiągać dojrzałość rynkową. Jest już bardzo mało rzeczy, do których można się przyczepić. Z dobrze przygotowanym pod Gutenberga motywem wszystko po prostu działa tak jak powinno.

A Wy przekonaliście się już do edytora blokowego? Chętnie zobaczę przykłady Waszych realizacji (dajcie link w komentarzu). A jeśli chcecie zobaczyć jeszcze jeden przykład tego co da się stworzyć w nowej wersji WordPressa to zapraszam na bloga Agnieszki Bury, do wpisu: Twenty Twenty – czy to motyw na który tak czekaliśmy?

Podziel się

Komentarze (1)


Odpowiedz

Adres email nie będzie opublikowany.

*

To także może Cię zainteresować:

  • Jak zabezpieczyć formularz przed spamem w 2019?
  • WordCamp Europe 2019 – relacja z największej konferencji o WordPressie
  • RODO a aplikacje: szyfrowanie, anominizacja…
  • 3 kroki do lepszej wydajności na hostingu WordPress

To także może Cię zainteresować:

Jak zabezpieczyć formularz przed spamem i robotami?
Jak zabezpieczyć formularz przed spamem w WordPress, Jooma!, PrestaShop, czy też innej, dowolnej aplikacji opartej o PHP w 2019 roku? Dowiedz się, jakie są zagrożenia i sposoby działania.

czytaj

2734 osób z ponad 90 krajów uczestniczyło w zeszły weekend w WordCamp Europe 2019 w Berlinie.

czytaj

Certyfikaty SSL
Szyfrowanie, hashowanie, anonimizacja… RODO straszy właścicieli stron tymi groźnymi pojęciami, w tym wpisie wyjaśniamy...

czytaj

Pozycjonowanie long tail w Google
Jak w 3 prostych krokach skonfigurować swoją usługę pod kątem lepszej wydajności WordPress? Oto proste kroki do zrobienia od razu.

czytaj