Skip to content

Wszystko o WordPressie, tworzeniu stron — i nie tylko

🛠 Jak utworzyć shortcode `[br]` do łamania wiersza w wordpress

🛠 Jak utworzyć shortcode `[br]` do łamania wiersza w wordpress

Formatuje Pan post w WordPress. Między dwoma wierszami potrzebny jest niewielki odstęp, nie nowy akapit, a właśnie lekki przełom. Dodaje Pan dwa <br> jeden po drugim, przełącza się na edytor wizualny i z powrotem, jeden znika. Wstawia Pan pusty wiersz, WordPress zamienia go na nowy paragraf z pełnym odstępem. Nie o to chodziło.

Problem nie leży w szablonie ani w ustawieniach. Za kulisami działa wpautop, wbudowany filtr WordPressa, który automatycznie formatuje tekst i usuwa „zbędne" znaczniki HTML. Logika jest przydatna: zwalnia z ręcznego opakowywania akapitów w <p>. Ale kiedy formatuje Pan wiersze, podpisy pod serią zdjęć czy instrukcję krok po kroku z mikropauzami, wpautop przeszkadza.

Poniżej trzy sposoby kontrolowania przełomów wierszy w dowolnym edytorze WordPressa. Od szybkiego wbudowanego po całkowicie ręczny przez CSS. Każdy przetestowany na WordPress 6.4+, bez wtyczek.

💡 Szybki przegląd:

  • Proszę zarejestrować shortcode [br] w functions.php, uniwersalne narzędzie do dowolnej liczby przełomów, które nie rusza edytora
  • Proszę używać Shift+Enter podczas wpisywania tekstu, wbudowana metoda dla pojedynczego przełomu, bez ani jednej linii kodu
  • Proszę zdefiniować dokładny odstęp przez inline CSS, gdy potrzebna jest konkretna odległość w pikselach dla akcentowego rozdzielenia bloków

Wideo: jak tworzyć shortcode'y WordPress od podstaw

Proszę obejrzeć pełny proces, od rejestracji w functions.php do wyświetlenia na frontendzie. Ta sama zasada ma zastosowanie do wszelkich własnoręcznie robionych shortcode'ów, nie tylko [br].

Sposób 1: shortcode [br], pełna kontrola nad przełomami

Shortcode rozwiązuje problem raz na zawsze. Raz dodany kod i wstawia Pan [br] gdziekolwiek: w tekście posta, w widżecie, nawet w nagłówku przez do_shortcode. Edytor nie rusza zawartości nawiasów kwadratowych, filtr wpautop ją ignoruje, przełomy przetrwają po dowolnej liczbie przełączeń między zakładkami.

Proszę dodać następujący kod do functions.php szablonu potomnego. Jeśli szablon potomny jeszcze nie istnieje, proszę najpierw utworzyć go według naszego poradnika. Jeśli nie chce Pan ruszać plików szablonu, proszę zainstalować wtyczkę Code Snippets i wstawić kod tam, rezultat jest ten sam.

1/**
2 * Shortcode for manual line breaks in the visual editor.
3 * Usage: [br] for single break, [br][br] for double.
4 */
5function sdstudio_line_break_shortcode() {
6 return '<br />';
7}
8add_shortcode( 'br', 'sdstudio_line_break_shortcode' );

Funkcja sdstudio_line_break_shortcode zwraca znacznik HTML <br />, a add_shortcode rejestruje shortcode [br], WordPress zastępuje go tym znacznikiem podczas wyświetlania strony. Prefiks sdstudio_ w nazwie funkcji chroni przed konfliktami: jeśli inna wtyczka zarejestruje funkcję o tej samej nazwie, strona nie padnie.

Po dodaniu kodu w edytorze proszę pisać tak:

1Это первый абзац.
2[br]
3Это вторая строка сразу под первой.
4[br][br]
5А это — с двойным отступом.

Rezultat: pierwszy i drugi tekst są rozdzielone jednym przełomem, trzeci oddzielony podwójnym. WordPress przetwarza shortcode'y po filtrze wpautop, dlatego autoformatowanie ich nie dotyka.

Nazwa br została wybrana dla zwięzłości, ale technicznie jest to ryzyko: inna wtyczka lub szablon mogą zarejestrować swój [br]. W praktyce konflikty prawie się nie zdarzają. Jeśli zauważy Pan dziwne zachowanie, proszę zmienić nazwę, na przykład na [sd_br].

Przed edycją functions.php proszę zrobić kopię zapasową pliku przez FTP lub menedżer plików hostingu. Jeśli po zmianach strona przestała się otwierać, proszę wgrać zapisany oryginał z powrotem, wszystko zacznie działać.

Sposób 2: Shift+Enter, wbudowana metoda bez kodu

Jeśli potrzebny jest pojedynczy przełom i nie chce się Pan bawić kodem, proszę przytrzymać Shift i nacisnąć Enter w edytorze wizualnym.

Kursor przejdzie do następnego wiersza wewnątrz tego samego akapitu. W HTML to ten sam <br>, tylko WordPress wstawia go automatycznie. Zwykły Enter tworzy nowy akapit (<p>), a Shift+Enter, właśnie przełom wiersza bez odstępu.

Minus metody: działa tylko dla jednego przełomu. Dwa Shift+Enter pod rząd WordPress sklei w jeden <br>, a trzy, zamieni na nowy akapit. Jeśli między wierszami potrzebny jest zauważalny odstęp pionowy, proszę przejść do sposobu 3.

Sposób 3: inline CSS dla dokładnego odstępu w pikselach

Kiedy ani shortcode, ani Shift+Enter nie dają potrzebnej odległości, proszę zdefiniować odstęp bezpośrednio przez atrybut style.

Proszę przełączyć się na zakładkę „Tekst" w prawym górnym rogu klasycznego edytora:

Karta Tekst w klasycznym edytorze WordPress

Proszę znaleźć akapit, po którym potrzebny jest odstęp. Proszę opakować go w znaczniki <p> i dodać margin-bottom:

1<p style="margin-bottom: 100px;">
2Это абзац, после которого будет отступ в 100 пикселей.
3</p>
4<p>А это следующий абзац — с заметным промежутком.</p>

Wartość 100px proszę zastąpić swoją. Im większa liczba, tym szerszy odstęp. Dla odstępu od góry proszę użyć margin-top. Można łączyć: <p style="margin-top: 50px; margin-bottom: 80px;">.

Sposób jest wygodny dla pojedynczych przypadków, akcentowego rozdzielenia bloków znaczeniowych wewnątrz konkretnego posta. Ale wstawianie takiego kodu do każdego akapitu jest niewygodne. Do systematycznego stosowania proszę wrócić do shortcode'u ze sposobu 1.

⁉️🤔 Często zadawane pytania

Dlaczego WordPress usuwa moje <br> podczas przełączania między zakładkami edytora?

Edytor wizualny TinyMCE podczas przełączania na zakładkę „Wizualnie" ponownie przetwarza HTML i usuwa znaczniki, które uważa za zbędne. Shortcode [br] tego czyszczenia nie dotyczy: jest rozszyfrowywany na <br> dopiero podczas wyświetlania na frontendzie, a w edytorze pozostaje zwykłym tekstem w nawiasach kwadratowych. Dlatego shortcode jest pewniejszy niż bezpośredni HTML, Pana przełomy przetrwają dowolną liczbę przełączeń między zakładkami.

Czy można używać do odstępów pionowych?

Technicznie tak, ale to zła praktyka. Kilka pod rząd wygląda niechlujnie, dezorientuje czytniki ekranowe i rozjeżdża się na ekranach mobilnych. Dla pustej przestrzeni proszę używać odstępów CSS (sposób 3), a proszę zostawić dla łączenia słów, których nie można rozdzielać przełomem, na przykład „WordPress 6.4". Do odstępów pionowych twarda spacja nie jest przeznaczona.

Czy [br] działa w edytorze Gutenberg?

Tak, shortcode [br] działa w każdym edytorze WordPressa: i w klasycznym, i w blokowym Gutenbergu. W Gutenbergu proszę wstawić blok „Shortcode" i napisać [br]. Blok znajduje się w kategorii „Widgety", jeśli go Pan nie widzi, proszę kliknąć „Przeglądaj wszystkie" i znaleźć przez wyszukiwanie. Proszę wziąć pod uwagę: w Gutenbergu Shift+Enter też działa, więc dla prostych pojedynczych przełomów shortcode może nie być potrzebny.

Co robić, jeśli shortcode wyświetla się jako tekst, a nie jako przełom?

Dwie typowe przyczyny. Pierwsza: kod został wstawiony nie do tego pliku. Proszę sprawdzić, czy funkcja została dodana do functions.php aktywnego szablonu lub szablonu potomnego, a nie do wp-config.php czy pliku wtyczki. Druga: shortcode znajduje się wewnątrz bloku kodu lub komentarza HTML, WordPress nie przetwarza shortcode'ów wewnątrz <pre>, <code> i <!-- -->. Szybkie sprawdzenie: proszę dodać [br] na sam początek posta na frontendzie i zobaczyć rezultat.

Czy trzeba wyłączać wpautop do działania shortcode'u?

Nie, wyłączanie wpautop nie jest potrzebne, a nawet szkodliwe: straci Pan automatyczne formatowanie akapitów na całej stronie. Shortcode [br] działa niezależnie od wpautop dzięki kolejności przetwarzania: WordPress stosuje shortcode'y po filtrze autoformatowania. Zwykłe akapity nadal będą formatowane automatycznie, a przełomy wierszy kontroluje Pan ręcznie, dokładnie tam, gdzie trzeba. Polecenie remove_filter('the_content', 'wpautop'), to radykalny krok, po którym trzeba będzie ręcznie rozmieszczać <p> po całej stronie. Radzimy tego unikać.

Który sposób przełomu wierszy jest dla Pana odpowiedni

Wybór zależy od zadania. Jednego uniwersalnego rozwiązania nie ma, ale jest jasna logika:

Jeśli potrzebuje Pan szybko i bez kodu, Shift+Enter. Pojedynczy przełom wystarcza w większości przypadków: oddzielić podpis pod zdjęciem, rozbić długi nagłówek, zrobić mikropauzę wewnątrz akapitu.

Jeśli przełomów jest dużo i się powtarzają, **shortcode **[br]. Skonfigurował Pan raz i zapomniał: pisze Pan [br] kiedy trzeba, choćby dziesięć razy pod rząd. Kod w functions.php nie zajmuje nawet dziesięciu linii.

Jeśli potrzebny jest dokładny odstęp w pikselach dla akcentowego rozdzielenia, inline CSS. Para margin-bottom: 80px da dokładnie tyle powietrza, ile wymaga projekt konkretnej strony. Nie warto nadużywać: do regularnego stosowania proszę wrócić do shortcode'u.

Te trzy sposoby pokrywają wszystkie scenariusze z przełomami wierszy w WordPressie. Proszę wybierać pod zadanie i nie pozwalać edytorowi decydować za Pana, gdzie ma być odstęp, a gdzie nie.