Jak zakodować własny motyw do WordPressa – wprowadzenie do serii wpisów – krótkie omówienie motywu i garść przydatnych linków.
Witam we wprowadzeniu do serii WordPress – własny motyw od podstaw. Pisząc tą serię, chcę podsumować swoją wiedzę o WP i przy okazji udostępnić (mam nadzieję) ciekawy tutorial o tworzeniu własnego motywu.
Postaram się przynajmniej raz na tydzień dodawać nowy wpis do tej serii, być może uda mi się publikować nowy odcinek trochę częściej.
Cele
Celem tej serii będzie przeniesienie, wstępnie zakodowanego już wcześniej w HTML, CSS, JS, motywu do WordPress’a. Motyw będzie wyglądał tak od strony głównej:
Wstępnie zakodowana strona główna, z której z odcinka na odcinek, będę sobie ciąć kod, jest na moim Github’ie. Brakujące elementy będę dorabiać/stylować na bieżąco.
- Pliki źródłowe do strony głównej : https://github.com/crocoderpl/cloudy-blog-source-files
- Demo nie wpiętej do WP strony głównej : https://demo.crocoder.pl/cloudy-blog-demo
Kod właściwego motywu będzie po każdym odcinku aktualizowany w swoim repozytorium na Github.
O naszym motywie
Motyw do WordPressa, który będę kodować został nazwany Cloudy Blog i jest to dosyć prosty theme, który ma w sobie większość z podstawowych funkcjonalności:
- strona głowna z postami blogowymi
- sidebar – panel boczny
- widgety
- [dodatkowo] ulepszony widget z ostatnimi wpisami
- statyczne podstrony
- custom header, logo, (drop-down) menu
- stopka
- komentarze
Autorem projektu graficznego jest Bartłomiej Rudnik.
Wymagania
Seria z założenia pisana jest dla osób początkujących, które chciałby poznać się z WordPress’em.
WordPress jest napisany w PHP – dobrze by było chociaż pobieżnie znać ten język. Postaram się oczywiście jak najlepiej wytłumaczyć zagadnienia związane z PHP a jakby coś było niejasne to chętnie wytłumaczę w komentarzu.
Oprócz tego trzeba znać HTML + CSS – do pracy z CSS w tym motywie korzystam z preprocesora SASS – z nim też warto się zapoznać.
Na zakończenie
Proszę Was o zgłaszanie jakichkolwiek nieścisłości w kodzie, uwag, może lepszych lub innych rozwiązań dla danego problemu – serię traktuję jako wspólną naukę. Jeśli będzie taka potrzeba, chętnie będę wyróżniać poprawki w artykułach wraz z nickiem osoby, która je zgłosiła.
Przydatne linki (wszystkie w jęz. angielskim):
Hej,
Zapoznałem się z początkowymi wpisami i wygląda seria obiecująco, mam tylko prośbe o to byś podczas projektowania motywu zawarł takie informacje jak: srcset, responsive design i odpowiedni dobór wielkości obrazów do „templatek” miniaturek z WordPressa – jako specjalista SEO widzę co „twórcy” motywów robią i boli to gdy ktoś do wczytuje do miniaturki wpisu całe zdjęcie ważące 1 mb 🙂
Hej, jasne, będę omawiać sprawy, o których wspomniałeś – może sam będziesz miał coś ciekawego do dodania w tym temacie, gdy już wyjdą wpisy związane z optymalizacją zdjęć. 🙂 Nowe wpisy przewiduję od połowy stycznia, na razie pracuję nad modernizacją strony i bloga, żeby lepiej wyglądały i były bardziej czytelne.
Ładny poradnik. Widać że do każdego nowego wpisu dobre się przygotowujesz. Dodajesz linki do źródeł. Naprawdę super.