Jak dodać niestandardowe style do edytora wizualnego WordPress

Jak dodać niestandardowe style do edytora wizualnego WordPress

Spójrz na swój edytor wizualny WordPress. Istnieją pewne standardowe opcje formatowania i stylizowania treści, ale niewiele w zakresie dostosowywania, aby Twoje posty i strony wyglądały trochę naprawdę fantazyjnie.


Edytor WordPress

Teraz możesz wiedzieć, że masz możliwość przeskakiwania między edytorami tekstowymi i wizualnymi w WordPressie, aby wrzucić CSS do tworzenia przycisków i bloków tekstowych, ale jest to bolesne, a jeśli nie masz duże doświadczenie w edytowaniu kodu Edytor tekstu wydaje się nieco zastraszający.

Czy nie byłoby łatwiej, gdybyś mógł stworzyć własne style niestandardowe, umieścić je w menu rozwijanym w edytorze WordPress i wybrać ich użycie, gdy ich potrzebujesz? Tak, jest to o wiele łatwiejsze, dlatego chcemy tutaj opisać, jak to zrobić. Pamiętaj, że chociaż staramy się uczynić ten proces tak prostym, jak to możliwe, pomaga mieć odrobinę wiedzy na temat CSS, jeśli chcesz odkryć pełne zalety niestandardowych stylów.

Przyjrzyjmy się, jak dodawać niestandardowe style do edytora wizualnego WordPress.

Dodaj niestandardowe style do edytora wizualnego WordPress, dodając kod

Ta pierwsza opcja wymaga małej wiedzy na temat włączania i modyfikowania CSS, ale dam ci krótki przewodnik, który pomoże Ci nauczyć się podstaw, abyś mógł korzystać z tej wiedzy w przyszłości. To dobra opcja, jeśli nie chcesz obciążać witryny za pomocą wtyczki.

Chodzi o to, aby dodać nowe menu rozwijane, które zawiera niestandardowe style w edytorze wizualnym WordPress, co daje możliwość wyboru elementów w edytorze, a następnie zastosowania do nich niestandardowych stylów. Jeśli opracowujesz nowy motyw, znajdź go functions.php plik i umieść kod poniżej w tym pliku lub jeśli pracujesz z już wbudowanym motywem, wklej ten kod do pliku functions.php motywu podrzędnego.

funkcja myprefix_mce_buttons_1 (przyciski $) {
array_unshift ($ buttons, 'styleselect');
przyciski powrotu $;
}

add_filter ('mce_buttons_1', 'myprefix_mce_buttons_1');

Wróć do edytora w jednym z postów WordPress, a teraz powinieneś zobaczyć nowy przycisk „Formaty” w górnym rzędzie edytora. Zauważ, jak podłączyliśmy się do „mce_buttons_1? Spowoduje to umieszczenie przycisku menu formatów w pierwszym wierszu edytora mce. Możesz również użyć filtra „mce_buttons_2”, aby umieścić go w drugim rzędzie lub „mce_buttons_3”, aby umieścić go w trzecim rzędzie.

Po włączeniu elementu menu nadszedł czas, aby dodać niestandardowe style do wykorzystania w swoich postach. Weź poniższy kod i wklej go do swojego functions.php plik, który doda 2 nowe style do menu rozwijanego Formaty – „Przycisk motywu” i „Podświetl”.

/ **
* Dodaj niestandardowe style do rozwijanego menu formatów mce
*
* @url https://codex.wordpress.org/TinyMCE_Custom_Styles
*
* /
funkcja myprefix_add_format_styles ($ init_array) {
$ style_formats = tablica (
// Każde dziecko podrzędne ma format z własnymi ustawieniami - dodaj tyle, ile chcesz
szyk(
„tytuł” ​​=> __ („Przycisk motywu”, „domena tekstowa”), // Tytuł menu rozwijanego
'selector' => 'a', // Element docelowy w edytorze
„class” => „theme-button” // Nazwa klasy używana w CSS
),
szyk(
„title” => __ („Podświetl”, „text-domain”), // Tytuł menu rozwijanego
'inline' => 'span', // Zawiń zakres wokół wybranej treści
„klas” => „podświetlanie tekstu” // Nazwa klasy używana w CSS
),
);
$ init_array ['style_formats]] = json_encode ($ style_formats);
zwraca $ init_array;
}
add_filter ('tiny_mce_before_init', 'myprefix_add_format_styles');

Możesz zmienić tytuły, aby wyświetlać różne nazwy w menu rozwijanym, dodawać / usuwać elementy z tablicy itp. Możesz modyfikować prawie wszystko w tym kodzie, aby ujawnić własne style formatowania, koniecznie sprawdź Kodeks WordPress w celu bardziej szczegółowego wyjaśnienia przyjętych parametrów i zwracanych wartości.

Teraz, gdy masz nowe style, możesz wyróżnić zawartość w edytorze i zastosować style. Zauważ, jak format „Przycisk motywu” ma parametr selektora? Oznacza to, że styl można zastosować tylko do tego konkretnego selektora (w tym przypadku znacznika „a” lub „link”). Drugi format, w którym dodaliśmy „Podświetlenie”, nie ma parametru selektora, ale raczej parametru „inline”, który mówi mu, aby zastosował styl do dowolnego tekstu zaznaczonego w edytorze i zawinął go w zakres unikalną nazwą klasy. Możesz zobaczyć przykład z naszego motywu Total WordPress na temat tego, w jaki sposób korzystaliśmy z formatów, aby użytkownicy mogli łatwo zastosować wygląd listy kontrolnej do dowolnych wypunktowań w edytorze.

lista kontrolna

Teraz możesz używać niestandardowych formatów, ale nie będą one wyglądać inaczej, dopóki nie dodasz niestandardowego kodu CSS do swojej witryny, aby je stylizować. Odszukaj arkusz stylów dla motywu (jeśli tworzysz własny) lub motyw potomny i wklej następujący kod CSS w pliku.

.przycisk motywu {
display: blok wbudowany;
wypełnienie: 10 15 pikseli;
kolor: #fff;
tło: # 1796c6;
dekoracja tekstu: brak;
}
.przycisk motywu: najechanie kursorem {
dekoracja tekstu: brak;
krycie: 0,8;
}
.podświetlanie tekstu {
tło: # FFFF00;
}

Teraz doda styl do nowych formatów interfejsu, więc po zastosowaniu możesz zobaczyć je na żywo. Tak! Ale czy nie byłoby miło widzieć Twoje style w edytorze podczas ich stosowania? Aby to zrobić, musisz skorzystać z funkcji „edytora arkuszy stylów” w WordPress. Jeśli tworzysz własny motyw, będziesz chciał utworzyć nowy plik css w swoim motywie o nazwie „editor-style.css” (możesz go nazwać, jak chcesz, po prostu odpowiednio zmodyfikować poniższy fragment) za pomocą niestandardowego kodu CSS dodane do formatów, a następnie dodaj funkcję poniżej, aby załadować ją do wewnętrznej bazy danych.

funkcja myprefix_theme_add_editor_styles () {
add_editor_style ('editor-style.css');
}
add Działalności („init”, „myprefix_theme_add_editor_styles”);

Jeśli pracujesz z motywem innej osoby, musisz dodać go do motywu podrzędnego, po prostu nadaj mu unikalną nazwę, aby nie kolidowała z motywem nadrzędnym lub jeśli motyw nadrzędny ma już plik CSS dla edytor, który możesz skopiować i wkleić do motywu podrzędnego (bez dodawania powyższego kodu PHP), a następnie dodaj nowy CSS, ponieważ WordPress najpierw sprawdzi motyw podrzędny przed załadowaniem pliku CSS edytora motywu nadrzędnego, a jeśli go znajdzie, zrobi to zamiast tego załaduj go z motywu potomnego.

Dodaj własne style do edytora wizualnego WordPress za pomocą ładnej wtyczki

Jeśli nie masz czasu na zabawę z kodem lub nie możesz pojąć go samodzielnie, masz dobre wieści. Istnieje wtyczka, która pozwala dokończyć dokładnie to, co właśnie zrobiliśmy powyżej, bez konieczności przekręcania kodu.

Wtyczka TinyMCE Custom Styles

Po prostu wyszukaj, zainstaluj i aktywuj Wtyczka TinyMCE Custom Styles i aktywuj go na swojej stronie WordPress.

Ustawienia niestandardowych stylów TinyMCE

Iść do Ustawienia> Style TinyMCE prof po lewej stronie pulpitu WordPress. Tutaj modyfikujesz ustawienia wtyczki.

Ustawienia niestandardowych stylów TinyMCE

Wtyczka pozwala wybrać, gdzie są arkusze stylów lub gdzie chcesz je umieścić. Zalecane jest utworzenie nowego katalogu niestandardowego. Wybierz trzecią opcję i podaj nazwę katalogu, a następnie przejdź w dół strony, aby kliknąć swój Zapisz ustawienia opcja przed przejściem do następnego kroku.

Niestandardowe style TinyMCE Dodaj nowe

Po zapisaniu ustawień przewiń w dół, aby wybrać przycisk Dodaj nowy styl.

Opcje stylów niestandardowych TinyMCE

Tutaj możesz dostosować wygląd swoich niestandardowych stylów. Jest to po prostu prosty edytor internetowy, który generuje dla Ciebie kod CSS. Wpisz tytuł dla tego, co chcesz pokazać w menu rozwijanym. Wybierz, czy chcesz wybrać selektor, wstawkę czy typ bloku. Użyj powyższego zrzutu ekranu, aby wypełnić klasy i style CSS, lub utwórz własny w zależności od tego, do czego zamierzasz użyć menu rozwijanego. Po zakończeniu kliknij przycisk Zapisz ustawienia u dołu strony.

Format stylów niestandardowych TinyMCE

Teraz nadszedł czas, aby zobaczyć, jak nowy styl niestandardowy wygląda w Twoim edytorze. Otwórz nowy post lub stronę i znajdź menu rozwijane Formaty po lewej stronie edytora wizualnego. Pokazuje się w drugiej linii. Po kliknięciu menu rozwijanego pojawi się nowy styl, który właśnie utworzyłeś.

Format niestandardowych stylów TinyMCE w użyciu

Kliknij opcję Big Blue Button lub cokolwiek, co stworzyłeś, aby zobaczyć to w edytorze. Aby go użyć, po prostu zaznacz tekst, który chcesz sformatować, a następnie kliknij opcję i voila!

Wniosek

To wszystko na teraz! Zawsze możesz dowiedzieć się więcej o tym, jak używać nowych stylów, sprawdzając Strona kodeksu WordPress poświęcona temu tematowi.

Daj nam znać w sekcji komentarzy, jeśli masz pytania dotyczące dodawania niestandardowych stylów do edytora wizualnego WordPress. Zachęcamy do podzielenia się wszelkimi nietypowymi stylami, które stworzyłeś, aby Twoja strona wyglądała trochę ładniej!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map