Jak unikać „sierot” w łamaniu tekstu na WordPressie – praktyczne podejście

Przy projektowaniu stron internetowych na WordPressie, często spotykamy się z wyzwaniem przenoszenia krótkich słów, pojedynczych liter lub symboli (takich jak cudzysłowy) na nową linię. To może zakłócić estetykę i czytelność tekstu, tworząc niepożądane „sieroty”. W tym wpisie pokażę, jak zmodyfikować funkcję PHP, aby zapobiegać temu problemowi, co zdecydowanie poprawi wygląd Twoich postów i stron.

Zrozumienie i rozwiązanie problemu "sierot"

Wtyczka WP Code jest jednym z najłatwiejszych i najbezpieczniejszych sposobów na dodawanie niestandardowego kodu do Twojej strony WordPress, bez konieczności bezpośredniej ingerencji w pliki motywu. Dzięki intuicyjnemu interfejsowi użytkownika oraz izolacji kodu od reszty systemu, minimalizuje ryzyko błędów, które mogłyby zakłócić działanie witryny.

Aby uniknąć takiego stanu rzeczy, możemy zaimplementować prosty snippet php, który pomoże nam kontrolować, jak tekst jest łamany. 

Poniżej zamieszczam fragment kodu (snippet) PHP, który możemy dodać do naszego projektu WordPress. Dwa najprostsze moim zdaniem sposoby na dodawanie snippetów zawarłem w oddzielnym artykule.

function ezpage_prevent_orphans($content) {
    return preg_replace_callback('/>[\s\S]*?</', function($matches) {
        return preg_replace(
            '/(\s)([a-zA-ZąćęłńóśżźĄĆĘŁŃÓŚŻŹ0-9,.!?()\'"]{1,2})(\s)/u',
            '$1$2&nbsp;',
            $matches[0]
        );
    }, $content);
}

add_filter('the_content', 'ezpage_prevent_orphans');

Jak działa funkcja?

Funkcja ezpage_prevent_orphans wykorzystuje wyrażenia regularne do wyszukiwania miejsc w tekście, które mogą tworzyć nasze „sieroty”. Następnie, zastępuje standardową spację pomiędzy ostatnimi słowami akapitu a znakiem non-breaking space (&nbsp;). Po kolei, dla zainteresowanych:

  1. Zastosowanie wyrażeń regularnych: Funkcja zaczyna od zastosowania funkcji preg_replace_callback, która przeszukuje całą treść strony lub posta w poszukiwaniu fragmentów tekstu otoczonych tagami HTML (znajdujących się między ><). Jest to istotne, aby nasze modyfikacje dotyczyły tylko widocznego tekstu, a nie kodu HTML.
  2. Wyznaczanie miejsc do modyfikacji: Dla każdego znalezionego fragmentu, funkcja uruchamia inną funkcję preg_replace, której celem jest identyfikacja miejsc, gdzie pojedyncze słowa, krótkie frazy lub symbole mogą zostać osamotnione na końcu linii. To dotyczy szczególnie krótkich wyrazów (jedno- lub dwuliterowych), cyfr, znaków interpunkcyjnych oraz cudzysłowów.
  3. Zamiana spacji na non-breaking space: Kiedy potencjalna „sierota” zostaje zidentyfikowana, funkcja zastępuje standardową spację przed nią na non-breaking space (&nbsp;). Non-breaking space to specjalny znak HTML, który zapobiega przenoszeniu elementu poprzedzającego go na nową linię. Dzięki temu, ostatnie słowa w linii nie zostaną oddzielone od reszty tekstu.
  4. Automatyczne zastosowanie na całej stronie: Po przetworzeniu fragmentów tekstu, zmodyfikowana treść jest zwracana i wyświetlana na stronie. Funkcja jest wywoływana automatycznie dla każdego tekstu przechodzącego przez filtr the_content w WordPressie, co oznacza, że każdy post, strona czy inny typ treści będą automatycznie korzystać z tej modyfikacji.
Scroll to Top