Przez wiele lat korzystając z WordPressa używałem praktycznie tylko edytora tekstowego, głównie dlatego, że lubiłem mieć całkowitą kontrolę nad formatowaniem tekstu. Jednak z czasem edytor wizualny TinyMCE stawał się coraz lepszy, a ja stawałem się coraz bardziej leniwy – i w końcu porzuciłem ręczne wstukiwanie znaczników HTML i postawiłem na komfort pracy.

Bardzo szybko zauważyłem, że z nieznanego mi powodu w moich tekstach pojawiają się same z siebie znaki twardej (niełamliwej) spacji, widoczne w kodzie strony jako  , powodujące niepotrzebne przenoszenie słów do kolejnych wierszy. Znaki te pojawiają się w różnych miejscach i trudno w ich ułożeniu dostrzec jakiś schemat. Na szczęście problem jest łatwy do rozwiązania, aczkolwiek jego przyczyna jest co najmniej dziwna.

Co i dlaczego wstawia twarde spacje do treści wpisów?

Problem z wstawianymi w losowych miejscach twardymi spacjami nie jest nowy – po raz pierwszy został zgłoszony ponad 3 lata temu i od tamtej pory nie został rozwiązany. Nie jest to ani błąd samego WordPressa, ani (wbrew pozorom) edytora wizualnego TinyMCE. Tak naprawdę to nie jest w ogóle błąd – to funkcja przeglądarki. Jak wyjaśniono w tym komentarzu, ponieważ w HTMLu wiele spacji jest zawsze wyświetlanych jako jedna spacja, przeglądarki próbują zachować widoczność wielu spacji zamieniając je na twarde (niełamliwe) spacje. Wygląda jednak na to, że niektóre przeglądarki (w szczególności Chrome) wstawiają te znaki w wielu miejscach, często wyglądających na losowe.

Problem ten jest dość trudno wychwycić, ponieważ znak niełamliwej spacji nie jest widoczny ani w edytorze wizualnym, ani w tekstowym – jest bowiem wstawiany jako biały znak o kodzie U+00A0, a dopiero w bazie danych i na stronie pojawia się jako  . Gdy jednak już go zauważymy, to da się go usunąć w edytorze tekstowym – po prostu wystarczy skasować znak wyglądający na spację i zastąpić go spacją. Brzmi to nieco dziwacznie, więc nie będziemy tak robić i zamiast tego poszukamy prawdziwego rozwiązania problemu.

Rozwiązanie problemu

Znalazłem kilka prób rozwiązań tego problemu, przy czym większość z nich albo już nie działa, albo nie działała nigdy. Skupię się więc tylko na tych, które na pewno się sprawdzą.

Pierwsza metoda to usuwanie zbędnych twardych spacji z treści wpisów przed ich wysłaniem do przeglądarki. Jest to sposób skuteczny i prosty – wystarczy do pliku functions.php motywu lub do pliku wtyczki dodać następujący kod:

function wpzen_remove_nbsps($string) {
	return str_replace("\xc2\xa0", " ", $string);
}
add_filter('the_excerpt', 'wpzen_remove_nbsps', 99);
add_filter('the_content', 'wpzen_remove_nbsps', 99);

Wadą tego rozwiązania jest to, że usuwa ono wszystkie twarde spacje, co nie zawsze jest pożądanym przez nas działaniem. Poza tym tak naprawdę usuwane są tylko objawy, a nie ich przyczyna – tekst w bazie danych wciąż będzie zawierał niepotrzebne twarde spacje.

Drugą (moim zdaniem lepszą) metodą jest usuwanie zbędnych twardych spacji w momencie zapisywania treści wpisu do bazy danych. Dzięki temu niezależnie od tego, ile zbędnych znaków zostanie dodanych na etapie edycji, do bazy danych (a co za tym idzie również na stronę) trafi wyczyszczony z nich tekst. Aby to zrobić należy do pliku functions.php motywu lub do pliku wtyczki dodać następujący kod:

function wpzen_remove_nbsps($content) {
	$content = str_replace(array("\xc2\xa0", " "), " ", $content);
	return $content;
}
add_filter('content_save_pre', 'wpzen_remove_nbsps');

Wadą tego rozwiązania jest to, że aby pozbyć się zbędnych znaków z danego wpisu musimy zapisać go w panelu administracyjnym (nie trzeba dokonywać w nim żadnych zmian – wystarczy kliknąć przycisk Zaktualizuj).