Sposób wstawiania tekstu, zdjęć, filmów i linków w edytorze Gutenberg w WordPressie.

Edytor Gutenberga opiera się na „blokach”. Aby dodać tekst, obrazy itp., należy po prostu dodać blok odpowiedniego typu i edytować go. To rozwiązanie zapewnia dużą elastyczność i umożliwia precyzyjną kontrolę stylu oraz położenia każdego elementu. Poniżej znajdują się szczegółowe instrukcje:

I. Wstawianie tekstu: tworzenie treści za pomocą bloków „Paragraf” i „Tytuł”.

Tekst jest główną częścią artykułu. Gutenberg umożliwia formatowanie tekstu za pomocą bloków „akapitów” i „tytułów” w następujący sposób:

1. Wstaw tekst akapitu (treść główna).

• Metoda 1Po wejściu na stronę edycji artykułu domyślnie wyświetlana jest wskazówka „Zacznij pisać lub naciśnij /, aby dodać blok”, a po bezpośrednim wprowadzeniu tekstu system automatycznie utworzy blok „Paragraf”.
• 
• Metoda 2Kliknij ikonę „+” (wstawianie bloku) w obszarze edycji, wyszukaj „Paragraf” i kliknij, aby wygenerować pusty blok paragrafu, a następnie wprowadź treść.
• 

Dostosowanie formatu.：

Wybierz blok akapitu, a po jego prawej stronie pojawi się panel „Blok” (Ustawienia bloku), w którym można dokonać następujących ustawień:

• Ustawienia wyrównania (wyrównanie do lewej strony, wyrównanie środkowe, wyrównanie do prawej strony, wyrównanie dwustronne);
• Rozmiar tekstu (mały, normalny, duży, bardzo duży);
• Kolor tekstu (kliknij na kwadrat koloru, aby go wybrać, i upewnij się, że kontrastuje z kolorem tła, zapewniając czytelność);
• Kolor tła (dodanie koloru tła do akapitu, aby uwydatnić ważną treść).

2. Wstaw nagłówek (aby podzielić treść na poziomy).

Tytuły są używane do strukturyzacji artykułów (np. rozdziały, sekcje) i zaleca się stosowanie hierarchii „H1–H6” (H1 jest zwykle głównym tytułem artykułu i jest już domyślnie umieszczony na górze strony edytorskiej, dlatego nie trzeba go dodawać ponownie).

Kroki operacyjne：

1. Kliknij ikonę „+” w obszarze edycji, wyszukaj „tytuł” i wybierz go, aby wygenerować blok tytułu.
2. Wprowadź tekst tytułu (np. „I. Przygotowania przed instalacją”).
3. Zaznacz blok i wybierz poziom nagłówka H2–H6 w prawym panelu (H2 dla nagłówków pierwszego poziomu, H3 dla drugiego poziomu itd..).

TechnikaPo wprowadzeniu tekstu należy go zaznaczyć i nacisnąć przycisk Enter. Ctrl+B(Pogrubiony) lub Ctrl+I(Kursywa) umożliwia szybkie ustawienie stylu tekstu.

II. Wstawianie zdjęć: dodawanie zdjęć i optymalizowanie ich za pomocą bloku „Zdjęcia”.

Obrazy mogą uatrakcyjnić artykuł, a moduł „Obrazy” w programie Gutenberg umożliwia ich przesyłanie, dostosowywanie stylistyki i optymalizację. Aby to zrobić, należy postępować w następujący sposób:

1. Trzy sposoby na wstawienie zdjęcia

• Sposób 1: przesłanie nowego obrazuKliknij ikonę „+” → wyszukaj „Obrazy” → kliknij „Prześlij” → wybierz plik obrazu na komputerze → czekaj na zakończenie przesyłania.
• Metoda 2: użycie zdjęć z biblioteki multimediów.Jeśli zdjęcie zostało już przesłane (na przykład wcześniej dodane), należy kliknąć blok „Zdjęcia”, a następnie wybrać „Bibliotekę mediów”, zaznaczyć żądane zdjęcie i kliknąć „Wybierz”.
• Metoda 3: bezpośrednie wklejanie obrazów.Aby skopiować zdjęcie na komputer (należy kliknąć prawym przyciskiem myszy i wybrać „Kopiuj”), a następnie wrócić do obszaru edycji i kliknąć prawym przyciskiem myszy, aby je wkleić, system automatycznie utworzy blok ze zdjęciem i przesłał go.

2. Dostosuj styl obrazu (niezbędna optymalizacja).

Wybierz blok obrazu, a w panelu po prawej stronie możesz ustawić następujące kluczowe parametry:

• Ustawienie wyrównania：
  • Wyrównanie do lewej/prawej strony: zdjęcie znajduje się na boku, a tekst jest wyświetlany wokół niego.
  • Wyrównanie do środka: zdjęcie wyświetlane jest w środku, a tekst znajduje się na górze i na dole.
  • Wyrównanie na szerokość: zdjęcie zajmuje całą szerokość obszaru edytora (odpowiednie dla dużych zdjęć).
• RozmiarNależy przeciągnąć suwak „Szerokość”, aby dostosować proporcje (zaleca się pozostawienie opcji „Utrzymuj proporcje”, aby uniknąć zniekształcenia obrazu).
• link (na stronie internetowej)Klikając w pole „Link”, możesz dodać link do zdjęcia na innej stronie (na przykład klikając na zdjęcie, aby przejść do strony ze zdjęciem w wysokiej rozdzielczości). Jeśli nie chcesz dodawać linku, możesz pozostawić to pole puste.
• Tekst alternatywny (tekst Alt)Wprowadź opis obrazu (np. „Zrzut ekranu z instrukcją instalacji WordPressa”), aby pomóc wyszukiwarkom zidentyfikować zawartość obrazu, poprawić pozycję w rankingu SEO i ułatwić dostępność.

3. Rozwiązywanie typowych problemów.

• Nie udało się przesłać zdjęcia: sprawdź rozmiar zdjęcia (zalecane, by nie przekraczało 5 MB), format (obsługiwane są formaty JPG, PNG i WebP) lub odśwież stronę i spróbuj ponownie.
• Niewyraźne zdjęcia: upewnij się, że przesyłasz oryginalny obraz (o rozdzielczości co najmniej 1000 pikseli szerokości) i unikaj powiększania go ponad rozmiar oryginału.

III. Dodawanie filmu: użyj bloku „Wideo”, aby dodać film lokalny lub online.

Zarówno filmy nagrane przez siebie, jak i te pochodzące z platform takich jak YouTube czy Bilibili można dodać w bloku „Wideo”:

1. Wstaw lokalne wideo (wideo, które sam przesłałeś).

1. Kliknij ikonę „+” → wyszukaj „wideo” → wybierz „Prześlij” → wybierz plik wideo na komputerze (obsługiwane są formaty MP4 i WebM).
2. Po zakończeniu przesyłania film automatycznie pojawi się w bloku, a następnie można kliknąć, aby odtworzyć go w celu przetestowania.

UwagaLokalne pliki wideo są duże, mogą zajmować miejsce na serwerze i spowalniać ładowanie. Zaleca się korzystanie z tej metody tylko w przypadku małych filmów (nie większych niż 100 MB), natomiast duże filmy należy przesyłać za pośrednictwem platform online.

2. Wstaw film online (polecam!).

Wstawianie linku do platformy wideo nie wymaga zajmowania miejsca na serwerze i umożliwia szybsze ładowanie:

1. Otwórz platformę wideo (np. YouTube, Bilibili, Tencent Video), znajdź docelny film i skopiuj link do udostępnienia (np. https://www.bilibili.com/video/BV123456）。
2. W edytorze Gutenberg wystarczy skopiować link, a system automatycznie rozpozna go i utworzy blok wideo z odtwarzaczem wideo.

Podane platformy wspierająceNa głównych platformach, takich jak YouTube, Bilibili, Tencent Video, Youku i iQiyi, wystarczy wkleić link, a po 2–3 sekundach film zostanie załadowany.

3. Dostosowanie stylu wideo.

Wybierz blok wideo, a następnie w prawym panelu możesz dokonać następujących ustawień:

• Ustawienie wyrównania (tak jak na obrazku; wyrównanie do lewej/prawej strony umożliwia zawijanie tekstu).
• Szerokość (dostosuj rozmiar odtwarzacza wideo, zaleca się, aby nie przekraczał 1000 pikseli szerokości, aby uniknąć problemów z wyświetlaniem na telefonie);
• Automatyczne odtwarzanie: nie zaleca się jego włączania (większość przeglądarek blokuje automatyczne odtwarzanie, co może mieć negatywny wpływ na jakość obsługi).

IV. Wstawianie linków: umożliwienie powiązania tekstu i obrazów z innymi treściami.

Linki są „żyłami” witryny, umożliwiając powiązanie treści z innymi stronami i zewnętrznymi witrynami. Program Gutenberg umożliwia dodawanie linków do tekstów i obrazów.

1. Dodaj link (hiperłącze) do tekstu.

1. Zaznacz tekst, do którego chcesz dodać link (np. „Kliknij, aby zapoznać się ze szczegółowym samouczkiem”).
2. Kliknij ikonę „Link” (w formie łańcucha) na pasku narzędzi wyświetlonym powyżej lub naciśnij klawisz skrótu. Ctrl+K。
3. Wklej adres linku w polu wprowadzania (np. link do strony w witrynie). https://你的域名/教程 lub linki zewnętrzne. https://example.com）。
4. Dodatkowe ustawienia:
   • Zaznacz opcję „Otwórz w nowej karcie” (zaleca się włączyć tę opcję dla linków zewnętrznych, aby uniknąć opuszczania witryny przez odwiedzających).
   • Klikając w ikonę „Ustawienia linku” (mała kołatka), możesz dodać tytuł linku (tekst podpowiedzi wyświetlany po najechaniu na niego myszką).
5. Kliknij „Enter” lub „Zastosuj”, aby zakończyć konfigurację. Tekst zmieni kolor na niebieski i zostanie podkreślony, co oznacza, że link został pomyślnie dodany.

2. Dodaj link do zdjęcia.

1. Wybierz blok obrazu, a następnie w prawym panelu znajdź pole wprowadzania „Link”.
2. Wprowadź adres linku (na przykład klikając na zdjęcie, aby przejść do strony ze szczegółami produktu).
3. Zaznacz opcję „Otwórz w nowej karcie” (według potrzeby) i kliknij w puste miejsce, aby zapisać zmiany.

3. Usuń link.

• Linki do tekstu: Wybierz tekst z linkiem, kliknij ikonę „Usuń link” na pasku narzędzi (łańcuch z krzyżykiem) lub naciśnij klawisz <. Ctrl+K Następnie usuń adres linku.
• Link do zdjęcia: po wybraniu zdjęcia wystarczy usunąć adres w polu „Link” po prawej stronie.

5. Wskazówki dla początkujących

1. Klawisze skrótowe do operacji na blokach.：
   • Szybkie dodawanie bloków: wprowadź / + Nazwa bloku (np. /图片 Wyświetl blok z obrazami bezpośrednio;
   • Blok ruchomy: po wybraniu bloku należy nacisnąć przycisk ↑/↓ Klawisze strzałek lub ikona „⋮⋮” po lewej stronie bloku;
   • Usunięcie bloku: po wybraniu bloku należy nacisnąć przycisk <. Delete Naciśnij klawisz Delete lub kliknij ikonę „Usuń” na pasku narzędzi bloku.
2. Prezentacja w czasie rzeczywistym.Kliknij przycisk „Podgląd” w prawym górnym rogu strony edycji, aby sprawdzić, czy link działa i czy obrazy / filmy są prawidłowo wyświetlane.
3. Należy unikać nadmiernej stylizacji tekstu.Kolor tekstu i tła nie powinny być zbyt intensywne (zaleca się, aby nie przekraczały trzech różnych kolorów), co pozwoli zachować przejrzystość strony. Rozmiar zdjęć i filmów powinien być identyczny (na przykład szerokość każdego z nich powinna wynosić 800 pikseli), co zwiększy ich estetykę.

Dzięki powyższym krokom możesz łatwo dodawać i edytować teksty, obrazy, filmy oraz linki w edytorze Gutenberg. Pamiętaj, że każdy element to osobny „blok”, a po wybraniu go możesz dostosować ustawienia w prawym panelu, aby uzyskać precyzyjną formatację. Wystarczy kilka ćwiczeń, a szybko staniesz się w tym ekspertem!