Czy kiedykolwiek chciałeś tworzyć własne przyciski formatowania w WordPressie, takie jak specjalny styl notatki lub format cytatu marki? Właśnie tym zajmują się niestandardowe style.
Poświęciłem sporo czasu na testowanie różnych podejść do niestandardowych stylów w WordPress, od prostych dodatków CSS po bardziej zaawansowane rozwiązania.
To doświadczenie pomogło mi zidentyfikować najbardziej praktyczne sposoby ulepszenia edytora za pomocą niestandardowych opcji formatowania, z których może korzystać każdy członek Twojego zespołu.
Dzisiaj przeprowadzę Cię przez proces dodawania niestandardowych stylów do edytora wizualnego WordPress. Dowiesz się, czym są niestandardowe style, dlaczego są przydatne i uzyskasz instrukcje krok po kroku dotyczące dodawania ich do swojej witryny, wszystko oparte na moim doświadczeniu z testów w rzeczywistym świecie.✨
Oto szybki przegląd tego, co omówię w tym artykule:
- Czym są niestandardowe style i jak mogą zmienić sposób korzystania z WordPress
- Jak dodać niestandardowe style do edytora wizualnego WordPress (Edytora bloków)
- Bonus: Jak dodać niestandardowe style do widżetów WordPress
Teraz przejdźmy do rzeczy!
Czym są niestandardowe style i jak mogą zmienić sposób korzystania z WordPress
Czy kiedykolwiek spędziłeś mnóstwo czasu na dostosowywaniu czcionek, kolorów i przycisków, tylko po to, by zdać sobie sprawę, że będziesz musiał zrobić to wszystko od nowa następnym razem?
WordPress oferuje podstawowe narzędzia do stylizacji, ale nie zawsze pasują one do Twojej marki lub dokładnie takiego wyglądu, jakiego szukasz. W tym miejscu pojawiają się niestandardowe style.
Mówiąc prościej, niestandardowy styl to skrót projektowy w edytorze WordPress. Konfigurujesz go raz, a następnie możesz zastosować go w dowolnym miejscu na swojej stronie za jednym kliknięciem.
Na przykład, możesz stworzyć niestandardową czcionkę dla nagłówków, wybrać kolor tła dla pól wyróżnionych lub zastosować spójny styl dla opinii.
Pomyśl o tym jak o szablonie dla elementów projektu. Zamiast ręcznie dostosowywać odstępy, czcionki lub kolory za każdym razem, wybierasz swój niestandardowy styl, a on natychmiast stosuje Twój preferowany projekt.
Na przykład, powiedzmy, że prowadzisz blog firmowy i zawsze dodajesz rekomendację produktu lub zastrzeżenie na końcu swoich wpisów. Zamiast stylizować je za każdym razem, możesz utworzyć niestandardowy styl o nazwie „Wskazówka produktowa” lub „Ważna uwaga” i zastosować go natychmiast.
Oszczędza to czas i zapewnia, że wszystko pozostaje dopracowane, zwłaszcza jeśli pracujesz z zespołem lub publikujesz dużo treści.
Mając to na uwadze, przyjrzyjmy się, jak łatwo dodać niestandardowe style do wizualnego edytora WordPress.
Jak dodać niestandardowe style do edytora wizualnego WordPress (Edytora bloków)
Jeśli chcesz dodać niestandardowe style w edytorze bloków, najskuteczniejszym sposobem jest użycie kodu PHP. Pamiętaj jednak, że to podejście jest najlepiej dopasowane do średniozaawansowanych użytkowników WordPressa.
Dzieje się tak, ponieważ będziesz musiał edytować plik functions.php swojego motywu, a nawet najmniejszy błąd może zepsuć Twoją witrynę. Mimo to możesz użyć przyjaznego dla początkujących wtyczki, aby uprościć ten proces.
Zawsze polecam WPCode do tego typu dostosowań. Moim zdaniem jest to najlepsza wtyczka fragmentów kodu WordPress na rynku. Przetestowałem ją dokładnie i okazała się najłatwiejszym i najbezpieczniejszym sposobem dodawania niestandardowego kodu bez ryzyka błędów.
Aby dowiedzieć się więcej, zapoznaj się z pełną recenzją WPCode mojego zespołu: WPCode.
🚨 Ważna uwaga: Niezależnie od Twojego poziomu umiejętności, zawsze zalecam wykonanie pełnej kopii zapasowej swojej witryny przed majstrowaniem przy jakimkolwiek ważnym kodzie. Zobacz nasz przewodnik jak wykonać kopię zapasową witryny WordPress, aby uzyskać instrukcje, jak to zrobić.
Pamiętaj, że fragment kodu, którego będę używać, jest domyślnie skonfigurowany do dodawania niestandardowych stylów dla bloku przycisku. Ale przy kilku drobnych poprawkach możesz go łatwo użyć do obsługi innych bloków, takich jak:
🔷 Nagłówki ze stylowymi lub obrysowanymi stylami
💬 Bloki cytatu, cytatu wyskakującego i wersetu
🗂️ Bloki Archiwów lub Kategorii
➕ I więcej
Daje to dużą elastyczność w projektowaniu wielokrotnego użytku stylów w całej witrynie.
Najpierw musisz zainstalować i aktywować wtyczkę WPCode. Jeśli potrzebujesz pomocy, zapoznaj się z naszym przewodnikiem dla początkujących na temat jak zainstalować wtyczkę WordPress.
📓 Uwaga: WPCode ma również bezpłatny plan, z którego można korzystać. Jednak uaktualnienie do wersji pro daje dostęp do funkcji takich jak biblioteka fragmentów kodu w chmurze, funkcja fragmentów blokowych, inteligentna logika warunkowa i inne.
Po aktywacji wtyczki przejdź do strony Fragmenty kodu » +Dodaj fragment z panelu. Tutaj kliknij przycisk „Użyj fragmentu” w opcji „Dodaj własny kod (nowy fragment)”.
Przekieruje Cię to do strony „Utwórz niestandardowy fragment”, gdzie musisz nadać nazwę swojemu fragmentowi kodu. Ta nazwa będzie służyć wyłącznie do Twojej identyfikacji i nie będzie widoczna dla żadnych użytkowników.
Następnie wybierz Snippet PHP z menu, które pojawi się po kliknięciu opcji „Typ kodu” w prawym rogu.
Następnie, jeśli chcesz stworzyć niestandardowy styl dla przycisku, dodaj poniższy niestandardowy kod do pola „Podgląd kodu”.
// Function to enqueue and register styles for both frontend and editor
function my_custom_button_styles() {
// Register the style only once
wp_register_style(
'my-custom-button-styles',
false
);
// Add inline styles
wp_add_inline_style(
'my-custom-button-styles',
<<<CSS
.is-style-fancy-button .wp-block-button__link {
background-color: #f0c040;
color: #fff;
border: none;
border-radius: 15px;
padding: 10px 20px;
}
.is-style-outline-button .wp-block-button__link {
background-color: transparent;
color: #333;
border: 2px solid #333;
border-radius: 5px;
padding: 10px 20px;
}
CSS
);
// Enqueue the style for both frontend and editor
wp_enqueue_style('my-custom-button-styles');
}
// Function to add custom styles for Gutenberg editor
function my_custom_gutenberg_button_styles() {
// Call the general styles function for the editor
my_custom_button_styles();
// Enqueue inline script for the editor to register block styles
wp_add_inline_script(
'wp-blocks',
<<<JS
wp.domReady(function() {
wp.blocks.registerBlockStyle('core/button', {
name: 'fancy-button',
label: 'Fancy Button'
});
wp.blocks.registerBlockStyle('core/button', {
name: 'outline-button',
label: 'Outline Button'
});
});
JS
);
}
// Hook the styles function to frontend
add_action('wp_enqueue_scripts', 'my_custom_button_styles');
// Hook the custom block style registration
add_action('enqueue_block_editor_assets', 'my_custom_gutenberg_button_styles');
Ten fragment kodu dodaje dwa niestandardowe style do bloku Przyciski w WordPressie.
Ale oto fajna część – możesz to łatwo dostosować, zamieniając „button” na nazwę dowolnego innego bloku, a te niestandardowe style zostaną zastosowane do tego bloku zamiast tego.
Możesz również dostosować kod, aby zmienić kolor tła, dostosować promień zaokrąglenia obramowania i wprowadzić inne zmiany stylistyczne, aby dopasować je do swoich potrzeb.
💡 Wskazówka eksperta: Jeśli wahasz się przed dostosowaniem kodu do innych bloków zamiast bloku przycisków, gorąco polecam użycie ChatGPT, aby Ci pomóc. Możesz po prostu powiedzieć narzędziu AI, aby zastąpiło „przycisk” preferowanym blokiem, a ono wygeneruje dla Ciebie niestandardowy kod. Po prostu skopiuj i wklej kod, który poda!
To sprawdzona wskazówka, którą sam wypróbowałem i działa jak marzenie.
Teraz przełącz przełącznik „Nieaktywny” na „Aktywny”.
Na koniec kliknij przycisk „Zapisz fragment”, aby zachować zmiany.
Następnie otwórz post w edytorze bloków i dodaj blok, dla którego dodałeś niestandardowe style.
Na przykład, jeśli dodałeś niestandardowe style dla bloku Przyciski, dodaj go do swojego posta.
Po wykonaniu tej czynności zobaczysz niestandardowe style dostępne w sekcji „Style” na panelu bloków.
Następnie kliknij przycisk „Zaktualizuj” lub „Opublikuj”, aby zapisać zmiany.
Następnie odwiedź swoją stronę WordPress, aby zobaczyć niestandardowe style w akcji.
Bonus: Jak dodać niestandardowe style do widżetów WordPress
Teraz, gdy już nauczyliście się dodawać niestandardowe style do edytora wizualnego WordPress, przejdźmy do kolejnej ekscytującej funkcji: dodawania niestandardowych stylów do widżetów WordPress.
Dostosowywanie widżetów pozwala uczynić Twoją witrynę jeszcze bardziej unikalną, czy to poprzez kolory, czcionki, czy układy. Zapewnia to dopasowanie widżetów do ogólnego projektu witryny, poprawiając wrażenia użytkownika.
Najprostszym sposobem na dodanie niestandardowych stylów do widżetów WordPress jest użycie WPCode.
Narzędzie pozwala na dodawanie kodu CSS do Twojej witryny, w tym obszarów widżetów.
Możesz po prostu dodać niestandardowy CSS, który celuje w konkretne widżety i dostosować takie rzeczy jak rozmiary czcionek, kolory tła, odstępy, a nawet obramowania.
Jest to idealne rozwiązanie, aby upewnić się, że Twoje widżety pasują do ogólnego projektu bez konieczności zagłębiania się w techniczne szczegóły. Aby zacząć, zapoznaj się z naszym samouczkiem na temat jak dodać niestandardowe style do widżetów WordPress.
Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak dodawać niestandardowe style w edytorze wizualnym WordPress. Możesz również zapoznać się z naszym przewodnikiem dla początkujących na temat tworzenia niestandardowego bloku WordPress oraz naszym porównaniem paddingu i marginesu w WordPress.
Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube po samouczki wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.
Toufic Ahemmed
Ci ludzie są niesamowici. Pomagają mi przez większość czasu. Dziękuję bardzo.
Wsparcie WPBeginner
Glad we could help
Admin
Aslan French
Ten artykuł powinien zostać zaktualizowany z myślą o Gutenberg, ponieważ tego rodzaju funkcjonalność została niedawno dodana do API Rich Text.
Wsparcie WPBeginner
Cześć Aslan,
Dziękuję za sugestię. Zdecydowanie przyjrzymy się starszym artykułom, gdy tylko Gutenberg zostanie wydany.
Admin
Mehrdad
Dzięki wielkie.
Ten artykuł naprawdę mi pomógł.
sabbi
To dodaje klasy do znacznika p, prawda?
Czy jest sposób na tworzenie własnych znaczników?
Albo inna sprawa: czy wybrany niestandardowy format nadpisze wcześniej wybrany znacznik h z p? Byłoby to konieczne, aby zapobiec problemom klienta, gdy klika on w domyślnych I niestandardowych stylach.
Britany
Niestety, to wcale mi nie pomogło. Czy istnieje artykuł, który wyjaśnia, co oznaczają poszczególne pola, które trzeba wypełnić?
Wszystko, czego potrzebuję, to sposób na zastosowanie tego samego formatowania do cytatów na moich stronach z notatkami z podcastu. Każdy cytat ma ten sam font (który ustawiłem jako styl nagłówka), pogrubiony i wyśrodkowany.
Mam dość ręcznego stosowania każdej części formatowania do każdego cytatu i po prostu chcę sposób, aby kliknąć jeden przycisk i mieć zrobione.
Syams
Proszę, powiedz mi, jak dodać nową czcionkę do edytora wizualnego WP.
Moya Nicholson
Dziękuję. Bardzo pomocne.
stanley
Muszę zmodyfikować mój motyw WP
Pomóż mi proszę
Sandy Connolly
DZIĘKUJĘ ZA TO!!! OMG!!!! Jak pomocne przy przekazywaniu strony klientowi, który chce móc dodawać własne treści na podstawie naszego projektu!
Marcin
Cześć, codziennie tworzę strony WordPress i robię wszystko z WP, ale ten fragment kodu jest jednym z najbardziej użytecznych, jakie widziałem od dawna… To jest dokładnie to, czego brakowało domyślnemu edytorowi WYSIWYG (teraz mogę powiedzieć: brakowało)! Pozwala robić niesamowite rzeczy w polu treści. Dziękuję za udostępnienie!
Foxglove
Używam tego wtyczki od jakiegoś czasu, ale nie jest już dostępna na wordpress.org — najwyraźniej nie jest już aktualizowana ani wspierana. Czy ktoś zna jakieś alternatywy poza metodą ręczną, którą opisujesz?
Lisa McMahon
Oto zaktualizowana/rozwidlona wersja oryginalnej wtyczki wspomnianej w artykule: Niestandardowe style TinyMCE
Wsparcie WPBeginner
Hej Lisa, dzięki za zwrócenie na to uwagi. Zaktualizowaliśmy artykuł o zaktualizowaną/rozwidloną wersję.
Admin
Shubha Das
Chcę dodać `p` zamiast `span`. Ale kiedy zmieniam nazwę bloku `span` na `p`, to nie działa.
‘title’ => ‘Uwaga’,
‘block’ => ‘p’,
‘classes’ => ‘uwaga’,
‘wrapper’ => true,
MacKenzie
Uważam, że to było bardzo pomocne i czuję, że prawie mi się udało, ale jeszcze nie działa. Mój tekst jest poprawnie oznaczony tagami span i class w edytorze po zaznaczeniu – ale żaden ze stylów, które umieściłem w arkuszu stylów, nie jest stosowany do opublikowanej notatki.
Frank
Zawsze staję się zdenerwowany i czuję mdłości, jeśli jakiś klient potrzebuje poprawek w WordPressie. Świetnie, ta lista rozwijana stylów, ALE, jak ktoś wcześniej powiedział, całkowicie bezużyteczna, jeśli style nie mogą zostać wycofane, a tylko dodawane, dodawane, dodawane...
Jestem przyzwyczajony do tych niedopracowanych rozwiązań w WordPress – zazwyczaj jest też uzupełniające niedopracowane rozwiązanie, które częściowo naprawia pierwsze. Ale tutaj?
Jak teraz sugerowałbyś USUNĄĆ NIEDOSTOSOWANE STYLE dodane za pomocą listy rozwijanej stylów? Widok kodu w żaden sposób nie jest akceptowalny dla mojego klienta?
Byłbym niewiarygodnie szczęśliwy, gdyby ktoś znalazł sposób, aby to zrobić i podzielił się tą wiedzą (i za usunięcie katastrofy zwanej wordpress z mojego zasięgu na (mam nadzieję) bardzo długi czas).
Z góry dziękuję!
Frank
Chris
Kliknij ponownie na styl na liście rozwijanej. Gotowe.
Shafi ken
Dzięki za pomocny tutorial. Dzięki
K Shazzad
Whole tutorial worked flawlessly for me. Thanks a bunch
Stef
Wypróbowałem tę wtyczkę, ale zdałem sobie sprawę, że po zmianie niestandardowego stylu, nie aktualizuje ona już dodanych stylów. Musisz wrócić i wstawić je ponownie, ponieważ funkcja dodaje styl w linii, a nie przez arkusz stylów.
Phil
Dziękuję za pomocny tutorial. Czy używanie wtyczki zamiast kodowania ręcznego ma jakiś wpływ na wydajność? Dziękuję,
Wsparcie WPBeginner
Nie, ale do ponownego wykorzystania elementów ta metoda jest dość poręczna. Jest również przydatna, jeśli tworzysz stronę dla klienta i chcesz, aby mógł on dodawać rzeczy z edytora wizualnego.
Admin
Sei
Dzięki za tutorial!
Czy jest sposób, aby dodać dwa znaczniki naraz? Na przykład, uzyskać coś w rodzaju tekstu
Sei
Okej, twoje komentarze konwertują HTML. Chodzi mi o to, że chciałbym uzyskać znaczniki 'h1' i 'span' wokół mojego tekstu, klikając tylko jeden styl.
Lily
Udało mi się zrobić niestandardowe klasy i elementy pokazują się z prawidłowymi klasami w edytorze tekstu i na stronie, ale klasa nie jest stosowana w edytorze wizualnym, co sprawia, że jest bardzo niejasne, czy zadziałało, czy nie dla użytkownika. Czy jest jakiś sposób, aby to naprawić?
Bonnie Dasher-Andersen
Dodałem dwa niestandardowe style. Kiedy edytuję stronę, mam dwa menu Format, każde z tymi samymi wpisami (dwa style, które utworzyłem). Kiedy próbuję zastosować te style, nic się nie dzieje. Widzę tag w widoku Tekst, ale kiedy wyświetlam stronę – styl nie został zastosowany.
Jakieś sugestie? Muszę to rozwiązać dla klienta, który będzie aktualizował tę stronę WP i nie jest zbyt biegły w obsłudze.
Marcello
Miałem ten sam problem, gdzie tagi nie były stosowane do kodu. Naprawiłem to, ustawiając „wrapper” na „false”. Nie znam technicznych powodów, po prostu przetestowałem i zadziałało. Mam nadzieję, że pomoże!
hugotom
Miałem ten sam problem, że arkusz stylów nie jest zapisywany.
Rozwiązanie
Jeśli masz już ten arkusz stylów nagrywania w pliku functions.php, powinieneś dodać właśnie tam arkusz stylów custom-editor-style.css
Przykład:
function styles_theme(){ wp_enqueue_style(‘bootstrap_css’, get_template_directory_uri() . ‘/sources/bootstrap/bootstrap.min.css’); wp_enqueue_style(‘main_css’, get_template_directory_uri() . ‘/style.css’); wp_enqueue_style(‘theme_css’, get_template_directory_uri() . ‘/custom/css/theme.css’); wp_enqueue_style(‘editor_css’, get_template_directory_uri() . ‘/custom-editor-style.css’); // TUTAJ };
Raphael Landau
Użyłem tego i miałem również problem, gdzie styl/klasa jest implementowany do całego akapitu. Dzieje się tak, ponieważ ustawiłeś format stylu jako „block”. (‘block’ => ‘span’,).
Szybko przeglądając oficjalny kodeks Wordpress, odkrywa znacznie więcej opcji formatowania stylu.
http://codex.wordpress.org/TinyMCE_Custom_Styles
Ponieważ `span` jest domyślnie stylem wbudowanym, powinieneś zastąpić „block” przez „inline”, i voila! Twoje stylowanie powinno działać zgodnie z oczekiwaniami.
więc w skrócie:
array(
‘tytuł’ => ‘Twój Tytuł’,
‘inline’ => ‘span’,
‘klasy’ => ‘twoja-klasa’,
‘opakowanie’ => true,
),
nemaha
Cześć,
świetny tutorial, dzięki za niego! Ja też mam problem, że styl (span) jest stosowany do całego akapitu. Co zamierzam zrobić: napisać nagłówek i sformatować go jako nagłówek 1, a następnie zaznaczyć tylko jedno konkretne słowo w tym nagłówku, aby dodać niestandardowy styl. Czy są jakieś aktualizacje dotyczące rozwiązania tego problemu? Dzięki!
bekee
ja też mam problem, gdzie styl jest stosowany do całego akapitu, a nie tylko do zaznaczonego elementu. Czy są jakieś aktualizacje w tej sprawie? dzięki!
Debbie
Mam ten sam problem. Podświetlam jedno słowo, ale efekt obejmuje cały akapit.
James
Znalazłem kilka problemów. Wydaje się, że działa, ale nie tak, jak oczekiwano. Nie sprawdzi się dla kogoś, kto nie zna kodu.
1. Podświetl pojedyncze słowo w akapicie, aby dodać, ale jest dodawane do całego akapitu, a nie tylko do podświetlonego słowa.
2. Brak możliwości usunięcia css bez edycji kodu. Mój klient nie zajmuje się kodem! Próbowałem nawet stworzyć klasę .nothing, ale nowa klasa jest dodawana tylko do innych, nie zastępuje istniejącej klasy.
Zespół WPBeginner
Zobacz nasz przewodnik, jak naprawić typowe problemy z obrazami w WordPressie.
Sheikh Zuhaib Siddiqui
Hej, mam błąd w dodawaniu mediów. Kiedy próbuję przesłać jakiekolwiek media, tylko się ładuje i nie pokazuje żadnych mediów ani nie mogę ich przesłać... Dajcie znać, co jest nie tak???
Ale to działa dobrze …………tylko błąd w narzędziu do przesyłania multimediów. proszę o rozwiązanie.
Marlice
Cześć. Dziękuję za ten świetny tutorial. Mam problem z treścią, która jest już w edytorze. Jeśli zaznaczę słowo lub fragment tekstu i wybiorę styl (na przykład „niebieski przycisk” – z Twojego kodu), to opakowuje nie tylko zaznaczone słowo lub fragment tekstu. Zamiast tego zaznacza całą treść i umieszcza na niej tag span z klasą .blue button. Próbowałam to zrobić kilka razy z innymi stronami i wpisami – zawsze to samo: jeśli treść już tam była i ją zaznaczyłam, to cała treść otrzymuje klasę span. Nie dzieje się tak, jeśli opakowuję nowy edytowany tekst na stronie/wpisie – wtedy wszystko działa dobrze. Czy ktoś jeszcze ma takie zjawisko?
Dziękuję,
Ute
John-Henry Ross
Cześć. Wypróbowałem tę metodę i działa jak marzenie, dokładnie tego szukałem, dziękuję. Chciałbym tylko dowiedzieć się, czy jest sposób na dodanie stylów do podfolderu zamiast tylko dodawania ich pod przyciskiem formatowania. Np. dodać podfolder nagłówków ze wszystkimi stylami nagłówków, dodać podmenu div ze stylami div itp.
dave
Dzięki!
Świetnie jest pokazać też 2 metody… moi klienci drżą ze strachu na myśl o obsłudze jakiegokolwiek kodu.
I will sometimes use custom fields to “force” safe additional styles, but the TinyMCE can be handled by some people, so I’ll kee that in mind.
Ciao, Dave
Zespół WPBeginner
nie musisz dodawać kropki
classes’ => ‘.alert-blue’,
Powinno być
classes’ => ‘alert-blue’,
Jeff Gaudette
Niestety, to nie zadziałało. Usunąłem kropkę, ale nadal nic nie działa w edytorze. Wiem, że nie jesteś punktem pomocy technicznej, ale oto zrzut ekranu, jeśli jesteś zainteresowany: http://screencast.com/t/JI0zMvcH
Dzięki za wszystkie świetne rzeczy, które publikujesz!
Zespół WPBeginner
Czy możesz wkleić kod, który dodałeś w pliku functions.php. Wklej również CSS, którego używasz dla tych przycisków.
Jeff Gaudette
Jasne. Funkcje:
/*
* Funkcja zwrotna do filtrowania ustawień MCE
*/
function my_mce_before_init_insert_formats( $init_array ) {
// Zdefiniuj tablicę style_formats
$style_formats = array( // Każdy element tablicy to format z własnymi ustawieniami array( 'title' => 'Alert', 'block' => 'span', 'classes' => 'entry p.alert-blue', 'wrapper' => true )
),
array(
‘title’ => ‘Niebieski alert’,
‘block’ => ‘p’,
‘classes’ => ‘alert-blue’,
‘wrapper’ => true,
),
array(
‘title’ => ‘Niebieski przycisk’,
‘block’ => ‘span’,
‘classes’ => ‘alert-blue-button’,
‘wrapper’ => true,
),
);
// Wstaw tablicę, zakodowaną w formacie JSON, do ‘style_formats’
$init_array[‘style_formats’] = json_encode( $style_formats );
return $init_array;
}
// Dołącz callback do 'tiny_mce_before_init'
add_filter( 'tiny_mce_before_init', 'my_mce_before_init_insert_formats' );
CSS
.alert-blue{
background: none repeat scroll 0 0 #E7F4FD;
border: 1px solid #C5D7E3;
color: #3A5971;
font-size: 18px;
line-height: 24px;
text-align: center;
margin: 0 0 15px !important;
padding: 15px 25px;
width: auto;
}
Zespół WPBeginner
Czy dodałeś CSS do swojego arkusza stylów?
Upewnij się, że reguły stylu dodane w CSS pasują do klas dodanych w funkcji zwrotnej, aby filtrować ustawienia MCE.
Kemi O
TinyMCE Advanced Professsional Formats and Styles jest obsługiwany tylko do wersji WP 3.6.1
Keely Worth
Unikam edytora wizualnego jak zarazy! Używam go tylko wtedy, gdy muszę się do niego przełączyć, aby użyć wbudowanego przycisku skrótów motywu. W przeciwnym razie – nigdy go nie używam.
Blair2004
Próbowałem pierwszej metody, nowe style są dostępne, ale gdy wybieram jeden, nic się nie dzieje...
Jeff Gaudette
Próbuję to zrobić za pomocą bloku i nic mi nie wychodzi. Kod wygląda tak:
array( ‘title’ => ‘Alert Blue’, ‘block’ => ‘p’, ‘classes’ => ‘.alert-blue’, ‘wrapper’ => true, ),
Działa, gdy używam span, ale wymaga to klasy span, której nie mogę użyć.
Kiedy używam powyższego kodu, nic się nie dzieje w edytorze wp. Zaznaczam tekst, klikam opcję formatowania Alert Blue i nic się nie dzieje: http://screencast.com/t/dijujZ2ZdqBy
Jakieś rady?