WordPress 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

Jedyne dwie rzeczy, które musisz wiedzieć, aby wdrożyć te wskazówki, to:

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 position: relative służy do pozycjonowania elementu względem jego najbliższego pozycjonowanego przodka. The top: 50% I left: 50% properties przenoszą element na środek jego kontenera. Wreszcie, transform: translate(-50%, -50%) property wyśrodkowuje element zarówno w poziomie, jak iw pionie, cofając go o 50% 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 pliku a po zajęciach, aby to działało, tak:

.item-class a{
display : none;
}

Spróbuj dodać a lub eksperymentowanie 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 a:hover selektor jest kierowany na wszystkie linki na stronie, nad którą aktualnie znajduje się użytkownik. The 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 selektor służy do stylizowania wszystkich linków na stronie. The color właściwość ustawia kolor łączy, a text-decoration usuwa domyślne podkreślenie. The border-bottom właściwość dodaje subtelny efekt podkreślenia. The transition tworzy efekt płynnego przejścia, gdy użytkownik najedzie kursorem na link. The a:hover selektor służy do stylizowania linku, 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 background-color I color właściwości wyglądu przycisku, tzw padding właściwość dla rozmiaru przycisku i cursor właściwość, aby zmienić wskaźnik myszy po najechaniu 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 font-family właściwość ustawia czcionkę na Arial lub podobną czcionkę bezszeryfową, the font-size ustawia rozmiar czcionki na 16 pikseli, a właściwość line-height właściwość ustawia odstępy między wierszami tekstu na 1,5-krotność rozmiaru czcionki.

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 position: fixed naprawia nagłówek na górze widocznego obszaru, a właściwość top: 0 właściwość umieszcza go na samej górze strony. The width: 100% zapewnia, że ​​nagłówek obejmuje całą szerokość widocznego obszaru. The background-color, color służą do stylizowania nagłówka, a z-index: 9999 gwarantuje, że nagłówek pojawi się nad wszystkimi innymi elementami 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 position: fixed służy do mocowania nagłówka na górze strony. The top: 0 I left: 0 properties umieszczają nagłówek w lewym górnym rogu strony. The width: 100% ustawia szerokość nagłówka na pełną szerokość strony. The 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. Wreszcie, box-shadow dodaje subtelny efekt cienia do nagłówka. The .content selektor służy do dodawania dopełnienia na górze strony, aby zawartość 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 background-color: #f2f2f2 ustawia kolor tła na jasnoszary, a 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 background-color właściwość 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 p span selektor celuje w dowolne span element, który pojawia się w a p element. Następnie możesz zawinąć słowo lub frazę, na które chcesz kierować reklamy, za pomocą a span element w kodzie HTML, tak jak poniżej:

<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 border właściwość ustawia szerokość, styl i kolor obramowania. The 2px wartość ustawia szerokość obramowania na 2 piksele, solid ustawia styl na linię ciągłą i #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 img:hover selektor jest kierowany na obraz, gdy użytkownik najedzie na niego kursorem. The opacity właściwość ustawia 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 background-color, paddingI border-radius właściwości dla ogólnego wyglądu formy. The form label selektor służy do stylizowania etykiet powiązanych z każdym polem formularza. The form input[type="text"], form input[type="email"], form textarea selektor służy do stylizowania różnych pól wejściowych w formularzu. The form input[type="submit"] selektor służy do stylizowania przycisku 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 @media reguła służy do określania różnych stylów dla różnych rozmiarów ekranu. Pierwszy @media reguła celuje w ekrany o maksymalnej szerokości 768px, a druga @media reguły są kierowane na ekrany o minimalnej szerokości 769 pikseli. Różne selektory w każdym @media reguły służą do dostosowywania układu i wyglądu strony na podstawie 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 lubię to:

.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 wskazówek 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’a z Incense 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.