W artykule:
Istnieje więcej niż jeden sposób na dodanie niestandardowego CSS do witryny WordPress.
W ten Weekend WordPress wyjaśnię mocne i słabe strony trzech różnych metod, abyś mógł zdecydować, która najbardziej Ci odpowiada i pozwolić Ci dostosować swoją witrynę.
Znajdowanie elementów projektu, które chcesz dostosować
Po wyizolowaniu części motywu, którą chcesz zmienić (na przykład tytułu postu), musisz określić właściwości CSS zastosowane do niego, aby móc wprowadzić odpowiednie zmiany. Na szczęście proces ten nie jest skomplikowany.
CSS używa selektorów, aby określić, które deklaracje projektu zastosować do określonej części witryny. Zazwyczaj odbywa się to poprzez określenie “klasy” dla konkretnego elementu. Jednak CSS może być również użyty do zdefiniowania układu dla całego elementu (na przykład znacznika “<body>”) lub elementu opartego na jego ID.
Na szczęście popularne przeglądarki pozwalają zobaczyć, które selektory i które deklaracje są stosowane do elementu na stronie za pomocą zaledwie kilku kliknięć. Na przykład w Google Chrome wystarczy podświetlić określoną część dokumentu, a następnie kliknąć prawym przyciskiem myszy, jak pokazano poniżej.
Wybierz Sprawdź Element z rozwijanej listy, która się pojawi, zobaczysz informacje o projekcie w oknie po prawej stronie. Możesz zobaczyć przykład poniżej.
Te elementy wyróżnione na Czerwono pokazują określone deskryptory projektu, które mają zastosowanie do podświetlonego tekstu. Na przykład element” font-size”informuje, że czcionka wyświetlana w podświetlonym tekście ma rozmiar 13 pikseli (“13px”). Deskryptory są otoczone kręconymi klamrami przez selektory. Nazwa odpowiedniego pliku arkusza stylów jest wyświetlana po prawej stronie selektorów.
Po uzbieraniu się w wszystkie te informacje modyfikacja projektu jest łatwa. Na przykład, jeśli chcesz zmienić czcionkę z 13px na 14px, po prostu przeszukaj plik arkusza stylów, wyświetlony po prawej stronie dla tych selektorów (“#plugin-info.block-content”) I zmienić “13px” na “14px.”
Możesz zrobić to samo w Firefoksie, po prostu podświetl określoną część strony, kliknij ją prawym przyciskiem myszy, a następnie wybierz Sprawdź Element z menu, które się pojawi.
Jak WordPress i CSS współpracują ze sobą
Biorąc pod uwagę, że nie ma dwóch takich samych motywów WordPress. Pamiętaj więc, że Twój motyw WordPress może nie być w 100% zgodny z tym, co przeczytasz w następujących sekcjach.
To powiedziawszy, jest bardziej niż prawdopodobne, że CSS używany do prezentacji witryny WordPress znajduje się w pliku o nazwie styl.css. Jest to popularna nazwa arkusza stylów dla każdego rodzaju witryny, a nie tylko witryny WordPress.
Jeśli spojrzysz na ten plik, przekonasz się, że zawiera on kompleksowe “instrukcje” stylistyczne dla Twojego motywu. To wykracza poza zakres tego samouczka, aby szczegółowo opisać składnię CSS, ale jeśli chcesz zagłębić się w nią głębiej, zalecamy rozpoczęcie kursu W3Schools tutaj.
Mając to na uwadze, przejdźmy do wspomnianych trzech metod edycji CSS!
Metoda # 1: Edycja motywu styl.css Plik
Istnieją dwa sposoby dostępu do motywu styl.css plik.
Jednym ze sposobów jest zrobienie tego z pulpitu administracyjnego WordPress. Na lewym pasku nawigacyjnym zaznacz Wygląd opcja. Menu fly-out powinno wyświetlać kilka dodatkowych opcji. Na dole tego menu zobaczysz Redaktor opcja. Kliknij na to.
Gdy już będziesz na Redaktor strona, zobaczysz listę plików na pionowym pasku po prawej stronie strony. Przewiń w dół listę plików. Zobaczysz styl.css na dole strony.
Jeśli klikniesz na to Arkusz stylów option, the styl.css plik zostanie załadowany i wyświetlony na środku ekranu. Możesz użyć tego ekranu, aby edytować plik, aby wprowadzić zmiany w projekcie witryny, ale jest na to lepszy sposób (więcej na ten temat za chwilę).
Innym sposobem znalezienia arkusza stylów jest przeglądanie systemu operacyjnego dostawcy hostingu i zlokalizowanie pliku w folderze motywu. Dokładna lokalizacja będzie się różnić w zależności od dostawcy usług hostingowych. W poniższym przykładzie nazwa strony internetowej (w naszym przypadku thecare) jest folderem pod public_html folder. Ponieważ WordPress jest zainstalowany dla tej witryny, możesz zobaczyć wp-content folder pod thecare. Pod spodem wp-content folder to kolejny folder o nazwie tematy, gdzie są zainstalowane wszystkie motywy WordPress. Ponieważ ta strona używa motywu o nazwie Newsletter, poprawne styl.css znajduje się w newsletter-rodzic folder.
W tym momencie możesz zadawać sobie pytanie: “dlaczego istnieje newsletter-rodzic oraz newsletter-dziecko teczka?”To bardzo dobre pytanie i zaraz na nie odpowiemy.
Metoda # 2: Używanie motywu potomnego do edycji CSS
Jeśli pobrałeś świetny motyw i chcesz wprowadzić do niego pewne zmiany, powinieneś to zrobić z motywem potomnym, zamiast edytować Motyw główny (lub rodzic).
Dlaczego? Ponieważ programiści często mogą aktualizować motywy pod kątem poprawek błędów i zmian w projekcie. Jeśli wprowadzisz zmiany do głównego motywu, a następnie zainstalujesz aktualizację, nadpiszesz ciężką pracę.
Z drugiej strony, jeśli używasz motywu podrzędnego do wprowadzania zmian CSS, tylko motyw nadrzędny zostanie zaktualizowany. Wszystkie twoje zmiany w motywie potomnym pozostaną.
Niektórzy profesjonalni Programiści motywów są świadomi znaczenia motywów podrzędnych i będą zawierać jeden dla Ciebie. Następnie możesz po prostu zaktualizować ten motyw potomny, ile chcesz, nie martwiąc się o aktualizacje motywu nadrzędnego nadpisujące zmiany.
Jeśli masz motyw, który nie zawiera motywu podrzędnego, łatwo go dodać. Instrukcje, jak to zrobić, znajdziesz w naszym obszernym przewodniku po tworzeniu motywu podrzędnego.
Metoda # 3: używanie wtyczki do edycji CSS
Najwygodniejszym sposobem edycji CSS witryny jest prawdopodobnie wtyczka.
Jedną z głównych zalet korzystania z wtyczki jest podobna do używania motywu potomnego. Jeśli zaktualizujesz motyw, zmiany nie zostaną nadpisane, ponieważ są przechowywane oddzielnie od plików motywu. Inną zaletą jest oczywiście to, że nie będziesz musiał trudzić się tworzeniem motywu potomnego.
Oto kilka świetnych wtyczek do modyfikowania CSS:
-
Simple Custom CSS
Prosty Niestandardowy CSS jest jedną z najpopularniejszych opcji. Został zainstalowany ponad 100 000 razy i otrzymał pięciogwiazdkową ocenę.
-
WP Dodaj własny CSS
WP Add Custom CSS to wtyczka, która umożliwia modyfikację prezentacji całej witryny lub tylko poszczególnych postów. Jest to świetna opcja, jeśli szukasz elastyczności projektowania od postu do postu.
Wtyczka została pobrana ponad 10 000 razy i obecnie cieszy się oceną 4.3.
-
Theme Junkie Custom CSS
Jeśli szukasz rozwiązania wtyczki CSS, które oferuje podgląd na żywo zmian, rozważ Theme Junkie Custom CSS. To rozwiązanie dodaje Niestandardowy menedżer CSS do konsoli administracyjnej, gdzie można dodawać własne style. Oferuje również alternatywę dla motywów potomnych.
-
Łatwe Umieszczanie Kodu
Łatwe umieszczanie kodu to znacznie więcej niż tylko rozwiązanie CSS. Umożliwia również dodawanie innych typów kodu, w tym PHP, JavaScript, HTML lub po prostu zwykły tekst.
Może się okazać, że aby poprawnie zmienić układ motywu, musisz zmienić coś więcej niż tylko CSS. Jeśli tak jest, umieść łatwe umieszczenie kodu na górze krótkiej listy, dzięki czemu możesz wprowadzić kompleksowe zmiany niezbędne do uzyskania właściwej prezentacji.
-
Konfigurator Motywów Potomnych
Ostatni, ale nie mniej ważny, jest Konfigurator motywów potomnych. Jest to rozwiązanie, które umożliwia dostosowanie układu witryny za pomocą motywu podrzędnego.
Wtyczka optymalizuje również strategię projektowania. Jeśli pracowałeś z CSS przez dłuższy czas, wiesz, że czasami ogólna struktura arkuszy stylów może być uciążliwa. Konfigurator motywów potomnych pomaga w tym, że prawidłowo przydziela arkusze stylów, aby uzyskać optymalną wydajność.
Konfigurator motywów potomnych został pobrany ponad 40,000 razy i cieszy się oceną 4.8.
Najważniejsze jest to: niezależnie od tego, jaką funkcjonalność próbujesz stworzyć, prawdopodobnie została już stworzona przez kogoś innego, kto jest gotów dostarczyć Ci ją, bezpłatnie lub za rozsądną opłatą. Najlepiej jest zaoszczędzić trochę czasu i po prostu wybrać rozwiązanie, które zostało już dla Ciebie wyprodukowane.
Wrapping Up
Jeśli nie masz nic przeciwko programowaniu, Utwórz motyw potomny i zagłębiaj się w styl.css. Ale jeśli wolisz zostawić je w spokoju, istnieje wiele dostępnych wtyczek i są szanse, że zaspokoją one twoje potrzeby w miarę dobrze.
To świetny pomysł, aby zacząć radzić sobie z CSS, jeśli chcesz dalej rozwijać swoją witrynę, a istnieje wiele kursów i samouczków, które Ci pomogą.
Tagi:
