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.✨
💡Szybkie podsumowanie: Najlepszy sposób na dodanie niestandardowych stylów
Najskuteczniejszym sposobem dodania niestandardowych stylów do edytora bloków WordPress jest dodanie fragmentu kodu PHP do swojej witryny. Pozwala to na rejestrowanie nowych wariantów stylów dla bloków, takich jak przyciski, nagłówki i cytaty.
Dla najbezpieczniejszej i najłatwiejszej metody polecam użycie wtyczki WPCode do wstawienia kodu. Pozwala to uniknąć ryzyka bezpośredniej edycji pliku functions.php Twojego motywu.
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
- Często zadawane pytania dotyczące niestandardowych stylów
Teraz przejdźmy do rzeczy!
Czym są niestandardowe style i jak mogą zmienić sposób korzystania z WordPress
Mówiąc prościej, niestandardowy styl to gotowy skrót formatowania w edytorze WordPress.
Rozwiązuje to problem ręcznego dostosowywania czcionek, kolorów i układów za każdym razem, gdy tworzysz treści, co może być czasochłonne i prowadzić do niespójności.
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 witryny przed grzebaniem w jakimkolwiek ważnym kodzie. Zobacz nasz poradnik 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 cytatów, cytatów wyskakujących i wersetów
- 🗂️ 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 oferuje również bezpłatny plan, z którego możesz korzystać. Jednak przejście na wersję Pro daje dostęp do funkcji takich jak biblioteka fragmentów kodu w chmurze, funkcja fragmentów blokowych, inteligentne logiki warunkowe i wiele innych.
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.
Świetne jest to, że możesz dostosować ten kod, aby tworzyć style również dla innych bloków. Wymaga to jednak czegoś więcej niż tylko zamiany słowa „przycisk”. Aby działało poprawnie, musisz zaktualizować dwie kluczowe części kodu:
- Nazwa bloku (Slug): W części JavaScript kodu znajdziesz
'core/button'. Jest to oficjalna nazwa bloku przycisku WordPress. Musisz zastąpić ją slugiem bloku, który chcesz stylizować (na przykład'core/heading'). - Selektory CSS: Kod CSS (np.
.is-style-fancy-button .wp-block-button__link) jest napisany specjalnie dla kodu HTML bloku przycisku. Inne bloki mają inną strukturę, więc będziesz musiał napisać nowe reguły CSS, aby je poprawnie ukierunkować.
Możesz również dostosować CSS, 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 masz wątpliwości co do samodzielnej modyfikacji kodu, asystent AI, taki jak ChatGPT, może być dobrym punktem wyjścia. Jednak uzyskanie poprawnego kodu wymaga podania mu bardzo jasnego i szczegółowego polecenia.
Na przykład, zamiast prostego zapytania, możesz podać polecenie podobne do tego:
Here is a PHP, CSS, and JS snippet that adds custom styles to the 'core/button' block in WordPress. Please adapt it to target the 'core/heading' block instead. The new style should be named 'Green Highlight' and it should add a light green background color.
Jednak zawsze zalecam testowanie kodu wygenerowanego przez AI na stronie stagingowej przed dodaniem go do swojej aktywnej witryny. Pozwala to na wyłapanie potencjalnych błędów bez ryzyka.
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ż wiesz, jak dodawać niestandardowe style do wizualnego edytora WordPress, przyjrzyjmy się innej przydatnej personalizacji: dodawaniu niestandardowych stylów do widżetów WordPress.
Dostosowywanie widżetów unikalnymi kolorami, czcionkami lub układami pomaga zapewnić ich zgodność z ogólnym projektem witryny, poprawiając doświadczenie użytkownika.
Najprostszym sposobem dodania niestandardowych stylów do widżetów WordPress jest użycie fragmentu kodu CSS, który można dodać za pomocą wtyczki takiej jak WPCode.
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 rozpocząć, zapoznaj się z naszym samouczkiem na temat dodawania niestandardowych stylów do widżetów WordPress.
Często zadawane pytania dotyczące niestandardowych stylów
Oto kilka pytań, które nasi czytelnicy często zadawali na temat dodawania niestandardowych stylów do wizualnego edytora WordPress:
Czy mogę dodać niestandardowe style bez używania wtyczki?
Tak, kod można dodać bezpośrednio do pliku functions.php Twojego motywu. Jednak zdecydowanie odradzam tę metodę dla początkujących.
Mały błąd w tym pliku może zepsuć Twoją stronę, a Twoje dostosowania zostaną utracone podczas aktualizacji motywu. Użycie WPCode jest najbezpieczniejszym i najbardziej niezawodnym podejściem.
Czy te niestandardowe style będą działać z każdym motywem WordPress?
Ogólnie tak. Kod użyty w tym samouczku rejestruje style w rdzeniu edytora WordPress, więc powinien być kompatybilny z każdym nowoczesnym, dobrze napisanym motywem.
W rzadkich przypadkach motyw z bardzo agresywnym lub źle napisanym CSS może nadpisać Twoje niestandardowe style, ale nie jest to powszechne.
Jak znaleźć poprawną nazwę (slug) dla innych bloków, które chcę stylizować?
Łatwym sposobem na znalezienie slug bloku jest przejście do edytora WordPress, wybranie interesującego Cię bloku, a następnie kliknięcie menu z trzema kropkami na pasku narzędzi bloku.
Na samym dole tego menu kliknij „Kopiuj typ bloku”. Spowoduje to skopiowanie slug bloku (np. core/image, core/quote) do schowka, który następnie możesz wkleić do fragmentu kodu.
Czy mogę stworzyć więcej niż dwa niestandardowe style dla tego samego bloku?
Absolutnie. W części JavaScript fragmentu kodu możesz po prostu zduplikować funkcję wp.blocks.registerBlockStyle(...) dla każdego nowego stylu, który chcesz dodać.
Upewnij się tylko, że każdemu z nich nadałeś unikalną nazwę i etykietę. Będziesz także musiał dodać odpowiednie reguły CSS dla każdego nowego stylu, który zarejestrujesz.
Mam 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 niestandardowych bloków WordPress oraz naszym porównaniem dopełnienia i marginesu w WordPressie.
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?