Hoe kan u persoonlike CSS by ‘n WordPress-aangedrewe webwerf voeg – op die regte manier!

Vir beginners is dit geen maklike taak om CSS by ‘n WordPress-webwerf te voeg nie. Dit is egter soms baie nodig. Daar is eintlik baie maniere om u webwerf aan te pas (met bladsybouers, verskillende plugins en WordPress-tema-instellings, ens.), Maar soms hoef u net een of twee baie spesifieke aspekte van ‘n ontwerp te verander – dit is waar CSS inkom Maar hoe doen u dit? Waar in WordPress begin jy? Moenie bang wees nie, ons het die antwoorde …


Dit is wat u moet weet:

Hoe CSS by WordPress te voeg:

– (nota: videokrediete aan Topher DeRosia – skepper van HeroPress

Video-transkripsie:

Hi! Dit is Topher met WinningWP. In hierdie video gaan ons kyk hoe u die regte CSS op WordPress kan voeg. Stel u voor dat u ‘n effense verandering aan die manier waarop u webwerf lyk, wil aanbring. U rondlê ‘n bietjie en u vind ‘n klein stuk CSS en hulle sê: ‘Sit dit net op u webwerf.’ Maar waar plaas jy dit? En hoe weet jy dat dit op die regte manier gedoen is? Laat ek jou wys. Ons moet eers bepaal waarvoor u CSS is. Daar is regtig net twee gebiede wat u dalk wil toepas op CSS. Die een is vir algemene werfontwerp wat uitleg is, en kleure, ens. Die ander is inhoudsontwerp, en dit is hoe u spesifieke inhoud lyk: beeldbehandeling, en blokgrootte-grootte, ens. In die toekoms wil u dalk u werfontwerp verander. Kry ‘n heel nuwe tema en hou tog die klein aanpassings wat u gemaak het, hoe u inhoud lyk. Laat ek jou wys wat ek bedoel. Hier is ‘n eenvoudige webwerf en dit is maklik om die uitleg te beskryf. Daar is ‘n soekbalk bo-aan, ‘n kopbalk, ‘n inhoudsarea, en dit is moeilik om te sien, want dit is leeg, maar ek het hier ‘n sybalk. Die agtergrond is wit, die voetskrif is grys en die soekbalk is swart. Dit is die soort dinge wat u met betrekking tot u tema sou verander. Hier het ons ons inhoud, en ons het ‘n sekere hoeveelheid opvulling aan die regterkant van beelde en byskrifte gekursiveer. Dit sou inhoudverwante veranderinge wees, dus kom ons kyk hoe u dit doen. Veranderings in werfontwerp is gekoppel aan u tema wat sinvol is. As u in die toekoms u tema verander, wil u nie die CSS behou nie, want dit gaan oor hoe dit lyk. Ons wil dus u huidige tema verander en dit dan laat verdwyn as u ooit van die tema ontslae raak. U het twee keuses, een is die Customizer en die ander is redigeringstyl.css. Dit is ook nie baie moeilik nie, maar die klant is waarlik die maklikste. Laat ek jou wys wat ek bedoel. Ek wil die bladsyopskrif van my webwerf rooi verander. Die eerste ding wat ek gaan doen, is om die naam daarvan te vind. In Chrome klik ek met die regter-klik en klik op inspekteer. En hier staan ​​dit site-header-main. So dit is wat ek wil verander. Hier aan die bokant van my webwerf is die knoppie aanpas. As ek na die onderkant van die Customizer blaai, kan ek op Extra CSS klik. Hier is ‘n bietjie instruksies oor hoe om dit te gebruik. As u naby klik, dan kom dit hier. Ek gaan dus site-header-main tik en in krullerige draadjies sit in die agtergrondkleur rooi. Nou hoef u nie noodwendig te weet hoe om die inspekteur te gebruik soos ek nie, en u hoef nie te weet dat f rooi is nie. Miskien het u hierdie kode êrens van ‘n webwerf gekry, en dit is goed; u hoef nie self te weet hoe om dit te vind nie. Ek wys jou net hoe sit dit hier in. Noudat dit daar is, kan ek klik op publiseer en nou kan ek hierdie oortjie sluit en nou het ek ‘n rooi kop. U kan soveel CSS daarin sit as wat u wil. U kan die hele ontwerp van u webwerf heeltemal verander as u wil. Maar nou wil ek u die ander manier wys om die CSS te redigeer. Ek gaan die kode wat ek voorheen geplaas het verwyder en dit stoor, en nou gaan ons die tema se styl.css-lêer wysig. Gaan na die Dashboard, onder Voorkoms, temas. U aktiewe tema is altyd hier links bo. U wil regtig net hierdie spesifieke metode doen as u ‘n kindertema gebruik. U kan hier sien dat ek laat installeer het, maar my aktiewe tema is ‘n kind-tema. Dit maak dit so dat as dit ‘n opdatering maak, dit nie my aanpassings wat in my kindertema sal wees, uitwis nie, en my kindertema nooit ‘n opdatering sal kry nie, omdat kindertemas nie opdaterings kry nie. As u kan bevestig dat u ‘n kindertema gebruik, dan is daar ‘n skakel vir die redakteur in die menu hierbo. En hier sal hulle alles vertel wat ek net oor kindertemas gesê het. Gaan dus voort en klik op Ek verstaan ​​of u ‘n kindertema gebruik. Die eerste lêer wat na vore kom, is u style.css. Dit sal altyd so wees. En al hierdie teks hier is inligting oor u tema. U hoef nie daaraan aandag te gee nie. Gaan na die onderkant en u sien hier dat myne sê: “Voeg u eie style hieronder by.” Voordat ons enige bewerking in hierdie lêer doen, wil ek aanbeveel dat u dit rugsteun. En dit is regtig eenvoudig. Ons gaan dit net êrens in ‘n ander lêer kopieer en plak. As u dus in Windows is, kan u Control + A of op ‘n Mac doen, kan u Command + A. doen. Dit sal alles uitlig, of dit is Control of Command + C en dit kopieer. En u kan in enige ander lêer plak wat teks kan bevat. U hoef dit nie regtig permanent te hou nie, u hou dit slegs terwyl u hierdie een wysig, en as hierdie een perfek verloop, verwyder u slegs u rugsteun sodra u klaar is. Maar as hierdie een breek en verdwaal, kan u die een eenvoudig uitvee en plak in wat u gekopieër het. Ek gaan dus presies dieselfde kode plak as wat ek met die Customizer gedoen het en op Update File klik. En laai my werf dan weer. En daar is ons ook rooi. As die Customizer nou so maklik is, waarom sou u ooit u style.css-lêer wil invoer? Die rede is dat u style.css-lêer heelwat vroeër laai as die Customizer. As u dit met die Customizer gedoen het, kan u ‘n geval kry waar die bladsy ten volle gelaai is, ‘n sekonde wit lyk en dan na rooi flikker. Maar as u dit in styl stel. Doen dit nie. ‘N Ander een van die dinge wat ek van die Customizer gehou het, is dat u u veranderinge kon sien terwyl u dit tik. ‘N Algemene werkvloei vir my is dus om al my CSS in die Customizer te skryf en dit dan kopieer en plak in style.css. U hoef dit nie te doen nie. U kan dit alles in Customizer laat en dit sal net vir ewig werk. As u pas begin, is my aanbeveling dat u slegs die Customizer doen. Dit is vinnig, dit is maklik, dit is pynloos en die negatiewe faktore is baie min. As u wil eksperimenteer en u voete bietjie nat raak met die innerlike werking van WordPress, gaan dan voort om u style.css-lêer te wysig. Die ander soort CSS waarmee u dalk wil werk, is om u inhoud te bestuur. Hiervoor wil u nie hê dat dit aan die tema gekoppel is nie. U wil hê dat dit moet vassteek, selfs al verander u temas. Miskien wil u altyd hê dat beeldopskrifte nie gekursiveer word nie, ongeag die tema wat u gebruik. In daardie geval wil u ‘n inprop gebruik. Ek gebruik hierdie inprop genaamd Simple Custom CSS. Dan is daar onder Voorkoms ‘n pasgemaakte CSS-menu-item. En dit laat jou toe om CSS eenvoudig hier in te tik. Ek gaan dus die naam van hierdie onderskrif uitvind. Ek regs-klik en inspekteer. En dit sê dit word wp-onderskrifte-teks genoem. Hier kan ek dus .wp-caption-text, font-style: normaal; Ek klik op Update Custom CSS en laai dan ons bladsy weer op. En jy kan sien dat dit nie meer gekursiveer is nie. So nou gaan ek my tema verander. En u sal sien dat my beeldopskrif steeds nie gekursiveer is nie en dat die konsep van ‘n rooi kopkop verdwyn het, want al die kodes is aan die ander tema gekoppel. As u dus u tema wil bestuur, gebruik u die Customizer of gaan na Editor en wysig u stylblad. As u die CSS vir u inhoud wil bestuur, wil u ‘n inprop hê wat u CSS apart hou van die tema. Iets soos Custom CSS. Besoek www.winningwp.com as u meer wil leer oor WordPress.

Kyk na nog video’s …

Enigiets om by te voeg?

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me