Jak łatwo dodawać punkty i listy numerowane w WordPress

Tworzenie dobrze zorganizowanych treści za pomocą wypunktowań i list numerowanych może wydawać się proste, ale zauważyliśmy, że wielu użytkowników ma trudności z ich odpowiednim wyglądaniem. 📋

Po przejrzeniu różnych metod formatowania w edytorze blokowym odkryliśmy najłatwiejsze sposoby tworzenia przejrzystych, spójnych list.

Dzięki obszernym testom w naszych środowiskach demonstracyjnych zidentyfikowaliśmy kilka metod dodawania i stylizowania list w WordPress, od prostych punktów po niestandardowe listy.

Świetne jest to, że nie potrzebujesz żadnej wiedzy programistycznej, aby Twoje listy wyglądały profesjonalnie.

W tym przyjaznym dla początkujących przewodniku pokażemy Ci dokładnie, jak dodawać i formatować punkty i listy numerowane w WordPressie.

Kiedy dodawać punkty i listy numerowane w WordPress

Powinieneś dodawać listy do swoich treści zawsze, gdy potrzebujesz przedstawić informacje w uporządkowany, łatwy do zeskanowania sposób. Kluczem jest wybór odpowiedniego typu listy dla Twoich treści.

Użyj listy numerowanej, gdy kolejność elementów jest ważna. Jest to idealne rozwiązanie dla samouczków krok po kroku, rankingów top 10 lub dowolnego procesu, który wymaga określonej sekwencji.

Użyj listy wypunktowanej, gdy kolejność elementów nie ma znaczenia. Jest to świetne rozwiązanie do wymieniania cech produktu, przykładów lub grupy powiązanych pomysłów.

Prawidłowe używanie list pomaga odwiedzającym zrozumieć Twoje treści w mgnieniu oka, nawet jeśli informacje są złożone. Poprawia to doświadczenie użytkownika i może sprawić, że ludzie dłużej pozostaną na Twojej stronie WordPress.

Mając to na uwadze, zobaczmy, jak można dodawać punkty i listy numerowane w WordPressie. Po prostu użyj poniższych szybkich linków, aby przejść bezpośrednio do metody, której chcesz użyć:

• Method 1: Using the Built-in WordPress List Block (Easy)
• Metoda 2: Używanie Shortcodes Ultimate (Listy z niestandardowymi ikonami)
• Method 3: Using a Page Builder Plugin (Best for Landing Pages)
• Method 4: Using Code to Add Bullet Points and Number Lists (Advanced)
• Najczęściej zadawane pytania dotyczące dodawania punktów i list numerowanych w WordPress

Metoda 1: Użycie wbudowanego bloku listy WordPress (Łatwe)

Najprostszym sposobem dodawania punktów i list numerowanych jest użycie bloku Listy oraz edytora bloków WordPress Gutenberg.

Pozwala to tworzyć proste listy numerowane lub punktowane bez instalowania osobnego wtyczki WordPress. Niemniej jednak ten domyślny blok ma tylko kilka opcji dostosowywania.

Jeśli chcesz dopracować swoje listy, dodając niestandardowe ikony, układy poziome, różne kolory i inne elementy, zalecamy skorzystanie z jednej z pozostałych metod opisanych w tym artykule.

Aby rozpocząć, po prostu otwórz edytor bloków dla wpisu lub strony WordPress, do której chcesz dodać listę. Możesz też otworzyć edytor widżetów, aby dodać listę punktowaną do obszaru widżetu, takiego jak pasek boczny.

Następnie możesz wybrać, czy chcesz utworzyć listę punktowaną, czy numerowaną.

Jak utworzyć listę punktowaną w WordPress

Aby utworzyć listę punktowaną, kliknij ikonę „+”, aby dodać nowy blok WordPress.

W wyświetlonym oknie podręcznym wpisz „List”.

Gdy pojawi się właściwy blok, kliknij, aby dodać go do strony.

Tworzy to pierwszy element listy punktowanej. Po prostu wpisz tekst, którego chcesz użyć dla pierwszego elementu listy.

Po wykonaniu tej czynności naciśnij klawisz „Enter” na klawiaturze, aby przejść do następnej linii. WordPress automatycznie utworzy drugi punkt listy.

Teraz możesz przejść dalej i wpisać tekst, którego chcesz użyć dla drugiego punktu wypunktowania. Po prostu powtórz te kroki, aby dodać więcej elementów do listy.

Jeśli chcesz utworzyć listę zagnieżdżoną, kliknij przycisk „Wcięcie”. Przesuwa to kursor o jeden krok w prawo, gotowe do wpisania wciętego tekstu.

Możesz ponownie kliknąć przycisk „Wcięcie”, aby utworzyć dwa poziomy zagnieżdżonych punktów.

Jak widać na poniższym obrazku, każdy poziom używa innej ikony.

Aby zmniejszyć wcięcie, kliknij przycisk „Zmniejsz wcięcie”.

Przesuwa to kursor o jeden krok w lewo, gotowy do rozpoczęcia pisania.

Naciskając przyciski „Wcięcie” i „Zwiń wcięcie”, możesz tworzyć listy zagnieżdżone z wieloma różnymi poziomami.

Domyślnie edytor bloków WordPress używa rozmiaru czcionki „Średni”, ale możesz przełączać się między małymi, dużymi i bardzo dużymi, korzystając z ustawień „Typografia” w opcjach bloków po prawej stronie.

Możesz również dodać linki lub użyć standardowych opcji formatowania tekstu, takich jak pogrubienie i kursywa. Dzięki temu listy są jeszcze łatwiejsze do przeskanowania i zrozumienia na pierwszy rzut oka.

Jak utworzyć listę numerowaną w WordPressie

Aby utworzyć listę numerowaną w WordPress, po prostu naciśnij klawisz „1” na klawiaturze, a następnie kropkę (.)

WordPress automatycznie zamieni ten tekst na pierwszy element listy numerowanej.

Jesteś teraz gotowy, aby wpisać pierwszy element na liście numerowanej.

Następnie po prostu naciśnij klawisz „Enter” na klawiaturze, a WordPress automatycznie utworzy kolejny punkt numerowany.

Podobnie jak w przypadku punktów wypunktowania, możesz tworzyć listy zagnieżdżone, klikając przyciski „Zwiększ wcięcie” i „Zmniejsz wcięcie”.

Tworzy to wcięty punkt wypunktowania pod punktem numerowanym.

W przeciwieństwie do list punktowanych, można używać tylko jednego poziomu wcięć.

Gdy będziesz zadowolony z wyglądu listy, po prostu kliknij przycisk „Aktualizuj” lub „Opublikuj”, aby opublikować ją na swojej stronie internetowej WordPress.

Metoda 2: Używanie Shortcodes Ultimate (Listy z niestandardowymi ikonami)

Wbudowany blok List jest idealny do tworzenia list tekstowych, ale czasami możesz chcieć utworzyć listę z niestandardowymi ikonami. W ten sposób możesz sprawić, że Twoje listy będą bardziej atrakcyjne wizualnie i lepiej dopasowane do motywu Twoich treści.

Najłatwiejszym sposobem na to jest użycie Shortcodes Ultimate. Ten plugin pozwala tworzyć listy z niestandardowymi ikonami za pomocą prostych krótkich kodów.

W tym celu użyjemy darmowej wersji wtyczki, ponieważ jest ona wystarczająca do tej metody. Jeśli jednak potrzebujesz bardziej zaawansowanych funkcji, możesz przejść na płatny plan.

Aby użyć Shortcodes Ultimate, zainstaluj wtyczkę WordPress w swoim obszarze administracyjnym. Następnie utwórz nowy wpis lub edytuj istniejący w edytorze blokowym.

Teraz kliknij przycisk „+” w dowolnym miejscu na stronie i wybierz blok „Shortcode”.

Na tym etapie wklej poniższy skrócony kod do bloku:

[su_list icon="icon: star" icon_color="#ffde0f"]
<ul>
 	<li>List item</li>
 	<li>List item</li>
 	<li>List item</li>
</ul>
[/su_list]

Ten krótki kod wyświetli trzy elementy listy punktowanej z ikonami żółtej gwiazdy, w ten sposób:

Aby dostosować ikonę i kolor, możesz przejść na stronę Fork Awesome. Znajdziesz tam wszystkie ikony, których możesz użyć do swoich list punktowanych. Wystarczy poszukać ikony, której chcesz użyć.

Na przykład użyjemy ikony „flaga”. Teraz skopiuj nazwę ikony i wróć do edytora bloków.

Tam po prostu zastąp star nim. Zamiast icon: star, użyjemy icon: flag.

Aby zmienić kolor, zastąp kod HEX w icon_color="#ffde0f" kodem HEX pożądanego koloru.

Więc jeśli chcesz, aby ikona była zielona, musisz wpisać icon_color="#008000". Więcej informacji o znajdowaniu odpowiednich kolorów znajdziesz w naszym artykule na temat jak znaleźć idealną paletę kolorów dla Twojej witryny WordPress.

Teraz nie zapomnij zastąpić List item własnym tekstem.

Oto jak teraz wygląda nasz kod:

Gdy będziesz zadowolony z wyglądu listy, możesz kliknąć przycisk „Zaktualizuj” lub „Opublikuj”, aby opublikować ją na swoim blogu WordPress lub stronie internetowej.

Tak wygląda lista na froncie:

Metoda 3: Użycie wtyczki Page Builder (Najlepsze dla stron docelowych)

Jeśli chcesz tworzyć piękne listy z niestandardowym stylem, możesz użyć SeedProd.

Ten zaawansowany motyw WordPress i wtyczka page builder pozwalają tworzyć profesjonalnie zaprojektowane strony za pomocą prostego edytora typu „przeciągnij i upuść”.

Zawiera również gotowy blok Listy, który pozwala precyzyjnie dostosować każdą część projektu listy, w tym zmianę odstępów między poszczególnymi elementami, zastąpienie standardowych punktorów niestandardowymi ikonami i wiele więcej.

Ponadto ułatwia projektowanie samodzielnych stron o unikalnym wyglądzie, więc jest to również świetny wybór, jeśli chcesz dodać listy do niestandardowej strony głównej lub strony docelowej.

Dokładnie przetestowaliśmy narzędzie i uznaliśmy je za bardzo przyjazne dla początkujących. Aby dowiedzieć się więcej, zapoznaj się z naszą recenzją SeedProd.

Pierwszą rzeczą, którą musisz zrobić, to zainstalować i aktywować SeedProd. Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem krok po kroku, jak zainstalować wtyczkę WordPress.

Po aktywacji musisz wprowadzić swój klucz licencyjny.

Te informacje znajdziesz na swoim koncie na stronie SeedProd. Po dodaniu klucza licencyjnego po prostu kliknij „Zweryfikuj klucz”.

Wybierz profesjonalnie zaprojektowany szablon

Następnie przejdź do SeedProd » Strony docelowe i kliknij „Dodaj nową stronę docelową”.

Na następnym ekranie zostaniesz poproszony o wybranie szablonu.

SeedProd oferuje ponad 300 pięknych szablonów podzielonych na różne kategorie, takie jak szablony stron 404 i niestandardowe strony podziękowania WooCommerce.

Po prostu kliknij na dowolną zakładkę, aby zobaczyć różne szablony w tej kategorii.

Gdy znajdziesz szablon, którego chcesz użyć, najedź na niego kursorem myszy, a następnie kliknij ikonę zaznaczenia.

Używamy szablonu „Explosive Growth Webinar” na wszystkich naszych obrazach, ale możesz użyć dowolnego projektu, jaki chcesz.

Następnie musisz nadać stronie tytuł.

SeedProd automatycznie utworzy adres URL na podstawie tytułu strony, ale możesz go zmienić na dowolny. Na przykład dodanie odpowiednich słów kluczowych do adresu URL często poprawia SEO w WordPress i pomaga stronie pojawić się w odpowiednich wynikach wyszukiwania.

Aby dowiedzieć się więcej, zapoznaj się z naszym przewodnikiem na temat jak przeprowadzić badanie słów kluczowych dla swojego bloga WordPress.

Gdy będziesz zadowolony z tytułu i adresu URL, po prostu kliknij „Zapisz i rozpocznij edycję strony”.

Zbuduj swój własny układ strony

SeedProd otworzy teraz Twój szablon w edytorze typu „przeciągnij i upuść”. Po prawej stronie zobaczysz podgląd projektu strony na żywo, a po lewej niektóre ustawienia.

SeedProd zawiera wiele bloków, które możesz dodać do swojego projektu, w tym bloki umożliwiające dodawanie przycisków udostępniania w sieciach społecznościowych, filmów, formularzy kontaktowych i innych.

Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem na temat tworzenia niestandardowej strony w WordPress.

Aby dodać listę do swojego projektu, znajdź blok „Lista” i przeciągnij go na stronę.

Dodaje to pionową listę do Twojej strony z symbolem zastępczym „Element 1”.

Jeśli chcesz zamiast tego utworzyć listę poziomą, kliknij zakładkę „Zaawansowane”, a następnie wybierz przycisk „Pozioma”.

Jesteś teraz gotowy, aby zacząć tworzyć swoją listę, wybierając zakładkę „Treść”.

Aby zastąpić domyślny tekst własnym komunikatem, kliknij „Element 1” w menu po lewej stronie.

Teraz możesz wpisać element listy w małym edytorze tekstu, który się pojawi.

Tutaj możesz również zastosować dowolne formatowanie, którego chcesz użyć, takie jak pogrubienie lub kursywa.

Domyślnie SeedProd używa znacznika wyboru dla każdego punktu, ale posiada wbudowaną bibliotekę ikon, która zawiera 1400 ikon Font Awesome, których można użyć zamiast tego.

Aby zastąpić znacznik wyboru, po prostu najedź na niego kursorem myszy, a następnie kliknij „Biblioteka ikon”, gdy się pojawi.

Otwiera to okno podręczne, w którym możesz wybrać ikonę, której chcesz użyć zamiast tego.

Możesz używać różnych ikon dla poszczególnych punktów na liście, więc jest to świetny sposób na tworzenie bardziej interesujących i przyciągających wzrok list.

Aby utworzyć więcej punktów, po prostu kliknij przycisk „Dodaj nowy element”.

Możesz teraz dodawać tekst i zmieniać domyślną ikonę, postępując zgodnie z dokładnie tym samym procesem opisanym powyżej.

Po dodaniu wszystkich elementów do listy, możesz zmienić rozmiar czcionki i wyrównanie, korzystając z ustawień w menu po lewej stronie.

Możesz również zwiększyć lub zmniejszyć odstęp między poszczególnymi elementami listy za pomocą suwaka „Odstęp między”.

Następnie możesz chcieć zmienić kolor ikon na liście. Nawet jeśli używasz różnych ikon, SeedProd zastosuje ten sam kolor do każdego elementu, dzięki czemu projekt zawsze będzie wyglądał spójnie.

Aby wprowadzić tę zmianę, kliknij obszar „Kolor ikony”, a następnie wybierz nowy kolor z pojawiającego się okna.

Po wykonaniu tej czynności możesz kliknąć „Zaawansowane” i przyjrzeć się dodatkowym ustawieniom. Widzieliśmy już, jak przełączać się między pionowymi i poziomymi układami list, ale możesz także zmienić kolor tekstu i czcionkę.

Aby Twoja lista naprawdę się wyróżniała, możesz nawet dodać cień pudełka lub animację CSS.

Większość ustawień w zakładce „Zaawansowane” jest dość oczywista, więc warto je przejrzeć, aby zobaczyć, jakie efekty można stworzyć.

Po wykonaniu tej czynności możesz kontynuować pracę nad projektem strony, dodając kolejne bloki, a następnie dostosowując je za pomocą ustawień w menu po lewej stronie.

Gdy będziesz zadowolony z wyglądu strony, po prostu kliknij menu rozwijane obok przycisku „Zapisz” i wybierz „Opublikuj”.

Teraz możesz odwiedzić tę stronę, aby zobaczyć listę na żywo w swoim sklepie internetowym lub na stronie internetowej.

Metoda 4: Używanie kodu do dodawania wypunktowań i list numerowanych (zaawansowane)

Listy można również tworzyć za pomocą wbudowanego edytora kodu WordPress i HTML.

Chociaż edytor blokowy jest łatwiejszy, używanie edytora kodu daje precyzyjną kontrolę nad strukturą HTML, co może być przydatne do rozwiązywania problemów lub wklejania złożonych, wstępnie sformatowanych list.

Więcej na ten temat znajdziesz w naszym przewodniku jak edytować HTML w edytorze kodu WordPress.

Aby rozpocząć, otwórz stronę lub wpis, na którym chcesz wyświetlić listę. Następnie kliknij ikonę trzech kropek w prawym górnym rogu i wybierz „Edytor kodu”.

Następne kroki będą się różnić w zależności od tego, czy chcesz dodać listę punktowaną, czy numerowaną.

Jak utworzyć listę punktowaną za pomocą kodu

Aby utworzyć listę punktowaną, zacznij od wpisania następującego tekstu:

<!-- wp:list -->
<ul>

ul oznacza 'unordered list' (lista nieuporządkowana), co oznacza, że lista nie ma żadnych numerów, a wp:list informuje WordPress, że ręcznie tworzysz blok Listy.

Następnie naciśnij klawisz „Enter”, aby przejść do nowej linii i utworzyć pierwszy element listy:

<!-- wp:list -->
<ul>
<!-- wp:list-item -->
<li>Red</li>
<!-- /wp:list-item -->

Tutaj li oznacza 'list item' (element listy), a zamykamy linię za pomocą /li.

Możesz powtórzyć ten proces, aby utworzyć więcej elementów listy. Na przykład:

<!-- wp:list -->
<ul>
<!-- wp:list-item -->
<li>Red</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Orange</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Green</li>
<!-- /wp:list-item -->

Po zakończeniu zamknij blok kodu kolejnym znacznikiem „listy nieuporządkowanej”:

</ul>
<!-- /wp:list -->

Daje nam to następujący kod listy:

<!-- wp:list -->
<ul>
<!-- wp:list-item -->
<li>Red</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Orange</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Green</li>
<!-- /wp:list-item -->
</ul>
<!-- /wp:list -->

Jak widać na poniższym obrazku, tworzy to bardzo prostą listę, ale można ją dostosować, dodając inne znaczniki HTML, takie jak tagi nagłówków.

Jak utworzyć listę numerowaną za pomocą kodu

Aby utworzyć listę numerowaną, po prostu wpisz następujące polecenie:

<!-- wp:list {"ordered":true} -->

Następnie możesz wpisać ol, co oznacza listę uporządkowaną:

<!-- wp:list {"ordered":true} -->
<ol>

Następnie dodaj każdy element listy, postępując zgodnie z tym samym procesem opisanym powyżej:

<!-- wp:list {"ordered":true} -->
<ol>
<!-- wp:list-item -->
<li>Red</li>
<!-- /wp:list-item -->

Na koniec zamknij listę uporządkowaną za pomocą znacznika /ol i wp:list.

<!-- wp:list {"ordered":true} -->
<ol>
<!-- wp:list-item -->
<li>Red</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Orange</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Green </li>
<!-- /wp:list-item -->
</ol>
<!-- /wp:list -->

Najczęściej zadawane pytania dotyczące dodawania punktów i list numerowanych w WordPress

Oto kilka pytań, które nasi czytelnicy często zadają na temat dodawania wypunktowań i list numerowanych w WordPressie:

Jak utworzyć listę z wypunktowaniami i numeracją?

Możesz utworzyć mieszaną listę, używając przycisku „Zwiększ wcięcie”. Zacznij listę numerowaną, a gdy chcesz dodać podpunkt z wypunktowaniem, po prostu kliknij przycisk „Zwiększ wcięcie” na pasku narzędzi. Spowoduje to utworzenie zagnieżdżonego wypunktowania pod elementem numerowanym.

Jaki jest skrót klawiaturowy do tworzenia list wypunktowanych w WordPressie?

Głównym skrótem klawiaturowym do rozpoczęcia listy wypunktowanej w edytorze bloków WordPress jest wpisanie gwiazdki (*) , a następnie naciśnięcie spacji. W przypadku listy numerowanej wpisz 1. , a następnie naciśnij spację.

Jak można zrobić listę numerowaną a) dl b) ol c) list d) ul?

Listę numerowaną można utworzyć za pomocą opcji (b), tagu <ol> w HTML. „ol” oznacza „ordered list” (lista uporządkowana), która jest używana, gdy kolejność elementów jest ważna. Tag <ul> jest używany do list nieuporządkowanych (wypunktowanych).

Czy lepiej używać list czy divów?

Zawsze lepiej jest używać odpowiednich tagów list (takich jak <ul> lub <ol>) dla treści list zamiast tagów <div>. Tagi list zapewniają znaczenie semantyczne, co jest kluczowe dla SEO i narzędzi dostępności, takich jak czytniki ekranu, do zrozumienia struktury Twojej treści.

Mamy nadzieję, że ten samouczek pomógł Ci dowiedzieć się, jak dodawać listy punktowane i numerowane w WordPress. Możesz również dowiedzieć się, jak dodać współpracę w edytorze blokowym WordPress oraz zapoznać się z naszymi rekomendacjami najlepszych wtyczek bloków Gutenberg dla WordPress.

Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube po samouczki wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.