Jak korzystać z niestandardowego bloku HTML WordPress

Niestandardowy blok HTML pozwala dodawać zawartość HTML i edytować ją bez konieczności przeglądania strony lub publikowania w formacie HTML. Możesz osadzić kod HTML, a nawet użyć go do oznaczenia tekstu, a następnie przekonwertować go na blok akapitu ze stylizowanym tekstem, jeśli chcesz. Ten blok jest świetny dla tych, którzy wolą pracować w HTML i jest to jeden z najlepszych sposobów osadzenia niektórych typów kodu, takich jak Mapy Google.

W tym artykule przyjrzymy się bliżej niestandardowemu blokowi HTML. Zobaczymy, jak dodać go do Twoich postów i stron, przyjrzymy się jego ustawieniom i opcjom, zobaczymy wskazówki dotyczące korzystania z niego oraz zapoznamy się z często zadawanymi pytaniami.

Subskrybuj nasz kanał YouTube

Jak dodać niestandardowy blok HTML do swojego posta lub strony?

Aby dodać niestandardowy blok HTML do treści, umieść kursor w miejscu, w którym ma się pojawić blok, i wybierz narzędzie Wstawka. Otworzy się pole wyszukiwania, w którym możesz wpisać wyszukiwane hasło lub przewinąć opcje. Wyszukaj html i wybierz blok, gdy zostanie wyświetlony w wynikach.

Alternatywnie możesz wpisać / html w miejscu, w którym ma się pojawić blok i nacisnąć Enter lub wybrać go z opcji nad obszarem bloku.

Masz teraz w swojej treści niestandardowy blok HTML, w którym możesz dodać kod HTML. Zobaczymy kilka przykładów z kodem, gdy przejdziemy przez ustawienia.

Niestandardowe ustawienia i opcje bloku HTML

W przeciwieństwie do większości bloków, niestandardowy blok HTML nie zawiera opcji na pasku bocznym edytora. Wszystkie potrzebne opcje znajdziesz na pasku narzędzi.

Niestandardowy pasek narzędzi bloku HTML

Kliknij w dowolnym miejscu bloku, aby zobaczyć jego narzędzia. Jeśli nie widzisz ich wszystkich, kliknij pod blokiem w nowym obszarze, a pozostałe narzędzia wyświetlą się po ponownym wybraniu bloku.

Każdy blok ma swoje własne specyficzne kontrolki, w których możesz wybrać opcje dla bloku. Niewielki zestaw opcji bloku nad paskiem narzędzi umożliwia zmianę typu bloku, konwersję na bloki i otwieranie opcji.

Przyjrzyjmy się szczegółowo każdemu ustawieniu.

Niestandardowy blok lub styl zmiany HTML

Wybranie HTML w opcjach otwiera rozwijane pole, w którym możesz przekształcić blok w inne typy bloków. Opcje obejmują kod, kolumny lub grupę.

Kod – przekształca niestandardowy blok HTML w blok kodu, dzięki czemu można wyświetlać różne typy kodu.

Kolumny – umieszcza blok w kolumnach.

Grupa – dodaje blok do grupy, dzięki czemu można je dostosować jako pojedynczy blok.

Niestandardowe narzędzie do przeciągania bloków HTML

Narzędzie do przeciągania zawiera sześć kropek, które można chwycić myszą, aby je przesunąć.

Następnie po prostu przeciągnij blok w dowolne miejsce w treści i upuść go. Pojawi się niebieska linia wskazująca, gdzie blok zostanie upuszczony podczas przeciągania bloku.

Gdy zobaczysz, że niebieska linia pojawia się w miejscu, w którym chcesz blokować, puść przycisk myszy, a blok zostanie umieszczony w nowej lokalizacji.

Przenoszenie niestandardowego bloku HTML

Strzałki w górę i w dół przesuwają blok o jedną sekcję treści za każdym razem, gdy je klikniesz. Ekran będzie się przewijał, gdy blok automatycznie przesunie się do nowej lokalizacji. Jest to łatwy sposób na przesunięcie bloku o sekcję lub dwie.

Niestandardowy blok HTML HTML i podgląd

Przyciski HTML i Podgląd pozwalają wybrać sposób współpracy bloku z kodem HTML w edytorze. Przycisk HTML jest domyślnie zaznaczony. To pokazuje kod HTML w postaci kodu, a nie jego wykonywanie. Ten przykład pokazuje kod HTML Mapy Google.

Wybranie opcji Podgląd pokazuje, jak HTML będzie wyglądał na interfejsie użytkownika, gdy jest wykonywany w przeglądarce. Łatwo jest przełączać się między widokami, aby edytować kod HTML i zobaczyć, jak będzie wyglądał dla użytkownika końcowego. To doskonały sposób na wprowadzanie zmian i szybkie przeglądanie wyników. Ten przykład pokazuje osadzoną mapę Google tak, jak wyglądałaby w treści.

Jako kolejny przykład, oto trochę kodu HTML, aby dodać styl do wiersza tekstu. To jest widok HTML, w którym mogę tworzyć i edytować HTML.

Oto tryb podglądu, który pokazuje, jak będzie wyglądać z przodu.

Opcje niestandardowego bloku HTML

Po prawej stronie paska narzędzi znajdują się trzy kropki w pionowym stosie. Te trzy kropki otwierają zestaw 10 opcji w trzech podziałach, które umożliwiają ukrywanie ustawień, konwertowanie na bloki, kopiowanie, duplikowanie, wstawianie przed lub po, przenoszenie, dodawanie do bloków wielokrotnego użytku, grupowanie lub usuwanie bloku.

Oto, do czego służą opcje niestandardowego bloku HTML:

Ukryj więcej ustawień – ukrywa prawy pasek boczny, rozszerzając obszar roboczy.

Konwertuj na bloki – konwertuje zawartość do innych odpowiednich bloków. Tekst zostanie przekonwertowany na bloki akapitu, obrazy na bloki obrazu itp. Osadzony kod, taki jak kod Google Map, którego użyłem w moim przykładzie, pozostanie niestandardowym blokiem HTML. Jeśli można przekonwertować inny kod HTML w bloku, zostanie on usunięty z bloku po umieszczeniu w innym bloku.

Kopiuj – kopiuje blok do schowka, dzięki czemu można go wkleić w dowolnym miejscu edytora.

Duplikat – powoduje umieszczenie duplikatu bloku pod oryginałem.

Wstaw przed – dodaje obszar bloku przed niestandardowym blokiem HTML, dzięki czemu można umieścić kolejny blok.

Wstaw po – dodaje obszar za blokiem, w którym można umieścić kolejny blok.

Przenieś do — pozwala przesunąć blok w górę lub w dół za pomocą klawiszy strzałek. Przesuniesz niebieską linię. Kiedy dotrze do żądanego miejsca, naciśnij enter, a blok zostanie natychmiast przesunięty.

Dodaj do bloków wielokrotnego użytku – dodaje niestandardowy blok HTML do bloków wielokrotnego użytku, dzięki czemu można go ponownie użyć na dowolnej stronie lub w poście.

Grupa – dodaje blok do grupy, dzięki czemu można dostosować bloki jako pojedynczą jednostkę.

Usuń blok – usuwa blok.

Wskazówki i najlepsze praktyki dotyczące efektywnego korzystania z niestandardowego bloku HTML

Użyj tego bloku, aby najpierw nadać styl tekstowi i edytować kod HTML, a następnie użyj narzędzia Konwertuj na bloki, aby utworzyć akapity lub inne rodzaje zawartości. Daje to większą kontrolę nad treścią i jest szczególnie przydatne, jeśli nie musisz zachowywać wersji HTML. Możesz wyświetlić podgląd w trakcie podróży. Dzięki temu nie musisz przełączać się między edytorami wizualnymi i edytorami kodu w ustawieniach WordPress na pasku bocznym.

Użyj tego bloku do osadzonych map, reklam, filmów itp. Dzięki temu nie będziesz musiał przechodzić do widoku Edytora kodu i dodawać kodu do innych typów bloków, takich jak blok akapitu.

Używanie tego bloku zamiast wersji stron i postów w edytorze kodu zapobiega pracy ze stroną i tagami postów. Stwarza to czystsze środowisko pracy, które jest łatwiejsze w użyciu.

Niezależnie od tego, czy dodajesz własny kod HTML, czy osadzasz kod z innego źródła, często korzystaj z funkcji podglądu, aby upewnić się, że kod HTML będzie działał zgodnie z zamierzeniami.

Nie używaj tagu script w bloku. Może zostać usunięty, a wtedy Twój kod nie będzie działał.

Często zadawane pytania dotyczące niestandardowego bloku HTML

Co robi niestandardowy blok HTML?

Umożliwia wprowadzenie kodu HTML do pola, dzięki czemu można z nim pracować, zachowując stronę lub post w Edytorze wizualnym.

Jak można użyć niestandardowego bloku HTML?

Można dodać dowolny kod HTML z obsługiwanymi tagami. Możesz użyć bloku do reklam, map, filmów, wszystkiego z ramkami iframe, tabelami itp. Jest to również łatwy sposób na oznaczenie tekstu, a następnie przekonwertowanie go na blok akapitowy.

Czy będzie kodować znaczniki kolorami?

Nie, znaczniki w bloku wyglądają jak każdy edytor tekstu.

Czy niestandardowy blok HTML uruchamia kod HTML?

Uruchamia HTML jak zwykle na interfejsie. W edytorze może uruchomić kod HTML lub pokazać kod. To od Ciebie zależy, które przeglądasz, i możesz wybrać jedną z dwóch opcji w dowolnym momencie za pomocą jednego kliknięcia przycisku.

Czy wszystkie tagi HTML są obsługiwane?

Nie. Możesz zobaczyć listę tagów HTML, które są obsługiwane na stronie Obsługiwany kod WordPress.

Wniosek

Oto nasze spojrzenie na niestandardowy blok HTML. Ten blok nie jest przeznaczony tylko dla programistów. Główną zaletą korzystania z tego bloku jest to, że nie musisz przełączać się między edytorem wizualnym a edytorem kodu, aby pracować z HTML. Oznacza to, że możesz pracować z pozostałymi treściami wyświetlanymi w normalny sposób. Następnie możesz pracować z kodem HTML w bloku i wyświetlać go w dowolnym momencie. Niestandardowy blok HTML zapewnia łatwy sposób pracy z HTML w edytorze bloków.

Chcemy usłyszeć od Ciebie. Czy używasz niestandardowego bloku HTML? Daj nam znać o swoim doświadczeniu w komentarzach.

Polecane zdjęcie za pośrednictwem enterlinedesign / shutterstock.com