Jak edytować WordPress CSS

Po przeczytaniu tego samouczka będziesz mógł łatwo zaimplementować dostosowanie WordPress CSS. Metody edycji CSS mogą się różnić w zależności od motywu. Dlatego opisane techniki obejmują edycję kodu za pomocą dodatkowej opcji CSS, edytowanie kodu z edytora motywu i za pomocą wtyczek.

Wszystkie instrukcje wyjaśnione w tym samouczku obejmują zrzuty ekranu, co ułatwia wszystkim użytkownikom.

Ważny: To nie jest samouczek kodujący CSS, ale samouczek pokazujący, jak dodać niestandardowe CSS w WordPress. Samouczek jest skierowany do użytkowników z podstawowym pomysłem programowania CSS, chociaż w ostatniej sekcji można znaleźć wtyczkę, która pozwala edytować CSS w sposób wizualny.

Edycja CSS z ekranu dostosowywania WordPress (dodatkowe CSS):

Pierwsza metoda wyjaśniona w tym samouczku jest najbardziej konwencjonalna: edycja WordPress CSS z dodatkowego panelu CSS pokazanego na ekranie dostosowywania.

Podczas edytowania CSS za pomocą tej techniki wydanie pozostanie nawet po zaktualizowaniu motywu bez potrzeby motywu dziecka (jednak korzystanie z motywu dziecięcego jest zawsze zalecane). Oczywiście to edycja zostanie usunięta, jeśli zmienisz motyw.

Aby rozpocząć, zaloguj się do deski rozdzielczej WordPress i po lewej menu, przenieś kursor myszy Wygląd i naciśnij Dostosuj opcja, jak pokazano na zrzucie ekranu poniżej (Wygląd> Dostosuj).

Raz na ekranie dostosowywania z podglądem na żywo witryny, przewiń w dół w lewo, aby znaleźć dodatkowy przycisk CSS i naciśnij go.

Zobaczysz puste pole, w którym możesz wpisać swój kod; Możesz edytować swoją witrynę CSS.

Po zakończeniu edycji CSS naciśnij Publikować przycisk do zastosowania zmian.

Jak edytować CSS z deski rozdzielczej WordPress:

Możesz także edytować swoje CSS, modyfikując .Pliki CSS za pośrednictwem edytora motywu.

Podczas korzystania z tej techniki lepiej jest użyć motywu dziecięcego i zapisać kopię zapasową plików.

Aby rozpocząć, zaloguj się na deskę rozdzielczą WordPress i w lewym menu, przenieś wskaźnik myszy Wygląd a następnie naciśnij Edytor plików motywu Jak pokazano na poniższym obrazku (Wygląd> Edytor plików motywu).

Na prawej kolumnie (Pliki motywów) Znajdź plik CSS, który chcesz edytować. Niektóre motywy zawierają plik o nazwie Custom.CSS; Jeśli motyw zawiera ten plik, tam musisz umieścić niestandardowy kod CSS. W przeciwnym razie edytuj dostępny plik CSS zgodnie z potrzebami.

Po zredagowaniu pamiętaj o naciśnięciu Aktualizacja Przycisk pliku do zastosowania zmian.

W ten sposób edytować pliki motywów z pulpitu nawigacyjnego; Oczywiście możesz również aktualizować pliki za pośrednictwem klienta FTP, takiego jak FileZilla.

Jak edytować WordPress CSS za pomocą wtyczki:

Ta sekcja pokazuje, jak edytować swoje WordPress CSS za pomocą wtyczki. W niektórych przypadkach motyw może domyślnie nie obsługiwać CSS; W takich przypadkach wtyczka może pomóc.

Aby rozpocząć, zaloguj się do deski rozdzielczej WordPress i po lewej menu, przenieś kursor myszy Wygląd a następnie naciśnij Dodaj nowe opcja (Wtyczki> Dodaj nowe).

Na ekranie instalacji wtyczek użyj pola wyszukiwania i wpisz „Redaktor CSS". Jeśli pojawią się dostępne wtyczki, naciśnij Zainstaluj teraz przycisk Siteorigin CSS wtyczka, jak pokazano na zrzucie ekranu poniżej.

Po zainstalowaniu naciśnij Aktywuj przycisk, aby włączyć wtyczkę.

Po zainstalowaniu wtyczki, w lewym menu deski rozdzielczej, naciśnij Wygląd a następnie naciśnij Niestandardowe CSS (wygląd> niestandardowe CSS).

Zobaczysz puste pole, w którym możesz dodać kod CSS; Po edycji kodu CSS naciśnij Zapisz CSS przycisk do zastosowania zmian.

W ten sposób możesz edytować swój kod CSS w WordPress za pomocą wtyczki.

Istnieją alternatywne wtyczki, których możesz użyć:

• Bloki CSS: Edytor CSS dla bloków Gutenberg: Ta wtyczka umożliwia edytowanie bloków CSS z edytora Blocks Gutenberg.
• Wizualny edytor stylu CSS: Ta wtyczka pozwala dodawać niestandardowe CSS bez kodowania. Możesz edytować elementy wizualnie, klikając je, w tym kolory, rozmiary, pozycje, czcionki itp.
• Prosty CSS: Ten edytor CSS zawiera podgląd na żywo w dostosowaniu. Możesz zastosować niestandardowe CSS do określonych postów lub stron za pośrednictwem metaboksu.
• Zaawansowany redaktor CSS: Ta wtyczka umożliwia dodawanie różnych niestandardowych kodów CSS dla różnych urządzeń (komputera, telefonu komórkowego i tabletów) za pomocą CIVESIZER LIVE. Wtyczka umożliwia również minimalizację CSS, optymalizując ją pod kątem wyszukiwarek (SEO).
• Custom CSS Pro: Ten edytor CSS zawiera również podgląd na żywo w czasie rzeczywistym za pośrednictwem prostego interfejsu użytkownika.
• Proste niestandardowe CSS i JS: Ten samouczek pozwala dodać zarówno niestandardowe CSS, jak i JS. Ta wtyczka nie modyfikuje plików motywów i pozwala wyeksportować kod i zachować go nawet po zmianie motywu.

Możesz zainstalować wszystkie wtyczki wymienione powyżej, wpisując ich nazwę na polu wyszukiwania na ekranie instalacji wtyczek.

Wniosek:

Jak widać w powyższych instrukcjach, edycja lub dodanie niestandardowego kodu CSS WordPress jest dość proste i może być wykonane przez każdego użytkownika, wykonując kilka kroków, jak opisano wcześniej.
Użytkownicy muszą rozważyć podczas edytowania CSS, aby kod niestandardowy może wpłynąć na wydajność witryny; Minimowanie kodu CSS jest zawsze dobrą praktyką, a do Ciebie są dodatkowe wtyczki automatycznie.

Użytkownicy zawsze mogą usunąć niestandardowe dodane CSS, ale kiedy jest to zrobione przez pulpit nawigacyjny Edycja motywu Opcja zaleca się wykonanie kopii zapasowej pliku do edycji.

Pamiętaj, że aktualizacja motywu może przepisać twoje zmiany, zawsze staraj się znaleźć zwyczaj.CSS plik, gdy jest obecny.

Ten artykuł zawiera listę wtyczek, których możesz użyć; Rynek oferuje dodatkowe wtyczki, o których nie wspomniano, i możesz odkryć, dopóki nie znalezienie, które dopasowuje Twoje potrzeby.

Bardzo dziękuję za przeczytanie tego artykułu, wyjaśniając, jak edytować WordPress CSS. Mam nadzieję, że to było przydatne. Kontynuuj śledź Linuxhint, aby uzyskać więcej samouczków i wskazówek WordPress.