17 wskazówek CSS oszczędzających czas dla użytkowników WordPress
Opublikowany: 2023-03-13WordPress oferuje nieskończone możliwości projektowania i dostosowywania witryny. W tym artykule podzielimy się kilkoma praktycznymi wskazówkami CSS specjalnie dla użytkowników WordPress, od stylizacji nagłówka po poprawianie czcionek.
Chociaż WordPress oferuje wiele gotowych motywów i szablonów, czasami trzeba wziąć sprawy w swoje ręce i dostosować je 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 sprawić, by tego linku nie można było kliknąć, ale zachować tekst na stronie?”
... następnie czytaj dalej, aby poznać kilka cennych sztuczek CSS dla swojej witryny.
W tym samouczku omówimy:
- Porady dotyczące CSS WordPressa
- Wyśrodkuj element w poziomie iw pionie
- Zmień kolor łącza
- Usuń łącze
- Wyłącz link (link pozostaje widoczny, ale użytkownicy nie mogą go kliknąć)
- Zmień kolor linków po najechaniu myszką
- Linki stylu
- Stylizuj przycisk
- Zmień czcionkę sekcji
- Utwórz lepki nagłówek
- Utwórz lepki nagłówek z efektem cienia
- Dodaj kolor tła do sekcji
- Zmień kolor tła ciała
- Zmień kolor określonego słowa lub frazy
- Utwórz obramowanie wokół obrazu
- Utwórz efekt najechania kursorem na obraz
- Stylizuj formę
- Stwórz responsywny layout
- Przenieś swoje umiejętności CSS na wyższy poziom
Porady dotyczące CSS WordPressa
Jedyne dwie rzeczy, które musisz wiedzieć, aby wdrożyć te wskazówki, to:
- 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 zmodyfikować go… to niczego nie zepsuje :)
Mając to na uwadze, przejdźmy od razu do praktycznych wskazówek CSS z przykładami, abyś mógł wypróbować je na własnej stronie WordPress:
Wyśrodkuj element w poziomie iw pionie
Aby wyśrodkować element (taki jak obraz, tekst lub element div) zarówno w poziomie, jak iw 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. Właściwości top: 50% i left: 50% przesuwają element na środek jego kontenera. Na koniec właściwość transform: translate(-50%, -50%) centruje element zarówno w poziomie, jak iw pionie, cofając go o 50% jego własnej szerokości i wysokości.
Zmień kolor łącza
.item-class{
color : blue;
}
Możesz użyć kolorów, takich jak biały, czarny, niebieski, czerwony… ale możesz chcieć użyć określonych kolorów.
W takim przypadku możesz to zrobić w następujący sposób:
.item-class{
color : #F7F7F7;
}
Jeśli chcesz stworzyć paletę kolorów dla swojego projektu witryny, 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 przywrócić czarny kolor łącza.
Możesz użyć tego kodu:
.item-class{
pointer-events : none;
color : black;
}
Usuń łącze
.item-class{
display : none;
}
Uwaga: Czasami może być konieczne umieszczenie a po klasie, aby dział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 interfejs.
Wyłącz link (link pozostaje widoczny, ale użytkownicy nie mogą go kliknąć)
Uwaga: Zawsze lepiej jest zmodyfikować HTML, aby to zrobić, ale jeśli CSS może być prostszy lub jedyne możliwe rozwiązanie, 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 dotyczy wszystkich linków na stronie, nad którą użytkownik aktualnie najeżdża kursorem. Właściwość color: red zmienia kolor tekstu na czerwony.
Linki stylu
Aby stylizować linki 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 a służy do nadawania stylu wszystkim linkom 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 tworzy efekt płynnego przejścia, gdy użytkownik najedzie kursorem na łącze. Selektor a:hover służy do określania stylu łącza, gdy użytkownik najedzie na niego kursorem.
Stylizuj przycisk
Użyj następującego 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 różne właściwości są używane do stylizowania przycisku, w tym właściwości background-color i color dla wyglądu przycisku, właściwość padding dla rozmiaru przycisku oraz właściwość cursor do zmiany wskaźnika myszy po najechaniu kursorem na przycisk.
Zmień czcionkę sekcji
Zmień czcionkę sekcji swojej witryny, używając 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ęp między wierszami tekstu na 1,5 razy rozmiar czcionki.
Utwórz lepki nagłówek
Jeśli chcesz utworzyć nagłówek, który pozostaje na górze strony podczas przewijania strony, 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 widocznego obszaru, 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ść widocznego obszaru. background-color , color są używane do stylizowania nagłówka, a właściwość z-index: 9999 zapewnia, że nagłówek pojawia się na górze wszystkich innych elementów na stronie.
Utwórz lepki nagłówek z efektem cienia
Aby utworzyć lepki nagłówek z efektem cienia, który pozostaje na górze strony podczas przewijania strony, 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 mocowania nagłówka na górze strony. Właściwości top: 0 i left: 0 ustawiają 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 gwarantuje, że nagłówek pojawi się nad innymi elementami na stronie. Na koniec właściwość box-shadow dodaje subtelny efekt cienia do nagłówka. Selektor .content służy do dodawania wypełnienia u góry strony, aby treść nie była zakryta przez stały nagłówek.
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ół treści w sekcji.
Zmień kolor tła ciała
Dodaj ten kod, aby zmienić kolor tła treści 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 określonego 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 dotyczy dowolnego elementu span , który pojawia się w elemencie p . Następnie możesz otoczyć słowo lub frazę, na którą chcesz kierować reklamy, elementem span w kodzie HTML, na przykład:
<p>Lorem ipsum dolor sit amet, <span>consectetur adipiscing elit</span>. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
Spowoduje to, że wyrażenie „consectetur adipiscing elit” zostanie wyświetlone na czerwono.
Utwórz obramowanie 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 kursorem na obraz
Użyj tego fragmentu kodu, aby utworzyć efekt najechania kursorem na obraz:
img:hover {
opacity: 0.8;
}
W tym kodzie selektor img:hover wskazuje obraz, gdy użytkownik najedzie na niego kursorem. Właściwość opacity określa przezroczystość obrazu. W tym przypadku wartość jest ustawiona na 0,8, co powoduje, że obraz jest lekko przezroczysty, gdy użytkownik najedzie na niego kursorem.
Stylizuj formę
Stylizuj formularz w swojej witrynie za pomocą 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 różne właściwości są używane do stylizowania formularza, w tym właściwości background-color , padding i border-radius dla ogólnego wyglądu formularza. Selektor form label służy do określania stylu etykiet powiązanych z każdym polem formularza. form input[type="text"], form input[type="email"], form textarea selektor służy do określania stylu różnych pól wejściowych w formularzu. Selektor form input[type="submit"] służy do nadawania stylu przyciskowi wysyłania.
Stwórz responsywny layout
Jeśli chcesz stworzyć responsywny układ, który dostosowuje 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 jest skierowana na ekrany o maksymalnej szerokości 768 pikseli, a druga reguła @media na ekrany 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 zmienić, 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ć stronę internetową, która jest 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 programistą lub projektantem stron internetowych, jeśli chcesz zagłębić się w korzystanie z CSS w WordPress, te dodatkowe samouczki CSS pomogą Ci poszerzyć swoją wiedzę i umiejętności:
- 10 prostych wskazówek dotyczących nauki CSS dla WordPress – Praktyczne wskazówki dla początkujących, którzy chcą nauczyć się CSS specjalnie do użytku z WordPress. Obejmuje wszystko, od zrozumienia składni CSS po używanie frameworków CSS.
- Nauka i odwoływanie się do CSS dla WordPress – Kompleksowy przewodnik po nauce i odwoływaniu się do CSS specjalnie do użytku z WordPress. Obejmuje takie tematy, jak korzystanie z WordPress Customizer, rozumienie selektorów CSS i praca z motywami potomnymi.
- 7 najlepszych witryn, w których można znaleźć fragmenty CSS i inspiracje – Szukasz inspiracji dla swojego kodu CSS? W tym artykule wymieniono siedem stron internetowych, które oferują 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 witryny WordPress – Ten artykuł przeprowadzi Cię przez proces dodawania niestandardowego CSS do 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 niektóre bezpłatne wtyczki CSS, które umożliwiają edycję witryny WordPress na żywo, ułatwiając obserwację efektów zmian CSS w czasie rzeczywistym.
- 14 fajnych narzędzi do animacji CSS dla WordPress – 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ć.
- Dodaj układy muru i siatki do swojej witryny WordPress za pomocą CSS – w tym artykule wyjaśniono, jak używać CSS do dodawania układów muru i siatki do witryny WordPress, tworząc bardziej atrakcyjny wizualnie projekt.
- 25 porad ekspertów dotyczących czystszego kodowania CSS dla WordPress – Jeśli chcesz poprawić czystość i czytelność swojego kodu CSS, ten artykuł zawiera 25 porad ekspertów, jak to zrobić.
- 25 profesjonalnych porad dotyczących usprawnienia przepływu pracy w CSS – Wskazówki dotyczące usprawnienia przepływu pracy w 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ółtwórcy
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 partnera agencji Incensy, aby uzyskać więcej informacji.
***
Uwaga: nie przyjmujemy artykułów z zewnętrznych źródeł. Członkowie WPMU DEV mogą jednak wnosić pomysły i sugestie dotyczące samouczków i artykułów na naszym blogu za pośrednictwem Blog XChange.