Zmiana stylu nagłówków ustawionych domyślenie w edytorze
-
Cześć !
Od miesiąca prowadzę pierwszą w życiu stronę internetową. Mam do Was mam nadzieje że niegłupie pytanie.
W edytorze tekstowym wpisów jest jakieś 6 nagłówków. Są one domyślnie ustawione w czcionce która mi nie bardzo odpowiada i za każdym razem musze ją ręcznie zmieniać gdy wstawiam nagłówek. Czy jest jakiś sposób aby to zmienić i ustawić swoje własne nagłówki ?
Przeszukałem cały internet i nic nie udało mi się znlazleść. Nie mogę też znaleśc tego w kodzie. Bardzo prosze o pomoc.
Strona przy której potrzebuję pomocy: [zaloguj się aby zobaczyć ten link]
-
Nie bardzo to rozumiem. Mógłbyś mi powiedzieć dokładniej jak to zrobić ?
add_editor_style( 'css/custom-editor-style.css' );
– obojętnie gdzie to wstawie w tym functions.php ?A ten arkusz stylów to wogóle już nie wiem o co chodzi 🙁
Chyba najpierw to trzeba wyjaśnić inną rzecz.
Po co są style edytora?
Otóż.
Style edytora są po to, żeby odzwierciedlić style strony. Żeby chociaż po części odzwierciedlać formatowanie jakie masz na blogu (front-end).Ale one <u>w żaden sposób</u> nie wpływają na to, co się pojawi na stronie, bo to, co jest na stronie jest formatowane za pomocą arkusza stylów o nazwie:
style.css
, który fizycznie znajduje się w katalogu twojego motywu.Natomiast to, co wstawisz do edytora (tekst, html, zdjęcia itd), już ma wpływ. Bowiem to jest zapisywane w bazie danych i potem wyświetlanie na stronie.
Czyli, jeżeli używasz wtyczki, która wstawia taki oto kod:
<h1><span style="font-family: 'arial black', sans-serif;">Header one</span></h1>
lub:
<h1><strong><span style="font-size: 18px; font-family: 'Open Sans';">Nowotwory złośliwe – bezlitosne statystki</span></strong></h1>
bo chcesz sobie zmienić styl nagłówka, lub nawet będziesz chciał mienić kolor tekstu, to to pojawi się on na stronie (będzie miało wpływ), bo style wstawiane są bezpośrednio do znacznika HTMLAle jeżeli chociaż trochę studiowałeś kaskadowe arkusze stylów i język HTML, to powinieneś wiedzieć, że istnieje coś takiego jak hierarchia w stylach.
Dlatego wstawienie stylów
inline
, czyli bezpośrednio do znacznika za pomocą atrybutu:style
, powoduje, że ma najwyższą hierarchie i nic, nawet zmiana w arkuszu na !important – Nie Pomoże.Dlatego, u ciebie nic się nie zmieniło.
Więc, czy dodanie stylów edytora ci ma w czymś pomóc?
Jeżeli chcesz odzwierciedlać formatowanie – tak – to proszę bardzo:
W plik
function.php
, wstawiasz:/** * Registers an editor stylesheet for the theme. */ function wpdocs_theme_add_editor_styles() { add_editor_style( 'editor-style.css' ); } add_action( 'admin_init', 'wpdocs_theme_add_editor_styles' );
tak jak w dokumentacji:
Następnie w katalogu motywu tworzysz plik o nazwie
editor-style.css
i w nim dodajesz regułki.Ale tak jak wspomniałem wcześniej. Stylami edytora nie wpływasz na formatowanie na stronie docelowej.
To się robi przy pomocy arkusza stylów:style.css
, znajdującego się w twoim motywie.Jeżeli chcesz zmienić czcionkę dla
h1
, po prostu dodaj cechę:font-family
, do swojego arkusza, w linii141
.ok, nie powiedziałeś mi gdzie należy wstawić formułkę do
function.php
, więc wstawiłem ją na sam koniecJesli chodzi o ten plik
editor.style.css
to umieściłem go w katalogu themeAle niestety nie mam bladego pojęcia jak przypisać styl i wielkośc czcionki do konkretnego nagłówka. Plik jest narazie pusty.
w dodatku troszkę mi się strona posypała:
Warning: Cannot modify header information – headers already sent by (output started at /home/michaha/ftp/wp/wp-content/themes/colormag/functions.php:528) in /home/michaha/ftp/wp/wp-includes/pluggable.php on line 1216
I nie mogę tego cofnąć:
Operacja nie powiodła się. Twoje zmiany nie zostały zachowane. Proszę spróbować ponownie. Istnieje prawdopodobieństwo, że będzie trzeba ręcznie poprawić i wgrać plik na serwer używając FTP.
- Ta odpowiedź została zmodyfikowana 7 years, 1 months temu przez michaha.
Tak to właśnie jest, jak się używa edytora online.
Powinien być zakazany.Funkcje wstawiłeś za znacznikiem zamykający PHP w lini 527. Usuń to.
A plik ma być w głównym katalogu Twojego motywu.
- Ta odpowiedź została zmodyfikowana 7 years, 1 months temu przez Paweł.
Wstawiłem to teraz bezpośrednio do pliku function.php ( jakiś inny mi się wydaje niż w tym edytorze on-line). No i usunałem też znacznik.Nie wiem tylko jaką formułę wpisać do css. Masz może szablon takiego pliku. Ja potrafie w tych programch tylko parametry zmieniać,a nie za bardzo mi wychodzi samo programowanie.
- Ta odpowiedź została zmodyfikowana 7 years, 1 months temu przez michaha.
Zajrzyj sobie na przykład do motywu
twenty sixteen
, powinien on znajdować się u Ciebie na serwerze…I broń Cię Panie Boże nie używaj notatnika tylko Notepad++
I broń Cię Panie Boże nie używaj notatnika tylko Notepad++
czego? a może być na przykład wordpad ?
Udało mi się osiągnąć częściowy sukces. Mój plik
editor-style.css
– wygląda tak jak poniżej. Wywaliłem wszystko to co uznałem za niepotrzbne.body { color: #1a1a1a; font-family: 'Open Sans'; font-size: 16px; font-weight: 400; line-height: 1.75; margin: 20px 40px; max-width: 600px; vertical-align: baseline; } body.post-type-page { max-width: 840px; } h1, h2, h3 h1 { font-size: 20px; line-height: 1.6; } h2 { font-size: 18px; line-height: 1.4; } h3 { font-size: 16px; line-height: 1.2; }
NIe wszystkie wartości uległy zmianie tak jak powinny. Na przykład wielkość czcionki w h2 i h3 jest teraz 14pt. Reszta o dziwo jest dobrze.Czy ten plik może być przez coś nadpisywany? Dziwne jest też to że zmiany wprowadzone do tego pliku nie pojawiają się od razu a najczęsciej na drugi dzień.
I znów masz błędy:
h1, h2, h3 h1 { font-size: 20px;
Jakieś zbłąkane owieczki te nagłówki na początku?
NIe wszystkie wartości uległy zmianie tak jak powinny
Jeden przecinek mniej i wszystko się wali.
Zazwyczaj globalne selektory powinny wystarczyć, ale jak nie, to próbuj dodać
!important
i sprawdzać w Konsoli czy przejęło style. Jak nie przejęło style, to musisz je bardziej sprecyzować.Może dodanie do każdego atrybutu:
#tinymce
pomoże np:body#tinymce.wp-editor { font-family: Arial, Helvetica, sans-serif; margin: 10px; } body#tinymce.wp-editor a { color: #4CA6CF; }
a może być na przykład wordpad ?
Nie może być.
Dziwne jest też to że zmiany wprowadzone do tego pliku nie pojawiają się od razu a najczęsciej na drugi dzień.
Usuń pamięć podręczną z przeglądarki. F12 i gdy konsola jest otworzona: Ctrl + Shift + R lub 3 sekundy trzymasz „Odśwież”
Nie wszystko zmienia. Wogóle to jest trochę dziwna sytuacja, bo co innego mam w pliku editor-style a zupełnie inną formułę podaje mi jak daje – „inspect”. Żeby nie było że gadam głupoty to wklejam:
– najpierw mój obecny editor-style.css
body#tinymce.wp-editor { color: #1a1a1a; font-family: 'Open Sans'; font-size: 15px !important; font-weight: normal; line-height: 1.4; margin: 5px 5px; } h1,h2,h3 { margin: 20px 0 10px !important; font-weight: normal; } h1#tinymce.wp-editor { font-size: 20px !important; line-height: 1.6 !important; } h2#tinymce.wp-editor { font-size: 18px !important; line-height: 1.4 !important; } h3#tinymce.wp-editor { font-size: 16px !important; line-height: 1.2 !important; }
– a teraz zbadanie nagłówka h1
na przykład to max-width było wcześniej umieszczone w atrybucie body. Po wywaleniu z kodu dalej się wyświetla nie wiem czemu (?)
Podstawy CSS się kłaniają panie Michale.
Źle używasz zapisów selektorów.
Atrybut i klasa
#tinymce.wp-editor
są rodzicami czyli elementami nadrzędnym a ty traktujesz je jako podrzędne i przypisujesz nagłówkom:h1#tinymce.wp-editor { font-size: 20px !important;
Dlatego nie działa a nagłówki bez tych dodatków już działają.
W konsoli masz wyraźnie podaną ścieżkę dostępu:
h1
jest po#tinymce
Podstawy CSS się kłaniają panie Michale.
No niestety, uczę się tego na żywca.
Mogłem coś dalej w skaładni przekręcić bo wczytuje mi coś inne:
body#tinymce.wp-editor { color: #1a1a1a; font-family: 'Open Sans'; font-size: 15px !important; font-weight: normal; line-height: 1.4; margin: 5px 5px; } h1,h2,h3,pre { margin: 20px 0 10px !important; font-weight: normal; } #tinymce.wp-editor h1 { font-size: 20px !important; line-height: 1.6 !important; } #tinymce.wp-editor h2 { font-size: 18px !important; line-height: 1.4 !important; } #tinymce.wp-editor h3 { font-size: 16px !important; line-height: 1.2 !important; } #tinymce.wp-editor pre { font-size: 7px !important; line-height: 1.2 !important; font-style: oblique; }
A nie lepiej zakupić sobie wtyczkę Divi builder lub beaver builder i skończyć raz na zawsze z grzebaniem w cssach ?
niestety ale budżet mojej strony to 0zł i 0gr.
Poza tym takie grzebanie w css nie jest złe i może się przydać na przyszłość 😉
- Temat ‘Zmiana stylu nagłówków ustawionych domyślenie w edytorze’ jest zamknięty na nowe odpowiedzi.