Strona główna > Internet > WordPress > Nowy wygląd strony LiKoToN
Kategorie
WordPress

Nowy wygląd strony LiKoToN

Kilka lat musiało minąć, zanim zdecydowałem się na zmianę wyglądu swojego bloga, LiKoToN. Z pierwszej wersji korzystałem około dwóch lat, wprowadzając w międzyczasie różne modyfikacje. Tę wersję można zobaczyć na stronie web.archive.org. Kolejna wersja była wizytówką bloga przez około pięć lat. Ta również była co jakiś czas modyfikowana, a w zarchiwizowanej wersji można ją zobaczyć w serwisie web.archive.org.

LiKoToN na zmodyfikowanym motywie Twenty Twenty
Zmodyfikowany motyw Twenty Twenty

WordPress

Odkąd prowadzę swojego bloga, korzystam z jednego systemu zarządzania treścią (CMS), jakim jest WordPress. Testowałem wiele CMS-ów jak Drupal, PHPFusion czy Joomla, ale WordPress najbardziej mi odpowiadał. Dużo gotowych wtyczek, prostota obsługi, częste aktualizacje i możliwość modyfikowania motywów według własnego widzimisię to było to, czego potrzebowałem. Pozostałe CMS-y mimo tego, że też są dobre, miały coś, czego w nich mi brakowało lub działało nie tak, jakbym tego oczekiwał.

Jasne, WordPress również ma swoje wady, a do tego uznawany jest za mało bezpieczny, ale twórcy starają się szybko naprawiać błędy i wprowadzać kolejne zabezpieczenia. Poza tym można wspomóc się dodatkowymi wtyczkami poprawiającymi obsługę, czy chroniącymi naszą stronę przed złośliwymi atakami. Dodatkowo dzięki licznym instrukcją samemu można modyfikować kod witryny.

Twenty Twenty

Tworząc trzecią wersję strony LiKoToN, skorzystałem z najnowszego motywu, który dostarczany jest wraz z WordPress-em. Tym motywem obecnie jest Twenty Twenty.

Spodobał mi się wygląd motywu Twenty Twenty i jego obsługa, dlatego go wybrałem. Do tego motyw Twenty Twenty w mojej ocenie dobrze wyświetla stronę w wersji mobilnej, aczkolwiek ma swoje mankamenty, które musiałem poprawić.

Zmiany nanosiłem, tworząc motyw potomny, co ma swoje zalety, ale i wady. Nie musiałem tworzyć całego motywu od podstaw, a tylko w kilku plikach naniosłem zmiany, które według mnie poprawiły wygląd strony. Drugą zaletą skorzystania z motywu potomnego jest możliwość aktualizacji praktycznie bez psucia wprowadzonych przeze mnie zmian. Jest szansa, że coś się popsuje, ale raczej znikoma. Większym problemem jest szukanie miejsc, które chcemy zmodyfikować w motywie. Jest to czasami czasochłonne.

Widoczne zmiany w motywie Twenty Twenty

Niektóre zmiany naniosłem już podczas dostosowywania motywu w ustawieniach WordPress-a. Skonfigurowałem w nim menu oraz widget-y, ustawiłem kolor czcionki, dodałem loga, czy ujednoliciłem kolor tła. Inne zmiany naniosłem w plikach motywu potomnego.

Pierwszą widoczną zmianą jest usunięty opis strony. On nadal jest dostępny, ale nie wyświetla się na stronie obok logotypu.

Drugą widoczną zmianą są zmniejszone fonty w wersji komputerowej. Te, które są oryginalnie, według mnie są za duże, przez co strona wydaje się ociężała. Podobny zabieg zastosowałem dla wyszukiwarki.

Trzecią zmianą, którą od razu widać, są usunięte podkreślenia w odnośnikach (linkach). Nie podoba mi się tekst w takiej formie, więc je usunąłem. Zostawiłem tylko dla przypadku, gdy kursorem najedziemy na podlinkowany tekst.

Kolejna widoczna zmiana to szersza główna część strony. Dzięki temu strona nie ma ogromnych pustych obszarów z obu stron. Są duże, ale nie aż tak, jak to jest w oryginalnym motywie.

Ostatnią zmianą, którą od razu widać jest zmieniona treść w stopce. Poza informacją o prawach autorskich dodałem również uwagę dotyczącą plików cookies.

Mniej widoczne zmiany w motywie Twenty Twenty

Zmianą, której od razu nie widać, ale mi przeszkadzała, jest usunięcie obwódek dla przycisków „Menu„, „Szukaj” i „Zamknij menu„. Wyświetlanie tych obwódek wyglądała jak błąd motywu.

Obwódka przycisku Zamknij menu w motywie Twenty Twenty
Obwódka przycisku „Zamknij menu”

Domyślnie motyw Twenty Twenty umożliwia wchodzenie do artykułu przez kliknięcie jego tytułu, co nie jest wygodne w wersji mobilnej. Dlatego dodałem możliwość wchodzenia do wpisu, przez kliknięcie obrazka.

Zostając przy obrazkach, na stronie głównej usunąłem wyświetlanie podpisu dla obrazków prezentujących artykuły. Taki podpis przydaje się w artykule, ale na liście wpisów według mnie jest zbędny i zajmuje tylko miejsce.

Drugą zmianą związaną z obrazkami było poprawienie wyświetlania ich, gdy miały ustawione wyrównanie na „Brak wyrównania„. Takie wyrównanie działało jak wycentrowanie, czyli obrazek znajdował się pod tekstem i był wyśrodkowany. Ja często wstawiam obrazki w tekst, więc takie rozwiązanie bardzo mi nie pasowało. Musiałem je zmienić, aby robiło to, czego oczekuję.

Dodatkowe informacje na blogu LiKoToN

Do stron ze wpisami dodałem okruszki, czyli pokazanie lokalizacji artykułu w drzewie kategorii. Takie rozwiązanie poza pokazaniem lokalizacji artykułu ułatwia szukanie odpowiednich informacji w danej kategorii i poprawia indeksowanie w wyszukiwarkach.

Drugą informacją, którą dodałem na stronach ze wpisami, jest data aktualizacji wpisu. Oryginalnie podawana jest tylko data publikacji, ale data aktualizacji również się przydaje, na przykład, gdy chcemy pokazać, że wprowadziliśmy zmiany lub poprawki.

Zmiany w edytorze WordPress-a

Część zmian związanych z wyglądem strony, wprowadziłem również w edytorze WordPress-a. Robi się to w odpowiednich plikach motywy, również potomnego. Zmiany w edytorze wprowadziłem, aby artykuł, który tworzę, od razu wyglądał tak, jak po publikacji, co ułatwia tworzenie.

Na zakończenie

Mam nadzieję, że podałem wszystkie najważniejsze zmiany, które wprowadziłem w motywie potomnym motywu Twenty Twenty. Dzięki tym zmianom blog LiKoToN zyskał nie tylko nowy wygląd, ale stał się bardziej czytelny i lepiej dostosowanych do obecnej rzeczywistości. A przynajmniej ja mam takie wrażenie 🙂

Poniżej zamieszczam ilustrację, jak strona LiKoToN wyglądałaby na oryginalnym motywie Twenty Twenty.

LiKoToN na oryginalnym motywie Twenty Twenty
Oryginalny motyw Twenty Twenty

Czy dzięki wprowadzonym zmianom strona wygląda lepiej?

[Głosów: 2   Average: 5/5]

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

Witryna wykorzystuje Akismet, aby ograniczyć spam. Dowiedz się więcej jak przetwarzane są dane komentarzy.