
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:
tryb 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:
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!
Komentarze
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ł.
odpowiedzMarcin, 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?
odpowiedzDokł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?”
odpowiedzJa 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 :)
odpowiedzRozumiem. 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”).
odpowiedzZnalezienie balansu między przekazem marketingowym a merytoryką stanowi czasem wyzwanie :)
A pierwotny tytuł brzmiał: „Jak zmienić wygląd wpisu w edytorze wizualnym.”
odpowiedz@Ola: o to był dobry tytuł, czysty przekaz, zero ściemy :D
odpowiedzJest plugin TinyMCE Advanced, który na prawdę rozszerza możliwości edytora WYSIWYG, ponadto jest bardzo łatwo konfigurowalny. Polecam.
odpowiedzWtyczka jest naprawdę świetna. Instalowałem ją na paru stronach, ale głównie po to żeby dodać przyciski do zarządzania… tabelami.
odpowiedzMnie to irytuje edytor WYSIWIG. Nie mogę się skoncentrować na tym co piszę.
odpowiedzA próbowałeś trybu pełnoekranowego? Mi pomógł w przesiadce z WriteMonkey.
odpowiedz@Tom: To wyłącz, proste skuteczne i działa (w profilu użytkownika można wyłączyć na stałe).
odpowiedzA 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!
odpowiedzA 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.
odpowiedzDe 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.
odpowiedzFajny trick. Gdzieś widziałem też inne rozwiązanie, ale nie mogłem go odnaleźć. Dzięki za pomoc.
odpowiedzWartoś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!
odpowiedzps. 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)
To kombinacja poniższych rzeczy:
odpowiedz– 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
Tu też: http://wp.smashingmagazine.com/2011/10/14/advanced-layout-templates-in-wordpress-content-editor/
odpowiedzDzięki, na pewno w swoim szablonie wykorzystam i wpis i rady z komentarza:D
odpowiedzTo 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:
odpowiedzhttp://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
Coś te powyższe odnośniki nie chcą działać.
odpowiedzMoże mają ochronę przed hotlinkowaniem?
odpowiedzAle to są grafiki z powyższego wpisu, np 2 i 3.
Tak, mają. Wystarczy kliknąć na pasek adresu, a potem nacisnąć enter, żeby załadowało poprawnie.
odpowiedzCzekaj, @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
odpowiedzBardzo 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.
odpowiedzDla przykładu: Nazwa szablonu „One Column Page” z pliku „custom-one-column-page.php”.
Będę wdzięczny za pomoc :)
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.
odpowiedzCzy można podpiąć taki arkusz pod jedną konkretną stronę ?
odpowiedzTo jest to! O wiele lepiej działa, chociaż do TinyMCE ma jeszcze wiele do zrobienia ;)
odpowiedzPrzecież WP korzysta właśnie z TinyMCE…
odpowiedzten kod u mnie nie działał (chodzi o switcher css) troszkę zmodyfikowałem i hula! ŚWIETNE ROZWIĄZANIE, dziękuje bardzo! Oto kod:
odpowiedzHmm… ciężko mi znaleźć różnicę. Mógłbyś podpowiedzieć?
odpowiedzBardzo dobry wpis. Tylko dlaczego posty na Twoim blogu pojawiają się ostatnio rzadko :)
odpowiedzZdecydowanie za dużo pracy, ale pracuję nad tym! :-)
odpowiedzJest taka wtyczka do wordpressa, nazywa się Ultimate Tiny MCE. Bardzo pomaga w formatowaniu tekstu i wstawianiu mediów itp.
odpowiedzTak się zastanawiam i czy podobną operację da się przeprowadzić na CSS wbudowanego wizualnego edytora WP. Koniec końców tam też takowy jest. Hmm…
odpowiedzNa 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.
odpowiedzHmm, ale przecież właśnie to robimy w tym artykule, prawda?
odpowiedzHej, 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?
odpowiedzPozdrawiam. Ania
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.
odpowiedzU mnie TinyMCE Advanced chyba nie działa poprawnie (bardzo ubogie), zainstalowałem TinyMCE Ultimate i wygląda to lepiej.
odpowiedzFaktycznie „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”?
odpowiedzPewnie takich, które uczynią z dokumentu kompletnie pomieszaną, niesemantyczną „choinkę”.
Przecież wszyscy chcą drugiego Worda.
odpowiedzMam 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?
odpowiedzTak, 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”.
odpowiedzDodaj własny komentarz