Często pojawia się potrzeba wyświetlenia edytora WYSIWYG zamiast standardowego edytora komentarzy. Na szczęście jest to bardzo łatwe do osiągnięcia – wystarczy drobna modyfikacja pliku functions.php naszego motywu.
Musimy po prostu dodać w nim następujący fragment kodu:
function dziudek_comment_form( $fields ) {
ob_start();
wp_editor( '', 'comment', array( 'teeny' => true ));
$fields['comment_field'] = ob_get_clean();
return $fields;
}
add_filter( 'comment_form_defaults', 'dziudek_comment_form' );Jak widać korzystamy z filtra comment_form_defaults oraz możliwości buforowania wyjścia w PHP. Dzięki temu jesteśmy w stanie zastąpić standardowe pole na treść komentarza edytorem TinyMCE.
Kolejna ważna rzecz to wykorzystanie w TinyMCE trybu teeny. Tryb ten umożliwia wyświetlenie uproszczonej wersji edytora.
Oczywiście zaprezentowany kod powyżej zawiera bardzo podstawową konfigurację, która spowoduje wyświetlenie mniej więcej takiego edytora jak widoczny poniżej:
Jak widać będziemy potrzebowali kilku poprawek aby edytor wyglądał tak jak byśmy tego chcieli. Zacznijmy od rozmiaru edytora – domyślnie wyświetla on obszar edycji tekstu na 10 linijek, jak widać na powyższym screenshocie jest to zdecydowanie za dużo. Na szczęście wystarczy zmienić wywołanie funkcji wp_editor na następujące:
wp_editor( '', 'comment', array( 'teeny' => true, 'textarea_rows' => 5 ));
Aby ograniczyć ilość linii tekstu do 5 – dzięki opcji textarea_rows. Dzięki tym zmianom edytor wygląda lepiej:
Kolejna kwestia to możliwość wstawiania obrazków – najczęściej nie chcemy aby użytkownicy zajmowali nam miejsce na serwerze dodatkowymi zasobami, zatem warto wyłączyć przycisk dodający media – w tym celu korzystamy z opcji media_buttons:
wp_editor( '', 'comment', array( 'teeny' => true, 'textarea_rows' => 5, 'media_buttons' => false ));
Nasz edytor wygląda już całkiem zgrabnie pozbawiony tego elementu:
Pozostaje jeszcze mała niedoróbka – przy widocznej szerokości obszaru na komentarze, niestety jedna z ikon się nie mieści – zatem trzeba jakiś mało potrzebny przycisk wyrzucić – osobiście postawiłbym na przycisk dodający przekreślenie do tekstu – w tym celu wykorzystamy filter mce_teeny_buttons i usuniemy 5 przycisk z listy:
add_filter( 'teeny_mce_buttons', 'dziudek_comment_form_no_strikethrough');
function dziudek_comment_form_no_strikethrough($buttons) {
unset($buttons[4]);
return $buttons;
}Dzięki powyższemu zabiegowi nasz edytor prezentuje się już bardzo zgrabnie i zajmuje minimalną ilość miejsca:
Pozostaje jeszcze jeden dodatek – tryb fullscreen, który domyślnie prezentuje się jak poniżej:
Możemy też skorzystać z trybu Distraction Free Writing po dodaniu kolejnej opcji – dfw:
wp_editor( '', 'comment', array( 'teeny' => true, 'textarea_rows' => 5, 'media_buttons' => false, 'dfw' => true ));
Dzięki któremu tryb pełnoekranowy jest moim zdaniem trochę lepszy z wyglądu:
Przede wszystkim posiada on widoczny przycisk powrotu do normalnego trybu edycji – w przeciwieństwie do standardowego trybu pełnoekranowego.
Na koniec gdybyśmy chcieli jeszcze zmniejszyć rozmiar edytora, możemy usunąć zakładki od wyboru pomiędzy trybem WYSIWYG i tekstowym – służy do tego opcja quicktags:
wp_editor( '', 'comment', array( 'teeny' => true, 'textarea_rows' => 5, 'media_buttons' => false, 'dfw' => true, 'quicktags' => false ));
Dzięki temu otrzymujemy najbardziej okrojoną wersję edytora WYSIWYG w komentarzach:
