Szybkie wprowadzenie do CSS<\/h2>\n
Je\u015bli znasz ju\u017c CSS, nie chc\u0119 zawraca\u0107 Ci g\u0142owy d\u0142ugim przegl\u0105dem. Je\u015bli nigdy nie pracowa\u0142e\u015b z CSS lub nie masz pewno\u015bci, czym jest CSS, najpierw zapoznaj si\u0119 z naszym artyku\u0142em na ten temat:<\/p>\n
Co to jest CSS i jak wp\u0142ywa na WordPressa?<\/a><\/p>\n To om\u00f3wi podstawy, dlaczego CSS jest u\u017cywany do stylizowania witryn i jak jest stosowany.<\/p>\n Jest jeden du\u017cy b\u0142\u0105d, kt\u00f3ry pope\u0142niaj\u0105 u\u017cytkownicy WordPressa, kt\u00f3rzy s\u0105 nowi w CSS:<\/p>\n Dostosowuj\u0105 pliki motyw\u00f3w.<\/p>\n Na przyk\u0142ad osoba u\u017cywaj\u0105ca motywu Challenger mo\u017ce umie\u015bci\u0107 swoje edycje CSS bezpo\u015brednio w pliku style.css dost\u0119pnym z menu Wygl\u0105d > Edytor.<\/p>\n WordPress zawiera teraz ostrze\u017cenie, aby nie edytowa\u0107 tutaj<\/p>\n Problem z edycj\u0105 pliku style.css polega na tym, \u017ce utracisz wszystkie zmiany, je\u015bli zaktualizujesz do nowej wersji Challengera. Zaufaj mi, utrata zmian w kodzie, kt\u00f3rych wprowadzenie zaj\u0119\u0142o du\u017co czasu, mo\u017ce by\u0107 niesamowicie przygn\u0119biaj\u0105ca.<\/p>\n Jest lepszy spos\u00f3b na dodanie CSS do witryny, gdzie nigdy nie zostanie on nadpisany. Ponadto ten kod jest dodawany do witryny w spos\u00f3b u\u0142atwiaj\u0105cy nadpisanie styl\u00f3w motywu.<\/p>\n Aby doda\u0107 CSS do swojej witryny, otw\u00f3rz Customizer (Wygl\u0105d > Dostosuj) i kliknij sekcj\u0119 Dodatkowy CSS.<\/p>\n Zwykle jest to ostatnia sekcja w Customizerze<\/p>\n Je\u015bli otworzysz t\u0119 sekcj\u0119, zobaczysz obszar tekstowy, w kt\u00f3rym mo\u017cesz doda\u0107 sw\u00f3j kod. WordPress b\u0119dzie zawiera\u0142 tutaj kilka wskaz\u00f3wek, ale mo\u017cesz klikn\u0105\u0107 link Zamknij, aby go usun\u0105\u0107 i pokaza\u0107 tylko wprowadzony kod.<\/p>\n Tutaj mo\u017cesz wprowadzi\u0107 i zapisa\u0107 dowolny kod CSS, kt\u00f3ry chcesz doda\u0107.<\/p>\n Dodany tutaj kod od razu zaktualizuje wygl\u0105d witryny w podgl\u0105dzie. Gdy b\u0119dziesz zadowolony ze zmian, mo\u017cesz je zapisa\u0107.<\/p>\n Dodatkow\u0105 zalet\u0105 umieszczania CSS tutaj jest to, \u017ce mo\u017cesz ogl\u0105da\u0107 aktualizacje na \u017cywo, dzi\u0119ki czemu mo\u017cesz szybko przetestowa\u0107 inny kod, aby dowiedzie\u0107 si\u0119, co lubisz.<\/p>\n Teraz, gdy ju\u017c wiesz, jak bezpiecznie doda\u0107 CSS do swojej witryny, om\u00f3wmy podstawy pisania CSS!<\/p>\n Wskaz\u00f3wka dla profesjonalist\u00f3w:<\/strong> nie martw si\u0119 o zepsucie swojej witryny. Je\u015bli dokonasz z\u0142ej zmiany, mo\u017cesz po prostu usun\u0105\u0107 dodany CSS. Nie da si\u0119 ca\u0142kowicie zepsu\u0107 witryny lub straci\u0107 dost\u0119pu do menu administratora, dodaj\u0105c w ten spos\u00f3b CSS.<\/p>\n Je\u015bli kiedykolwiek pisa\u0142e\u015b CSS, wiesz, \u017ce pierwszym krokiem jest wybranie selektora, kt\u00f3ry poinformuje przegl\u0105dark\u0119, na kt\u00f3ry element witryny kierujesz reklamy. Na powy\u017cszym zrzucie ekranu celuj\u0119 we wszystkie elementy, kt\u00f3re maj\u0105 klas\u0119 \u201esite-title".<\/p>\n Je\u015bli nie masz pewno\u015bci, jak korzysta\u0107 z selektor\u00f3w CSS, zapoznaj si\u0119 z tym wspania\u0142ym wprowadzeniem do selektor\u00f3w CSS firmy SitePoint<\/a>.<\/p>\n Teraz jest rzecz\u2026<\/p>\n Nawet wielu do\u015bwiadczonych u\u017cytkownik\u00f3w WordPressa \u017ale szuka selektor\u00f3w. Sprawdzaj\u0105 plik style.css, aby znale\u017a\u0107 selektor ju\u017c u\u017cywany przez motyw. Jest to \u017cmudne i mo\u017cesz nawet nie znale\u017a\u0107 odpowiedniego selektora do dostosowania.<\/p>\n Pozw\u00f3l, \u017ce zaoferuj\u0119 Ci znacznie bardziej produktywny proces.<\/p>\n Pisz\u0105c CSS, najpierw potrzebujesz selektora, kt\u00f3ry poinformuje przegl\u0105dark\u0119, kt\u00f3ry element chcesz edytowa\u0107. Chocia\u017c mo\u017cesz sprawdzi\u0107 arkusz styl\u00f3w w swoim motywie, znacznie \u0142atwiej jest po prostu u\u017cy\u0107 narz\u0119dzi programistycznych przegl\u0105darki, aby je znale\u017a\u0107.<\/p>\n Oto przyk\u0142ad tego, co mam na my\u015bli:<\/p>\n To jest zrzut ekranu Chrome z otwartymi narz\u0119dziami dla programist\u00f3w<\/p>\n Mo\u017cesz zobaczy\u0107 klasy i identyfikatory ka\u017cdego elementu w otwartych narz\u0119dziach programistycznych. Nast\u0119pnie mo\u017cesz u\u017cy\u0107 dowolnej kombinacji dost\u0119pnych klas i identyfikator\u00f3w, aby napisa\u0107 w\u0142asne niestandardowe selektory.<\/p>\n W tym samouczku omawiam znacznie wi\u0119cej szczeg\u00f3\u0142\u00f3w tego procesu:<\/p>\n Jak znale\u017a\u0107 selektory CSS w witrynach WordPress<\/a><\/p>\n Dowiesz si\u0119, jak uzyska\u0107 dost\u0119p do narz\u0119dzi programistycznych przegl\u0105darki, jak porusza\u0107 si\u0119 po kodzie HTML i jak znale\u017a\u0107 potrzebne selektory CSS.<\/p>\n Teraz, gdy masz znacznie szybszy spos\u00f3b na uzyskanie dowolnego selektora i wiesz, jak doda\u0107 kod do sekcji Dodatkowe CSS w Customizer, pozostaje tylko wybra\u0107 w\u0142a\u015bciwo\u015bci, kt\u00f3re chcesz zmieni\u0107.<\/p>\n Na przyk\u0142ad, je\u015bli chcesz skierowa\u0107 na tytu\u0142 witryny w Challenger<\/a> i powi\u0119kszy\u0107 czcionk\u0119, mo\u017cesz to zrobi\u0107 za pomoc\u0105 Je\u015bli nie znasz dobrze CSS, ta lista w\u0142a\u015bciwo\u015bci CSS<\/a> b\u0119dzie dla Ciebie szczeg\u00f3lnie przydatna. Mo\u017cesz przeszukiwa\u0107 t\u0119 list\u0119 pod k\u0105tem jako\u015bci, kt\u00f3r\u0105 chcesz edytowa\u0107 (kolor t\u0142a, rozmiar czcionki, obramowania itp.).<\/p>\n Nowicjusz lub mistrz CSS, mam co\u015b, co mo\u017ce ci si\u0119 spodoba\u0107\u2026<\/p>\n Je\u015bli u\u017cywasz kt\u00f3regokolwiek z naszych motyw\u00f3w, pokochasz przygotowane przez nas biblioteki fragment\u00f3w kodu CSS. Na przyk\u0142ad kolekcja fragment\u00f3w kodu CSS Tracks<\/a> zawiera dziesi\u0105tki fragment\u00f3w, kt\u00f3re mo\u017cesz skopiowa\u0107 i wklei\u0107 do sekcji Dodatkowe CSS, aby dostosowa\u0107 witryn\u0119:<\/p>\n U\u0142atwia to dostosowanie witryny za pomoc\u0105 CSS, nawet je\u015bli nigdy wcze\u015bniej nie pisa\u0142e\u015b CSS. Mo\u017cesz po prostu skopiowa\u0107 i wklei\u0107 dowolny fragment, a nast\u0119pnie zmieni\u0107 warto\u015b\u0107 na dowoln\u0105.<\/p>\n Aby znale\u017a\u0107 fragmenty kodu CSS dla swojego motywu, odwied\u017a Centrum pomocy<\/a> i wybierz motyw, kt\u00f3rego u\u017cywasz. Nast\u0119pnie kliknij przycisk Wy\u015bwietl fragmenty CSS u do\u0142u paska bocznego:<\/p>\nJak doda\u0107 CSS do swojej witryny WordPress<\/h2>\n
![\"Jak](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-176646-616f30ef54275.png\")
<\/a><\/p>\nLepszy spos\u00f3b<\/h3>\n
![\"Jak](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-176646-616f30f1ef9b5.png\")
<\/a><\/p>\n![\"Jak](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-176646-616f30f51b5a7.png\")
<\/a><\/p>\n![\"Jak](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-176646-616f30f8085f9.png\")
<\/a><\/p>\nJak znale\u017a\u0107 selektory CSS<\/h2>\n
Jak profesjonali\u015bci WP znajduj\u0105 selektory CSS<\/h3>\n
![\"Jak](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-176646-616f30fa8a74f.png\")
<\/a><\/p>\nW\u0142a\u015bciwo\u015bci i warto\u015bci CSS<\/h2>\n
font-size<\/code>w\u0142a\u015bciwo\u015bci. To o\u015bwiadczenie CSS mo\u017ce wygl\u0105da\u0107 tak:<\/p>\n.site-title {\n font-size: 32px;\n}<\/code><\/pre>\nBEZP\u0141ATNY wst\u0119pnie napisany CSS dla naszych u\u017cytkownik\u00f3w<\/h2>\n
![\"Jak](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-176646-616f30fcb5c0b.png\")
<\/a><\/p>\n
![\"Jak](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-176646-616f30fec389d.png\")
<\/a><\/p>\n