publikacja: 14 listopada 2011, autor: Ola Łączek, komentarzy 45 https://wpninja.pl/artykuly/zmien-edytor-wizualny-wordpressa-w-prawdziwy-wysiwyg/

Zmień edytor wizualny WordPressa w prawdziwy WYSIWYG

Tworząc wpis w WordPressie mamy do dyspozycji edytor w dwóch trybach - wizualnym i HTML. Teoretycznie, korzystając z tego pierwszego powinniśmy widzieć treść tak sformatowaną jak w opublikowanym wpisie. Niestety jest to rzadkość, nawet wśród motywów z kategorii „premium”. W artykule pokażę Ci, jak można to zrobić w łatwy i przyjemny sposób.

Edytor w trybie wizualnym / HTML a WYSIWYG

Pisząc „edytor wizualny / HTML” mam na myśli to okienko, w które wpisujemy treść główną wpisu lub strony. Wygląda ono następująco:

tryb wizualny:
edytor w trybie wizualnym
tryb HTML:
edytor w trybie HTML

Tryb WYSIWYG?

Tryb wizualny często określany jest jako WYSIWYG. Jest to angielski skrót, który można przełożyć jako „dostajesz to co widzisz”. Gdyby było tak naprawdę to widok w trybie wizualnym powinien w 100% pokrywać się z ostateczną, opublikowaną wersją. Najczęściej wygląda to tak, że tryb wizualny to jedno a ostateczna wersja to zupełnie inna bajka:

Wygląd wpisu po opublikowaniu

Na szczęście WordPress daje nam narzędzia aby z trybu wizualnego zrobić prawdziwy WYSIWYG tak jak to jest w przypadku domyślnych motywów TwentyTen czy TwentyEleven.

Tyle tytułem wstępu. Teraz zabierzmy się do pracy.

Krok 1: Dedykowany arkusz CSS

Wygląd strony zdefiniowany jest w arkuszu stylów, czyli w pliku style.css, który mieści się w katalogu głównym motywu. Plik ten, poza zapisami definiującymi wygląd wpisów i stron zawiera również wiele reguł niepotrzebnych z punku widzenia edytora wizualnego. Dlatego też potrzebujemy stworzyć odrębny arkusz stylów, który nazwiemy editor-style.css. Podobnie jak plik style.css, umieścimy go w katalogu głównym naszej skórki.

Samo stworzenie dedykowanego arkusza nie wystarczy. Musimy jeszcze „powiedzieć” WordPressowi, że powinien z niego korzystać. W tym celu edytuj plik functions.php w swoim motywie, i dopisz linijkę:

add_editor_style();

Funkcja add_editor_style pojawiła się dopiero w WordPress 3.0, więc zanim zabierzesz się do pracy, upewnij się że korzystasz z odpowiedniej wersji. Możesz również wymyślić własną nazwę dla pliku CSS edytora. W takim wypadku do pliku functions.php wstawiasz nieco zmodyfikowany kod:

add_editor_style('moj-styl.css');

Krok 2: Definiowanie reguł CSS

Na tym etapie Twój edytor wizualny korzysta już z własnego arkusza stylów. Teraz czas uzupełnić go odpowiednimi regułami. Nie będzie to trudne zadanie, ponieważ zaczerpniemy je z pliku style.css.

Pierwsza reguła, którą dodamy do pliku editor-style.css będzie definiować szerokość treści strony. Domyślnie edytor wizualny rozciąga treść na całą dostępną szerokość, podczas gdy w praktyce w większości szablonów, ilość przestrzeni przeznaczona na treść jest ściśle określona w pikselach. Potrzebujemy zatem ustalić, jaką szerokość ma element HTML, który jest kontenerem treści, a następnie wstawić poniższą linijkę na sam początek pliku editor-style.css (podmieniając 584 na właściwą wartość).

html .mceContentBody {
   max-width: 584px;
}

Jak już wspominałam, arkusz editor-style.css powinien zawierać tylko te reguły, które odnoszą się do treści wpisów i stron. W praktyce nasze zadanie polegać będzie na kopiowaniu określonych fragmentów z pliku style.css. Cały proces pokażę na przykładzie szablonu TwentyEleven. Poniżej znajduje się kilka linijek zaczerpniętych z pliku style.css.

.entry-content h1, .entry-content h2, .comment-content h1, .comment-content h2 {
   color: #000;
   font-weight: bold;
   margin: 0 0 .8125em;
}

.entry-content h3, .comment-content h3 {
   font-size: 10px;
   letter-spacing: 0.1em;
   line-height: 2.6em;
   text-transform: uppercase;
}

W tym wypadku musimy skopiować reguły dla nagłówków H1, H2 i H3 usuwając po drodze wszystkie wystąpienia .entry-content, ponieważ w edytorze ta klasa nie występuje. W efekcie powyższy fragment kodu powinniśmy przekształcić do postaci:

h1, h2 {
   color: #000;
   font-weight: bold;
   margin: 0 0 .8125em;
}

h3 {
   font-size: 10px;
   letter-spacing: 0.1em;
   line-height: 2.6em;
   text-transform: uppercase;
}

Powyższy fragment powinien trafić do pliku editor-style.css. Tym sposobem nagłówki w edytorze będą wyglądać identycznie jak na stronie. Cały proces należy powtórzyć dla pozostałych elementów (p, blockquote, ul, li itd.), aż do momentu, gdy wpisy w edytorze wizualnym będą wyglądać tak samo jak na stronie.

Krok 3: Różne style dla różnych typów wpisów i stron

W praktyce może zdarzyć się tak, że układy dla stron i dla różnych typów wpisów będą się nieco różnić między sobą. Przykładowo, załóżmy że dla wpisów wyświetlany jest sidebar, który nie występuje na stronach. W takim wypadku prawdziwy edytor WYSIWYG powinien uwzględnić różnicę w szerokości treści dla stron i wpisów.

Rozwiązanie w takiej sytuacji, polega na przygotowaniu osobnych arkuszy stylów na użytek edytora, np. editor-style-post.css oraz editor-style-page.css. Arkusze te de facto będą się różnić tylko pierwszą deklaracją:

html .mceContentBody {
   max-width: 584px;
}

Musimy jeszcze zmodyfikować kod w pliku functions.php tak, aby edytor wczytywał odpowiedni arkusz w zależności od tego, czy edytujemy wpis czy stronę.

<?php
add_action('admin_head', 'editor_style_switcher');
function editor_style_switcher() {
   global $current_screen;
   switch ($current_screen->post_type) {
      case 'page':
      add_editor_style('editor-style-page.css');
      break;
   case 'post':
      add_editor_style('editor-style-post.css');
      break;
   }
}
?>

Jeśli na swoim blogu korzystasz z dodatkowych typów wpisów, których układ jest inny niż ten dla stron i standardowych wpisów, wystarczy że rozwiniesz powyższy kod, dodając kolejną pozycję. Oczywiście musisz pamiętać również o stworzeniu osobnego arkusza stylów.

Podsumowanie

W zależności od tego, jak zbudowany jest plik style.css w Twoim szablonie, stworzenie odrębnego arkusza stylów dla edytora może się okazać mniej lub bardziej czasochłonnym zadaniem. Aby ułatwić sobie pracę, możesz skorzystać z wtyczki Firebug dla Firefox, lub podobnego narzędzia tego typu w innej przeglądarce. Myślę, że z taką pomocą, nawet osoby mało obeznane z HTML i CSS dadzą sobie radę.

Powodzenia i nie zapomnij dać znać jak Ci poszło!

tagi: edytor wizualny, tworzenie motywów

Komentarze

Marcin 12 lat temu:
Tytuł jak z najlepszej reklamy. Przykuwający uwagę, ale mający niewiele wspólnego z treścią, bo podpinamy arkusze odpowiedzialne za wygląd do ISTNIEJĄCEGO edytora wyswig, a nie go zmieniamy. Fakt, artykułu o tytule pasującym bym nie zaczął czytać, a na pewno bym nie komentował.
odpowiedz
1. Szymon Skulimowski 12 lat temu:
  Marcin, masz rację – faktycznie tytuł można różnie zinterpretować. Dzięki za trafne spostrzeżenie, będziemy zwracali to więcej uwagi. Jak się domyślam od razu po przeczytaniu tytułu pomyślałeś o wymianie całego TinyMCE na coś innego, tak?
  Jaki tytuł Twoim zdaniem bardziej by pasował do treści?
  odpowiedz
2. Marcin 12 lat temu:
  Dokładnie, spodziewałem się jakiegoś hardcore’u z wymianą tinyMCE :D. Co do tytułu to nie wiem, nie jestem copywriterem. Może „Jak w edytorze uzyskać wygląd artykułu na stronie?”
  odpowiedz
3. Jakub Milczarek 12 lat temu:
  Ja też pomyślałem dokładnie tak samo, że wpis będzie o podmianie TinyMCE na coś zupełnie innego i bardziej wizualnego…
  Tak czy inaczej wpis w mojej ocenie bardzo wartościowy. Już kilka razy sam miałem się zebrać i wprowadzać takie stylowanie ale na pomyśle się kończyło :)
  odpowiedz
4. Szymon Skulimowski 12 lat temu:
  Rozumiem. Dzięki za informacje :).
  Swoją drogą, ja chyba bym tego edytorka na nic nie wymieniał. Jestem jego cichym wielbicielem i zawsze dziwią mnie narzekania na jego działanie (np. „problem znikających enterów”).
  odpowiedz
5. Ola Łączek 12 lat temu:
  Znalezienie balansu między przekazem marketingowym a merytoryką stanowi czasem wyzwanie :)
  A pierwotny tytuł brzmiał: „Jak zmienić wygląd wpisu w edytorze wizualnym.”
  odpowiedz
6. Marcin 12 lat temu:
  @Ola: o to był dobry tytuł, czysty przekaz, zero ściemy :D
  odpowiedz
Vokiel 12 lat temu:
Jest plugin TinyMCE Advanced, który na prawdę rozszerza możliwości edytora WYSIWYG, ponadto jest bardzo łatwo konfigurowalny. Polecam.
odpowiedz
1. Szymon Skulimowski 12 lat temu:
  Wtyczka jest naprawdę świetna. Instalowałem ją na paru stronach, ale głównie po to żeby dodać przyciski do zarządzania… tabelami.
  odpowiedz
Tom Slominski 12 lat temu:
Mnie to irytuje edytor WYSIWIG. Nie mogę się skoncentrować na tym co piszę.
odpowiedz
1. Szymon Skulimowski 12 lat temu:
  A próbowałeś trybu pełnoekranowego? Mi pomógł w przesiadce z WriteMonkey.
  odpowiedz
2. Marcin 12 lat temu:
  @Tom: To wyłącz, proste skuteczne i działa (w profilu użytkownika można wyłączyć na stałe).
  odpowiedz
Aga 12 lat temu:
A mnie tytuł w ogóle nie zmylił. WYSIWYG – tak jak wyjaśniła to Ola – to skrót od „What You See Is What You Get” i właśnie o to chodzi, żeby artykuł w trakcie pisania nie różnił się niczym od wersji końcowej. Po przeczytaniu tytułu spodziewałam się o czym będzie artykuł.
Jednak wg mnie w artykule zabrakło czegoś innego – pokazania na obrazku i to zaraz na wstępie, co jesteśmy w stanie przez to osiągnąć. Czyli dwa obrazki: 1. widok z edytora 2. widok podglądu wpisu po publikacji. I koniecznie taki przykład, gdzie wykorzystane elementy czymś się wyróżniają. Dajmy na to nagłówki drugiego poziomu są pisane purpurowym fotem i z jakimiś wywijasami. Wtedy czytelnik od razu złapałby w czym rzecz i jaki w tym tkwi power.
Czyli zgodnie z zasadą: jeden obrazek za milion słów ;-). Cała reszta bardzo mi się podobała. Dzięki!
odpowiedz
SpeX 12 lat temu:
A zamiast clt+c/v, nie dało by się odpowiednich „rekordów” importować z głównego css? Bo w tej chwili, jak ktoś się będzie bawił szablonem, musi pamiętać by jeszcze w nowych css’ach zmienić wartości.
odpowiedz
1. Ola Łączek 12 lat temu:
  De facto możesz podać dowolny plik css jako arkusz dla edytora. Można więc użyć głównego arkusza css motywu, również w edytorze. Oczywiście plik style.css trzeba by wtedy odpowiednio przygotować.
  Jedna opcja to tak sformułowć reguły, aby nie miały żadnych prefiksów klas, np. zamiast :
  .entry-content h1 {…}
  .entry-conent p {…}
  używać:
  h1 {…}
  p {…}
  Ewentualnie do każdej reguły dopisać jej odpowiednik z edytora, czyli:
  .entry-content h1, .mceContentBody h1 { … }
  Lub po prostu zmienić główną klasę jakiej używa TinyMCE na swoją własną, spójną z tym czego używasz na stronie.
  odpowiedz
Her 12 lat temu:
Fajny trick. Gdzieś widziałem też inne rozwiązanie, ale nie mogłem go odnaleźć. Dzięki za pomoc.
odpowiedz
Hubalus 12 lat temu:
Wartościowy wpis choć mało jak dla mnie wyczerpujący. Kilka kolejnych opcji może trochę by zmusiło lub zachęciło do pobawienia się kodem, ale uważam że zwykły śmiertelnik i tak wybierze TinyMCE. Oczywiście Lubię to!
ps. Mogę zapytać czy używasz wtyczki czy może to inne rozwiązanie daje w sidebarze te 3 zakładki?
Z góry dzięki za odpowiedz (Sub)
odpowiedz
1. Szymon Skulimowski 12 lat temu:
  Mogę zapytać czy używasz wtyczki czy może to inne rozwiązanie daje w sidebarze te 3 zakładki?
  To kombinacja poniższych rzeczy:
  – skrypt JS: http://www.kminek.pl/yetii/
  – komentarze: https://wordpress.org/plugins/get-recent-comments/
  – popularne: https://wordpress.org/plugins/wordpress-popular-posts/
  – ostatnie (zwykła pętla): https://codex.wordpress.org/Class_Reference/WP_Query
  odpowiedz
R. 12 lat temu:
Tu też: http://wp.smashingmagazine.com/2011/10/14/advanced-layout-templates-in-wordpress-content-editor/
odpowiedz
1. Hubalus 12 lat temu:
  Dzięki, na pewno w swoim szablonie wykorzystam i wpis i rady z komentarza:D
  odpowiedz
2. SpeX 12 lat temu:
  To ja może tak z innej bajki. Wie ktoś jak zrobić, by można było mieć szablon wpisu. Coś właśnie jak na tej stronie:
  http://mwp.smashingmagazine.com/wp-content/uploads/2011/10/multi-col-layout-02.png
  http://mwp.smashingmagazine.com/wp-content/uploads/2011/10/multi-col-layout-03.png
  odpowiedz
3. Szymon Skulimowski 12 lat temu:
  Coś te powyższe odnośniki nie chcą działać.
  odpowiedz
4. SpeX 12 lat temu:
  Może mają ochronę przed hotlinkowaniem?
  Ale to są grafiki z powyższego wpisu, np 2 i 3.
  odpowiedz
5. marsjaninzmarsa 12 lat temu:
  Tak, mają. Wystarczy kliknąć na pasek adresu, a potem nacisnąć enter, żeby załadowało poprawnie.
  odpowiedz
6. marsjaninzmarsa 12 lat temu:
  Czekaj, @SpeX, Ty się pytasz, w jaki sposób uzyskać efekt, którego sposób uzyskania jest opisany we wpisie, do którego odsyłasz? :D
  odpowiedz
Lymorn 12 lat temu:
Bardzo przydatny wpis, ale nie mogę dojść w jaki sposób mam załadować style edytora dla szablonu strony (custom page template)? Używam osobnego szablonu dla stron bez paska bocznego.
Dla przykładu: Nazwa szablonu „One Column Page” z pliku „custom-one-column-page.php”.
Będę wdzięczny za pomoc :)
odpowiedz
1. Ola 12 lat temu:
  To rozwiązanie zadziała tylko dla stron (page), wpisów (post) oraz własnych typów wpisów (custom post type). W przykładzie podpinamy się pod akcję admin_head, co oznacza że nasz kod jest wykonywany podczas renderowania strony, w sekcji (w tym wypadku dodawany jest link do arkusza css). Natomiast szablon strony można wybrać lub zmienić w dowolnym momencie edycji.
  W Twoim wypadku być może pomocny okaże się inne podejście, do którego link w poście powyżej dodał R.
  odpowiedz
Damian 12 lat temu:
Czy można podpiąć taki arkusz pod jedną konkretną stronę ?
odpowiedz
Kuba Mikita 12 lat temu:
To jest to! O wiele lepiej działa, chociaż do TinyMCE ma jeszcze wiele do zrobienia ;)
odpowiedz
1. marsjaninzmarsa 12 lat temu:
  Przecież WP korzysta właśnie z TinyMCE…
  odpowiedz

czupryn 12 lat temu:

ten kod u mnie nie działał (chodzi o switcher css) troszkę zmodyfikowałem i hula! ŚWIETNE ROZWIĄZANIE, dziękuje bardzo! Oto kod:

add_action('admin_head', 'editor_style_switcher');

function editor_style_switcher() {
   global $current_screen;
   switch ($current_screen->post_type) {
      case 'page':
      add_editor_style('editor-style-page.css');
      break;
   case 'post':
      add_editor_style('editor-style-post.css');
      break;
   }
}

odpowiedz

Szymon Skulimowski 12 lat temu:
Hmm… ciężko mi znaleźć różnicę. Mógłbyś podpowiedzieć?
odpowiedz

Tomek 12 lat temu:
Bardzo dobry wpis. Tylko dlaczego posty na Twoim blogu pojawiają się ostatnio rzadko :)
odpowiedz
1. Szymon Skulimowski 12 lat temu:
  Zdecydowanie za dużo pracy, ale pracuję nad tym! :-)
  odpowiedz
Marcin 12 lat temu:
Jest taka wtyczka do wordpressa, nazywa się Ultimate Tiny MCE. Bardzo pomaga w formatowaniu tekstu i wstawianiu mediów itp.
odpowiedz
Jakub Strawa 12 lat temu:
Tak się zastanawiam i czy podobną operację da się przeprowadzić na CSS wbudowanego wizualnego edytora WP. Koniec końców tam też takowy jest. Hmm…
odpowiedz
1. Ola 12 lat temu:
  Na upartego pewnie by się dało, ale myślę, że to nie miało by większego sensu. Edytor na pewno ma swój wbudowany CSS, ale jest on częścią core WordPress, więc przy aktualizacji straciłbyś zmiany.
  odpowiedz
2. marsjaninzmarsa 12 lat temu:
  Hmm, ale przecież właśnie to robimy w tym artykule, prawda?
  odpowiedz
Ania 11 lat temu:
Hej, czy ktoś mi może przypomnieć, jaka to była wtyczka na blogu WP dla trybu wizualnego? Kilka dni temu robiłam wpis, a dziś niby te funkcje są, ale w części są puste pola, a pozostałe nie pasują do opisu. Np. klikam na „tabela” a w opisie jest „czcionka”. Tak jakby te funkcje zniknęły. Jaka to wtyczka?
Pozdrawiam. Ania
odpowiedz
1. Szymon Skulimowski 11 lat temu:
  Nie za bardzo wiem o co chodzi, ale mogę strzelić – TinyMCE Advanced? Jeśli nie to byłoby super gdybyś podała ciut więcej szczegółów.
  odpowiedz
2. bekon 11 lat temu:
  U mnie TinyMCE Advanced chyba nie działa poprawnie (bardzo ubogie), zainstalowałem TinyMCE Ultimate i wygląda to lepiej.
  odpowiedz
3. Szymon Skulimowski 11 lat temu:
  Faktycznie „Ultimate” wydaje się mieć znacznie więcej opcji, ale tak z ciekawości – jakich przycisków brakowało Ci w „Adavnced” a które znalazłeś w „Utlimate”?
  odpowiedz
4. kabexxx 11 lat temu:
  Pewnie takich, które uczynią z dokumentu kompletnie pomieszaną, niesemantyczną „choinkę”.
  Przecież wszyscy chcą drugiego Worda.
  odpowiedz
alchymista 9 lat temu:
Mam pytanie dotyczące pierwszego obrazka pt. tryb wizualny. Widzimy na nim suwak do przesuwania treści. Niestety w najnowszej wersji WP tego suwaka nie ma… Jedyny suwak, który działa, to suwak przeglądarki (używam mozilli)… W efekcie tekst przesuwa się razem z paskiem bocznym, co utrudnia np wpisywanie tagów czy kategorii, jeśli jest taka potrzeba.
Jak rozwiązać ten problem?
odpowiedz
1. Szymon Skulimowski 9 lat temu:
  Tak, można to zmienić. Trzeba kliknąć na „Opcje ekranu” (prawy górny róg ekranu) i odznaczyć opcję „Powiększ edytor na całą wysokość okna”.
  odpowiedz