Wsparcie » Zaawansowane » 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]

Viewing 14 replies - 16 through 29 (of 29 total)
  • 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 🙁

    Paweł

    (@mrpauloen)

    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 HTML

    Ale 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:

    Home

    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 linii 141.

    ok, nie powiedziałeś mi gdzie należy wstawić formułkę do function.php, więc wstawiłem ją na sam koniec

    Beztytulu448832e4bd0e9909.png

    Jesli chodzi o ten plik editor.style.css to umieściłem go w katalogu theme

    Beztytulu2244e963b171ee6bb.png

    Ale niestety nie mam bladego pojęcia jak przypisać styl i wielkośc czcionki do konkretnego nagłówka. Plik jest narazie pusty.

    • Ta odpowiedź została zmodyfikowana 5 miesięcy temu przez  michaha.
    • Ta odpowiedź została zmodyfikowana 5 miesięcy temu przez  michaha.
    • Ta odpowiedź została zmodyfikowana 5 miesięcy temu przez  michaha.

    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 5 miesięcy temu przez  michaha.
    Paweł

    (@mrpauloen)

    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 5 miesięcy temu przez  Paweł.

    2d772c63097e0f909.png
    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 5 miesięcy temu przez  michaha.
    Paweł

    (@mrpauloen)

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

    • Ta odpowiedź została zmodyfikowana 4 miesięcy, 4 tygodnie temu przez  michaha.
    • Ta odpowiedź została zmodyfikowana 4 miesięcy, 4 tygodnie temu przez  michaha.

    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

    Beztytulu09201bf67abac6de.png

    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 (?)

    • Ta odpowiedź została zmodyfikowana 4 miesięcy, 3 tygodnie temu przez  michaha.
    • Ta odpowiedź została zmodyfikowana 4 miesięcy, 3 tygodnie temu przez  michaha.

    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ść 😉

Viewing 14 replies - 16 through 29 (of 29 total)
  • You must be logged in to reply to this topic.