17 oszczędzających czas wskazówek CSS dla użytkowników WordPressa

Opublikowany: 2023-03-13

WordPress oferuje nieograniczone możliwości projektowania i dostosowywania witryny internetowej. W tym artykule podzielimy się praktycznymi wskazówkami CSS specjalnie dla użytkowników WordPressa, od stylizacji nagłówka po poprawianie czcionek.

Chociaż WordPress oferuje mnóstwo gotowych motywów i szablonów, czasami trzeba wziąć sprawy w swoje ręce i wprowadzić dostosowania za pomocą CSS.

Jeśli kiedykolwiek zadałeś którekolwiek z tych pytań podczas pracy nad witryną WordPress:

  • „Jak usunąć przycisk „Czytaj więcej”?”
  • „Jak mogę zmienić kolor tego łącza?”
  • „Jak uniemożliwić kliknięcie tego linku, ale zachować tekst na stronie?”

…więc czytaj dalej, aby poznać kilka cennych trików CSS dla swojej witryny.

W tym samouczku omówimy:

  • Wskazówki dotyczące CSS WordPressa
    1. Wyśrodkuj element w poziomie i w pionie
    2. Zmień kolor łącza
    3. Usuń link
    4. Wyłącz link (link pozostaje widoczny, ale użytkownicy nie mogą go kliknąć)
    5. Zmień kolor linków po najechaniu myszką
    6. Linki stylistyczne
    7. Styl przycisku
    8. Zmień czcionkę sekcji
    9. Utwórz przylepny nagłówek
    10. Utwórz lepki nagłówek z efektem cienia
    11. Dodaj kolor tła do sekcji
    12. Zmień kolor tła ciała
    13. Zmień kolor określonego słowa lub frazy
    14. Utwórz ramkę wokół obrazu
    15. Utwórz efekt najechania na obraz
    16. Stylizuj formularz
    17. Utwórz responsywny układ
  • Przenieś swoje umiejętności CSS na wyższy poziom

Wskazówki dotyczące CSS WordPressa

Aby wdrożyć te wskazówki, musisz wiedzieć tylko dwie rzeczy:

  • Jak działa CSS
  • Jak dodać CSS do WordPressa

Uwaga: CSS nie jest ryzykowny, więc jeśli popełnisz błąd, możesz po prostu usunąć swój kod lub go zmodyfikować… to niczego nie zepsuje :)

Skoro już o tym mowa, przejdźmy od razu do praktycznych wskazówek CSS z przykładami, abyś mógł wypróbować je na własnej witrynie WordPress:

Wyśrodkuj element w poziomie i w pionie

Aby wyśrodkować element (taki jak obraz, tekst lub element div) zarówno w poziomie, jak i w pionie, użyj następującego kodu CSS:

.element {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

W tym kodzie właściwość position: relative służy do pozycjonowania elementu względem jego najbliższego pozycjonowanego przodka. top: 50% i left: 50% właściwości przesuwają element na środek jego kontenera. Na koniec właściwość transform: translate(-50%, -50%) centruje element zarówno w poziomie, jak i w pionie, przesuwając go do tyłu o 50% jego własnej szerokości i wysokości.

Zmień kolor łącza

.item-class{
color : blue;
}

Możesz używać kolorów takich jak biały, czarny, niebieski, czerwony… ale możesz chcieć użyć określonych kolorów.

W tym przypadku możesz to zrobić w następujący sposób:

.item-class{
color : #F7F7F7;
}

Jeśli chcesz utworzyć paletę kolorów do projektu swojej witryny internetowej, spróbuj użyć narzędzia Paletton. To bardzo pomocne!

Uwaga: Jeśli chcesz połączyć elementy, jest to całkiem proste.

Załóżmy na przykład, że chcesz wyłączyć kliknięcie i ponownie umieścić link na czarno.

Możesz użyć tego kodu:

.item-class{
pointer-events : none;
color : black;
}

Usuń link

.item-class{
display : none;
}

Uwaga: czasami może być konieczne umieszczenie a po klasie, aby zadziałała, na przykład:

.item-class a{
display : none;
}

Spróbuj dodać a lub poeksperymentuj bez niego, aby sprawdzić, czy Twój kod działa, czy nie. Po prostu dodaj swój CSS, zapisz i sprawdź swój frontend.

Wyłącz link (link pozostaje widoczny, ale użytkownicy nie mogą go kliknąć)

Uwaga: w tym celu zawsze lepiej jest zmodyfikować HTML, ale jeśli CSS może być łatwiejszy lub jedynym możliwym rozwiązaniem, użyj tego kodu:

.item-class{
pointer-events: none;
}

Zmień kolor linków po najechaniu myszką

Możesz zmienić kolor linków, gdy użytkownik najedzie na nie kursorem, używając następującego kodu CSS:


a:hover {
color: red;
}

W tym kodzie selektor a:hover celuje we wszystkie linki na stronie, na której użytkownik aktualnie się znajduje. Właściwość color: red zmienia kolor tekstu na czerwony.

Linki stylistyczne

Aby nadać styl linkom w swojej witrynie, użyj następującego kodu CSS:


a {
color: #0077cc;
text-decoration: none;
border-bottom: 1px solid #0077cc;
transition: all 0.2s ease-in-out;
}

a:hover {
color: #005299;
border-bottom: 1px solid #005299;
}

W tym kodzie a służy do stylizowania wszystkich linków na stronie. Właściwość color ustawia kolor łączy, a właściwość text-decoration usuwa domyślne podkreślenie. Właściwość border-bottom dodaje subtelny efekt podkreślenia. Właściwość transition zapewnia płynny efekt przejścia, gdy użytkownik najedzie kursorem na łącze. Selektor a:hover służy do stylizacji łącza, gdy użytkownik najedzie na niego kursorem.

Styl przycisku

Użyj poniższego kodu, aby nadać styl przyciskowi:


.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}

W tym kodzie do stylizowania przycisku używane są różne właściwości, w tym właściwości background-color i color określające wygląd przycisku, właściwość padding określająca rozmiar przycisku oraz właściwość cursor służąca do zmiany wskaźnika myszy po najechaniu myszką na przycisk.

Zmień czcionkę sekcji

Zmień czcionkę sekcji swojej witryny, korzystając z następującego kodu CSS:


.section {
font-family: Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
}

W tym kodzie właściwość font-family ustawia czcionkę na Arial lub podobną czcionkę bezszeryfową, właściwość font-size ustawia rozmiar czcionki na 16 pikseli, a właściwość line-height ustawia odstępy między wierszami tekstu na 1,5 razy rozmiar czcionki.

Utwórz przylepny nagłówek

Jeśli chcesz utworzyć nagłówek, który będzie wyświetlany u góry strony podczas przewijania przez użytkownika, możesz użyć następującego kodu CSS:


.header {
position: fixed;
top: 0;
left:0;
width: 100%;
background-color: #333;
color: #fff;
z-index: 9999;
}

W tym kodzie właściwość position: fixed ustawia nagłówek na górze rzutni, a właściwość top: 0 umieszcza go na samej górze strony. Właściwość width: 100% zapewnia, że ​​nagłówek obejmuje całą szerokość rzutni. Właściwości background-color i color służą do stylizacji nagłówka, a właściwość z-index: 9999 gwarantuje, że nagłówek pojawi się na górze wszystkich innych elementów strony.

Utwórz lepki nagłówek z efektem cienia

Aby utworzyć przyklejany nagłówek z efektem cienia, który pozostaje nieruchomy u góry strony podczas przewijania użytkownika, użyj tego kodu CSS:


header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #fff;
z-index: 999;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.content {
padding-top: 100px;
}

W tym kodzie właściwość position: fixed służy do umieszczenia nagłówka na górze strony. Właściwości top: 0 i left: 0 umieszczają nagłówek w lewym górnym rogu strony. Właściwość width: 100% ustawia szerokość nagłówka na pełną szerokość strony. Właściwość background-color ustawia kolor tła nagłówka, a właściwość z-index zapewnia, że ​​nagłówek pojawi się na górze innych elementów strony. Na koniec właściwość box-shadow dodaje subtelny efekt cienia do nagłówka. Selektor .content służy do dopełnienia górnej części strony, tak aby treść nie została zakryta przez stały nagłówek.

DARMOWY EBOOK
Twój plan działania krok po kroku prowadzący do dochodowego biznesu związanego z tworzeniem stron internetowych. Od pozyskiwania większej liczby klientów po skalowanie jak szalone.

Pobierając ten ebook, wyrażam zgodę na okazjonalne otrzymywanie e-maili od WPMU DEV.
Dbamy o to, aby Twój e-mail był w 100% prywatny i nie spamował.

DARMOWY EBOOK
Planuj, twórz i uruchamiaj następną witrynę WP bez żadnych problemów. Nasza lista kontrolna sprawia, że ​​proces jest łatwy i powtarzalny.

Pobierając ten ebook, wyrażam zgodę na okazjonalne otrzymywanie e-maili od WPMU DEV.
Dbamy o to, aby Twój e-mail był w 100% prywatny i nie spamował.

Dodaj kolor tła do sekcji

Czy chcesz dodać kolor tła do sekcji swojej witryny? Następnie użyj następującego kodu CSS:


.section {
background-color: #f2f2f2;
padding: 20px;
}

W tym kodzie właściwość background-color: #f2f2f2 ustawia kolor tła na jasnoszary, a właściwość padding: 20px dodaje 20 pikseli przestrzeni wokół zawartości sekcji.

Zmień kolor tła ciała

Dodaj ten kod, aby zmienić kolor tła korpusu swojej witryny:


body {
background-color: #f5f5f5;
}

W tym kodzie właściwość background-color ustawia kolor tła na jasnoszary.

Zmień kolor określonego słowa lub frazy

Aby zmienić kolor konkretnego słowa lub frazy w bloku tekstu, możesz użyć następującego kodu CSS:


p span {
color: red;
}

W tym kodzie selektor p span wybiera dowolny element span , który pojawia się w elemencie p . Następnie możesz owinąć słowo lub frazę, na którą chcesz kierować, elementem span w kodzie HTML, w następujący sposób:

<p>Lorem ipsum dolor sit amet, <span>consectetur adipiscing elit</span>. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

Spowodowałoby to, że wyrażenie „consectetur adipiscing elit” pojawiłoby się na czerwono.

Utwórz ramkę wokół obrazu

Oto jak dodać obramowanie wokół obrazu:


img {
border: 2px solid #ccc;
}

W tym kodzie właściwość border ustawia szerokość, styl i kolor obramowania. Wartość 2px ustawia szerokość obramowania na 2 piksele, solid ustawia styl na linię ciągłą, a #ccc ustawia kolor na jasnoszary.

Utwórz efekt najechania na obraz

Użyj tego fragmentu kodu, aby utworzyć efekt najechania na obraz:


img:hover {
opacity: 0.8;
}

W tym kodzie selektor img:hover wybiera obraz, gdy użytkownik najedzie na niego myszką. Właściwość opacity ustawia przezroczystość obrazu. W tym przypadku wartość jest ustawiona na 0,8, dzięki czemu obraz jest nieco przezroczysty, gdy użytkownik najedzie na niego kursorem.

Stylizuj formularz

Wystylizuj formularz na swojej stronie internetowej, używając następującego kodu CSS:


form {
background-color: #f2f2f2;
padding: 20px;
border-radius: 5px;
}

form label {
display: block;
margin-bottom: 10px;
}

form input[type="text"], form input[type="email"], form textarea {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: none;
border-radius: 3px;
box-shadow: 0 0 5px #ccc;
}

form input[type="submit"] {
background-color: #4CAF50;
border: none;
color: #fff;
padding: 10px 20px;
border-radius: 3px;
cursor: pointer;
}

W tym kodzie do stylizacji formularza używane są różne właściwości, w tym właściwości background-color , padding i border-radius wpływające na ogólny wygląd formularza. Selektor form label służy do stylizowania etykiet powiązanych z każdym polem formularza. form input[type="text"], form input[type="email"], form textarea służą do stylizowania różnych pól wejściowych formularza. Selektor form input[type="submit"] służy do stylizowania przycisku przesyłania.

Utwórz responsywny układ

Jeśli chcesz stworzyć responsywny układ, który dopasowuje się do różnych rozmiarów ekranu, użyj następującego kodu CSS:


@media (max-width: 768px) {
/* Styles for screens smaller than 768px */
.container {
width: 100%;
}

.menu {
display: none;
}

.mobile-menu {
display: block;
}
}

@media (min-width: 769px) {
/* Styles for screens larger than 768px */
.container {
width: 768px;
margin: 0 auto;
}

.menu {
display: block;
}

.mobile-menu {
display: none;
}
}

W tym kodzie reguła @media służy do określania różnych stylów dla różnych rozmiarów ekranu. Pierwsza reguła @media dotyczy ekranów o maksymalnej szerokości 768 pikseli, a druga reguła @media dotyczy ekranów o minimalnej szerokości 769 pikseli. Różne selektory w każdej regule @media służą do dostosowywania układu i wyglądu strony w zależności od rozmiaru ekranu.

Jeszcze jedna wskazówka CSS…

Może się okazać, że Twój kod nie działa, mimo że wszystko zrobiłeś poprawnie. Może to być spowodowane tym, że istnieje już kod CSS mówiący coś innego niż Twój kod.

Aby to zastąpić, po prostu dodaj !important w ten sposób:

.item-class{
pointer-events: none !important;
}

To tylko kilka przykładów praktycznych sposobów wykorzystania CSS do ulepszenia witryny WordPress.

Dzięki CSS możliwości dostosowywania wyglądu witryny są praktycznie nieograniczone. Ucząc się i stosując te wskazówki, możesz stworzyć witrynę internetową, która będzie nie tylko atrakcyjna wizualnie, ale także zoptymalizowana pod kątem lepszego doświadczenia użytkownika.

Przenieś swoje umiejętności CSS na wyższy poziom

Niezależnie od tego, czy jesteś początkującym, czy doświadczonym zawodowym programistą lub projektantem stron internetowych, jeśli chcesz głębiej zagłębić się w korzystanie z CSS w WordPress, te dodatkowe samouczki CSS pomogą Ci poszerzyć Twoją wiedzę i umiejętności:

  • 10 prostych wskazówek dotyczących nauki CSS dla WordPressa – Praktyczne wskazówki dla początkujących, którzy chcą nauczyć się CSS specjalnie do użytku z WordPressem. Obejmuje wszystko, od zrozumienia składni CSS po używanie frameworków CSS.
  • Nauka i odwoływanie się do CSS dla WordPressa – kompleksowy przewodnik po nauce i odwoływaniu się do CSS, specjalnie do użytku z WordPress. Obejmuje takie tematy, jak korzystanie z WordPress Customizer, zrozumienie selektorów CSS i praca z motywami potomnymi.
  • 7 najlepszych witryn do wyszukiwania fragmentów CSS i inspiracji — Szukasz inspiracji do swojego kodu CSS? W tym artykule wymieniono siedem witryn internetowych oferujących fragmenty CSS i przykłady, których możesz użyć we własnej witrynie WordPress.
  • Jak stylizować obrazy w witrynie WordPress za pomocą CSS — obrazy są ważną częścią każdej witryny internetowej, a ten artykuł zawiera wskazówki, jak stylizować je za pomocą CSS. Dowiesz się, jak dodawać obramowania, zmieniać rozmiar i wyrównanie obrazu i nie tylko.
  • Jak dodać niestandardowy CSS do swojej witryny WordPress – ten artykuł przeprowadzi Cię przez proces dodawania niestandardowego CSS do Twojej witryny WordPress, korzystając zarówno z wbudowanego modułu dostosowywania, jak i wtyczek.
  • Darmowe wtyczki CSS do edycji na żywo witryny WordPress – w tym artykule wymieniono kilka bezpłatnych wtyczek CSS, które umożliwiają edycję na żywo witryny WordPress, dzięki czemu łatwiej jest zobaczyć efekty zmian CSS w czasie rzeczywistym.
  • 14 fajnych narzędzi do animacji CSS dla WordPressa – jeśli chcesz dodać animacje do swojej witryny WordPress za pomocą CSS, w tym artykule wymieniono kilka fajnych narzędzi, których możesz użyć, aby to zrobić.
  • Dodaj układy murów i siatek do swojej witryny WordPress za pomocą CSS – w tym artykule wyjaśniono, jak używać CSS do dodawania układów murów i siatek do witryny WordPress, tworząc bardziej atrakcyjny wizualnie projekt.
  • 25 porad ekspertów dotyczących czystszego kodowania CSS dla WordPressa – jeśli chcesz poprawić czystość i czytelność swojego kodu CSS, w tym artykule znajdziesz 25 porad ekspertów, jak to zrobić.
  • 25 profesjonalnych wskazówek, jak ulepszyć przepływ pracy CSS — wskazówki, jak ulepszyć przepływ pracy CSS, od używania preprocesorów CSS po używanie narzędzi programistycznych przeglądarki do debugowania kodu.

Kliknij linki, aby dowiedzieć się więcej i już dziś zacznij ulepszać swoją witrynę WordPress.

Współautorzy

Kadzidło Dziękuję członkowi WPMU DEV, Antoine'owi z Incensy, za pomysł na ten post i kilka przykładów CSS użytych powyżej. Sprawdź profil partnerski agencji Incensy, aby uzyskać więcej szczegółów.

Czy przegapiliśmy jakieś fajne triki CSS, które poznałeś po drodze? Chętnie dowiemy się o nich w komentarzach!