Jak korzystać z edytora WordPress

Opublikowany: 2020-06-08

WordPress jako CMS ma niesamowicie rozbudowany zestaw funkcji. Wtyczki i widżety przyciągają ludzi na platformę, ale gdy już są w środku, prawdziwa moc pochodzi z samego edytora WordPress. Niezależnie od tego, jaki jest Twój cel związany z platformą, będziesz korzystać z edytora postów/stron w dużym stopniu. Dlatego chcemy pokazać Ci, jak w pełni korzystać z edytora WordPress, aby Twoje treści świeciły, a Twoja witryna kwitła.

Subskrybuj nasz kanał YouTube

Co to jest edytor WordPress?

Technicznie rzecz biorąc, możesz wybierać spośród trzech edytorów WordPress. Wraz z wydaniem WordPress 5.0 edytor zmienił się z ówczesnego domyślnego TinyMCE na edytor bloków, który mamy dzisiaj. Wśród tej zmiany wtyczka edytora Gutenberg została wydana jako pomost do testowania beta nowych funkcji Edytora bloków przed wprowadzeniem go do WordPress Core.

Chociaż Edytor bloku jest domyślny w WP od wersji 5.0, możesz użyć dowolnego z trzech, które chcesz. Możesz zainstalować wtyczkę Classic Editor, aby zachować stary TinyMCE, wtyczkę Gutenberg, aby zachować najnowsze funkcje (choć potencjalnie niestabilne) w edytorze, lub możesz zachować domyślny edytor bloków.

Biorąc pod uwagę dodatkowe kroki związane z używaniem czegokolwiek poza domyślnym edytorem (i nieodłączną niestabilnością i zmieniającym się charakterem wtyczki Gutenberg), w tym poście skupimy się wyłącznie na domyślnym edytorze bloków. Należy jednak pamiętać, że podstawy są takie same w przypadku Gutenberga, a TinyMCE zawarty we wtyczce Classic Editor ma podstawową zgodność z dowolnym edytorem tekstu sformatowanego lub oprogramowaniem do przetwarzania tekstu — nie wspominając o żadnej funkcji specyficznej dla WP, którą omawiamy ponad, na ogół różniące się tylko estetyką, a nie funkcją.

Po tym wszystkim nauczmy się korzystać z edytora WordPress.

Podstawy edytora WordPress

Za każdym razem, gdy tworzysz stronę lub post (lub niestandardowy typ postu), użyjesz Edytora bloków. Po otwarciu otrzymasz samouczek i możesz nauczyć się podstaw, wykonując 4 slajdy, które oferuje. Zamknij go, a zobaczysz podstawowy edytor.

okno powitalne edytora bloków

Podstawowy edytor bloków WordPress składa się z 5 elementów. Więcej można dodać za pomocą różnych wtyczek, ale zapewniają one podstawową funkcjonalność, z którą będziesz pracować codziennie.

podstawowe elementy edytora

  1. Tabelka tytułowa — cokolwiek tu wprowadzisz, będzie wyświetlane jako główny znacznik H1 posta/strony.
  2. Obszar bloku/treści — jest to obszar, w którym dodasz różne bloki składające się na treść Twojego posta lub strony.
  3. Przycisk dodawania bloku – za każdym razem, gdy zobaczysz znak + w kółku, możesz go kliknąć, aby dodać nowy blok. Pojawi się menu, z którego wybierasz typ, który chcesz wstawić. Wszystkie działają dokładnie tak samo, więc niezależnie od tego, czy klikniesz jeden po prawej stronie bloku, pod blokiem, czy w rogu ekranu, otrzymasz te same opcje.
  4. Karta Opcje dokumentu – pod tą kartą znajdziesz wszystko, od kategorii, tagów, permalinków, komentarzy włączania/wyłączania i nie tylko. Wtyczki mogą tutaj dodawać opcje, ale zawsze dotyczą one całej strony lub samego posta.
  5. Karta opcji bloku — ta karta obsługuje opcje dla dowolnego podświetlonego bloku. Jeśli klikniesz na blok akapitu, edytujesz opcje tylko dla tego bloku . Żadne inne bloki, ani sam dokument się nie zmieniają.

Poniżej przeprowadzimy Cię przez specyfikę tych obszarów i sposób ich wykorzystania do tworzenia możliwie najlepszych treści.

Czym są bloki?

Widziałeś już, jak wspominaliśmy o blokach w tym poście, ale czym one są? Blok to pojedynczy, dostosowywalny element strony lub postu. Może to być pojedynczy akapit, lista, obraz lub galeria. Bloki te można przesuwać i dostosowywać według własnego uznania, indywidualnie dostosowywać i zapewniać szczegółową kontrolę nad treścią w sposób, którego edytor WYSIWYG po prostu nie może. (Jeśli jesteś użytkownikiem Divi, znasz już tę koncepcję, ponieważ nasze moduły działają w ten sam sposób.)

przykłady bloków wordpress

Jak widać powyżej, każdy element strony jest zawarty w osobnym bloku. Możesz zobaczyć pełną listę bloków WordPress w dokumentacji wsparcia WordPress.

Jak stworzyć grupę bloków

Grupa bloków to zbiór bloków ustawionych tak, aby funkcjonowały jako pojedynczy blok. Przenosisz je i stylizujesz tak, jakby były pojedynczą jednostką, ale Grupa składa się z wielu elementów.

Grupa bloków

Tworzenie grupy jest łatwe. Po prostu klikasz na blok, a następnie przytrzymujesz Shift lub CTRL i klikasz na inny. Jeśli chcesz pogrupować wszystkie bloki w poście, możesz nacisnąć CTRL / CMD - A, aby zaznaczyć wszystkie. Następnie, gdy zobaczysz ikonę w lewym górnym rogu, która zmieni się w kwadrat złożony z małych bloków, możesz ją kliknąć i wybrać Przekształć w grupę .

Jeśli chcesz je rozgrupować, po prostu kliknij przycisk rozwijany z trzema kropkami i wybierz rozgrupuj.

rozgrupowywanie bloków Gutenberga

Bloki będą teraz ponownie funkcjonować jako jednostki.

Co to są bloki wielokrotnego użytku?

Możesz zmienić dowolny blok z jednorazowego bloku w blok wielokrotnego użytku z menu ustawień. Blok wielokrotnego użytku nie jest szablonem, ale raczej globalnym blokiem dla Twojej witryny. Tworzysz blok lub grupę bloków, a następnie klikasz Dodaj do bloków wielokrotnego użytku .

blok wielokrotnego użytku

Wszelkie zmiany lub edycje wprowadzone do tego bloku wielokrotnego użytku są następnie odzwierciedlane w całej witrynie, zmieniając każde wystąpienie bloku, a nie tylko to, które edytowałeś. Mamy kompletny przewodnik po blokach wielokrotnego użytku, które możesz sprawdzić, aby uzyskać więcej informacji na ten temat.

Tabelka tytułowa

tabelka rysunkowa

Tabelka tytułowa, jak pokazano powyżej, jest głównym tagiem H1 Twojego posta lub strony. Wygeneruje również slug permalinka dla posta, ale można go edytować po zapisaniu postu co najmniej raz. Będzie to również pobierane z selektorów CSS, takich jak .post-title i .entry-title . (Twoje wtyczki SEO pozwalają jednak ustawić, co wyświetla się w wyszukiwarkach).

Jest to jedyny blok w edytorze WordPress, którego nie można usunąć ani zmienić pozycji. Aby dostosować więcej, musisz użyć ustawień CSS lub zewnętrznego kreatora stron.

Obszar bloku/treści

obszar zawartości edytora bloków

Zasadniczo możesz uznać, że obszar treści to miejsce, w którym piszesz. Jeśli chcesz, możesz zacząć pisać, napisać cały post, nawet nie biorąc pod uwagę bloków. Pod każdym względem zastępuje to prosty obszar WYSIWYG TinyMCE i jest największą zmianą w edytorze WordPress od… no cóż… kiedykolwiek.

Jednak dzięki Edytorowi bloku możesz zrobić o wiele więcej. Za każdym razem, gdy naciśniesz „enter” lub „powrót”, dodasz nowy blok akapitu. Aby dodać inny rodzaj bloku (dowolnego rodzaju), kliknij + w kółku, a otrzymasz listę wszystkich dostępnych bloków. Pamiętaj, aby przewijać, ponieważ są one również skonfigurowane w różnych kategoriach. Możesz także wyszukać konkretny blok, jeśli wiesz, jakiego rodzaju chcesz.

edytor wordpress

Możesz dodawać bloki wideo YouTube, obrazy, galerie, odtwarzacze audio, listy, cytaty i wiele więcej. Każdy z nich ma swoje własne ustawienia i opcje stylizacji. Dodatkowo, im częściej używasz bloku, edytor WordPress rozpozna go jako powszechnie używany i wyświetli go w sekcji Najczęściej używane, dzięki czemu nie będziesz już musiał go przewijać ani szukać. Bloki wielokrotnego użytku i Grupy bloków mogą również pojawiać się w obszarze Najczęściej używane.

Jeśli spojrzysz na obrazy w tej sekcji, (1) wskazuje na przyciski zmiany kolejności, które otrzymujesz dla każdego bloku po jego wybraniu (po prostu kliknij na niego, aby wybrać). (2) wskazuje na listę rozwijaną, która pozwala usunąć blok, a także edytować jego zawartość jako HTML, sklonować go lub dodać nowe bloki wokół niego.

rozwijane bloki

Te opcje i ustawienia różnią się jednak od zakładki Opcje blokowania w prawym górnym rogu ekranu, o którym wspomnieliśmy powyżej i omówiliśmy w następnej sekcji poniżej.

Konspekt dokumentu, liczba słów i inne informacje

Na górnym pasku narzędzi strony masz i w kółku. Kliknij go, a otrzymasz pełne podsumowanie tego, z czego składa się Twój dokument.

zarys dokumentu

Dopóki używasz bloków nagłówków, oprócz liczby słów, numeru akapitu i liczby bloków pojawi się konspekt dokumentu . Jeśli nie masz bloków nagłówka, tej sekcji nie będzie. Możesz kliknąć dowolny element konspektu dokumentu, aby przejść bezpośrednio do tego bloku. Ta funkcja jest nieoceniona w dłuższych dokumentach.

Jeśli klikniesz ikonę zagnieżdżonej listy obok tej, zobaczysz uporządkowaną listę wszystkich bloków w poście, a nie tylko nagłówki konspektu.

zablokuj nawigację

Ponownie możesz kliknąć cokolwiek na liście, aby przejść bezpośrednio do tego bloku i wybrać go.

Zakładka Opcje Bloku

W prawym górnym rogu edytora WordPress zobaczysz kartę z napisem Blokuj . Dopóki masz wybrany blok, otrzymasz kontekstowy zestaw opcji dla tego typu bloku. Jednak wszelkie wprowadzone zmiany będą miały wpływ tylko na jeden wybrany blok.

zakładka opcji bloku

Możesz na przykład zmienić rozmiar miniatury obrazu na tej karcie, dodać kolorowe tło do akapitu, aby utworzyć alert lub dostosować rozmiar czcionki w nagłówku. Jeśli masz otwartą kartę Blokuj , opcje zmieniają się na konkretny wybrany blok. Jeśli masz podświetlony blok akapitu, zobaczysz to.

opcje bloków akapitowych

Wybranie bloku obrazu spowoduje zmianę karty Blok na tę.

edytor wordpress

Każdy blok będzie miał określone opcje, które można w nich dostosować, które dotyczą tylko tego typu bloku (i będą renderowane tylko w tym konkretnym bloku). Każdy blok ma jednak na karcie sekcję Zaawansowane , która pozwala zastosować do tego bloku klasy CSS. Następnie możesz je stylizować według własnego uznania za pomocą zewnętrznych arkuszy stylów i kodu.

Zakładka Opcje dokumentu

Po lewej stronie zakładki Opcje bloku znajduje się zakładka Opcje dokumentu . Jeśli korzystałeś z WordPressa w przeszłości, będą ci one znane. Tutaj będziesz mógł dostosować kategorie swojego postu, tagi, dodać wyróżniony obraz, dostosować ślimak permalinka, dodać fragment do użycia motywu/SEO oraz włączyć lub wyłączyć komentarze.

ustawienia dokumentu

Każda z tych sekcji jest prawie identyczna z tym, gdzie i czym były w edytorze TinyMCE WYSIWYG. Dotyczą całego posta lub strony, a nie pojedynczego bloku lub całej witryny. Dodatkowo, jak widać na powyższym obrazku, znajduje się pole opcji WP Rocket. Niektóre wtyczki dodadzą ramki do tego obszaru, ale zawsze będą dotyczyć bezpośrednio samego dokumentu, a nie treści czy bloków.

Dodatkowe metaboksy postów

Metaboksy wpisu to miejsca, w których wtyczki dodadzą nowe opcje i możliwości dla samej treści. Pojawiają się na samym końcu obszaru zawartości, pod blokami.

inteligentny metabox indeksowania

To, co pojawi się w tej sekcji (jeśli w ogóle), będzie zależeć od zainstalowanych wtyczek (lub jakichkolwiek funkcji motywu, które mogą wykorzystywać ten obszar). Wtyczki SEO bardzo korzystają z tego obszaru i wszystkiego, co pozwoli ci w jakiś sposób wchodzić w interakcję z treścią strony, a nie ze szczegółami dokumentu.

Rozwijane opcje edytora WordPress

Jeśli klikniesz ikonę rozwijaną z trzema kropkami w prawym górnym rogu ekranu, pojawi się duże pionowe menu rozwijane. W tym miejscu możesz dostosować wiele ustawień, z których wszystkie dotyczą samego edytora, a nie dokumentu, bloków lub treści.

opcje edytora

W większości są to dość proste opcje, takie jak zarządzanie blokami wielokrotnego użytku lub udostępnianie listy skrótów klawiaturowych lub ponowne otwieranie przewodnika powitalnego, o którym wspomnieliśmy na początku.

Niektóre z najczęściej używanych opcji znajdują się jednak na samym szczycie. W szczególności przełączniki dla trybów Top Toolbar , Fullscreen Mode i Visual/Code Editor .

Przełącznik górnego paska narzędzi oznacza, że ​​zamiast opcji dla wybranego bloku pojawiających się jako menu kontekstowe w lewym górnym rogu bloku, jak wspomnieliśmy powyżej, będzie on znajdować się w stałym obszarze u góry ekranu.

górny pasek narzędzi w gutenberg

Tryb pełnoekranowy włącza lub wyłącza pulpit nawigacyjny WordPress. Jeśli wyłączysz tryb pełnoekranowy, zobaczysz lewy pasek boczny, który zawiera typowe opcje pulpitu nawigacyjnego, takie jak posty, strony, wygląd, ustawienia, narzędzia itp.

przełącznik trybu pełnoekranowego

A przełączniki Visual/Code Editor działają dokładnie tak, jak w edytorze TinyMCE. Przykłady w tym poście do tej pory dotyczyły edytora wizualnego. Oznacza to, że podczas pisania widzisz wizualną reprezentację posta. Otrzymasz przyciski do naciśnięcia, menu kontekstowe i renderowanie ustawień w czasie rzeczywistym podczas ich zmiany. Jednak edytor kodu jest właśnie tym — kodem. Będziesz miał proste pole tekstowe, w którym będziesz pisać zwykłym tekstem i HTML.

edytor kodu wordpressedytor wordpress

Zwykle ma to na celu rozwiązanie problemów z edytorem lub dostrojenie pojedynczego obszaru lub bloku. Lub może wkleić treść napisaną w zewnętrznym edytorze, który nie sformatowałby poprawnie w wielu blokach.

Edytor bloków używa określonych znaczników HTML, aby poinformować WordPressa, jakie bloki mają być renderowane, więc upewnij się, że zachowałeś nienaruszony kod wyglądający jak <!– wp:paragraph –> . W przeciwnym razie sprawy mogą stać się dość bałaganiarskie.

Skróty globalnego edytora bloków WordPress

Edytor bloku ma również własny zestaw fajnych skrótów. Nie wszystkie są takie same jak TinyMCE, ale są równie przydatne i równie ważne do nauczenia. Zapisanie w pamięci tych najbardziej przydatnych zaoszczędzi Ci wiele czasu i kłopotów, mówiąc z doświadczenia. Możesz nacisnąć Shift + Alt + H, aby wyświetlić następującą listę skrótów w samym edytorze WordPress.

Skróty do dokumentów

  • Przełączanie między edytorem wizualnym a edytorem kodu – Ctrl+Shift+Alt+M
  • Otwórz menu nawigacji po bloku – Shift+Alt+O
  • Pokaż lub ukryj pasek boczny ustawień – Ctrl+Shift+,
  • Przejdź do następnej części edytora – Ctrl+` lub Shift+Alt+N
  • Przejdź do poprzedniej części edytora – Ctrl+Shift+` lub Shift+Alt+P
  • Przejdź do najbliższego paska narzędzi – Alt+F10
  • Zapisz zmiany – Ctrl+S
  • Cofnij ostatnie zmiany – Ctrl+Z
  • Ponów ostatnie cofnięcie – Ctrl+Shift+Z

Skróty wyboru

  • Zaznacz cały tekst podczas pisania. Naciśnij ponownie, aby zaznaczyć wszystkie bloki – Ctrl+A
  • Wyczyść wybór – ESC

Blokuj skróty

  • Zduplikuj zaznaczone bloki – Ctrl+Shift+D
  • Usuń zaznaczone bloki – Shift+Alt+Z
  • Wstaw nowy blok przed wybranymi blokami – Ctrl+Alt+T
  • Wstaw nowy blok za wybranymi blokami – Ctrl+Alt+Y
  • Usuń wiele wybranych bloków – del lub backspace
  • Zmień typ bloku po dodaniu nowego akapitu – /

Skróty tekstowe

  • Pogrub zaznaczony tekst – Ctrl+B
  • Zaznacz zaznaczony tekst kursywą – Ctrl+I
  • Konwertuj zaznaczony tekst na link – Ctrl+K
  • Usuń łącze – Ctrl+Shift+K
  • Podkreśl zaznaczony tekst – Ctrl+U

Zawijanie

Edytor WordPress przeszedł długą drogę w ciągu ostatniej dekady, a obecny edytor bloków jest zdecydowanie wystarczająco potężny, aby przeprowadzić nas przez następną. Dzięki możliwości szczegółowego kontrolowania każdego elementu na stronie możesz tworzyć treści szybciej, łatwiej i znacznie wydajniej niż było to możliwe wcześniej. Jeśli jednak obecny Edytor bloku nie jest dla Ciebie, wtyczka Classic Editor istnieje, a jeśli jesteś w czołówce, wtyczka Gutenberg pozostaje kilka wydań przed domyślnym edytorem w rdzeniu WordPress. Niezależnie od tego, w jaki sposób wolisz tworzyć, WordPress Cię obejmuje.

Masz jakieś wskazówki i porady dotyczące edytora WordPressa, którymi chciałbyś się podzielić? Daj nam znać w komentarzach!