{"id":237659,"date":"2022-04-14T10:21:00","date_gmt":"2022-04-14T07:21:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=237659"},"modified":"2022-05-16T10:02:10","modified_gmt":"2022-05-16T07:02:10","slug":"kuidas-kohandada-oma-teemat-kohandatud-css-iga","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/et\/kuidas-kohandada-oma-teemat-kohandatud-css-iga\/","title":{"rendered":"Kuidas kohandada oma teemat kohandatud CSS-iga"},"content":{"rendered":"<p>Kas soovite oma saidi kujunduse \u00fcle t\u00e4ielikku kontrolli?<\/p>\n<p>Kuigi WordPressi jaoks on palju kasutajas\u00f5bralikke kohandamist\u00f6\u00f6riistu, v\u00f5ib v\u00e4ike CSS teid tohutult aidata.<\/p>\n<p>N\u00e4iteks v\u00f5ite soovida suurendada postituste pealkirjade fondi suurust v\u00f5i muuta linkide v\u00e4rvi. T\u00e4iesti uue pistikprogrammi installimine millegi nii lihtsa jaoks tundub liigne.<\/p>\n<p>CSS on lahendus.<\/p>\n<p>M\u00f5ne rea CSS-iga saate kiiresti hoolitseda v\u00e4ikeste stiilikohanduste eest. Ja kuigi see on kood, pole see peaaegu nii keeruline kui programmeerimiskeel, nagu Javascript v\u00f5i PHP.<\/p>\n<p>Kui olete siin-seal kirjutanud v\u00e4ikese CSS-i, saate sellest juhendist palju kasu, kuid isegi algajad v\u00f5ivad siit leida praktilisi n\u00e4pun\u00e4iteid.<\/p>\n<p><strong>Psst!<\/strong> Lugege l\u00f5puni, kui olete Compete Themesi klient. Meil on teile tasuta lisatasu (eriti kasulik algajatele).<\/p>\n<h2>Kiire sissejuhatus CSS-i<\/h2>\n<p>Kui olete CSS-iga juba tuttav, ei taha ma teid pika \u00fclevaatega t\u00fclitada. Kui te pole kunagi CSS-iga t\u00f6\u00f6tanud v\u00f5i kui te pole isegi kindel, mis see CSS on, lugege esmalt meie selleteemalist artiklit:<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/et\/mis-on-css-ja-kuidas-see-wordpressi-mojutab\/\" title=\"Mis on CSS ja kuidas see WordPressi m\u00f5jutab?\">Mis on CSS ja kuidas see WordPressi m\u00f5jutab?<\/a><\/p>\n<p>See h\u00f5lmab p\u00f5hit\u00f5desid, miks CSS-i kasutatakse saitide stiiliks ja kuidas seda rakendatakse.<\/p>\n<h2>Kuidas lisada oma WordPressi saidile CSS-i<\/h2>\n<p>WordPressi kasutajad, kes pole CSS-i kasutanud, teevad \u00fche suure vea:<\/p>\n<p>Nad kohandavad teemafaile.<\/p>\n<p>N\u00e4iteks v\u00f5ib keegi Challengeri teemat kasutav inimene paigutada oma CSS-i muudatused otse style.css-faili, millele p\u00e4\u00e4seb juurde men\u00fc\u00fcst V\u00e4limus &gt; Redigeerija.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-176646-616f30ef54275.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-176646-616f30ef54275.png\" alt=\"Kuidas kohandada oma teemat kohandatud CSS-iga\"><\/a><\/p>\n<p>WordPress sisaldab n\u00fc\u00fcd hoiatust, et te ei tohi siin redigeerida<\/p>\n<p>Faili style.css redigeerimise probleem seisneb selles, et Challengeri uuele versioonile v\u00e4rskendamisel kaotate k\u00f5ik muudatused. Usu mind, koodimuudatuste kaotamine, mille tegemine v\u00f5ttis kaua aega, v\u00f5ib olla uskumatult masendav.<\/p>\n<h3>Parem viis<\/h3>\n<p>CSS-i lisamiseks oma saidile on parem viis, kus seda kunagi \u00fcle ei kirjutata. Lisaks lisatakse see kood teie saidile viisil, mis h\u00f5lbustab teema stiilide alistamist.<\/p>\n<p>CSS-i oma saidile lisamiseks soovite avada kohandaja (V\u00e4limus &gt; Kohanda) ja kl\u00f5psake jaotist T\u00e4iendav CSS.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-176646-616f30f1ef9b5.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-176646-616f30f1ef9b5.png\" alt=\"Kuidas kohandada oma teemat kohandatud CSS-iga\"><\/a><\/p>\n<p>Tavaliselt on see kohandaja viimane jaotis<\/p>\n<p>Kui avate selle jaotise, n\u00e4ete tekstiala, kuhu saate oma koodi lisada. WordPress sisaldab siin m\u00f5ningaid n\u00e4pun\u00e4iteid, kuid saate selle eemaldamiseks kl\u00f5psata lingil Sule ja kuvada ainult koodi sisestus.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-176646-616f30f51b5a7.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-176646-616f30f51b5a7.png\" alt=\"Kuidas kohandada oma teemat kohandatud CSS-iga\"><\/a><\/p>\n<p>Siin saate sisestada ja salvestada mis tahes CSS-i, mida soovite lisada.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-176646-616f30f8085f9.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-176646-616f30f8085f9.png\" alt=\"Kuidas kohandada oma teemat kohandatud CSS-iga\"><\/a><\/p>\n<p>Siia lisatud kood v\u00e4rskendab saidi v\u00e4limust kohe eelvaates. Kui olete muudatustega rahul, saate muudatused salvestada.<\/p>\n<p>CSS-i siia paigutamise lisaboonuseks on see, et saate v\u00e4rskenduste toimumist otse\u00fclekandes j\u00e4lgida, nii et saate kiiresti katsetada erinevaid koode, et teada saada, mis teile meeldib.<\/p>\n<p>N\u00fc\u00fcd, kui olete tutvunud CSS-i turvalise lisamisega oma saidile, k\u00e4sitleme CSS-i kirjutamise p\u00f5hit\u00f5desid!<\/p>\n<p><strong>Pro n\u00e4pun\u00e4ide:<\/strong> \u00e4rge muretsege saidi purunemise p\u00e4rast. Kui teete halva muudatuse, saate lisatud CSS-i lihtsalt kustutada. Sel viisil CSS-i lisamisega on v\u00f5imatu oma saiti t\u00e4ielikult katkestada v\u00f5i administraatorimen\u00fc\u00fcle juurdep\u00e4\u00e4su kaotada.<\/p>\n<h2>Kuidas leida CSS-i valijaid<\/h2>\n<p>Kui olete kunagi kirjutanud CSS-i, siis teate, et esimene samm on valida valija, mis annab brauserile teada, millist saidi elementi sihite. \u00dclaltoodud ekraanipildil sihin k\u00f5iki elemente, millel on klass \u201esaidi pealkiri&quot;.<\/p>\n<p>Kui te pole kindel, kuidas CSS-i selektoreid kasutada, vaadake seda suurep\u00e4rast <a href=\"https:\/\/www.sitepoint.com\/css-selectors\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">SitePointi CSS-selektorite tutvustust<\/a>.<\/p>\n<p>N\u00fc\u00fcd on see asi\u2026<\/p>\n<p>Isegi paljud kogenud WordPressi kasutajad otsivad valijaid valesti. Nad kontrollivad faili style.css, et leida teema poolt juba kasutatud valija. See on t\u00fc\u00fctu ja te ei pruugi isegi oma kohandamiseks sobivat valijat leida.<\/p>\n<p>Lubage mul pakkuda teile palju produktiivsemat protsessi.<\/p>\n<h3>Kuidas WP-professionaalid CSS-i valijaid leiavad<\/h3>\n<p>CSS-i kirjutamisel vajate esmalt valijat, et \u00f6elda brauserile, millist elementi soovite muuta. Kuigi saate vaadata oma teema stiilitabelit, on nende leidmiseks palju lihtsam kasutada lihtsalt brauseri veebiarendaja t\u00f6\u00f6riistu.<\/p>\n<p>Siin on n\u00e4ide sellest, mida ma m\u00f5tlen:<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-176646-616f30fa8a74f.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-176646-616f30fa8a74f.png\" alt=\"Kuidas kohandada oma teemat kohandatud CSS-iga\"><\/a><\/p>\n<p>See on Chrome&#8217;i ekraanipilt, mille arendaja t\u00f6\u00f6riistad on avatud<\/p>\n<p>Avatud arendajat\u00f6\u00f6riistades n\u00e4ete iga elemendi klasse ja ID-sid. Seej\u00e4rel saate oma kohandatud valijate kirjutamiseks kasutada mis tahes saadaolevate klasside ja ID-de kombinatsiooni.<\/p>\n<p>Selles \u00f5petuses k\u00e4sitlen seda protsessi palju s\u00fcgavamalt:<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/et\/kuidas-wordpressi-saitidelt-css-i-valijaid-leida\/\" title=\"Kuidas WordPressi saitidelt CSS-i valijaid leida\">Kuidas WordPressi saitidelt CSS-i valijaid leida<\/a><\/p>\n<p>Saate teada, kuidas p\u00e4\u00e4seda juurde oma brauseri arendaja t\u00f6\u00f6riistadele, kuidas navigeerida HTML-is ja kuidas leida vajalikke CSS-i valijaid.<\/p>\n<h2>CSS-i omadused ja v\u00e4\u00e4rtused<\/h2>\n<p>N\u00fc\u00fcd, kui teil on palju kiirem viis soovitud valija hankimiseks ja teate, kuidas lisada koodi kohandaja jaotisesse T\u00e4iendav CSS, j\u00e4\u00e4b \u00fcle vaid valida atribuudid, mida soovite muuta.<\/p>\n<p>N\u00e4iteks kui soovite <a href=\"https:\/\/www.competethemes.com\/challenger\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Challengeris<\/a> sihtida saidi pealkirja ja muuta fondi suuremaks, saate seda teha <code>font-size<\/code>atribuudiga. See CSS-i avaldus v\u00f5ib v\u00e4lja n\u00e4ha j\u00e4rgmine:<\/p>\n<pre><code>.site-title {\n  font-size: 32px;\n}<\/code><\/pre>\n<p>Kui te pole CSS-iga v\u00e4ga kursis, on <a href=\"http:\/\/www.stylinwithcss.com\/resources_css_properties.php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">see CSS-i atribuutide loend<\/a> eriti kasulik. Saate otsida sellest loendist mis tahes kvaliteeti, mida soovite muuta (taustav\u00e4rv, fondi suurus, \u00e4\u00e4rised jne).<\/p>\n<h2>TASUTA eelkirjutatud CSS meie kasutajatele<\/h2>\n<p>CSS-i algaja v\u00f5i meister, ma arvan, et teile meeldib midagi\u2026<\/p>\n<p>Kui kasutate m\u00f5nda meie teemadest, meeldivad teile meie loodud eelnevalt kirjutatud CSS-i l\u00f5ikude teegid. N\u00e4iteks <a href=\"https:\/\/www.competethemes.com\/help\/tracks-css-snippets\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Tracks CSS-i<\/a> katkendite <a href=\"https:\/\/www.competethemes.com\/help\/tracks-css-snippets\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">kogus<\/a> on k\u00fcmneid katkendeid, mida saate oma saidi kohandamiseks kopeerida ja kleepida jaotisesse T\u00e4iendav CSS.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-176646-616f30fcb5c0b.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-176646-616f30fcb5c0b.png\" alt=\"Kuidas kohandada oma teemat kohandatud CSS-iga\"><\/a><\/p>\n<p>See muudab saidi CSS-iga kohandamise v\u00e4ga lihtsaks, isegi kui te pole kunagi varem CSS-i kirjutanud. Saate lihtsalt kopeerida ja kleepida mis tahes soovitud v\u00e4ljav\u00f5tte ning seej\u00e4rel muuta v\u00e4\u00e4rtuse soovitud v\u00e4\u00e4rtuseks.<\/p>\n<p>Teema jaoks CSS-i fragmentide leidmiseks k\u00fclastage <a href=\"https:\/\/www.competethemes.com\/documentation\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">tugikeskust<\/a> ja valige kasutatav teema. Seej\u00e4rel kl\u00f5psake k\u00fclgriba allosas nuppu Kuva CSS-i v\u00e4ljav\u00f5tted:<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-176646-616f30fec389d.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-176646-616f30fec389d.png\" alt=\"Kuidas kohandada oma teemat kohandatud CSS-iga\"><\/a><\/p>\n<p>J\u00e4rgmisel lehel leiate hunniku eelnevalt kirjutatud katkendeid valitud teema kohta.<\/p>\n<h2>J\u00e4reldus<\/h2>\n<p>Ma ei eelda, et k\u00f5ik Compete Themesi kasutajad oleksid CSS-i meistrid ja kellelegi, kes alles valdab WordPressi p\u00f5hit\u00f5desid, saan aru, kui hirmutav see \u00f5petus olla v\u00f5is.<\/p>\n<p>Sellegipoolest on kindlasti kasulik teada CSS-i kohandamise v\u00f5imalusi. Lisaks muudavad koodil\u00f5ikude kogud kopeerimis- ja kleepimiskoodi abil jalgade sissekastmise v\u00e4ga lihtsaks.<\/p>\n<p>V\u00f5imalik, et tulete selle juurde tagasi tulevikus, kui tunnete end paremini valmis oma saiti koodiga kohandama. Sel juhul lisage see leht hilisemaks j\u00e4rjehoidjaks, et saaksite tagasi tulla ja proovida.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/www.competethemes.com\" class=\"external external_icon\">www.competethemes.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Saidi kohandamine CSS-iga on lihtne ja \u00e4rge muretsege, ainult CSS-iga ei saa te oma saiti purustada. Alustamiseks j\u00e4rgige neid lihtsaid samme.<\/p>\n","protected":false},"author":1,"featured_media":22082,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[549],"tags":[842],"class_list":["post-237659","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-kohandage-wordpressi","tag-affiai-et"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/posts\/237659","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/comments?post=237659"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/posts\/237659\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/media\/22082"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/media?parent=237659"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/categories?post=237659"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/tags?post=237659"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}