Jak uniknąć typowych błędów w tworzeniu motywów WordPress

WordPress jest znany z tego, że jest niezwykle elastyczny, zwłaszcza jeśli chodzi o tworzenie motywów i wtyczek. Jeśli kiedykolwiek chcesz zobaczyć dowód, po prostu zapytaj grupę programistów, jak zaimplementowaliby określoną funkcję. Istnieje duże prawdopodobieństwo, że otrzymasz kilka różnych metod osiągnięcia tego samego rezultatu. Fora wsparcia są zaśmiecone tego rodzaju przykładami.

Ale z tą elastycznością jest również fakt, że łatwo jest robić rzeczy w „niewłaściwy” sposób. Teraz, w tym przypadku, „źle” oznacza, że ​​coś jest albo nieefektywne, albo trochę kłopotliwe w utrzymaniu. Chociaż może to działać w sensie bycia funkcjonalnym, zwykle istnieją lepsze sposoby na załatwienie spraw.

Przyjrzyjmy się pięciu najczęstszym błędom znalezionym w tworzeniu motywów, wraz z alternatywami, które oszczędzą ci przyszłych bólów głowy.

1. Używanie bezwzględnych adresów URL w szablonach

Jeśli kiedykolwiek spojrzałeś na kod HTML, który tworzy strona lub post WordPress, zauważysz, że zarówno obrazy, jak i linki wewnętrzne używają bezwzględnych (pełnych) adresów URL. Ale nie jest to najlepszy sposób na załatwienie spraw podczas dodawania kodu do szablonów motywów.

Załóżmy na przykład, że tworzysz witrynę korzystającą z tymczasowego adresu URL. Zakodowany na stałe bezwzględny adres URL w szablonie oznacza, że ​​będziesz musiał ręcznie wprowadzić zmiany w kodzie, gdy będziesz gotowy do uruchomienia witryny w jej stałej domenie. Chociaż można to zrobić, zbyt łatwo jest zapomnieć o wszystkich miejscach, w których może czaić się ten rodzaj kodu.

WordPress ma wbudowane sposoby określania prawidłowego adresu URL – wyciągane bezpośrednio z obszaru Settings > General pulpitu nawigacyjnego.

W przypadku łącza echo esc_url( home_url() ) zapewni pełną ścieżkę do strony głównej. Tak więc, zamiast jawnie umieszczać adres URL w kodzie, możesz dodać prosty link z powrotem do swojej strony głównej, jak na przykład:

 <a href="<?php echo esc_url( home_url() ); ?>" />Home</a>

Co więcej, możesz również użyć tego, aby wskazać strony drugorzędne. Na przykład, jeśli chcielibyśmy umieścić link do strony O nas w naszej witrynie, moglibyśmy użyć następującego kodu:

 <a href="<?php echo esc_url( home_url() ); ?>/about-us/" />About Us</a>

Podobny fragment działa również w przypadku obrazów. Ten przykład pobiera obraz z podfolderu /images/ naszego aktywnego motywu:

 <img src="<?php echo esc_url( get_stylesheet_directory_uri() ) ; ?>/images/hello.png" />

2. Dodawanie skryptów i stylów bezpośrednio do szablonu

Korzystanie ze skryptów i stylów innych firm z WordPress to świat sam w sobie. Kiedy zaczynasz tworzyć motywy, możesz pokusić się o umieszczenie tagów <script> lub <style> , a nawet kodu do osadzenia czcionki Google bezpośrednio w nagłówku motywu. Generalnie tak się dzieje ze statycznymi witrynami HTML, więc sensowne jest zrobienie tego samego tutaj.

Ale, jak prawie wszystko inne w WordPress, jest lepszy sposób na to. Zamiast tego skorzystaj z wp_enqueue_script() i wp_enqueue_style() – które dodają skrypty i arkusze stylów do odpowiednich miejsc. Ułatwia to również zarządzanie zasobami, ponieważ wszystko jest wywoływane z pliku functions.php motywu.

Zamiast odkrywać koło na nowo, podręcznik WordPress Theme Handbook zawiera fantastyczny przewodnik dotyczący prawidłowego dodawania skryptów i stylów do motywu.

3. Wywoływanie zewnętrznych instancji jQuery

W powiązanej notatce jedną z ukrytych tajemnic WordPressa jest to, że zawiera już kopię jQuery wraz z kilkoma popularnymi funkcjami interfejsu użytkownika. Nie musisz więc instalować jQuery ani wywoływać go zdalnie. Ułatwia to korzystanie z popularnej biblioteki JavaScript i implementowanie elementów takich jak zakładki, selektory dat, okna dialogowe i wiele innych.

Jedynym haczykiem jest to, że musisz konkretnie włączyć elementy, których chcesz użyć, za pomocą pliku functions.php motywu. Chociaż tworzy to trochę krzywej uczenia się, zmniejsza również wzdęcia.

I, prawdę mówiąc, implementacja pożądanego elementu jQuery UI nie jest zbyt trudna. Na przykład, aby umożliwić korzystanie z jQuery UI Tabs, po prostu dodaj następujący fragment do pliku functions.php :

 function my_jquery_elements() { wp_enqueue_script( 'jquery-ui-tabs', array('jquery')); add_action( 'template_redirect', my_jquery_elements ', 10 );

To każe WordPressowi załadować element z już istniejącej biblioteki. Następnie zaprojektuj swoje karty i zdefiniuj je zgodnie z dokumentacją jQuery UI.

4. Zbyt daleko idące dostosowywanie

Możliwość dodawania niestandardowych pól i niestandardowych typów wpisów może znacznie ułatwić życie zarówno programistom, jak i edytorom treści witryny. Oferują wygodę, lepszą organizację treści i bardziej intuicyjny UX. Ale czasami posuwamy się za daleko.

Na przykład jestem wielkim fanem pól niestandardowych. Ale nawet przyznaję, że były chwile, kiedy dostosowywałem motyw do punktu nieelastycznego. Pola doskonale nadają się do konfiguracji, w których dokładnie wiemy, jaka treść będzie potrzebna do wprowadzenia — na przykład pola profilu członka personelu.

Może się jednak stać bałagan, gdy istnieją niespójności w typach treści, które ktoś chce dodać. Klienci są znani z tego, że mają „drobne” wyjątki w treści, które mogą utrudnić korzystanie z dostosowań. Logika warunkowa może wyjaśniać niektóre z tego, ale możesz to zrobić tylko do tego momentu, zanim interfejs użytkownika wymknie się spod kontroli.

Nie ma sztywnych i szybkich reguł dla tego typu personalizacji. Jedyne, co możemy naprawdę zrobić, to wykorzystać naszą najlepszą ocenę tego, co należy dostosować, a co lepiej pozostawić edytorowi treści WordPress lub nawet niszowej wtyczce. Kiedy dodajemy pola lub typy postów, po prostu wiedz, że wszystko może się zmienić w przyszłości i spróbuj budować z myślą o tym.

5. Brak komentowania kodu

Zamierzam tu jeszcze raz przyznać: Komentowanie kodu nie jest jedną z moich mocnych stron. Nie chodzi o to, że w ogóle nie używam komentarzy, ale raczej o to, że nie są one zbyt elokwentne. Zazwyczaj wskazuję początek i koniec poszczególnych elementów, bez mnóstwa wglądu pomiędzy nimi. Czy powinienem robić więcej? Prawdopodobnnie tak.

Komentowanie jest ważne, ponieważ zapewnia przynajmniej kilka punktów odniesienia w kodzie. Przekopując się przez pliki PHP lub JS, które zawierają więcej niż jedną rzecz, będziesz chciał wiedzieć, gdzie znaleźć konkretną pozycję.

Nawet jeśli jesteś jedyną osobą, która kiedykolwiek będzie edytować ten kod, komentarze są wysoce zalecane. Jeśli na przykład musisz coś zmienić za sześć miesięcy od teraz, jest mało prawdopodobne, abyś zapamiętał dokładnie miejsce, w którym umieściłeś fragment kodu.

Nie zamierzam więc być wielkim hipokrytą i błagać, abyście wszystko skomentowali z wielką głębią. Ale powiem, że nawet minimalny wysiłek tutaj ułatwia przyszłą konserwację dla ciebie lub innego programisty, który musi przeczesać twoją pracę.

Lepsze techniki z biegiem czasu

Budowanie własnego motywu WordPress może być wspaniałym doświadczeniem. Ale potrzeba trochę praktyki, aby wychwycić drobniejsze szczegóły tworzenia dobrze zakodowanego i łatwego w utrzymaniu motywu. Im więcej zdobędziesz doświadczenia, tym bardziej rozwiną się Twoje techniki.

Mogę szczerze powiedzieć, że kilka pierwszych motywów, które zebrałem, nie było tak skuteczne, jak teraz. Jestem też pewien, że nadal mogą nie być na czasie, gdy oglądają je naprawdę doświadczeni programiści. W tym sensie nasza ewolucja jest ciągła.

Na koniec chciałbym zauważyć, że osobiście popełniłem każdy z wyżej wymienionych błędów. Dopiero metodą prób i błędów, wraz z kilkoma wizytami w Kodeksie, dowiedziałem się, jak zacząć robić rzeczy „WordPress Way”.

Lekcja jest taka, że ​​wszyscy będziemy popełniać błędy. Ale każdy daje nam szansę na naukę i doskonalenie się.