Najczęstsze błędy w tworzeniu motywów WordPress (i jak je naprawić)

Opublikowany: 2019-05-14

Przesłanie motywu do katalogu motywów WordPress.org to świetny sposób na udostępnienie swojej pracy i wniesienie wkładu do społeczności WordPress. Obecnie w katalogu znajduje się ponad 7000 motywów, z których najpopularniejsze przekracza 300 000 aktywnych instalacji. (Nie wliczając dwudziestu____ motywów, które są dostarczane z WordPress i mają liczbę instalacji liczoną w milionach).

Przed przesłaniem motywu do katalogu ważne jest, aby najpierw zrozumieć proces recenzji, ponieważ jeśli motyw nie spełnia tych wymagań, może zostać odrzucony na miejscu.

Tematy, które mają 3 lub więcej odrębnych problemów, mogą zostać zamknięte jako niezatwierdzone. Jednak autorzy motywu mogą ponownie przesłać motyw po naprawieniu problemów.

https://make.wordpress.org/themes/handbook/review/required/

Recenzenci są po Twojej stronie i chcą, aby Twój motyw został opublikowany po spełnieniu wymaganych standardów. Jeśli Twój motyw ma tylko drobne problemy uniemożliwiające umieszczenie go w katalogu, Twój recenzent będzie współpracował z Tobą, aby je naprawić.

Niestety, jeśli Twój motyw ma zbyt wiele problemów, zostanie zamknięty jako niezatwierdzony. Jeśli zdecydujesz się naprawić problemy, możesz ponownie przesłać motyw – ale dołączy on do tyłu kolejki.

Z mojego doświadczenia w przeglądaniu ponad 100 motywów udało mi się zidentyfikować najczęstsze problemy, które uniemożliwiają zatwierdzenie motywów. Dzieląc się nimi z Tobą w tym artykule, mam nadzieję, że pomogę Ci uniknąć utknięcia w kolejce lub odrzucenia.

Przesyłanie motywu

Po przesłaniu motyw dołącza on do kolejki do sprawdzenia. Średnio zajmie dwa miesiące, zanim Twój motyw dotrze na początek kolejki i otrzyma pierwszą recenzję. Wszyscy recenzenci są wolontariuszami, którzy mają ograniczony czas na wykonanie recenzji. Na czas oczekiwania może wpływać wiele czynników. Gdy więcej osób zgłasza się na ochotnika do przeglądania motywów, kolejka szybko się przesuwa. I odwrotnie, gdy przesyłane są motywy z wieloma problemami, spowalnia kolejkę.

Przesyłając motyw, który spełnia wszystkie wymagania, proces recenzji jest znacznie płynniejszy i ostatecznie Twój motyw będzie dostępny wcześniej. W tym przewodniku zajmiemy się najczęstszymi problemami, które powodują zatrzymanie Twojego motywu w kolejce i uniemożliwiają jego zatwierdzenie.

Uwaga: autorzy motywów, którzy mają doświadczenie w przesyłaniu bezproblemowych motywów, mogą ubiegać się o tytuł „Zaufanych autorów”.

Problemy z nazewnictwem

Po przesłaniu motywu pierwszym przeprowadzanym sprawdzeniem jest sprawdzenie, czy nazwa jest już zajęta. Często zostaniesz poinformowany, że wybrana nazwa jest już zajęta, nawet jeśli nie widzisz motywu o tej nazwie w katalogu.

Jak to możliwe? Powodem jest to, że test nie sprawdza tylko katalogu, ale całego ekosystemu WordPressa. Jeśli motyw został wydany w dowolnym miejscu (Github, ThemeForest itp.) i ma ponad 50 aktywnych instalacji, ta nazwa będzie niedostępna.

Uwaga: jeśli udostępniłeś swój motyw w innym miejscu i zgromadziłeś ponad 50 instalacji, nadal możesz używać tej nazwy w katalogu.

Wyjście bez ucieczki

Recenzenci motywów bardzo poważnie traktują bezpieczeństwo, istnieje nawet dedykowany zasób. Można by napisać cały artykuł na temat pisania bezpiecznych motywów, ale w tej sekcji zajmiemy się jednym aspektem: ucieczką przed wyjściem.

Dane wyjściowe bez ucieczki narażają użytkowników Twojego motywu na ryzyko. Oto przykład wartości bez zmiany znaczenia ($title):

 $title = get_option( 'my_custom_title' );
echo '<h2>' . $tytuł . '</h2>';

Problem z powyższym polega na tym, że chociaż wiemy, jakim typem wartości powinna być wartość $title, ciągiem znaków, nie sprawdziliśmy, czy tak jest.

Jeśli hakerowi udało się zmienić wartość „my_custom_title” w bazie danych, Twój motyw wyświetli tę wartość. Stanowi to ogromne ryzyko, ponieważ mogą zastąpić zamierzone dane wyjściowe wbudowanym JavaScriptem:

 alert('To jest niebezpieczne');

Rozwiązaniem jest uniknięcie wszystkich danych wyjściowych, aby upewnić się, że zawierają one tylko oczekiwany typ danych.

Nasz przykład można naprawić w ten sposób:

 $title = get_option( 'my_custom_title' );
echo '<h2>' . esc_html( $tytuł ) . '</h2>';

Wadą korzystania z esc_html jest to, że usuwa wszystkie znaczniki HTML. Jeśli $title zawiera pogrubienie lub kursywę, na przykład:

 $title = 'Ten artykuł jest <strong>bardzo</strong> przydatny';
echo esc_html( $tytuł );

Słowo „bardzo” nie byłoby pogrubione na froncie; zamiast tego wypisze kod <strong>bardzo</strong>.

To ilustruje, dlaczego ważne jest, aby używać poprawnych funkcji ucieczki dla kontekstu. Gdybyśmy spodziewali się kodu HTML w danych wyjściowych, lepiej byłoby użyć wp_kses_post() lub wp_kses() i ustawić parametr $allowed_html.

Funkcje, których dane wyjściowe również muszą zostać zmienione:

 <a href="<?php echo esc_url( get_permalink() ); ?>">

Wyjątkiem są podstawowe funkcje WordPressa, które zawierają „the_” w nazwie, które zwykle są już pomijane.

 function the_permalink( $post = 0 ) {
    /**
     * Filtruje wyświetlanie permalinku dla bieżącego posta.
     *
     * @od 1.5.0
     * @od 4.4.0 Dodano parametr `$post`.
     *
     * @param string $permalink Permalink dla bieżącego posta.
     * @param int|WP_Post $post Identyfikator posta, obiekt WP_Post lub 0. Domyślnie 0.
     */
    echo esc_url( Apply_filters( 'permalink', get_permalink( $post ), $post ) );
}

Tekst nieprzetłumaczalny

Aby zostać zaakceptowanym do katalogu, wszystkie motywy muszą być w 100% gotowe do tłumaczenia. Oznacza to, że każdy ciąg tekstowy, który wyprowadza motyw, musi być możliwy do przetłumaczenia.

WordPress ma już systemy i funkcje do obsługi procesu tłumaczenia, musisz tylko upewnić się, że twoje ciągi używają poprawnych funkcji.

Chociaż jest to proste do wdrożenia, często jest to pomijane, ponieważ jest sprzeczne z tym, jak ludzie piszą HTML.

Zwykle możesz zrobić coś takiego:

 <h1>404 — Nie znaleziono</h1>

Aby było to możliwe do przetłumaczenia, musisz dodać trochę PHP:

 // Funkcje __ są podstawą lokalizacji.
<h1><?php echo __( '404', 'domena-tekstowa' ); ?>

// Funkcje _e powtarzają wartość.
<h1><?php _e( '404', 'domena-tekstowa' ); ?>

// Escape i powtórz ciąg.
<h1><?php esc_html_e( '404', 'domena-tekstowa' ); ?>

// lokalizacja i zmienne.
<h1><?php _n( 'Jeden post', '%s postów', $liczba, 'domena-tekstowa' ); ?>

Ciągi wyprowadzane przez funkcje również muszą być gotowe do tłumaczenia:

 // nie gotowe do tłumaczenia :-(
<?php next_posts_link( 'Starsze wpisy' ); ?>

// gotowe do tłumaczenia :-)
<?php next_posts_link( esc_html__( 'Starsze wpisy', 'domena-tekstowa' ) ); ?>

Wskazówka: wiele przykładów kodu w codex.wordpress.org nie korzysta z funkcji tłumaczenia, więc zachowaj ostrożność podczas kopiowania i wklejania ich.

Nieprawidłowe kolejkowanie zasobów

Pliki .css i .js używane przez motyw muszą być umieszczone w kolejce przy użyciu poprawnych funkcji: wp_enqueue_style() dla CSS i wp_enqueue_script() dla JavaScript.

Częstym błędem jest zakodowanie skryptów i stylów bezpośrednio w <head> lub przed </body>. Z tym podejściem wiążą się dwa problemy:

1. Nie można usunąć

Jeśli wtyczka musi usunąć załadowany zasób, nie jest to możliwe. Gdybyś użył odpowiednich funkcji kolejkowania, można by to zrobić w ten sposób:

 /**
 * Usuń z kolejki motyw javascript.
 *
 * Powiązane z akcją wp_enqueue_scripts, z priorytetem późnym (100),
 * tak, aby było po wstawieniu skryptu do kolejki.
 */
funkcja wptavern_dequeue_script() {
   wp_dequeue_script( 'skrypty-motywu' );
}
add_action( 'wp_enqueue_scripts', 'wptavern_dequeue_script', 100 );

2. Zduplikowane ładowanie

Jeśli umieszczasz zasób w kolejce, na przykład jQuery, a wtyczka również umieszcza go w kolejce, WordPress jest wystarczająco inteligentny, aby załadować go tylko raz.

 /**
 * Kolejkuj jQuery
 *
 * jQuery zostanie załadowane tylko raz, pomimo dwóch kolejek.
 * jQuery jest w pakiecie z WordPress, więc nie musimy podawać src. 
 */
funkcja wptavern_enqueue_script() {
   wp_enqueue_script( 'jquery' );
   wp_enqueue_script( 'jquery' );
}
add_action( 'wp_enqueue_scripts', 'wptavern_enqueue_script' );

Gdyby zamiast tego zakodował jQuery w swojej <head>, WordPress nie byłby w stanie o tym wiedzieć i zostałby załadowany dwukrotnie.

Funkcjonalność na terytorium wtyczek

Zakres motywu powinien dotyczyć tylko projektu i estetyki strony internetowej, wszystkie inne funkcje powinny być obsługiwane przez sam WordPress lub wtyczki.

Próbując dodać więcej wartości do swoich motywów, autorzy motywów często próbują włączyć dodatkowe funkcje, na przykład kontrolki SEO lub niestandardowe typy postów.

Problem z łączeniem funkcjonalności w motyw polega na tym, że dane nie są przenośne. Weźmy na przykład kontrolki SEO, jeśli użytkownik zmieni motyw, straci całą pracę, którą wykonał, aby zoptymalizować swoje strony. W przeciwieństwie do korzystania z wtyczki SEO, dane i funkcje są niezależne od motywu i zostaną zachowane podczas zmiany motywu.

Kilka przykładów funkcjonalności na terytorium wtyczek:

  • Analityka/Śledzenie
  • Kontrola SEO
  • Formularze kontaktowe
  • Skróty
  • Bloki Gutenberga

Wskazówka: jeśli Twój kod zapisuje się w bazie danych, jest bardzo prawdopodobne, że będzie to obszar wtyczek. Wyjątkiem byłyby ustawienia związane z projektem (pozycja paska bocznego, kolory itp.).

Bez prefiksu

Prefiksy to sposób na zapewnienie, że Twój kod nie będzie kolidował z kodem z wtyczek. Przestrzenie nazw w PHP to lepszy sposób na osiągnięcie tego samego efektu. Jednak niektórzy użytkownicy nadal używają starych wersji PHP (5.2), które nie obsługują tej funkcji.

Justin Tadlock udostępnił listę typowych rzeczy, które powinny być poprzedzone prefiksem:

  • Nazwy funkcji PHP.
  • Nazwy klas PHP.
  • Zmienne globalne PHP.
  • Haki akcji/filtru.
  • Uchwyty skryptów.
  • Stylowe uchwyty.
  • Nazwy rozmiarów obrazu.

Źródło: https://themereview.co/prefix-all-the-things/

 // przykład funkcji.
my_prefix_example();

// przykład klasy.
class My_Prefix_Example { … }

// przykład akcji i filtra.
do_action( 'my_prefix_action' );
zastosuj_filtry( 'mój_prefiks_filtr', $wartości );

// umieść przykłady w kolejce.
wp_enqueue_script( 'my_prefix_script', get_template_directory_uri() . '/js/custom-script.js' );
wp_enqueue_style( 'mój_styl_prefiksu', get_template_directory_uri() . '/css/styles.css' );

// przykład rozmiaru obrazu.
add_image_size( 'moj_prefiks_rozmiar_obrazu', 220, 180 ); // 220 pikseli szerokości na 180 pikseli wysokości.

Wyjątek: podczas kolejkowania zasobów innych firm nie dodawaj przedrostka:

 // umieszczanie w kolejce skryptu innej firmy (wybrany.js).
 wp_enqueue_script( 'wybrany', get_template_directory_uri() . '/js/wybrany.js' );

Problemy z licencjonowaniem

Twój motyw i wszystkie jego pliki muszą być w 100% zgodne z GPL. Obejmuje to obrazy, biblioteki, skrypty i czcionki.

Wszystkie zasoby stron trzecich muszą zawierać informacje o źródle i licencji.

To wymaganie może być szczególnie trudne, ponieważ nie wszystkie licencje są przyjazne dla GPL. Licencja Unsplash ma tylko jedno ograniczenie:

„Niniejsza licencja nie obejmuje prawa do kompilowania zdjęć z Unsplash w celu odtworzenia podobnej lub konkurencyjnej usługi”.

Jednak to jedno ograniczenie wystarcza, aby uczynić go niezgodnym z GPL, a zatem nie zobaczysz obrazów Unsplash zawartych w motywach wordpress.org.

Lista licencji zgodnych z GPL jest dostępna tutaj – https://www.gnu.org/licenses/license-list.html#GPLCompatibleLicenses

Ostatnio, stocksnap.io jest najczęstszym źródłem obrazów w katalogu, ponieważ wszystkie wymienione w nim obrazy są licencjonowane jako CC0 (zgodne z GPL).

Błędy zrzutów ekranu

Zgodnie z wymaganiami zrzut ekranu powinien być nieedytowaną reprezentacją motywu, która nie wygląda jak reklama. Oznacza to brak prac w Photoshopie, nakładek, obramowań lub fantazyjnych efektów.

Obrazy muszą również spełniać te same wymagania licencyjne, które omówiliśmy powyżej.

motyw na zdjęciu: Blocksy

Bonus: użyj standardu kodowania

Kod, który wydaje się łatwy do odczytania i zrozumienia, może być całkowitym przeciwieństwem dla recenzenta, który ma tylko 10-15 minut na sprawdzenie kodu.

Chociaż nie ma żadnych wymagań dotyczących standardów kodowania, przestrzeganie jednego z nich ułatwia czytanie, zrozumienie i utrzymanie kodu. Osobiście używam i polecam „Standardy kodowania WordPressa”, choć są też inne.

Korzystanie z PHP_CodeSniffer i zestawu reguł WordPress w edytorze kodu może znacznie ułatwić przestrzeganie standardu – https://github.com/WordPress-Coding-Standards/WordPress-Coding-Standards

Wniosek

Wymagania dotyczące motywu są tworzone z myślą o użytkowniku końcowym. Unikaj popełniania typowych błędów, które wymieniłem powyżej, a Twój motyw zostanie zatwierdzony w mgnieniu oka. Jeśli chcesz poznać proces recenzowania z innej strony, możesz nawet zostać recenzentem.