A Guide To The Options For WordPress Theme Development

admin 0 Comments Articles

A Guide To The Options For WordPress Theme Development

  • 14 min read
  • WordPress,Techniques (WP)
  • Zapisane do czytania w trybie offline
  • Share on Twitter, LinkedIn
Na ostatnim WordCampie w Edynburgu brałem udział w panelu dyskusyjnym na temat tworzenia motywów WordPressa i opcji dostępnych dla deweloperów podczas budowania motywów. Nadrzędnym wnioskiem z sesji było to, że nie ma jednej uniwersalnej odpowiedzi i że najlepsza metoda zależy od potrzeb witryny i możliwości dewelopera.

Na ostatnim WordCamp Edinburgh, wziąłem udział w panelu dyskusyjnym na temat rozwoju motywów WordPress i opcji dostępnych dla deweloperów podczas budowania motywów. Nadrzędnym wnioskiem z sesji było to, że nie ma jednej uniwersalnej odpowiedzi i że najlepsza metoda zależy od potrzeb witryny i możliwości dewelopera.

Ale jeśli zaczynasz budować motywy WordPress lub chcesz opracować system do budowania ich bardziej wydajnie lub solidnie, jak zdecydować, które podejście zastosować? W tym artykule krótko opiszemy, jak działają motywy WordPress, a następnie przyjrzymy się niektórym różnym podejściom do ich tworzenia, wraz z poradami, które podejście może być najbardziej odpowiednie dla Twojej witryny i okoliczności.

Dalsze lektury na SmashingMag:

  • Migracja witryny do WordPressa jest łatwiejsza, niż myślisz
  • Używanie WP_Query w WordPressie
  • Schedule Events Using WordPress Cron
  • How To Improve The Deployment Of WordPress Websites

Jak działa motyw WordPressa?

W WordPress, motywy napędzają stronę internetową i określają, co zawiera, jak się zachowuje i jak wygląda. Motyw jest oddzielony od treści, która jest przechowywana w bazie danych. Oznacza to, że możesz używać tego samego motywu na więcej niż jednej stronie internetowej, niezależnie od zawartości tych stron – co być może już robisz, jeśli pobrałeś motywy z repozytorium motywów WordPressa.

Motyw składa się z wielu plików szablonów, przechowywanych w folderze motywów, który znajdziesz w wp-content/themes w swojej instalacji WordPressa. Każdy motyw WordPressa musi zawierać co najmniej dwa pliki: index.php i style.css. Plik index określa, jaka zawartość jest wyświetlana przez motyw, a arkusz stylów (zgadłeś) stylizuje ją, jak również zawiera meta informacje o motywie, których WordPress używa, aby motyw działał poprawnie.

Właściwie większość motywów ma kilka dodatkowych plików:

  • header.php Zawiera sekcję <head> każdej strony, plus nagłówek projektu strony.
  • sidebar.php Zawiera pasek boczny, w tym wszelkie obszary widżetów.
  • footer.php Zawiera stopkę, która może, ale nie musi mieć obszarów widżetów.
  • functions.php Zawiera wszelkie funkcje, które są specyficzne dla twojego motywu. Możesz dowiedzieć się o pliku funkcji w WordPress Codex.
  • Pliki, które zawierają pętle, które wywołują zawartość z bazy danych. W zależności od tego, w której części witryny pracujesz, może to być jeden z wielu plików:
    • page.php Dla stron statycznych
    • single.php Dla pojedynczych postów (na przykład postów na blogu)
    • index.php, archive.php, category.php itd. Dla stron, które wymieniają pewną liczbę postów

Yoast napisał świetną wizualną reprezentację tego, jak działają pliki motywów, a Codex WordPressa zawiera szczegółowy opis motywów, w tym szczegóły na temat różnych plików i kiedy są one wywoływane.

Chciałbym twierdzić, że arkusz stylów, jednakże, jest najważniejszym plikiem i tym, od którego prawdopodobnie zaczniesz, ponieważ „motyw dziecka” (więcej o tym wkrótce) potrzebuje arkusza stylów, nawet jeśli nie zawiera nic innego. Arkusz stylów zawiera ważne informacje meta o samym motywie, który jest wykomentowany przed wszystkimi stylami. Poniżej znajdują się komentarze otwierające dla obecnego domyślnego motywu WordPressa, Twenty Eleven:

Te informacje są komentowane, aby nie były odczytywane przez przeglądarki, ale są odczytywane przez WordPressa i dostarczają informacji każdemu, kto używa Twojego motywu. Wrócimy do tego wkrótce, kiedy przyjrzymy się jak stworzyć motyw dziecka.

Gdy już wiesz jak działają motywy, następnym krokiem jest dowiedzieć się jak zbudować swój własny. Przed rozpoczęciem warto rozważyć kilka punktów, które pomogą Ci podjąć tę decyzję.

What To Consider When Developing A WordPress Theme?

Przed podjęciem decyzji, jakie podejście przyjąć do tworzenia motywu, zidentyfikuj swoje ograniczenia. Te prawdopodobnie obejmują następujące elementy:

  • Czas. Ile masz czasu na rozwinięcie swojego tematu lub nauczenie się, jak to zrobić?
  • Budżet. Jest to związane z czasem, ale także ma związek z tym, czy możesz sobie pozwolić na zapłacenie za motyw premium lub ramy motywu.
  • Możliwości. Jak dobrze jesteś zaznajomiony z tworzeniem motywów, z CSS i PHP oraz z tym jak działają motywy? Jeśli nie jesteś zaznajomiony, jak dużo chcesz się nauczyć?
  • Przyszłościowość. Czy twój motyw będzie musiał być aktualizowany w przyszłości? Czy oprócz Ciebie będą nad nim pracować inni programiści? Jeśli tak, to twoje podejście będzie musiało być tak solidne, jak to tylko możliwe.
  • Powtarzalność. Czy widzisz siebie rozwijającego wiele podobnych tematów w przyszłości? Jeśli tak, twoje podejście będzie musiało pozwolić na ponowne wykorzystanie kodu.

Powrócimy do tych rozważań na końcu artykułu i określimy, które opcje rozwoju są najbardziej odpowiednie w różnych sytuacjach.

Theme Development: Twoje opcje

Dostępnych jest kilka opcji rozwoju motywu lub motywów, i warto je zbadać zanim zakaszesz rękawy i zaczniesz kodować. Wybranie odpowiedniego podejścia zaowocuje lepszym motywem, z solidniejszym kodem i zminimalizuje ilość poprawek, które będziesz musiał robić później. Pomoże ci to również w bardziej efektywnym budowaniu motywu.

Opcje, którym przyjrzymy się tutaj to:

  • Buduj motyw od zera,
  • Edytuj (lub „hakuj”, niektórzy mogą powiedzieć) istniejący motyw,
  • Użyj konfiguratora motywów, aby podrasować istniejący motyw,
  • Utwórz motyw dziecka, aby wprowadzić zmiany w istniejącym motywie,
  • Utwórz własny motyw nadrzędny (używając jednego z powyższych podejść) i motywy dzieci,
  • Użyj frameworka motywów.

1. Build A Theme From Scratch

This approach is the most difficult if you are inexperienced. Ale jeśli jesteś doświadczonym programistą WordPress, to da ci najwięcej kontroli. Może to być najbardziej odpowiednia metoda, jeśli importujesz HTML z istniejącej statycznej witryny, która jest aktualizowana do WordPressa bez żadnych innych zmian.

Jednakże podczas przenoszenia witryny do WordPressa, przeprowadzanie jej przeglądu w ramach procesu, a nie tylko kopiowanie kodu w poprzek, jest dobrym pomysłem. Jeśli kopiujesz statyczną stronę internetową, będziesz musiał uważnie śledzić swój kod, aby upewnić się, że jest czysty, wydajny i poprawny.

2. Edytuj (lub zhakuj) istniejący motyw

W ten sposób większość ludzi zaczyna od rozwoju motywu WordPress: w pracy nad motywem, który pobrali, widzą, że niektóre stylizacje nie są całkiem w porządku, więc zagłębiają się w arkusz stylów i dokonują pewnych edycji. Zaczynanie w ten sposób jest kuszące, ponieważ wydaje się, że jest to szybki i łatwy sposób na osiągnięcie pożądanego efektu. Ale są pewne niebezpieczeństwa:

  • Jeśli kiedykolwiek zmienisz motyw, ta aktualizacja unieważni wszystkie zmiany, które wprowadziłeś.
  • Łatwo jest dodać powtarzający się kod, dodając nowe style niżej w arkuszu stylów, które unieważniają style wyżej, zamiast usuwać to, czego nie potrzebujesz.
  • Strona może skończyć się z dużo większą ilością kodu niż potrzebuje.
  • Jeśli motyw nie jest dobrze zakodowany lub skomentowany na początku, możesz wpaść w większy bałagan i odkryć, że musisz dokonać wielu poprawek.

Jednakże, hakowanie motywu może zadziałać, jeśli wejdziesz w to z otwartymi oczami. Może to być opcja, jeśli następujące są prawdziwe:

  • Temat, którego używasz, jest dobrze napisany, ważny i skomentowany (np, domyślny motyw WP, Twenty Eleven);
  • Zmiany, których dokonujesz są tak drastyczne, że nie będziesz musiał aktualizować oryginalnego motywu;
  • Rozumiesz PHP i CSS zawarte w motywie i czujesz się komfortowo edytując, dodając i usuwając je bez łamania motywu.

Jeśli zdecydujesz się pójść tą drogą, ważne jest posiadanie kopii zapasowej oryginalnego motywu i dokładne komentowanie kodu. Radziłbym również skomentować każdy kod, którego nie chcesz, a następnie przetestować, aby zobaczyć, co się stanie przed usunięciem czegokolwiek.

3. Użyj Theme Customizer, aby zmodyfikować istniejący motyw

Modyfikator motywu został wydany z WordPress 3.4. Daje on możliwość dostosowania motywu bez pisania jakiegokolwiek kodu, po prostu za pomocą interfejsu WYSIWYG. W zależności od tego, jak dobrze customizer jest napisany w samym motywie, możesz go użyć do zmiany obrazów, tytułów, kolorów, a nawet układu. Oczekuj, że zobaczysz więcej motywów ze zintegrowanym z nimi customizerem.

Używanie customizera motywu WordPress z motywem Twenty Ten.

Temat customizera przechowuje twoje zmiany w oddzielnym pliku, a nie w arkuszu stylów motywu, więc będzie powtarzający się kod.

Aby uzyskać więcej informacji, spójrz na samouczek wideo Otto on WordPress lub przewodnik integracji konfiguratora motywu z własnymi motywami.

4. Utwórz motyw potomka, aby wprowadzić zmiany w istniejącym motywie

To podejście jest podobne do edycji istniejącego motywu, ale bezpieczniejsze. Polega na utworzeniu zupełnie nowego motywu, który jest zdefiniowany jako dziecko istniejącego motywu. Jeśli twój motyw dziecka nie ma określonego pliku, ale motyw rodzica ma, użyje tego. Tam, gdzie motyw dziecka ma plik, ten plik zastąpi odpowiednik w motywie rodzica. Spójrzmy na przykład:

Pliki motywu nadrzędnego Pliki motywu dziecka
  • style.css
  • page.php
  • single.php
  • archive.php

    • .

  • header.php
  • sidebar.php
  • footer.php
  • style.css
  • page.php
  • header.php

W powyższym przykładzie, WordPress użyłby następujących plików do dostarczenia treści:

  • style.css z motywu dziecka,
  • page.php z motywu dziecka,
  • single.php z motywu rodzica,
  • archive.php z motywu rodzica,
  • header.php z motywu dziecka,
  • sidebar.php z motywu rodzica,
  • footer.php z motywu rodzica.

    • Możesz zobaczyć, jak byłoby to przydatne, gdybyś chciał użyć większości znaczników motywu nadrzędnego, ale zmienić zawartość nagłówka (dodając, powiedzmy, swoje logo i dane adresowe) i wszelkich stron statycznych (być może zmieniając sposób wyświetlania meta danych).

    Jednym plikiem, który każdy motyw dziecka musi mieć, aby działać, jest arkusz stylów, ponieważ zawiera on informacje, których WordPress potrzebuje, aby motyw dziecka działał poprawnie. Aby to zrobić, dodaj trochę dodatkowego kodu do komentarzy arkusza stylów:

    Czy potrafisz dostrzec te dodatkowe linie? Pierwsza z nich to:

Template: twentyeleven

Ta linia mówi WordPressowi, że motyw jest motywem potomnym i że Twenty Eleven jest jego rodzicem. Dodałbyś nazwę katalogu motywu nadrzędnego, a nie jego pełną nazwę.

A druga:

@import url("../twentyeleven/style.css");

Ta linia mówi przeglądarce, aby załadowała arkusz stylów motywu nadrzędnego przed wyrenderowaniem stylów w bieżącym arkuszu stylów. To zwalnia cię z konieczności duplikowania stylów w motywie nadrzędnym, których chcesz użyć.

Więc, tak działają motywy potomne. Ale kiedy jest to najlepsze podejście? Sugerowałbym użycie go w następujących przypadkach:

  • Masz już motyw (do wykorzystania jako rodzic), który zawiera większość tego, czego potrzebujesz dla swojego motywu;
  • Chcesz mieć możliwość aktualizacji motywu nadrzędnego (na przykład, gdy aktualizacje motywów są wydawane po aktualizacji WordPress);
  • Nie chcesz być związany w węzłach z hakowania istniejącego motywu;
  • Chcesz mieć możliwość powrotu do motywu nadrzędnego lub opracowania innego podobnego motywu w przyszłości (który byłby nowym motywem dziecka);
  • Rozwijasz kilka podobnych stron internetowych z niewielkimi różnicami stylistycznymi lub treściowymi (zrobiłem to podczas budowania podobnych stron internetowych dla klienta, który posiadał wiele firm);
  • Różnica między motywami dziecka i rodzica nie jest tak duża, że musisz zacząć od zera, lub nie tak duża, że kod motywu dziecka zastąpi wszystko, na co wpływają aktualizacje motywu rodzica.

5. Stwórz swój własny motyw nadrzędny (używając jednego z powyższych podejść) i motywy podrzędne

Sytuacja, do której właśnie nawiązałem, budowania zestawu stron dla klienta z wieloma firmami, jest okazją, kiedy możesz stworzyć motyw nadrzędny, a następnie skonfigurować motywy podrzędne dla poszczególnych stron. Możesz również chcieć to zrobić w następujących przypadkach:

  • Planujesz stworzyć wiele witryn o podobnej zawartości i znacznikach w przyszłości (nie tylko dla jednego klienta);
  • Zarządzasz wieloma witrynami i musisz regularnie zaglądać do każdej z nich, a chcesz, aby kod był bardzo podobny;
  • Wygodnie jest tworzyć własny motyw nadrzędny, edytować kod, aby utworzyć solidnego rodzica, który będzie dobrze współpracował z motywami podrzędnymi.

Jeśli zdecydujesz się przyjąć to podejście, możesz albo zbudować swój motyw rodzica od zera, albo zhakować istniejący motyw. Dla większości stron, które buduję, używam motywu nadrzędnego, który stworzyłem poprzez zhakowanie motywu Twenty Ten, dawnego domyślnego motywu WordPress. Dokonałem tak wielu zmian, że nie potrzebowałem już aktywować aktualizacji oryginalnego motywu. Byłem również wygodny z kodem w motywie i chciałem wprowadzić do niego znaczące zmiany, zmniejszając kod, restrukturyzując go, aby pasował do sposobu, w jaki pracuję i usuwając kod, który wiedziałem, że nie będzie potrzebny.

Możesz również utworzyć motyw dziecka oparty na istniejącym motywie, a następnie utworzyć motywy dzieci dla tego – skutecznie, wnuki oryginalnego motywu. Zaletą tego jest to, że nie nadpiszesz kodu w oryginalnym motywie, a jednocześnie będziesz miał możliwość wprowadzania modyfikacji w motywie potomnym, które zostaną przekazane do motywów wnuków. Należy jednak pamiętać o ostrzeżeniu: z trzema motywami w użyciu, łatwo jest się pomylić co do tego, co się dzieje, i możesz skończyć z dużą ilością niepotrzebnego kodu.

6. Użyj Theme Framework

Ostatnia opcja jest jedną z używanych przez tysiące użytkowników WordPressa i deweloperów. Istnieje wiele szkieletów tematycznych, które można wykorzystać jako rodzaj motywu nadrzędnego, ale z dużo większą funkcjonalnością, a w niektórych przypadkach z możliwością dokonania dość wymyślnych zmian układu i stylu bez pisania linii kodu. Niektóre frameworki są darmowe, podczas gdy inne są premium. Zostały one już szczegółowo omówione w Smashing Magazine, ale główne z nich są wymienione poniżej.

Darmowe frameworki WordPress:

  • Theme Hybrid zawiera niezliczoną ilość haków i obszarów widgetów, aby pomóc Ci dostosować swoje motywy. Posiada również kilka dostępnych motywów dziecięcych. Ramy i motywy potomne są darmowe, ale jeśli chcesz uzyskać wsparcie, będziesz musiał za nie zapłacić rejestrując się na stronie Theme Hybrid. Praca z nim może być dość skomplikowana, chyba że rozumiesz PHP lub używasz jednego z motywów podrzędnych.
  • Wonderflux jest oparty na elastycznym systemie siatki. Posiada opcje dostosowywania układu i stylów bez konieczności pisania kodu, zawiera wiele haków i obszarów widgetów. Jest darmowy i wspierany przez forum WordPress.
  • Carrington jest najbardziej znanym z darmowych frameworków i posiada wiele motywów dziecięcych.
  • Thematic jest rozwijany przez Automattic, który rozwija samego WordPressa. Zawiera wiele haków, filtrów i obszarów widgetów.
Premium WordPress frameworki:
  • Jego twórcy opisują Genesis jako „standard przemysłowy”. Pochodzi on z szerokiej gamy tematów dzieci, opcji dostosowywania bez pisania kodu i funkcji SEO.
  • Thesis jest innym dużym frameworkiem premium i również daje możliwość dostosowywania tematów dzieci bez pisania kodu.

Podsumowanie: Choosing An Approach

Możliwe, że po przeczytaniu tego, masz pomysł, z którym podejściem iść. Ale na wypadek, gdybyś nadal drapał się po głowie, oto podsumowanie, kiedy każda metoda jest odpowiednia:

.

.

.

.

.

.

Podejście Czas Koszt Możliwość Przyszłość-.proofing Repetition
Build from scratch High Low Low Wysokie Niskie Niskie
Hakowanie istniejącego motywu Niskie Niskie Niskie Medium Low Low
Use theme customizer Low Low Low Low Low Low
Utwórz motyw dziecka na podstawie istniejącego motywu nadrzędnego Medium Medium Low Medium High High
Twórz motyw rodzica High Low High High
Theme framework (free) Medium Medium Low Medium High High
Theme framework (premium) Średni Wysoki Niski do średniego Wysoki Wysoki

Wszystko po kolei, każde podejście ma swoje miejsce; to tylko zależy od strony internetowej i od Ciebie. Ważne jest, aby wybrać podejście po rozważeniu zalet i wad – nie tylko po to, aby się zanurzyć i spróbować, tylko po to, aby odkryć, że zepsułeś motyw lub że stworzyłeś wiele przeróbek dla siebie.

I jak zawsze, cokolwiek zdecydujesz, nie zapomnij zachować kopii zapasowych!

(al)

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany.