Czy kiedykolwiek zauważyłeś, że niektóre strony internetowe mają idealnie rozmieszczone treści, które są łatwe do zeskanowania, podczas gdy inne wydają się zatłoczone i trudne do odczytania?
Sekret często sprowadza się do czegoś prostego: odpowiednich łamań linii i odstępów.
Jeśli kiedykolwiek dodawałeś podziały wierszy w edytorze WordPress, tylko po to, by odkryć, że nie pojawiają się na opublikowanej stronie, zdecydowanie nie jesteś sam. WordPress obsługuje odstępy nieco inaczej niż edytory tekstu, takie jak Google Docs czy Microsoft Word.
Jednak gdy zrozumiesz, jak to działa, będziesz mieć pełną kontrolę nad wyglądem swoich treści.
Pokażemy Ci kilka niezawodnych metod dodawania podziałów na linie w WordPress, od szybkich skrótów po bardziej zaawansowane opcje formatowania.
Dlaczego dodawać podział na linie w WordPress (nowe odstępy między wierszami)?
Na pierwszy rzut oka podział na linie może wydawać się drobnym wyborem formatowania, ale może mieć duży wpływ na to, jak Twoje treści się prezentują.
Od poprawy czytelności po zwiększenie satysfakcji użytkownika, dodanie odpowiednich odstępów sprawia, że Twoje strony wyglądają schludnie i profesjonalnie. Oto dlaczego to ważne:
- Lepsza czytelność: Dzieli bloki tekstu, ułatwiając skanowanie.
- Przyjazny dla urządzeń mobilnych: Zachowuje czytelność treści na mniejszych ekranach.
- Poprawia wklejony tekst: Czyści formatowanie z innych źródeł.
- Przyciąga uwagę: Pomaga wyróżnić wskazówki i CTA.
Krótko mówiąc, podziały na linie sprawiają, że Twoje treści są łatwiejsze do czytania i bardziej angażujące – zarówno dla odwiedzających, jak i dla wyszukiwarek.
Uwaga: Zanim zaczniemy, ważne jest, aby wiedzieć, że odstępy między wierszami są kontrolowane przez motyw WordPress, którego używasz.
Pokażemy Ci, jak dodawać odstępy między blokami w edytorze bloków, a następnie omówimy, jak dostosować odstępy między wierszami w Twoim motywie, jeśli nie jesteś zadowolony z domyślnych wyników.
Mając to na uwadze, przyjrzyjmy się, jak łatwo dodać łamanie linii w WordPress.
- Jak dodać podwójną spację między blokami
- Jak dodać pojedynczą spację
- Najprostszy sposób: Użycie bloku Odstęp
- Modifying the Line Height and Spacing
- Samouczek wideo
Jak dodać podwójną spację między blokami
Kiedy naciskasz klawisz Enter w systemie Windows lub klawisz Return na komputerze Mac na klawiaturze, aby dodać łamanie linii, WordPress traktuje to jako nowy akapit.
Oznacza to, że automatycznie doda podwójną przerwę między wierszami. Wielkość odstępu jest kontrolowana przez motyw, a to formatowanie jest standardową funkcją wszystkich dobrych motywów WordPress.
Po prostu przejdź do edytora treści, naciśnij klawisz Enter lub Return po wierszu, a następnie wpisz coś innego w następnym wierszu.
Po prostu robiąc to, w zależności od stylizacji Twojego motywu, powinieneś zobaczyć wyraźne rozróżnienie między akapitami.
Jak dodać pojedynczą spację
Teraz, jeśli piszesz coś takiego jak adres, prawdopodobnie chcesz, aby był on pojedynczo odstępny, a nie podwójnie odstępny na Twojej stronie WordPress.
W tym przypadku musisz nacisnąć klawisz SHIFT + ENTER w systemie Windows lub klawisz SHIFT + RETURN na Macu.
Mówi to WordPressowi, że chcesz rozpocząć nowy wiersz w tym samym akapicie. Ta akcja tworzy pojedynczą przerwę między wierszami zamiast podwójnej spacji używanej do nowego akapitu.
Najprostszy sposób: Użycie bloku Odstęp
Aby w prosty sposób, bez kodowania, dodać dodatkowe odstępy między dowolnymi dwoma blokami, najłatwiejszą metodą jest użycie wbudowanego bloku Odstęp.
Po prostu kliknij przycisk „Dodaj blok” w edytorze, aby dodać nowy blok i wyszukaj „Odstęp”. Po jego dodaniu na Twojej stronie pojawi się nowa pusta przestrzeń.
Następnie możesz kliknąć odstęp i przeciągnąć niebieski uchwyt w górę lub w dół, aby dostosować jego wysokość.
Daje to precyzyjną kontrolę nad pionowymi odstępami bezpośrednio w edytorze.
Modyfikowanie wysokości i odstępów między wierszami
Czasami, nawet gdy dodasz odpowiednie odstępy między wierszami w edytorze, nie wyświetlają się one tak, jak chcesz, w Twoim motywie.
Istnieją dwa sposoby, aby to naprawić:
- Używanie wtyczki (łatwy sposób)
- Ręcznie za pomocą kodu CSS (bardziej zaawansowane)
Zacznijmy od łatwej metody.
Dodawanie odstępów między wierszami za pomocą wtyczki
Jeśli chcesz wprowadzić zmiany stylistyczne w swoim motywie bez konieczności nauki kodowania, najlepszym sposobem jest użycie wtyczki takiej jak CSS Hero.
CSS Hero ułatwia zmianę wyglądu Twojej strony WordPress bez znajomości kodu.
Więcej szczegółów znajdziesz w naszej pełnej recenzji CSS Hero.
Jeśli chcesz wprowadzić większe zmiany w swoim motywie, takie jak przeniesienie paska bocznego lub dodanie stopki, wtyczka do tworzenia stron metodą przeciągnij i upuść będzie lepszym rozwiązaniem. Wtyczka do tworzenia stron pozwoli Ci również wprowadzać drobne poprawki, takie jak zmiana kolorów czcionek lub dodawanie łamań linii w WordPress.
Nie chcesz używać wtyczki, czy potrzebujesz tylko tej jednej zmiany? W takim razie ręczna opcja kodu CSS może być dla Ciebie najlepsza.
Ręczna zmiana odstępów między akapitami za pomocą kodu CSS
Aby ręcznie dodawać łamanie linii bez wtyczki, musisz dodać trochę CSS do swojego motywu.
CSS jest zasadniczo jak funkcja formatowania w Microsoft Word. Zamiast klikać przyciski, będziesz pisać prosty kod CSS. Nie jest tak straszny, jak niektórzy początkujący mogą myśleć. CSS jest bardzo łatwy do zrozumienia, jeśli po prostu postępujesz zgodnie z instrukcjami.
Aby dodać niestandardowy kod CSS do swojego motywu, musisz przejść na stronę Wygląd » Dostosuj. Spowoduje to uruchomienie narzędzia do dostosowywania motywów WordPress, gdzie musisz kliknąć zakładkę „Dodatkowy CSS” w lewej kolumnie.
Jeśli nie widzisz tych opcji menu, być może używasz motywu blokowego. Zapoznaj się z naszym artykułem na temat jak naprawić brakujące narzędzie do dostosowywania motywu w panelu administracyjnym WordPress.
W polu niestandardowego CSS musisz dodać następujący kod CSS:
Ten kod kieruje wszystkie elementy akapitu (p) specyficznie w obszarze głównym treści Twoich postów, który WordPress często identyfikuje za pomocą klasy .post. Zapewnia to, że wpływa tylko na Twoje artykuły.
.post p{line-height: 1.5em;}Reguła CSS pokazana powyżej zmieni odstęp między wierszami treści akapitu na 1,5 em. Em to jednostka szerokości w typografii.
Teraz to zmienia tylko odstęp pojedynczego odstępu.
Jeśli chcesz zmienić odstępy między akapitami w WordPressie (tj. podwójne odstępy), musisz dodać wypełnienie (padding).
.post p {
line-height: 1.5em;
padding-bottom: 15px;
}
Zachęcamy do dostosowania liczb w tym kodzie CSS. Zmiana wartości padding-bottom zmieni odstęp między akapitami.
Możesz również dodać niestandardowy kod CSS do swojej witryny za pomocą wtyczki WPCode. Wtyczka bardzo ułatwia wstawianie i zarządzanie kodem na Twojej stronie.
Więcej szczegółów znajdziesz w naszym przewodniku jak dodać niestandardowy CSS do swojej strony WordPress.
Jeśli nie lubisz czytać instrukcji, po prostu obejrzyj nasz samouczek wideo.
Samouczek wideo
Aby uzyskać wizualny przewodnik, możesz obejrzeć nasz poniższy samouczek wideo. Obejmuje on wszystkie omówione przez nas metody dodawania pojedynczych i podwójnych przerw między wierszami w Twojej treści.
Mamy nadzieję, że ten artykuł pomógł Ci dodać podział wiersza w WordPress. Możesz również zapoznać się z naszym przewodnikiem na temat jak używać wzorców bloków WordPress oraz naszą listą najlepszych motywów WordPress przyjaznych Gutenbergowi.
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.
Ralph
To był ogromny problem w starym kreatorze. Nigdy nie wiedziałem, jak to będzie wyglądać i musiałem klikać podgląd co kilka linii, ale myślę, że z Gutenbergiem jest o wiele łatwiej i nauczyłem się po prostu używać Shift+Enter. Robię to automatycznie i prawie bez świadomości. Nie wiem dlaczego, ale niektóre strony nie pozwalają na Shift+Enter, tylko Enter lub wcale, a wtedy myślę sobie „DLACZEGO to nie działa”!
Deepak Sahani
Doskonałe wideo i post rozwiązały mój problem.
Wsparcie WPBeginner
Glad our guide could be helpful!
Admin
Jennyfer
Dziękuję bardzo za te informacje! Bardzo przydatne. Dokładnie tego szukałem.
Wsparcie WPBeginner
Glad our guide was helpful
Admin
Colleen Cochran
W końcu zrozumiałem, jak używać Shift-Enter do pojedynczych odstępów w wierszach poezji, ale kiedy post jest publikowany i wysyłany do obserwujących, traci formatowanie i wszystkie linie zlewają się. Jak to naprawić?
Wsparcie WPBeginner
Powinieneś sprawdzić narzędzie używane do wysyłania powiadomienia w celu uzyskania stylizacji do naprawienia tego problemu.
Admin
Luiz
Dziękuję! Bardzo przydatne!
Wsparcie WPBeginner
You’re welcome
Admin
Robin
Bardzo pomocne! Dziękuję!!
Wsparcie WPBeginner
You’re welcome
Admin
Dhirendra
Jakaś opcja zmniejszenia odstępu między obrazami...
Wsparcie WPBeginner
Zależałoby to od konkretnego obrazu, ale jako punkt wyjścia do znalezienia przyczyny luki, warto zapoznać się z naszym poniższym przewodnikiem:
https://014.leahstevensyj.workers.dev/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Admin
jan van den hoed
Dzięki za wyjaśnienie. Mam jednak jedno pytanie. Jak mogę zrobić to samo na smartfonie. Edytuję mojego bloga w podróży i nie mam przy sobie laptopa. Próbowałem nacisnąć Shift Enter, ale to nie zadziałało
Wsparcie WPBeginner
Ze względu na ograniczenia urządzeń mobilnych, prawdopodobnie będziesz musiał użyć metody CSS.
Admin
Val
Dziękuję bardzo, to była ogromna pomoc. Zastanawiałam się nad odstępami!
Wsparcie WPBeginner
Glad our guide was helpful
Admin
Stephen
Dziękuję, bardzo pomogło.
Wsparcie WPBeginner
Glad our article was helpful
Admin
Douglas Daniel
Aby zmienić CSS, mówi mi, że muszę kupić plan premium. Czy jestem bez szans?
Wsparcie WPBeginner
Wygląda na to, że korzystasz z WordPress.com, a ten samouczek jest przeznaczony dla witryn WordPress.org:
https://014.leahstevensyj.workers.dev/beginners-guide/self-hosted-wordpress-org-vs-free-wordpress-com-infograph/
niestety byłbyś ograniczony do innych opcji, takich jak Shift+Enter, aby uzyskać pojedynczy odstęp między wierszami treści.
Admin
SOO
Dziękuję! Pomocne!!
Wsparcie WPBeginner
You’re welcome, glad our article could help
Admin
Rebecca
U mnie to nie zadziałało. Czy są jakieś powody, dla których mogłoby nie działać?
Wsparcie WPBeginner
Jeśli używasz wtyczki do tworzenia stron, mogą one mieć inną metodę dla pojedynczego/podwójnego odstępu między wierszami. W przeciwnym razie może to być konflikt wtyczki/motywu, w którym musiałbyś wyłączyć swoje wtyczki i/lub zmienić motyw, aby sprawdzić
Admin
Tim G
Chciałbym zmniejszyć odstęp między zwykłymi liniami akapitów — moim zdaniem domyślnie jest za dużo białego miejsca. Chciałbym również dodać pół linii na końcu akapitu, zamiast pełnej linii: Wordpress domyślnie wydaje się po prostu robić odpowiednik podwójnego powrotu karetki, co jest raczej dwudziestowieczne i nie naśladuje tego, co potrafi Word. Jakieś pomysły?
Wsparcie WPBeginner
You would want to reach out to the support for your specific theme and they should be able to tell you what CSS needs to be added to reduce your line spacing
Admin
na razie ahmad
Dziękuję bardzo
bardzo pomocne
Wsparcie WPBeginner
Glad our guide could be helpful
Admin
Sumeet
dzięki, tego właśnie szukałem, pomogło...
Wsparcie WPBeginner
Glad our article helped
Admin
Jen
Niech cię Bóg błogosławi! Jestem tak wdzięczny za opublikowanie tego z CSS! Kto by pomyślał, że to wszystko, czego potrzebowałem, aby zmienić odstępy! Szukałem czegoś takiego od dawna! Dziękuję bardzo!
Wsparcie WPBeginner
Glad our article could help you
Admin
Kathy
Używam metody „shift” enter, ale nie pozwala ona na różne rozmiary czcionek, gdy to robię. Czy jest jakieś obejście?
Wsparcie WPBeginner
Cześć Kathy,
Zapoznaj się z naszym przewodnikiem na temat zmiany rozmiaru czcionki w WordPress.
Admin
Lora Staples
ŚWIETNY film. Podobała mi się treść, tempo i ton mówcy. DZIĘKI!
Kunal Khandelwal
Thank you so much for this suggestion. Didn’t know it was so easy