Jak zmienić rozmiar czcionki w WordPressie? Trzy sposoby
Ten materiał ma 4 lata — ceny i warunki mogły się zmienić.
Żeby tekst na stronie czytało się lepiej, często trzeba zmienić rozmiar czcionki w WordPressie. Można to zrobić wtyczką albo dopisując kilka linijek kodu do pliku CSS. Jest i trzeci sposób — zmienić rozmiar czcionki w edytorze Gutenberg.
Postępuj zgodnie z instrukcją, a pójdzie prosto i szybko.
Sposób 1. Zmiana rozmiaru czcionki wtyczką Advanced Editor Tools
Advanced Editor Tools to całkowicie darmowy dodatek, który przywraca w edytorze klasyczny pasek narzędzi.
Wtyczkę znajdziesz w oficjalnym repozytorium WordPressa. Po standardowej instalacji i aktywacji przejdź do jej ustawień.
Wtyczka zaproponuje przełączenie między edytorem blokowym Gutenberg a klasycznym edytorem TinyMCE. Wybierz drugi wariant i zapisz zmiany.
Upewnij się, że zaznaczyłeś pole wyboru
Co dalej, jeśli wybrałeś klasyczny edytor jako jedyny wariant.
Przejdź do Wpisy → Dodaj nowy albo otwórz do edycji jeden z istniejących wpisów. Jeśli wybrałeś wyłącznie wariant klasyczny, zobaczysz mniej więcej to.
Dalej jest już bardzo prosto. Dodaj tekst, zaznacz fragment, którego rozmiar chcesz zmienić, i wskaż nowy rozmiar.
Efekt wygląda tak.
Sposób 2. Zmiana rozmiarów za pomocą CSS
Pierwszy sposób jest prostszy. Nie sprawdzi się jednak, jeśli korzystasz z Elementora albo innego kreatora stron tego typu. Zmiana rozmiaru czcionki przez CSS jest nieco trudniejsza, ale to rozwiązanie uniwersalne i uchodzi za klasyczne.
Ten wariant jest trudniejszy, ale tylko wtedy, gdy nigdy nie pracowałeś z CSS. Instrukcja od Host4Biz pomoże zrobić wszystko szybko i poprawnie.
Kod CSS można dodać przez edytor albo przez personalizator (customizer). Zobaczmy, jak to zrobić. Zaletą pracy z CSS jest to, że rozmiar czcionki zmienisz w dowolnym elemencie strony bez wtyczek i niezależnie od pozostałych części strony.
Przejdźmy przez to krok po kroku:
W kokpicie wybieramy pozycję menu Wygląd → Dostosuj.
Następnie w otwartym menu wybieramy Dodatkowy kod CSS.
W kolejnym kroku dodajemy potrzebny kod w polu po prawej.
Teraz ustalmy, jaki dokładnie kod dodać.
- Żeby zmienić czcionkę w całości, wklej:
body {
font-size: 1.25rem;
}
Wartość 1,25 można zastąpić inną liczbą.
2. Żeby zmienić czcionkę w akapitach.
p {
font-size: 25px;
}
3. Żeby zmienić czcionkę w części nagłówków
h2 {
font-size: 2.5em;
}
Reguła zadziała tylko na nagłówki oznaczone jako h2.
4. Zmiana rozmiaru czcionki w menu bocznym
.sidebar li {
font-size: 12px;
}
5. Żeby powiększyć lub zmniejszyć tekst w stopce
.footer {
font-size: 150%;
}
6. Zmiana rozmiarów czcionki dla określonych rozmiarów ekranu
html {
font-size: 18px;
}
@media (min-width: 900px) {
html {
font-size: 20px;
}
}
W stylach CSS można używać kilku jednostek miary:
- Em — 1em odpowiada rozmiarowi czcionki na stronie, czyli jeśli rozmiar czcionki wynosi 12pt, to 1em = 12pt.
- Piksele — piksel to jeden punkt na ekranie komputera albo urządzenia mobilnego.
- Punkty — tę jednostkę zapożyczono z druku. Jeden punkt to 1/72 cala.
- Procenty — ta wartość domyślnie wynosi 100% i zmienia się, gdy ją zwiększasz albo zmniejszasz.
Sposób 3. Zmiana rozmiaru czcionki w edytorze Gutenberg
Gutenberg stał się standardowym edytorem WordPressa. Możliwości zmiany czcionki daje już od wersji 5.3, gdy był jeszcze jedną z wtyczek.
W Gutenbergu tekst dodaje się przez jeden z bloków edytora. Żeby zmienić rozmiar czcionki, wystarczy zaznaczyć tekst i wybrać potrzebny rozmiar w menu po prawej.
Jak widzisz, wszystko idzie bardzo szybko i prosto.
Podsumowanie
Łatwa w czytaniu czcionka potrafi poważnie wpłynąć na zachowanie odwiedzających i konwersję strony. WordPress daje sporo możliwości formatowania tekstu, w tym zmiany czcionki.
Powiększyć lub zmniejszyć czcionkę można wtyczkami, w edytorze Gutenberg albo edytując pliki CSS.
Rozwijaj swój biznes online razem z Host4Biz i czytaj nasz blog.