Modyfikacja wyglądu WordPressa

Spis treści

Systemy CMS (w tym WordPress) mają za zadanie oddzielenie prezentowania danych przykładowo nasze teksty, zdjęcia, itd. od wyglądu serwisu za co odpowiadają motywy, oraz dostępnych funkcjonalności co realizują wtyczki.

Tak więc aby zmienić wygląd serwisu musimy zainteresować się motywami, czym są, jakie dają możliwości, jak są zbudowane, jak je instalować i modyfikować.

Możesz też od ręki zobaczyć podsumowanie.

Motyw

Motyw odpowiada za prezentację wyglądu serwisu użytkownikowi, składa się na niego głównie „front end” czyli to z czym użytkownik ma styczność i czego większość dzieje się w przeglądarce użytkownika.

Pod pojęciem prezentacja wyglądu mieści się wszystko to co widać. Od układu i występowania elementów na stronie (np. różna strona główna od strony wyszukiwania) przez tła, obramowania, do animacji (np. rozwijane menu) i responsywności czyli dopasowania wyglądu do różnej wielkości ekranów. W prezentacji wyglądu zawierają się również różne specjalistyczne widoki strony np. jak wysoki kontrast nakładany przez standard WCAG

Budowa motywu

Na motyw zazwyczaj składają się plik z funkcjami, zbiór szablonów stron, arkusz stylów, pliki java script, dodatki graficzne jak ramki, tła, ozdobniki, ikony, …, czasem własny krój fonta.

W dużym uproszczeniu:

plik z funkcjami functions.php odpowiada za połączenie wyglądu strony (motywu) z silnikiem WordPressa,
szablon strony odpowiada za występowanie i układ elementów na niej,
arkusz stylów odpowiada za rozmiary i kolorystykę,
java script odpowiada za działania dynamiczne i interakcje np. podmiana grafiki po najechaniu kursorem, weryfikacja czy podany kod pocztowy nie zawiera liter,
dodatki graficzne stosuje się tam gdzie pożądanego efektu nie osiągnie się za pomocą css np. narożniki jak z koronkowej serwetki, zdjęcia jako tło pod blokiem tekstu.
własny krój fonta czasem chcemy użyć fonta nietypowego, unikatowego żeby osiągnąć planowany efekt, czasem potrzebujemy fonta okazjonalnego jak nasza „narodowa” Brygada, lub do zastosowań specyficznych jak zapis nutowy, a czasem firma posiada własne fonty zapewniające jej rozpoznawalność, wtedy właśnie takie fonty są załączane bezpośrednio do motywu.

Nierozsądne jest osadzanie elementów graficznych (np. jako odstępniki czy cieniowanie) bo powoduje problemy z responsywnością, oraz zazwyczaj większą wagę strony niż podobna realizacja przy użyciu możliwości jakie oferuje css.

Nie ma też sensu dodawać popularnych krojów fonta do motywu ponieważ popularne fonty (te udostępniane przez google) zazwyczaj są już pobrane do pamięci komputera użytkownika podczas oglądania innych stron. Użycie pobranych wcześniej fontów powoduje szybsze wyświetlanie stron niż pobieranie fontów z naszego serwera i dopiero ich wyświetlenie.

Wybór motywu

Wybór motywów jest ogromny. Są motywy darmowe i motywy płatne, przy czym nie zawsze jest tak że płatne motywy mają lepszą jakość albo lepsze wsparcie niż darmowe motywy, niby powinno tak być że płatne jest lepsze, ale czasem nie jest.

Motyw powinien spełniać nasze oczekiwania estetyczne, jak również oferować rozmieszczenie poszczególnych elementów zgodnie z naszymi potrzebami. Zazwyczaj wybór motywu z którego możliwości nie będziemy korzystać w pełni, jest równie sensowny jak zakup butów o 3 numery za dużych. To że czegoś nie używamy nie znaczy że nie będzie spowalniało strony, wydajniejsze są motywy dopasowane do potrzeb niż te nadmiarowe „bo kiedyś się przyda”.

Wybierając motyw trzeba sprawdzić czy współpracuje on z aktualną wersją WordPressa – zwłaszcza jeśli chcemy używać jako edytor treści domyślnego gutenberga. Część motywów nie zawiera wsparcia dla popularnych wtyczek typu woocommerce, bbpress czy pagebuilderów jak elementor, siteorgin itd. Jeśli planujemy użycie bardziej rozbudowanych wtyczek trzeba sprawdzić czy wybierany motyw je wspiera.

Są też dostępne (zwłaszcza wśród płatnych motywów) rozwiązania mieszane czyli motyw realizujący funkcje wtyczek. Ponieważ burzą one istotę CMS-a to choć tymczasowo mogą być wygodne to nie polecam takich rozwiązań.

Często motyw jest tak zaprojektowany że wymaga instalacji predefiniowanych wtyczek które są dołączane do niego w instalatorze. Niestety czasem występują problemy żeby tak zainstalowane wtyczki się aktualizowały automatycznie. Jest to wielki kłopot bo może się okazać że mamy dziurawą wtyczkę której nie ma jak zaktualizować ani odinstalować (czy choćby wyłączyć) bez zmiany całego motywu.

Instalacja motywu

Do instalacji motywów bezpośrednio z internetu służy strona dostępna poprzez panel administracyjny -> wygląd -> motywy i klikamy tam guzik [dodaj nowy]. Po kliknięciu rozwinie się bogata biblioteka z wyborem darmowych motywów.

Można też wysłać motyw do instalacji ze swojego komputera jako plik „motyw.zip” wskazany po kliknięciu na powyższej stronie guzika [wyślij motyw na serwer]. Jest to najczęstszy sposób instalowania motywów płatnych.

Ostatnim sposobem jest przesłanie plików motywu (rozpakowana zawartość posiadanego „motyw.zip”) na serwer i umieszczenie ich w katalogu z motywami domyślna ścieżka to /katalog_naszego_wordpressa/wp-content/themes/

Żeby motyw zaczął działać (strona się wyświetlała z jego wyglądem) trzeba go aktywować. Aktywujemy go klikając guzik [aktywuj] widoczny po najechaniu myszą na obrazek reprezentujący zainstalowany motyw w panel administracyjny -> pionowe menu po lewej stronie -> wygląd -> motywy

Motywy domyślnie konfiguruje się poprzez panel administracyjny -> wygląd -> dostosuj. Są tam ustawienia fontów, kolorów oraz innych elementów. Zmienić można nietylko elementy z motywu ale też ogólne jak przykładowo „tożsamość witryny”. Niektóre motywy mają własne osobne menu konfiguracyjne najczęściej ulokowane jako samodzielna pozycja w panel administracyjny -> pionowe menu po lewej stronie.

Plików motywu głównego nie edytuje się! do wprowadzenia zmian w wyglądzie służy motyw potomny, do małych poprawek wystarcza opcja „Dodatkowy CSS” w panel administracyjny -> pionowe menu po lewej stronie -> wygląd -> dostosuj

Motyw potomny

Wszelkie zmiany wyglądu strony przy pozostawieniu wybranego motywu, ale dość gruntowne jak dodawanie usuwanie wybranych elementów dokonuje się w motywie potomnym, edytując pliki źródłowe bądź pisząc własne.

Dzięki wprowadzaniu takich zmian w motywie potomnym aktualizacja motywu głównego ich nie nadpisze, dzięki czemu nie stracimy naszej pracy.

Motyw potomny jest ulokowany w katalogu zawierającym wszystkie motywy naszego WordPressa /katalog_naszego_wordpressa/wp-content/themes/

Do poprawnego działania motyw potomny wymaga posiadania zainstalowanego motywu głównego, którego działania modyfikuje, nie działa on samodzielnie.

Pazerni bądź słabi (często cechy występujące razem) autorzy motywów potrafią stworzyć motyw do którego się nie uda wdrożyć motywu potomnego, w takim przypadku warto znaleźć inny normalnie działający motyw.

Budowa motywu potomnego

Motyw potomny może się składać wyłącznie z pliku style.css zawierającego określone metadane deklarujące jego tożsamość. Często jednak jest w nim zawarty również plik functions.php, dodatkowe grafiki, fonty, skrypty js i miniaturka podglądu motywu. Poza nimi w katalogu motywu potomnego mogą się znajdować również wszelkie pliki które chcemy nadpisać żeby zmodyfikować układ bądź działanie strony, występowanie elementów dodając np. dodatkowe menu czy kasując obrazek wyróżniający z listy postów. Motyw potomny to również doskonałe miejsce na dodatkowe szablony stron jeśli takich potrzebujemy.

style.css

Kod nagłówka pliku style.css deklarujący że dany motyw jest motywem potomnym musi zawierać dwie linie:

Theme Name: określającą nazwę nowego motywu (dla porządku można dodać w niej child lub inny znacznik potomności)
Template: mówiąca który motyw zmieniamy. Całą resztę nagłówka można pominąć.

/*
 Theme Name:   Twenty Fifteen Child
 Theme URI:    http://example.com/twenty-fifteen-child/
 Description:  Twenty Fifteen Child Theme
 Author:       John Doe
 Author URI:   http://example.com
 Template:     twentyfifteen
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, accessibility-ready
 Text Domain:  twentyfifteenchild
*/

Z powodu wzrostu czasu ładowania strony obecnie nie jest zalecane ładowanie innych plików css za pomocą @import pliki takie ładuje się poprzez funkcję w pliku functions.php

functions.php

Plik odpowiadający za modyfikację działań strony, osadza się w nim kod który powoduje np. kolejkowanie arkuszy stylów, czy odpowiadający np. za dodawanie side barów.

Za pomocą akcji i filtrów w nim zamieszczonych, wpływa się na działanie WordPressa, można w nim zarejestrować własne szablony postów, dodać niestandardowe elementy nagłówka czy przeprowadzić dodatkowe dopasowanie podmieniając logo czy tło w motywie.

inne pliki w motywie potomnym

Motyw potomny jest właśnie tym miejscem gdzie należy wprowadzać modyfikacje usuwające zbędne elementy strony.

Przykładowo jeśli nie pasuje nam to że na stronie pojedynczego postu wyświetla się autor i data jego utworzenia to kasujemy elementy je wywołujące w kodzie danego szablonu strony. Jest to zdecydowanie lepsze rozwiązanie niż prostackie ukrywanie ich za pomocą css. Dzięki zmianie kodu szablonu strony upraszcza się drzewo DOM, google nie karze serwisu za ukryte treści, zmniejsza się transfer i obciążenie serwera co owocuje szybszym ładowaniem strony – czyli same plusy.

Możemy też rozbudowywać motyw główny o dodatkowe szablony stron np. dedykowane wyświetlaniu podcasta czy ankiety.

Motyw potomny pozwala zmieniać pliki domyślne wpływające na wygląd serwisu jak comments.php, footer.php a wręcz można zmieniać działanie i wygląd stron bazowych jak search.php czy category.php.

Przykładowo można dodać szablon pozbawiony sidebarów, menu, komentarzy, stopki itd. umożliwiający budowę strony typu landing page.

Wszelkie dodatkowe czy też własne fonty powinno się zamieszczać w motywie potomnym i wywoływać z niego bezpośrednio.

Do zapamiętania!
Wartości z functions.php motywu potomnego wczytują się przed tymi z motywu głównego, zaś style.css na odwrót, wartości styli z motywu potomnego wczytują się jako drugie i nadpisują wartości z motywu głównego.

„Dodatkowy CSS”

Ten element personalizacji serwisu ulokowany jest w panelu administracyjnym -> menu pionowe po lewej stronie -> wygląd -> dostosuj

Dodatkowy CSS umożliwia nadpisanie wartości używanych stylów na najniższym z dostępnych dla redaktora poziomów. Nie wymaga dostępu do plików na serwerze i uciążliwości ich przesłania czy wersjonowania.

Wpisane w to pole treści nadpiszą wartości zawarte w plikach style.css motywu głównego i style.css motywu potomnego. Niestety wprowadzone tu dane nie nadpisują wartości stylów generowanych poprzez wtyczki za pomocą ich java scriptów i wartości wpisanych na sztywno w szablonach stron.

Edycja elementów stylów w tym miejscu najczęściej wystarcza do wprowadzania kosmetycznych poprawek widoku strony. Pole to sprawdza się doskonale zamiast tworzenia motywu potomnego w przypadku wprowadzania niewielkich zmian wyglądu. W przypadku bardziej rozbudowanych zmian zwłaszcza przy wielu liniach kodu użycie motywu potomnego jest wygodniejszym rozwiązaniem pod względem zarówno edycji jak i zarządzania jej treścią.

Podsumowanie

Za wygląd serwisu odpowiada motyw. Przy jego wyborze należy sprawdzić czy wybraniec obsługuje wtyczki których chcemy używać i czy jest aktualny.

Duże zmiany w motywie (korekta wyglądu bądź istnienia całych elementów lub stron) wprowadza się za pomocą motywu potomnego który potrafi nadpisać dane z motywu głównego ale sam bez niego nie działa.

Małe zmiany w wyglądzie serwisu wyłącznie za pomocą modyfikacji CSS wprowadzamy w okienku „Dodatkowy CSS” przy większej ilości linii kodu jest to bardzo niewygodne.