Zespół tutaj w WPMU DEV jest również tym samym zespołem za CampusPress, który zapewnia hosting i usługi WordPress dla szkół i uniwersytetów.
Wczoraj wydaliśmy nasz najnowszy produkt, elastyczny i dostępny motyw WordPress dla szkół i edukacji.
Jest to pierwszy motyw stworzony przez nasz zespół, który naprawdę zawiera wszystko, co edytor bloków Gutenberg ma do zaoferowania-takie jak bloki wielokrotnego użytku, style edytora, grupy treści i dostosowywanie domyślnych bloków.
Nie było to łatwe i szybkie, jak się spodziewaliśmy. Ale efekt końcowy był tego wart. Pomyśleliśmy, że podzielimy się tym, dlaczego i jak stworzyliśmy to miejsce. Powinien być przydatny dla każdego, kto wybiera, projektuje lub rozwija nowe motywy WordPress w przyszłości.
Trochę Historii
Współpracujemy z dziesiątkami tysięcy szkół i uczelni na całym świecie. Wszystko od studenckich blogów i ePortfolios, serwisów informacyjnych, aż po główną stronę dużych uczelni. Zobacz bulletin.hds.harvard.edu oraz charlestonsouthern.edu jako tylko dwa przykłady.
Nie każda strona potrzebuje (lub może sobie pozwolić) niestandardowego projektu i rozwoju. Ale nasi klienci mają trzy główne, często konkurencyjne wymagania:
- łatwe publikowanie, edytowanie i tworzenie treści przez każdego
- przekrocz wszystkie wytyczne dotyczące dostępności
- przestrzegaj wytycznych dotyczących marki, takich jak logo, kolory, czcionki itp.
Tworzenie lub Znajdowanie motywów spełniających jeden lub dwa z tych wymagań jest dość łatwe, ale zapewnienie wszystkich trzech to wyzwanie następnego poziomu. Chociaż mamy trochę pracy do zrobienia (więcej na ten temat poniżej), z pewnością jesteśmy zadowoleni z wyników.
Wybór Naszego Stosu Programistycznego
Przed rozpoczęciem prac nad projektem poświęciliśmy sporo czasu na podjęcie decyzji o konkretnych funkcjach, które chcemy uwzględnić, a następnie przeanalizowanie różnych struktur i narzędzi, z których można je zbudować. Nie ma powodu, aby całkowicie zaczynać od zera.
Skupiliśmy się na znalezieniu najlepszych istniejących narzędzi i struktur, które pomogłyby nam osiągnąć nasze cele w zakresie dostępności, wydajności i przyjazności dla użytkownika.
Jako fundament zdecydowaliśmy się na UnderStrap, który sam w sobie opiera się na motywie “podkreślenia” od Automattic i frameworku Bootstrap od Twittera. Jest to dość popularny framework i łatwo jest zrozumieć, dlaczego. Począwszy od UnderStrap skrócił czas rozwoju i znacznie pomógł w realizacji naszych celów dostępności.
Wiedzieliśmy również, że chcemy w dużym stopniu polegać na dostosowywaniu WordPress dla wszystkich różnych opcji i ustawień motywu. Zakochaliśmy się w Kirki framework i wykorzystaliśmy sporo elementów sterujących, które oferuje.
Nasz motyw wykorzystuje zmienne CSS, które również ułatwiły i przyspieszyły rozwój (ze znacznie mniejszą ilością JavaScript dla poprawy wydajności). Warto zauważyć, że wymaga to specjalnego skryptu do pracy w IE11 (z którego korzysta wielu naszych klientów) i nie każda funkcja może być używana w IE11.
Jeśli chodzi o opcje kroju pisma, zaczęliśmy od udostępnienia wielu darmowych czcionek Google w narzędziu dostosowywania. Ale musieliśmy załadować wszystkie warianty i style (pogrubienie, kursywa itp.), które mogą być ciężkie do załadowania, więc zdecydowaliśmy się nie uwzględniać Czcionki Googles W ogóle i wylądował na dodawanie tylko wolne zmienne czcionki zamiast. Jest tam wystarczająco dużo wariacji z nowoczesnymi czcionkami, aby dać użytkownikom końcowym świetne opcje do wyboru.
Ostatni, nasi klienci szkolni loooove ikony. Iconmoon ułatwił nam wybór spośród darmowych ikon (ale staraliśmy się nie umieszczać ich zbyt wiele, aby nie spowalniać witryny ani nie przytłaczać użytkownika). W rezultacie można łatwo dodawać i dostosowywać ikony dla menu i bloków treści.
W związku z tym jesteśmy szczególnie podekscytowani nowymi hookami w WordPress 5.4, które pozwolą nam dodać niestandardowe opcje ikon do menu w dostosowywaniu. Na razie zmuszamy użytkowników do przechodzenia do Wygląd > Menu jeśli chcą zarządzać ikonami, mimo że mogą zrobić wszystko inne Za pomocą menu bezpośrednio w dostosowywaniu. Ta nowa podstawowa funkcja WordPress będzie dużą wygraną dla użyteczności.
Ulubione, Mniej Znane Cechy Gutenberga
Praca z tym tematem była również pierwszym znaczącym doświadczeniem wielu członków naszego zespołu z edytorem bloków Gutenberga. Uzależniliśmy się od niektórych mniej znanych funkcji, które ulepszyliśmy również w tym temacie.
Bloki Wielokrotnego Użytku
Bloki wielokrotnego użytku są niezwykle przydatne dla każdego bloku lub treści, które powtarzają się więcej niż raz w witrynie. Możesz go zaktualizować raz, a zmiany te zostaną zastosowane wszędzie tam, gdzie blok pojawi się w witrynie.
Dzięki naszemu motywowi, po utworzeniu bloku wielokrotnego użytku, użyliśmy filtra w rdzeniu WordPress, aby pokazać nowy główny element menu bloków Wielokrotnego Użytku w pulpicie nawigacyjnym WordPress.
Nasi klienci korzystają z bloków wielokrotnego użytku z różnych powodów, w tym z treści stopki, tworzenia “mega menu” i ważnych powiadomień na wielu stronach.
Grupy Treści
Używanie “grup treści” w edytorze bloków jest tym, co naprawdę umożliwia pełne funkcje kreatora stron. Możesz łatwo tworzyć “wiersze” lub łączyć bloki i wybrać osobny kolor tła dla grupy, aby nadać jej oddzielenie i bardziej spersonalizowany wygląd.
Style Edytora
Jedną z naszych ulubionych cech “Gutenberga” jest to, że autorzy motywów mogą sprawić, że edytor zaplecza wyświetli zawartość w tych samych stylach, co front-end. Prawdziwe doświadczenie WYSIWYG, z kolorami tła, czcionkami i przyciskami pokazującymi to samo podczas edycji, co podczas oglądania witryny na żywo.
Jednak dla każdego, kto opracowuje motywy, stwierdziliśmy, że zasadniczo musieliśmy zastosować style dwa razy, ponieważ kod HTML w edytorze różni się od interfejsu. Oznaczało to również, że musieliśmy dwa razy poprawiać i wprowadzać zmiany, ponieważ ulepszaliśmy motyw podczas tworzenia gry. Doprowadziło to do trwającej bitwy. Spodziewamy się, że dokumentacja i implementacja stylów edytora będzie nadal ulepszana w miarę jak skorzysta z niej więcej autorów motywów.
Projektowanie Dostępności
Jedną z funkcji, nad którą spędziliśmy dużo czasu, było zapewnienie użytkownikom elastyczności w wyborze kolorów, ale nadal wymuszanie dostępnych współczynników kontrastu między kolorami tekstu i tła.
Oto przykład jak to działa:
Wraz ze zmianą kolorów tła zmieniamy kolor tekstu. Używamy również wybranych kolorów, aby następnie zapewnić dodatkowe ackolory centów, które mogą być używane w Ustawieniach bloków dla tła, przycisków, cudzysłowów itp.
Podczas gdy większość narzędzi ułatwień dostępu polega bardziej na znajdowaniu problemów z dostępnością, naszym celem jest bardziej zapobieganie przed wystąpieniem problemów. Wiemy, że dostępność jest kontinuum, co oznacza, że zawsze można ją poprawić. W związku z tym będziemy nadal opierać się na dostępnych opcjach projektowania w naszych motywach w produktach.
Co dalej z naszym tematem?
Stworzyliśmy ten motyw, aby być rodzicem dla wszystkich naszych przyszłych niestandardowych projektów tematycznych. Będziemy nadal dodawać nowe niestandardowe bloki i integracje z popularnymi wtyczkami, z których korzystają nasi klienci.
Pracujemy również nad tworzeniem bloków wielokrotnego użytku, które można udostępniać między witrynami w sieci wielostanowiskowej.
Nadal przeprowadzamy testy w realnym świecie, mając nadzieję, że jeśli będzie popyt, w końcu go poddamy WordPress.org również.
W międzyczasie, jeśli znasz szkołę, która potrzebuje strony internetowej i chciałbyś skorzystać z tego tematu, Wyślij je do nas! 😉
Tagi:
