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

Zmień 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

    edytor w trybie wizualnym

  • tryb HTML:

    Edytor w trybie 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

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, H2H3 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!

Dodaj własny komentarz