Co to jest: WYSIWYG (What You See Is What You Get)

WYSIWYG jest skrótem od What You See Is What You Get. Jest on używany w narzędziach, w których tworzysz/edytujesz treść w czasie rzeczywistym i widzisz podgląd na żywo podczas pracy.

Edytory te są niezwykle przydatne w Internecie, zwłaszcza podczas tworzenia treści dla witryn internetowych. Niezależnie od tego, czy piszesz wpis na blogu, tworzysz e-mail, czy projektujesz stronę internetową, edytor WYSIWYG sprawia, że praca jest łatwiejsza i bardziej wydajna.

Dlaczego warto korzystać z edytora WYSIWYG?

Edytory WYSIWYG posiadają wiele funkcji, które usprawniają twój proces tworzenia treści. Funkcjonalność i wygląd są generalnie takie same, niezależnie od tego, czy posiadasz witrynę internetową WordPress, czy korzystasz z innego systemu zarządzania treścią (CMS).

W większości przypadków wszystkie one mają następujące funkcje:

Formatowanie tekstu: Edytory te umożliwiają pogrubianie, kursywę, podkreślanie i przekreślanie twojego tekstu, tak jak w edytorze tekstu. W rzeczywistości są one często nazywane edytorami tekstu sformatowanego, ponieważ umożliwiają edycję treści w znajomy sposób, podobnie jak w programie Microsoft Word.
Odnośniki: Możesz łatwo dodawać odnośniki do twojej treści, po prostu klikając przycisk na pasku narzędzi i wklejając adres URL. Nie będziesz musiał dodawać ani edytować kodu HTML, aby utworzyć twoją treść.
Imagely: Dodawanie obrazków jest bardzo proste. Możesz przesłać je bezpośrednio z twojego urządzenia lub wstawić je ze źródła online. Wiele edytorów WYSIWYG umożliwia nawet wklejenie obrazka bezpośrednio w tekście.
Tworzenie tabel: Chcesz zgrabnie zaprezentować dane? Edytory WYSIWYG włączają tworzenie tabel w twojej treści bez konieczności korzystania z innych aplikacji internetowych, takich jak Arkusze Google, lub osadzania specjalnych elementów.

Ale to nie wszystko. Edytory WYSIWYG oferują również funkcje takie jak sprawdzanie pisowni, zobaczenie kodu źródłowego i wiele innych. Wszystkie te funkcje ułatwiają skupienie się na tworzeniu wysokiej jakości treści bez martwienia się o naukę PHP, CSS lub projektowania stron internetowych.

Dodatkowe funkcje edytorów WYSIWYG

Oprócz powyższego, edytory WYSIWYG mają zwykle wiele funkcji zaprojektowanych w celu uproszczenia i usprawnienia twojego procesu tworzenia treści.

Większość edytorów WYSIWYG ma wbudowane sprawdzanie pisowni. To wbudowane narzędzie jest całkiem przydatne, automatycznie podkreślając niepoprawnie napisane słowa, pomagając uniknąć kłopotliwych literówek w twojej treści.

Kolejną niezwykle istotną częścią WYSIWYG jest widok kodu HTML. Umożliwia on płynne przełączanie się między widokiem projektu wizualnego a widokiem znaczników.

Spojrzenie na kod HTML jest idealne, gdy trzeba rozwiązać problemy.

Mogą to być problemy z obrazkami lub nieprawidłowe formatowanie tekstu spowodowane kopiowaniem/wklejaniem.

Nie wspominając już o tym, że wiele edytorów WYSIWYG jest wyposażonych w solidny zestaw narzędzi do projektowania. Dla przykładu, edytor Gutenberg dla WordPress to interaktywne narzędzie do projektowania typu „przeciągnij i upuść”, które pozwala pisać treści i używać szablonów do tworzenia wszystkiego, co możesz sobie wyobrazić tuż przed twoimi oczami.

Interfejs jest zawsze przyjazny dla użytkownika, więc nawet jeśli nie jesteś specjalistą od technologii, będziesz w stanie sprawić, że twoja treść będzie wyglądać profesjonalnie i dopracowana za pomocą zaledwie kilku kliknięć.

Edytor bloków WordPress

Edytor Gutenberg został wprowadzony w 2018 roku i zmienił interfejs użytkownika do tworzenia treści w WordPress.

Rdzeń Gutenberga to oparty na blokach edytor, którego można używać zarówno na froncie, jak i na zapleczu twojej witryny.

Zamiast pisać i projektować w jednym dużym obszarze tekstowym, jak w edytorze tekstu sformatowanego, takim jak TinyMCE, tworzysz swoją treść za pomocą pojedynczych bloków. TinyMCE to edytor WYSIWYG o otwartym kodzie źródłowym, używany jako baza dla poprzedniego edytora treści WordPress, obecnie nazywanego edytorem klasycznym.

Może to być wszystko, od akapitów i nagłówków po obrazki, filmy, cytaty, a nawet bardziej złożone elementy, takie jak tabele lub własne znaczniki HTML.

Każdy blok Gutenberg może być indywidualnie konfigurowany i przenoszony, dając ci bezprecedensową kontrolę nad układem i wyglądem twojej treści. Możesz nawet użyć gotowych projektów zwanych Patterns, aby mieć wzorzec do pracy bezpośrednio w edytorze bloków.

Możesz przesuwać bloki w czasie rzeczywistym i zobaczyć dokładnie, jak będzie wyglądał twój wpis na blogu lub strona docelowa, zanim jeszcze go opublikujesz.

Gutenberg nie jest jednak jedynym edytorem WYSIWYG do projektowania stron internetowych. Kreatory witryn internetowych innych niż WordPress, takie jak Squarespace, oferują edycję WYSIWYG, a inne motywy WordPress i wtyczki, takie jak SeedProd i Divi, również to robią.

Interfejs SeedProd WSYIWYG jest prosty i intuicyjny, niezależnie od tego, czy edytujesz tekst, czy cały twój układ.

Wiele z tych narzędzi ma bardziej zaawansowaną funkcjonalność i lepsze wrażenia użytkownika niż Gutenberg, więc wielu profesjonalnych użytkowników zaczyna z nich korzystać, kontynuując doskonalenie swoich umiejętności tworzenia stron internetowych.

Typowe problemy w edycji WYSIWYG

Gdy zaczynasz częściej korzystać z edytorów WYSIWYG, nieuniknione jest napotkanie pewnych problemów lub przeszkód. Ale nie martw się! Większość z tych typowych problemów ma proste rozwiązania. Przyjrzyjmy się niektórym z nich.

Problemy z formatowaniem

Jednym z częstych problemów jest formatowanie. Na przykład, twój tekst może nie być poprawnie wyrównany lub wielkość pisma może nie być dostosowana do twoich potrzeb. Jest to często spowodowane kopiowaniem tekstu z dodatkowym kodem HTML, CSS, a nawet JavaScript.

Aby to poprawić, spróbuj najpierw wkleić twój tekst do zwykłego edytora tekstu, takiego jak Notepad++. Następnie skopiuj go stamtąd do edytora WYSIWYG. Zwykle usuwa to dodatkowy kod, umożliwiając edytorowi WYSIWYG lepsze formatowanie tekstu.

Spowoduje to również usunięcie odnośników i obrazków, więc konieczne będzie ich ponowne wstawienie przy użyciu edytora tekstu sformatowanego lub widoku kodu HTML.

Obrazki nie są wyświetlane

Innym częstym problemem jest to, że obrazki nie wyświetlają się prawidłowo lub wcale. Przyczyną może być nieprawidłowy adres URL obrazka lub brak obsługi pliku graficznego. Zawsze dokładnie sprawdzaj, czy twój adres URL jest poprawny. Jeśli przesyłasz obrazki, upewnij się, że są one w formacie przyjaznym dla stron internetowych, takim jak .jpg, .png lub .gif.

Na przykład, jeśli używasz formatu takiego jak .svg, WordPress wymaga dodatkowej modyfikacji, aby działał poprawnie. Więcej informacji można znaleźć w naszym przewodniku na temat bezpiecznej współpracy plików SVG z WordPressem.

Nieoczekiwane zmiany w kodzie

Czasami może się okazać, że kod nieoczekiwanie zmienia się po zapisaniu. Edytory WYSIWYG nie są doskonałe i mogą dodawać dodatkowe kody HTML lub CSS, których nie zamierzałeś. Może to zmienić wygląd twojej treści.

Aby temu zaradzić, można przełączyć się do widoku kodu HTML i ręcznie usuwać niechciany kod. Należy jednak zachować ostrożność, ponieważ do bezpiecznego wykonania tej czynności potrzebna jest podstawowa znajomość znaczników HTML.

Problemy z kompatybilnością przeglądarki [może być też „kompatybilny”].

Wreszcie, możesz napotkać problemy, gdy zobaczysz swoją treść na różnych przeglądarkach. Nie wszystkie przeglądarki interpretują HTML i CSS w ten sam sposób, a JavaScript może działać inaczej w zależności od twoich ustawień systemowych.

Wszystko to może prowadzić do niespójności w sposobie wyświetlania twojej treści. Zawsze testuj witrynę w wielu przeglądarkach, w tym Chrome, Firefox, Safari i Microsoft Edge, aby upewnić się, że twoja treść wygląda dobrze niezależnie od tego, gdzie jest zobaczona.

Końcowe przemyślenia na temat edytorów WYSIWYG

Edytory WYSIWYG, takie jak WordPress Gutenberg Block Editor lub nawet starszy, klasyczny edytor TinyMCE o otwartym kodzie źródłowym, są niezbędnymi narzędziami, które mogą znacznie uprościć twój proces tworzenia treści.

Dzięki funkcjom takim jak edycja w czasie rzeczywistym metodą „przeciągnij i upuść”, zobacz kod HTML i szablony, te narzędzia do projektowania stron internetowych pozwalają skupić się bardziej na jakości twojej treści niż na kodowaniu.

Mamy nadzieję, że dzięki temu dowiedziałeś się więcej o edytorach WYSIWYG i o tym, jak mogą one pomóc ci poprawić twoje umiejętności projektowania stron internetowych. Zachęcamy również do zapoznania się z naszym wyborem najlepszych kreatorów stron typu „przeciągnij i upuść” dla WordPressa oraz przewodnikiem na temat wyboru najlepszego oprogramowania do projektowania witryn.

Zasoby dodatkowe

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.