7.1. Co to jest motyw i po co mi on?

Stronę sobie robię – darmowy kurs WordPress 7.1. Co to jest motyw i po co mi on?

Motyw w WordPressie to jest taki twór, który odpowiada za wygląd całej witryny internetowej.

Ale nie tylko wygląd – o tym się jakby zapomina albo podciąga pod wygląd, ale motyw odpowiada też za zachowanie strony – za to, jak ona wchodzi w interakcje z użytkownikiem.

❓ OK, ale odpowiada za wygląd, czyli za co konkretnie?

Na przykład za:

liczbę i rozmieszczenie elementów na podstronach poszczególnego rodzaju, w tym obecność lub brak rożnych elementów strony (np. stopki, bocznej szpalty zwanej sidebarem, menu, łącznie z tymi takimi ikonkami do social mediów 🙂)
używane kroje pisma
używane kolory
wielkości elementów (tekstu, nagłówków, niektórych obrazów itd)

❓ A te interakcje, to znaczy co w ogóle?

Strony już dawno przestały być takim tworem co sobie jest i na tym koniec wysiłku 😉

Teraz, mili Państwo, to strony żyją życiem własnym lub sterowanym działaniami użytkowników 😃

Wiecie – te fontanny i wodotryski, że wchodzicie na stronę, a tu Pac!, wyskakuje znikąd tytuł, scrollujecie na dół – Siup! z boku wyjeżdża zamaszyście obrazek jakiś. Ledwo skumacie co zaszło i chwycicie dalej za myszkę, a tu plum! na obrazek wpada podpisik, a pod nim pulsuje guzik, że Kup, kup, teraz koniecznie kup! 😉

Przewiniecie trochę, ale sięgniecie myszką do prawego górnego rogu, a tu O nie, nie, nie! – pop-upik jeszcze zawoła – nie opuszczaj tej strony! Przeczytaj jeszcze o tym i o tym!

Zamykacie go, bo przecież Wy chcieliście tylko menu nadusić, a nie wyjść, klikacie zatem w ikonę hamburgerka, a tam menu wysuwa się z lewej strony z odgłosem plumknięcia.

No. To to mniej więcej mam na myśli, kiedy mówię o tym, że strona wchodzi w interakcje z odwiedzającymi 🙂

Więc jeśli widzicie, że na stronie:

możecie przewijać slajderek/karuzelę,
po najechaniu kursorem myszki na jakiś element, ten element się zmienia – kolor ikonki, obrazek produktu znika i pojawia się inny, znikąd materializuje się przycisk do koszyka po najechaniu na tytuł, po wycelowaniu kursora w koszyk bez klikania rozwija się okienko z jego podglądem, itd.,
po kliknięciu w strzałkę na dole długaśnej strony zostaniecie szybciochem przewinięci do góry,
po kliknięciu w nagłówek rozwija się reszta tekstu pod tym nagłówkiem (częste w FAQ),
za Waszą myszką biegnie kotek albo frunie motylek

no to wiedzcie, że choć to nie jest zwykły statyczny wygląd, tylko raczej zachowanie czy też interakcja (zachowanie w odpowiedzi na nasze zachowanie :)), to za to też odpowiada motyw 🙂

❓ A czym tak fizycznie jest motyw?

Motyw to jest po prostu kawałek kodu napisanego przez człowieka, który się na tym zna 😃

Choć bardziej precyzyjnie byłoby napisać, że jest to masa kodu, gigantyczny kawał kodu, góóóóóra kodu i napisana najczęściej przez cały zespół osób, które się na tym znają, bo jednemu człowiekowi byłoby trudno ogarnąć w stosownej jakości i sensownym czasie takie zadanie 🙂

Na szczęście ludzie tacy jak my, czyli amatorzy, w ogóle nie muszą się przejmować tym, że tam jest jakikolwiek kod, bo miedzy innymi po to jest go tam taka sterta, żebyśmy my mogli działać bez jego znajomości i zmieniać oraz układać w motywie różne rzeczy tylko klikając tam, gdzie nam pozwalają 😉

Chyba że to, gdzie nam pozwalają, nam nie wystarcza i chcemy mącić bardziej, no to wtedy tak, owszem, wtedy już trochę musimy ten kod znać, żeby dopisać do niego swoje własne kawałki 🙂

Ale takimi zmianami nie będziemy się zajmować, a w każdym razie na pewno nie na tym etapie 🙂

📌 Motyw WordPressowy, ten cały wielki kloc z kodu, składa się zasadniczo z trzech części:

➡️ z szablonów stron (tak naprawdę: podstron)

Motywy mogą oferować różną ich liczbę – od jednego do nawet kilkunastu 🙂 Ta sama podstrona, w zależności od tego, jaki szablon jej ustawimy (jeśli motyw daje więcej niż jeden) może na przykład mieć szerokość na cały ekran, albo węższą, może wyświetlać header i footer, albo go nie pokazywać, może mieć sidebar albo nie 🙂

Bo szablony stron (podstron :)) to są takie części motywu, które odpowiadają za układ treści, układ elementów na danej (pod)stronie. Czyli na przykład za to, jak szeroka jest kolumna z tekstem, jak umiejscowiony i jak duży jest obrazek wyróżniający oraz czy w ogóle będzie widać obrazek wyróżniający, gdzie i w jakiej formie pokazana jest data wpisu albo jego autor, gdzie i jak wyświetla się kategoria (lub kategorie) i czy w ogóle się wyświetlają, gdzie i jak wyświetlają się komentarze i formularz dodawania komentarzy do wpisu, czy pokazane są okruszki (bradcrumbs) czy nie, i tak dalej – milion takim małych aspekcików jest do rozmieszczenia na stronach, choć oczywiście o tym się nie myśli jakoś za bardzo, jak się na stronę po prostu patrzy jako użytkownik 🙂

My tylko bardziej czujemy efekt tego, nad czym ktoś w detalach się grubo napocił 🙂

➡️ z pliku style.css, czyli arkusza stylów

Jeśli kiedyś zdarzyło Wam się słyszeć, że jakąś tam zmianę trzeba zrobić w CSS-ie, no to właśnie to jest ten CSS 😉

Bo CSS to po prostu skrót od kaskadowy arkusz stylów (Cascading Style Sheet).

Czemu kaskadowy, to się nie będę na razie wgłębiać żeby nie motać – grunt, żeby kojarzyć choćby mętnie 😉, że CSS to nie jest jakiś byt osobny, co się z choinki urwał i nie wiadomo co robi i gdzie, tylko po prostu kawałek motywu, który odpowiada głównie za dobór krojów pisma, kolory i wielkości nagłówków, tekstów, guziczków i takich tam dynksów, za tła, marginesiki, rameczki, paseczki i inne popierdółeczki oraz dzindzibałki, które upiększają stronę 🙂

➡️ z pliku functions.php, którym pewnie nieprędko będziemy sobie tyłek zawracać, o ile w ogóle, ale warto wiedzieć, że to też kawałek motywu, gdyby się Wam zdarzyło kiedyś o nim usłyszeć 🙂

Może kiedyś będziecie potrzebowali zmodyfikować coś w swoim WordPressie dodając zmianę właśnie w tym pliku – wtedy będzie trzeba pamiętać, że właśnie w plikach motywu tego pliku szukamy 🙂

📌 Podsumowując, co by wniosek zapamiętać skrócony, ale konkretny – motyw jest to coś, co odpowiada za warstwę wizualną strony na WordPressie.

Trzeba jednak na marginesie tak cichutko zaznaczyć, że obecnie doczekaliśmy czasów, w których (z przyczyn czysto komercyjnych) niektóre motywy to takie kobyły, że obskakują też za jednym zamachem to, czego w sumie wcale nie powinny, a wiec zapewniają dodatkowe funkcje naszym WordPressom – mają własne formularze kontaktowe, mapy Googlowskie, wyskakujące pop-upy albo w ogóle wintegrowane w siebie najróżniejsze zaawansowane wtyczki, które do tej pory dodawało się samemu, pojedynczo, w razie potrzeby.

Ma to swoje minusy, ma też czasem (wbrew pozorom) pewne plusy, ale przede wszystkim sprawia, że “tradycyjny” układ:
⭐️ motywy = wygląd,
⭐️ wtyczki = dodatkowe funkcjonalności
został ostatnimi laty, mam wrażenie, potężnie zachwiany.

Warto o tym pamiętać, kiedy staniecie w którymś momencie zdziwieni, bo sądziliście, że kurczę, jak motyw może coś takiego robić, myślałam że do tego będzie potrzebna wtyczka! – wiedzcie wtedy, że nie, to nie z Wami i waszym rozumieniem spraw WordPressowych jest coś nie tak 🙂

Po prostu świat wtyczek i motywów mocno się ostatnimi laty zamiąchał i rozbebłał, i czasem trudno już ogarnąć, co z rzeczy, które chcielibyśmy mieć na stronie, powinniśmy załatwić motywem, a co wtyczką 🙂

Mam nadzieję, że jakoś jednak razem przedrzemy się przez tę drogę zaciemnioną niczym Kraków po północy (o ile nadal wyłączają tam po północy całe miejskie oświetlenie 😃) i gdy już zobaczymy światełko na końcu tunelu, to to nie będzie pociąg 😉 🙈