publikacja: 14 listopada 2011, 13:00; autor: Ola Łączek http://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!

Podobał się artykuł? Dodaj kanał RSS / Atom do swojego czytnika lub zapisz się na bezpłatny newsletter i dołącz do grona stałych czytelników.

Podobne artykuły

Komentarze (31)

Marcin 185 dni 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 185 dni 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 185 dni 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 185 dni 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 185 dni 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 185 dni 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 185 dni temu:
  @Ola: o to był dobry tytuł, czysty przekaz, zero ściemy :D
  odpowiedz
Vokiel 185 dni 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 185 dni 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 185 dni temu:
Mnie to irytuje edytor WYSIWIG. Nie mogę się skoncentrować na tym co piszę.
odpowiedz
1. Szymon Skulimowski 185 dni temu:
  A próbowałeś trybu pełnoekranowego? Mi pomógł w przesiadce z WriteMonkey.
  odpowiedz
2. Marcin 185 dni temu:
  @Tom: To wyłącz, proste skuteczne i działa (w profilu użytkownika można wyłączyć na stałe).
  odpowiedz
Aga 185 dni 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 185 dni 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 184 dni 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 184 dni temu:
Fajny trick. Gdzieś widziałem też inne rozwiązanie, ale nie mogłem go odnaleźć. Dzięki za pomoc.
odpowiedz
Hubalus 184 dni 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 183 dni 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: http://wordpress.org/extend/plugins/get-recent-comments/
  - popularne: http://wordpress.org/extend/plugins/wordpress-popular-posts/
  - ostatnie (zwykła pętla): http://codex.wordpress.org/Class_Reference/WP_Query
  odpowiedz
R. 183 dni temu:
Tu też: http://wp.smashingmagazine.com/2011/10/14/advanced-layout-templates-in-wordpress-content-editor/
odpowiedz
1. Hubalus 183 dni temu:
  Dzięki, na pewno w swoim szablonie wykorzystam i wpis i rady z komentarza:D
  odpowiedz
2. SpeX 183 dni 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 181 dni temu:
  Coś te powyższe odnośniki nie chcą działać.
  odpowiedz
4. SpeX 181 dni temu:
  Może mają ochronę przed hotlinkowaniem?
  Ale to są grafiki z powyższego wpisu, np 2 i 3.
  odpowiedz
Lymorn 165 dni 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 165 dni 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 111 dni temu:
Czy można podpiąć taki arkusz pod jedną konkretną stronę ?
odpowiedz
Kuba Mikita 44 dni temu:
To jest to! O wiele lepiej działa, chociaż do TinyMCE ma jeszcze wiele do zrobienia ;)
odpowiedz

czupryn 8 dni 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 7 dni temu:
Hmm… ciężko mi znaleźć różnicę. Mógłbyś podpowiedzieć?
odpowiedz

Tomek 4 dni temu:
Bardzo dobry wpis. Tylko dlaczego posty na Twoim blogu pojawiają się ostatnio rzadko :)
odpowiedz
1. Szymon Skulimowski 3 dni temu:
  Zdecydowanie za dużo pracy, ale pracuję nad tym! :-)
  odpowiedz