W artykule:
Chociaż WordPress jest coraz bardziej bliski stania się pełnoprawnym frameworkiem aplikacji, skromny edytor postów pozostaje obszarem, w którym użytkownicy interfejsu spędzają większość czasu.
Jest to część zaplecza, która zauważyła znaczące ulepszenia w ciągu ostatnich kilku lat – ostatnie przejście do wersji 4.0 TinyMCE w WordPress 3.9 jest atrakcją-ale wciąż jest dużo miejsca na ulepszenia.
Jednym z najczęstszych problemów użytkowników z edytorem jest konieczność ciągłego przełączania się między trybami edycji i podglądu, aby zobaczyć, jak zawartość będzie wyglądać na żywo.
W tym artykule zajmiemy się tym problemem i omówimy, jak dostosować edytor tekstu WordPress, aby wyglądał i działał jak projekt front-end.
Dlaczego miałbym chcieć dostosować edytor?
Kiedy jesteś zajęty rozbijaniem wstępnego projektu postu lub strony, ostateczny wygląd tekstu jest ostatnią rzeczą, o której myślisz. Liczy się to, aby twoje myśli opadły i – jak tak elegancko ujął to Steven Pressfield – zakryły płótno.
W miarę przechodzenia do poważnej działalności związanej z edytowaniem i recenzowaniem, fakt, że Twoje treści istnieją w kontekście, staje się coraz ważniejszy. Zazwyczaj przejawia się to jako Duże poleganie na wbudowanym Podgląd guzik.
Bądźmy szczerzy-nie ma nic złego w Podgląd guzik. To fantastyczna funkcjonalność, którą można mieć na wyciągnięcie ręki.
Jeśli po prostu pojawiasz się, aby zaktualizować wiersz lub dwa w artykule, jest to świetny sposób, aby sprawdzić zmiany przed uderzeniem Publikuj. Jeśli musisz poddać artykuł dokładnej korekcie przed przesłaniem do recenzji, jest to równie przydatne.
Tam, gdzie jest bardzo daleko od ideału, jest codzienny krój i ciąg układania głównego ciągu. W rzeczywistości, gdy pracujesz nad długim kawałkiem przez potencjalnie wolne zdalne połączenie, może to szybko stać się poważnym problemem z dwóch ważnych powodów:
- Przełączanie kontekstu: Pisanie polega na wchodzeniu w rytm. Kiedy już w nim będziesz, chcesz tam zostać. Ciągłe przełączanie się między oknami przeglądarki a różnymi kontekstami wizualnymi jest zabójcze dla skupienia i przepływu.
- Czas: Wszystkie te wycieczki Między edytorem a oknem podglądu sumują się w ciągu tygodnia roboczego. Sam sprawdź. Następnym razem, gdy pracujesz nad kawałkiem, zanotuj, jak często zmieniasz karty. To czas, który można było poświęcić na polerowanie rzeczywistej zawartości.
Dostosowując ekran edycji do wyświetlacza front-end, eliminujesz potrzebę ciągłego podglądu pracy. To sprawia, że Edytor jest bardziej prawdziwym narzędziem WYSIWYG.
Na przykład, może martwisz się, że konkretny akapit jest nieco zbyt długi, biorąc pod uwagę dużą wysokość linii i rozmiar czcionki, którą stosuje Twój motyw (jak widać tutaj na WPMU DEV). Dostosuj swój edytor postów, a wyniki końcowe są tuż przed Tobą na ekranie podczas pisania.
Poświęcenie dodatkowego czasu na dostosowanie zaplecza ma kilka innych głównych zalet, na które warto zwrócić uwagę:
- Znacznie ułatwia to nietechnicznym członkom zespołu wprowadzanie treści w kontekście, który będzie im natychmiast znany.
- To świetne wykończenie high-end, które można dodać, gdy przygotowujesz witrynę dla zewnętrznego klienta, który może przyjść do WordPress po raz pierwszy.
A Co Z Edytorami Front-End?
Niektórzy z was mogą zapytać w tym momencie: co z edytorami treści front-end? Czy nie są do tego stworzeni? A nie było mowy o wtyczce edytora Front-end wbudowanej w następną wersję WordPress jako podstawowej funkcji?
Dobre pytania. Weźmy je pojedynczo.
Edytory Front-end to modna funkcja, która jest coraz silniej popychana przez konkurentów do WordPress, takich jak Squarespace i Weebly.
Wielką obietnicą tych redaktorów jest to, że pozwalają nietechnicznym użytkownikom wchodzić w bezpośrednią interakcję z treścią strony internetowej w celu wprowadzania zmian. Mogą być idealne, jeśli chcesz tylko wprowadzić małe zmiany w istniejących sekcjach treści i są zwykle przystawką dla mniej doświadczonych administratorów lub właścicieli witryn, zakładając, że są poprawnie skonfigurowani.
Minusem jest ograniczony zakres funkcjonalności, jakie zazwyczaj oferują takie rozwiązania – zarówno pod względem samej edycji, jak i braku dostępu do zaawansowanych funkcji postów, takich jak pola meta. Postawili również barierę między tobą a oferowanymi funkcjami w pozostałej części panelu administracyjnego backendu.
Następnie należy rozważyć kwestię przepływu pracy redakcyjnej i kontroli. Edytor front-end jest świetny, jeśli chcesz, aby ludzie po prostu mogli tam wejść i natychmiast zmienić rzeczy, ale nie zawsze tak jest.
Ostatnim punktem jest kwestia złożoności. Stworzenie solidnego edytora front-end nie jest trywialnym przedsięwzięciem. Wiele najlepszych wtyczek jest ofertami komercyjnymi, co oznacza, że dodajesz kolejny poziom płatnej zależności do swojej konfiguracji i musisz martwić się o przyszłą kompatybilność z innymi częściami motywu.
Krótko mówiąc, jest to złożony problem.
Wielu z nas miało nadzieję, że część tej złożoności zostanie złagodzona przez włączenie wtyczki edytora Front-End w rdzeniu WordPress.
Niestety, po wielu początkowych ekscytacji, nadzieje te zostały ostatecznie przerwane.
Od końca 2013 r. do końca listopada 2014 r. Wtyczka ta była aktywnie rozwijana jako wtyczka funkcyjna, co oznacza, że została zaplanowana na ostateczne wydanie do rdzenia.
Projekt niestety zatrzymał się od tego czasu i został przeniesiony do listy nieaktywnych wtyczek funkcji. Niestety, można śmiało powiedzieć, że w najbliższym czasie nie zobaczymy jego wyglądu w core.
Jeśli jesteś zainteresowany wypróbowaniem edytora front-end, zalecamy wypróbowanie edytora Front-end (bezpłatnego), Visual Composer (płatnego) lub Live Composer (płatnego), ale pamiętaj o potencjalnych komplikacjach, o których wspomnieliśmy powyżej.
Podejście, które przyjmiemy w tym artykule, z drugiej strony, daje prosty sposób obejścia tych problemów i przejścia do sedna: sprawienie, aby Twoje treści śpiewały.
Zacznijmy to robić.
Ustawienie sceny
Każda witryna będzie miała oczywiście inną treść i potencjalnie szalenie różne implementacje motywów. Na potrzeby tego artykułu, mamy zamiar rozebrać rzeczy w dół, aby dać ci solidne zrozumienie podstaw, które następnie będzie można zastosować do szczególnych wymagań własnej konfiguracji.
Będziemy używać lokalnej konfiguracji WordPress i zaczynając od wersji danych testowych jednostki motywu WordPress, aby zilustrować nasze punkty. Jeśli zaczynasz zastanawiać się nad dostosowaniem własnego środowiska, takie podejście oferuje kilka oczywistych korzyści:
- Rozwijając się lokalnie, możesz eksperymentować bez ryzyka zakłóceń dla użytkowników lub współpracowników.
- Dane testu jednostkowego motywu WordPress zapewniają rozsądnie zorganizowany zestaw podstawowych treści, aby przetestować zmiany. Jest to idealna platforma, od której można zacząć odkrywanie wszelkiego rodzaju zmian tematycznych, zarówno z przodu, jak iz tyłu.
W naszym przypadku, po pobraniu i zaimportowaniu pakietu startowego z testu WP na świeżej lokalnej instalacji WordPress, wybraliśmy Twenty Fifteen jako motyw.
Ta kombinacja daje nam wiele dobrze zorganizowanych stron, takich jak znaczniki i formatowanie oraz wyrównanie obrazu, do zabawy od razu po wyjęciu z pudełka.
Jeśli podążasz za tym, możesz skopiować to podejście lub po prostu aktywować własny motyw w lokalnej instalacji z bieżącą zawartością witryny.
Zalecamy pierwsze jako etap początkowy. Zawartość dostarczana przez WP Test to doskonały sposób na sprawdzenie, jak kompletna jest stylizacja bieżącego motywu, zanim zaczniesz wprowadzać w nim poważne zmiany.
Zrozumienie, co dzieje się pod maską
Teraz, gdy mamy do obejrzenia rozsądną przykładową zawartość, poświęćmy trochę czasu, aby zrozumieć, co tak naprawdę dzieje się pod maską w WordPressie, zanim spojrzymy na dostosowanie samego edytora.
Jak wspomnieliśmy na górze, WordPress dostarcza standardowo edytor TinyMCE o otwartym kodzie źródłowym. To jest, że tak powiem, dno stosu tematycznego.
TinyMCE ma własny arkusz stylów, który kontroluje sposób wyświetlania treści w nim. Domyślnie jest to błogie nieświadome świata zewnętrznego. Twórcy TinyMCE byli na tyle rozsądni, aby zrobić miejsce na dodatkowe arkusze stylów, które można załadować do niego, jednak za pomocą haka o nazwie content_css.
Ze swojej strony twórcy WordPress byli na tyle uprzejmi, aby zawinąć to w natywną funkcję o nazwie add_editor_style. Zostało to włączone do rdzenia WordPress od wersji 3.0.0.
Jeśli zapoznasz się z dokumentacją online, zobaczysz, że ta funkcja jest schowana w wp-includes / theme.php. Będziemy patrzeć na sposoby wywołania tej funkcji bezpośrednio w ciągu zaledwie kilku minut.
Domyślnie WordPress używa tej funkcji, aby sprawdzić obecność pliku CSS w katalogu głównym motywu o nazwie styl redaktora.css że może użyć do stylizowania zawartości edytora.
Tak więc, jeśli chcesz dostosować istniejący motyw, jednym z pierwszych pytań, które musisz sobie zadać, jest czy styl redaktora.css plik już istnieje w Twoim motywie?
Jeśli weźmiemy motyw Twenty Fifteen jako przykład, zobaczymy, że rzeczywiście zawiera on taki plik. Szybkie przełączanie między widokami podglądu i administratora na naszej stronie znaczników i formatowania pokazuje, że podstawowe style są wiernie replikowane między środowiskami.
Pójdźmy o krok dalej i sprawdźmy, że styl, który widzimy w oknie edytora, jest zdecydowanie kontrolowany przez styl redaktora.css. Szybka podróż do Inspektora sieci to wszystko, czego potrzebujemy, aby potwierdzić, że tak jest.
Miejmy nadzieję, że podstawowy scenariusz jest na tym etapie stosunkowo jasny. Do podsumowania:
- Edytor WordPress jest zasilany przez TinyMCE.
- TinyMCE pozwala na nadpisanie domyślnego stylu.
- WordPress korzysta z funkcji o nazwie
add_editor_styleaby określić, który plik CSS ma być użyty do nadpisania domyślnego stylu. - Domyślnie WordPress szuka pliku o nazwie styl redaktora.css w korzeniu aktywnego tematu.
Kolejne pytanie brzmi, jak poradzić sobie z wprowadzaniem własnych zmian.
Wprowadzanie Własnych Zmian
Jak zasugerowano powyżej, pierwszą rzeczą, którą należy wyjaśnić, jest pytanie, czy w katalogu głównym folderu motywu znajduje się domyślny plik arkusza stylów edytora.
Jeśli tak, sugerujemy wykonanie kopii w tym samym miejscu i wywołanie jej custom-editor-style.css. Daje to czyste miejsce do rozpoczęcia eksperymentów i łatwy sposób na powrót do oryginalnej konfiguracji.
Jeśli nie ma żadnego pliku, utwórz nowy plik o nazwie custom-editor-style.css i umieść go w katalogu głównym folderu motywu.
Łączenie niestandardowego CSS
Naszym następnym krokiem jest powiedzenie WordPressowi, aby szukał naszego nowego pliku, a nie domyślnego. Zrobimy to, dodając nadpisanie w naszym motywie funkcje.php aby zadzwonić add_editor_style i powiedz mu, żeby skorzystał z naszego nowego arkusza stylów.
Otwórz swój motyw funkcje.php, dodaj następujące linie na końcu i zapisz.
Teraz sprawdźmy, czy nasz edytor faktycznie używa nowego arkusza stylów. Znowu, szybka podróż do Inspektora to wszystko, co musimy mieć pewność. Jak widać poniżej, udało nam się nawiązać połączenie z naszym nowym plikiem.
Teraz zróbmy kilka szybkich zmian w pliku CSS, aby upewnić się, że są one pobierane z zaplecza.
Przede wszystkim zamierzam sprawić, że nagłówki staną się atrakcyjnym odcieniem zieleni, edytując custom-editor-style.css.
Nagłówki zostały zmienione przez dostosowanie następującego CSS:
A teraz dodajmy subtelne obramowanie do naszych obrazów.
# tinymce, na wypadek gdybyś się zastanawiał, czy ID jest automatycznie przypisywane do < body> tag w edytorze TinyMCE.
Wyniki tej zmiany będziemy mogli zobaczyć natychmiast na stronie wyrównanie obrazu.
W niedalekiej przyszłości nie będziemy umieszczać w żadnych prezentacjach CSS, ale z tych dwóch prostych przykładów jasno wynika, że teraz mamy pełną kontrolę nad zawartością okna edytora. Nawiasem mówiąc, różowa ramka została utworzona za pomocą następującego CSS:
Od tego momentu jest to kwestia przejrzenia istniejącego CSS i upewnienia się, że pasuje do twojego edytora w sposób, który ma największy sens dla Twojego przypadku użycia.
Korzystanie z istniejącego arkusza stylów Front-End jako podstawy
Jeśli nie masz istniejącego arkusza stylów edytora do pracy, tak jak my tutaj, możesz również zaimportować istniejący arkusz stylów front-end witryny, aby użyć go jako bazy. Rzućmy okiem na to, jak to zrobić.
Aby zaimportować istniejący arkusz stylów interfejsu, wystarczy zastąpić zawartość custom-editor-style.css z następującymi:
Na początku rzeczy mogą wyglądać na trochę zepsute, ale masz ładne oddzielenie obaw i solidną podstawę do pracy.
Idąc Dalej
Kolejne kroki będą zależeć od tego, jak daleko chcesz się posunąć, jeśli chodzi o dopasowanie wyświetlacza front-end do edytora. Proponujemy dobrze przyjrzeć się styl redaktora.css arkusz stylów, który zawiera dwadzieścia piętnaście jako punkt wyjścia do mapowania strategii CSS.
Pamiętaj również, aby zapoznać się z dokumentacją WordPress w celu uzyskania wskazówek, jak kontynuować to podejście dzięki bardziej zaawansowanym funkcjom, takim jak dodawanie niestandardowych stylów w oparciu o Typ posta.
Zanim skończymy, powinniśmy również wspomnieć o kilku innych dostosowaniach TinyMCE, które możesz chcieć zbadać:
- Sterowanie wyświetlaniem przycisków w TinyMCE: Dobry przegląd z naszej własnej Raelene Wilson.
- TinyMCE Advanced: Wtyczka do dodawania własnych stylów jako przycisków.
Wniosek
Przejęcie kontroli nad wyświetlaniem okna edytora w WordPress pozwoli Ci zaoszczędzić czas jako pisarz i dodać dodatkową warstwę profesjonalnego polerowania do Twojego motywu.
Rozumiejąc, w jaki sposób stosowane są Style, jesteś w stanie dostosować tyle lub tak mało, jak wymaga tego sytuacja.
Podsumujmy kroki:
- Sprawdź, czy Twój motyw jest wysyłany z styl redaktora.css arkusz stylów.
- Stwórz własny arkusz stylów i wskaż do niego WordPress.
- Użyj istniejącego arkusza stylów edytora jako bazy lub zaimportuj główny styl motywu.
- Zrób stylizację.
Mamy nadzieję, że ten artykuł pomoże Ci w przejęciu kontroli nad środowiskiem pracy.
Tagi:
