I denne guide kommer vi til at se på hvordan WordPress er bygget op, ved at se nærmere på hvordan vi kan ændre CSS koden. Det bliver en af de lidt længere videoer, da der er en del ting du lærer. Jeg bliver nemlig rigtig tit spurgt, hvordan kan jeg fjerne, ændre, tilføje elementer i et WordPress tema, og svaret vil altid være lidt anderledes. Faktisk vil man sjældent skulle redigere et wordpress tema direkte i koden, men det kan være en stor fordel at vide, hvordan det hænger sammen så man er forberedt på det.
Rediger WordPress Tema CSS Kode
Det vil skal se på i denne video er hvordan du kan manipulere CSS filen til dit WordPress tema. Det bliver vildt og du vil lære hvordan du kan identificere de elementer i dit tema som du gerne vil redigere, du vil lære om en smart metode til at teste ændringerne live og sidst hvordan du kan gemme dine ændringer på en sikker måde. Vi skal altså finde noget CSS kode og ændre/tilføje noget i den kode.
Først Opret Et Child Tema
Inden vi går i gang med at ændre i din CSS kode skal vi lige have lavet et child tema. Det betyder i praksis at vi tager en kopi af dit temas eksisterende CSS kode så vi kan tilføje ændringer. Skulle dit tema på et senere tidspunkt komme med en opdatering, så kan du roligt opdaterer uden at miste dine ændringer som vi laver i denne video. Læs mere om WordPress Child Tema her.
Værktøjer Til At Redigere WordPress Tema
Ud over et child tema skal du bruge følgende:
- Tekst editor til at redigere i css filerne. Jeg bruger Sublime Text 2 men du kan bruge hvilket som helst tekst program.
- FTP program. Jeg bruger File Zilla da det er gratis og rent nemt at bruge. Du kan lære mere om FileZilla i child tema videoen.
Alle programmerne er gratis og kan bruges til både Windows og Mac.
Se med i videoen hvis du er klar til at lære hvordan du virkelig kan ændre udseende i dit WordPress Tema:
[jwplayer player=”1″ mediaid=”1316″]
Hey Nick
Skøn video og fantastisk timing.
Jeg er faldet for et tema, der kræver en del tilpasning – det må kunne lade sig gøre.
Temaet hedder Zenbox og er et portfolio tema. Når jeg skal oprette et nyt ‘item’ kan jeg vælge mellem standard, galleri, video og audio. Jeg vil gerne ændre den der hedder video, men er godt tilfreds med de andre.
Jeg kan ikke lide den lange smalle tekstkolonne til højre for det store tumme rum under videoen. Allerhelst ville jeg wrappe teksten rundt om videoen, hvilket måske kan gøres ved at indstille den ene kolonne til den fulde bredde og den anden til 0. Alternativt kan jeg gøre tekstspalten bredere (og videospalten tilsvarende smal). Det sidste har jeg prøvet med tilfredsstillende resultat, men jeg er ikke interesseret i at ændre i ‘standard, gallery og audio’.
Har du et fif eller to, vil jeg være meget taknemmelig.
Bedste hilsner og fornøjelig weekend fra Anette
PS. temaet er et premium fra MojoThemes. Jeg er meget skuffet over udviklerens ringe interesse for at besvare spørgsmål
Hej Anette,
Beklager jeg har ikke set denne besked før nu. Kan du ikke skrive et indlæg i vores forum med et link til din hjemmeside hvor du har installeret temaet?
Hej Nick
Jeg er helt grøn inden for css og derfor de måske i dine øjne mærkelige spørgsmål:
Jeg sidder og forsøger at ændre i mit Preus WordPress tema, som jeg har lært via din video. Problemet er, at jeg fx gerne vil flytte min titel i headeren til venstre, men i udviklingsværktøjerne er der flere steder, hvor koderne er overstreget. Hvad betyder det? Og så står der noget med main.css og bootstrap.css – hvad betyder det? Har forsøgt at ændre skriftstørrelse og flytte titlen til venstre, men det kan ikke lykkes, selvom jeg følger din procedure. Betyder overstregningen, at jeg ikke kan ændre på tingene og hvad med main.css – betyder det, at jeg skal lave ændringer andetsteds? Er meget forvirret, så håber du kan hjælpe – og i så fald – gerne så detaljeret som muligt. På forhånd tak!
Bedste hilsner
Karina
Hej Karina,
Når en css kode er overstreget, så betyder det, at en anden css kode har precedens og overskriver denne. Altås med andre ord, en anden css regel overskriver den der er streget ud.
Det er også noget bøvlet noget med css og det at der står main.css og bootstrap.css er blot navnet på de css filer hvor koden findes. Bootstrap er et meget populært framework til at style hjemmesider og lave dem responsive også.
Jeg kan desværre ikke hjælpe mere, da det vil kræve et par timer og nok også adgang til din hjemmeside. Det er desværre ud over den gratis support jeg kan yde her.
Hov beklager jeg ser nu du er VIP medlem 🙂
Venligst send mig en email nick@nickmartin.com med et link til din hjemmeside, så prøver jeg at kigge på det. Jeg skal muligvis bruge adgang til din hjemmeside, men det kan vi lige se på senere.
Jeg har lavet en child til mit tema og laver CSS og php ændringer i denne. Hvordan slår disse ændringer igennem på min parentside?
Venligst Erik
Hej Erik, de slår ikke igennem på dit Parent theme. Du skal skifte fra Parent til dit Child tema i WordPress for at se ændringerne. Håber det giver svar?
Din side er vældig fin. Men stort set ubrugelig, jeg har nu meldt mig til som bruger hos dig, men det er ikke registreret, så jeg kan ikke se video´er. Du kan bare slette mig af systemet.