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.
phil rooksby
Nie mam dodatkowego CSS. Próbowałem na wiele sposobów zmienić odstępy między akapitami, ale nic nie działa, wygląda okropnie. Pomocy!!!
Norm
Dziękuję za pomoc. Szukałem wszędzie i chciałem to zrobić za pomocą wtyczki. Ułatwiłeś mi to. Jeszcze raz bardzo dziękuję.
Maria
Witaj! Chcę mieć proste odstępy między akapitami, a nawet po naciśnięciu Enter (dla podwójnej spacji), gdy podglądam szkic, nic się nie zmieniło (nadal jest to jeden akapit). Czy ktoś mógłby pomóc?
Rashmi
Cześć
Chciałbym zmodyfikować wysokość linii i odstępy. Jednakże nie ma ikony 'edytora' (Wygląd » Edytor) z pliku CSS motywu.
Co mogę więc zrobić?
Dziękuję za odpowiedź!
Hannah
Wow. Didn’t know it was so easy. Thank you so much! This double space was driving me crazy!
Christine
Dziękuję! O wiele łatwiej!
Donna
Dziękuję, dziękuję, dziękuję!
Byłem w innym edytorze HTML i nie mogłem zrozumieć, jak uzyskać pojedyncze odstępy.
You saved the day!
Gerard
Genialne i wieczny ratunek.
Miałem problemy z odstępami na jednej ze stron moich klientów i absolutnie niesamowite, że miałeś dokładną odpowiedź prawie na wyciągnięcie ręki. Teraz staję się stałym subskrybentem
Elandre
Dzięki za wszystkie wskazówki dotyczące WordPress. Ta strona bardzo mi pomogła z większością problemów, z którymi się borykałem
LR
Używam motywu Pilcrow i nie mam pojęcia, jak uzyskać podwójne odstępy między akapitami. Czasami pojawiają się w moich postach, a czasami nie. Kiedy patrzę w pliku HTML, nie widzę żadnych postów p ani padding. Widzę tylko końcowy efekt tego, jak będzie wyglądał post, i wtedy wiem, że podwójne odstępy nie zadziałały. Czy mogę jeszcze wrócić i edytować oraz naprawić? Na koniec, tam gdzie mówisz, aby przejść z menu "Wygląd" do "Edytor", nie mam tych opcji.
Pod "Wyglądem" mam następujące opcje: motywy, dostosuj, widżety, menu, nagłówek, tło, AMP, Opcje motywu, Mobilne.
Proszę o pomoc.
Wsparcie WPBeginner
Cześć LR,
CSS można dodać, odwiedzając Wygląd->Dostosuj, a następnie klikając zakładkę Dodatkowy CSS w narzędziu do dostosowywania. Zobacz nasz przewodnik po jak dodać niestandardowy CSS w WordPress.
Jeśli uważasz, że problem leży po stronie motywu, tymczasowo przełącz się na domyślny motyw WordPress. Jeśli problem zniknie, możesz poprosić dewelopera motywu o pomoc.
Admin
Derek Cummings
Mój motyw jest zepsuty, tzn. domyślnie nie ma podwójnego odstępu. Motyw jest zablokowany w trybie shift+enter innymi słowy. W odniesieniu do poniższego kodu:
.post p { line-height: 1.5em; padding-bottom: 15px; }
Czy 15px to normalny domyślny podwójny odstęp? Ile pikseli powinno być domyślnie? Czy ma znaczenie, gdzie umieszczę ten kod? Dzięki!
Femi
Dziękuję za wskazówkę dotyczącą Shift + Enter. Nie wiedziałem tego przez lata. Twoja strona zawsze ratuje mnie, gdy utknę.
Lyn
Witaj: Jak uzyskać niestandardowe odstępy między wierszami (powiedzmy 1,5em) dla jednego wystąpienia na jednej stronie, zamiast zmieniać cały CSS motywu? Widzę, że dwie inne osoby zadały to samo pytanie bez odpowiedzi, przynajmniej nie takiej, którą znalazłem. Dzięki!
Femi
Ustawiam marginesy p na zero. W Twoim CSS wyglądałoby to mniej więcej tak: p {marginesy: 0; }
Los Hundlos
Shift+Enter, aby uniknąć dużej przerwy między wierszami w edytorze wysywig tinye mce w WordPress. Działa !!!! Super!
Cat
A może po prostu dodać trochę tekstu i zmienić kolor tekstu na biały (jeśli tło jest białe)? Powinno to ułatwić tworzenie i dostosowywanie odstępów między wierszami (chyba że tło jest obrazem czegoś, czego nie można dopasować do koloru czcionki).
Tim
Wielkie dzięki! Ratunek!
Michael Rich
Witajcie, pracownicy WPBeginner,
Mam inne pytanie. Używam Visual Composer i dodałem wiele separatorów z tekstowymi podziałami między nagłówkami sekcji na mojej stronie głównej. Chciałbym, aby te tekstowe nagłówki były również linkiem do tej sekcji.
Jednak za każdym razem, gdy dodaję link, tracę tekst identyfikujący sekcję, który miałem w separatorze, i jest on magicznie zastępowany domyślnym tekstem "TITLE".
Aby spróbować uczynić to linkiem, dodaję kod linkowania w tym nawiasie:
[vc_text_separator title=\"1950s CARS\"]
Drapieżnie drapię się po głowie, że myślę, że jestem łysy. Każda pomoc spotka się z dozgonną wdzięcznością!!!
Dziękuję, Mike
Anthony Cooper
Używam motywu WordPress „Divi” i odkryłem, że jeśli naciśniesz Enter (lub Shift + Enter) dwukrotnie, aby utworzyć większą przestrzeń, zostanie to zignorowane. Aby obejść ten problem, naciśnij Enter raz, wpisz znak w wierszu (nie ma znaczenia jaki), zaznacz go i zmień kolor czcionki znaku na biały, a następnie naciśnij Enter ponownie; spowoduje to uzyskanie pożądanego odstępu między wierszami bez konieczności edycji motywu. To samo dotyczy dodatkowych spacji w wierszu; wprowadź tyle znaków, ile chcesz, zaznacz je i zmień ich kolor czcionki na biały, a następnie kontynuuj w pożądanym kolorze czcionki.
Julie
Świetna wskazówka! Bardzo dziękuję za to, uratowałeś mnie przed wieloma bólami głowy i kłopotami, Anthony!
Robin Brinkler
Pamiętaj, że niektóre wyszukiwarki mogą traktować „ukryty” tekst w ten sposób jako spam.
Ellen
To było naprawdę pomocne, dzięki!
Christy
THANK YOU!! I Love you guys! So glad I found this site! I’ve almost literally been banging my head against the wall. If I knew how to insert emojis, this post would be covered with hearts and smiley faces.
Christy
P.S. ~ HA! Nie wiedziałem, że mój mały dwukropek i nawiasy zamienią się w uśmiechniętą buźkę. LOL
Linda Paul
Och tak! Właśnie pomogłeś mi rozwiązać problem (wymuszony pojedynczy odstęp między akapitami), który dręczył mnie od lat!
Wsparcie WPBeginner
Glad you found it helpful
Admin
David M. Ebersole Sr.
Jestem subskrybentem WP Beginner.
Miałem pytanie dotyczące wprowadzania danych technicznych dla mojego produktu na mojej stronie. Odstępy w tabelach wydawały się zbyt duże na stronie. Przeszukałem wsparcie WordPress i wszystko, co zobaczyłem, to zwięzłe odpowiedzi na pytanie o pojedyncze odstępy między wierszami.
Jesteś pierwszą osobą, która odpowiedziała na pytanie i oczywiście była ona poprawna. Dziękuję.
Z poważaniem,
Dave
Wsparcie WPBeginner
Glad you found it helpful
Admin
Mark
A co z Androidem. Najnowsza aktualizacja wymusiła podwójne odstępy (nowy akapit). Niezbyt dobre dla pisarzy poezji. Czy jest jakiś sposób, aby przywrócić pojedyncze odstępy?
Cheryl
Używam motywu Omega, a Ctrl+Enter nie działa. Czy mogę zrobić coś innego? Nie mogę znaleźć post.p w pliku CSS.
Becky
Bardzo pomocne, dziękuję!
Adnan Khan
Dzięki, ta wskazówka jest bardzo pomocna dla nowych użytkowników WordPressa
Tina Gleisner
Dziękuję za „przesunięcie” i naciśnięcie Enter dla pojedynczego odstępu, ponieważ od lat chciałem to rozgryźć... i nigdy nie udało mi się znaleźć rozwiązania.
Ian
Cześć,
To zadziałało u mnie, ale CSS nic nie robi na mojej stronie…
Will
U mnie stało się to samo. Czy jest jakiś zaktualizowany kod do wstawienia?
A. Lougheed
Szukam wszędzie odpowiedzi… kiedy dodaję w edytorze tekstu, jest on usuwany w edytorze wizualnym. Doprowadza mnie to do szału. Czy wpbeginner ma jakieś zalecenia?
Czy powinienem dodać wtyczkę, aby to zatrzymać?
Próbowałem użyć wtyczki lata temu, ale musiałem wrócić i przekształcić każdy post.
Każdy link z poradnikiem lub radą jest bardzo doceniany!
Wsparcie WPBeginner
Actually it is also removed from your comment.
Proszę, zapoznaj się z naszym przewodnikiem na temat Jak dodawać znaki specjalne w postach WordPress.
Admin
Jessica
Jaki jest kod do dostosowania wysokości linii dla jednego posta?
Bharadwaj
Dziękuję, pomocne
Samadarshi
Thank you for such wonderful articles
I was completely lost when I started wordpress but now I have a pretty basic idea
Thank u
Neal Umphred
Dzięki! Pomogło mi to dopracować moje posty – z wyjątkiem pierwszego akapitu w każdym poście. Z jakiegoś powodu linie wydają się być podwójnie odstępne. Czy jest jakiś fragment kodu, który mógłbym dodać do Edytuj CSS, aby je zagęścić?
Neal Umphred
Dzięki! Dodanie fragmentu kodu (.post p{line-height: 1.5em;}) do mojego Edytora CSS sprawiło, że tekst jest znacznie łatwiejszy do odczytania. Teraz mam problem: pierwszy akapit w każdym poście WordPress ma znacznie większe odstępy między wierszami niż pozostałe akapity – i nie jest to objęte tym kodem line-height. Czy jest jakiś inny fragment kodu, który mógłbym dodać do Edytora CSS, aby zmniejszyć odstępy w tych pierwszych wierszach?
tiffany
Bardzo dziękuję. Wasza strona jest niezwykła. Bardzo mi pomogła. Zasubskrybowano!! Proszę kontynuujcie wspaniałą pracę!!
Wsparcie WPBeginner
Dziękujemy za miłe słowa. Cieszymy się, że mogliśmy pomóc.
Admin
Joe Simmons
Dziękuję! Ja też nie wiedziałem o "shift+enter".
Debby
Shift + Enter. Kto by pomyślał, że to takie proste! Dziękuję, dziękuję, dziękuję!
Gamo Nana
dzięki za pojedyncze odstępy między wierszami z SHIFT + Enter
Bob M.
Chciałbym również podziękować za tę mądrość (Shift+Enter)!
JE
Dzięki za tutorial. Chociaż, jak mogę dostosować odstępy między wierszami pojedynczego akapitu? Mam tytuł składający się z 3 słów, wyśrodkowany i ułożony w 3 linie. Wszystkie linie mają różne rozmiary czcionek, więc odstępy między wierszami są niespójne. Szukałem sposobu na łatwe dostosowanie za pomocą narzędzia do edycji tekstu lub wtyczki.
Jakieś pomysły?
Syed Balkhi
Użyliśmy po prostu pola wyszukiwania w przeglądarce, które można znaleźć naciskając Ctrl + F
Mx
Znajdując .post p, użyłeś pola wyszukiwania. Czy powiesz mi, jak znaleźć to pole wyszukiwania? Dzięki4
Jun Han
To jest bardzo pomocne.
Dziękuję.
http://www.digitalgrog.com.au/
to był mój irytujący problem aż do teraz..dzięki, teraz mogę odpowiednio rozmieścić..btw zrobiłem listę hostów, sprawdźcie
http://www.digitalgrog.com.au/australian/comparison-on-blog-web-hosting-for-australians/
Karen Surfy Mum
Niesamowite!! Też od wieków chciałem się dowiedzieć, jak to zrobić!!! Tak proste, gdy już wiesz… dzięki xxx
Widdershins
Oiiiiiiiiiiii!!! I’ve been trying to find out how to do that for yonks!!!!
Thankyouthankyouthankyou
fastow2012
„Jeśli nie znajdziesz znacznika .post p, po prostu go utwórz.”
Gdzie? Czy mam go po prostu skopiować/wkleić gdziekolwiek w pliku CSS?
Zespół WPBeginner
najlepiej na dole pliku css.
Mx
Przepraszam, ale nadal nie rozumiem, gdzie to umieścić. Czy można to wyjaśnić bardziej szczegółowo? Dzięki
James
Zawsze się zastanawiałem, jak to zrobić. Dziękuję za szkolenie.
Valerie
Nie jestem nawet prawdziwym „początkującym”, ale są luki w mojej wiedzy i właśnie rozwiązałeś jedną z najbardziej frustrujących rzeczy w WP dla tego pisarza i użytkownika Word… Dziękuję za to i za wszystkie Twoje fantastyczne informacje… Nadal uczę się wspaniałych rzeczy z Twoich postów i Twojej strony. Dzięki i pozdrowienia!
kelly
almost four years of blogging and finally!
so awesome, thanks!!