Du skal bruge Visual Composer og Advanced Custom Fields til dit næste WordPress projekt

Jeg er næsten ligeglad med hvilket tema du vælger, bare du vælger et med en rigtig god page builder – sådan en af dem hvor du kan ændre på strukturen for dit indlæg eller side, uden at skulle kode. Lige nu betyder det et tema med Visual Composer fra WPBakery. Her får du flest funktioner for pengene, og dermed flest muligheder for at gøre dit design til netop DIT design.

Visual Composer har ud af boksen nok at byde på, men en kæmpe underskov af add-ons sørger for at du kommer rigtig langt – og selvom kodning er sjovt, så er det nu engang indholdet det handler om, og den struktur vi skaber omkring det der er vigtig.

Når jeg har sagt Visual Composer, bliver jeg også nødt til at sige Advanced Custom Fields – evt. med et Custom Post Type plugin. Det er nemlig DejligLamas nye ACF-VC integrator plugin det handler om. Et problem som jeg selv stod med, kunne løses meget nemt med en mulighed for at trække Custom Fields ud i et Visual Composer grid, men den mulighed fandtes bare ikke – det gør den nu!

Målet er, at gøre det nemmere for dig at oprette nyt indhold med dine egne felter, og vise informationerne på en god måde for dine besøgende, uanset om det er løbesko, videofilm, bøger du har læst, kurser du afholder eller noget helt andet.

Mange ting passer bare ikke ind i “indlæg” typen.

Opskrifter har ingredienser og instruktioner, Bøger har udgivelses år, forfatter, genre osv., leverandører har adresser, serviceydelser og telefonnumre.

Et felt pr. information

Alle disse ekstra informationer er gode at sætte ind i felter, specifikt til deres type. Det giver nemlig dig mulighed for at opdele dit indhold ud fra disse informationer, og det giver dine besøgende en nem indgang til at finde lige netop det de søger fordi du både kan filtrere på det, men også sætte det op ekstra overskueligt med en Visual Composer.

Hvordan du kommer igang med Visual Composer, og hvordan du bruger Advanced Custom Fields er stof nok til et andet indlæg, men for at få dine nye informationer ud i Visual Composeren, er det nemmest at bruge det nye plugin der integrerer Advanced Custom Fields i Visual Composer.  Så er det lige så nemt at indsætte dine egne felter som det er at indsætte et billede.

Pluginet hedder ACF-VC Integrator, og du kan downloade det gratis på www.acf-vc.com

 

CSS: Blend mode – til når du skal lave de der fede gennemsigte farver (og andet sjov)

Vil du gerne have et billede med en farve oven på – sådan gennemsigtig du ved ?

Så skal du bruge:

background-blend-mode:

CSS-Tricks er stedet du skal gå hen, for at finde og lærer at bruge de mere avancerede dele af CSS, så skynd dig over på css-tricks.com for at se hvad der er muligt.

Jeg KUNNE godt have brugt det selv på forsiden af danner.dk (men dengang eksisterede det ikke), og nu har jeg lige anvendt det på Åfjord.no

Happinessbar LIVE fra WordCamp Denmark 2015

Hvert år arrangeres WordCamp i Danmark, og igen i år var jeg på scenen med en live version af WordPress’ hjælpe-spørg-en-ekspert om et godt råd mulighed; Happinessbaren.

I år var jeg flankeret af Linda fra Visue.dk og vi fik en demo på et fix af årets WordCamp hjemmeside som ikke fungerede 100% på mobilen – det har jeg spolet henover her, for det er 12-15min med meget nørdet frem og tilbage i Inspect element toolet.

Kender du ikke Inspect Element, eller “Kontroller Element” som det hedder på dansk ? 

Det findes til både Chrome, Firefox og Safari, så du er godt dækket ind. De virker selvfølgelig lidt forskelligt, men det kan du læse meget mere under hvert link:

Inspect Element i Chrome

Web Inspector i Safari

Inspector i Firefox

 

 

Sådan fjerner du links fra Googles søgeresultater

Kan man det ?

Tjaa, naaah. Google forebeholder sig jo en vis ret til at indeksere indhold som er online.

Ofte vil man have fjernet indhold, fordi det er gammelt og ikke længere relevant ift. det der søges på.

Dertil kan man bede Google om at fjerne indholdet vha. denne side

Værktøjer virker på sider der ikke længere er aktive. Det betyder at du først skal fjerne siden rent fysisk, så den ikke er online.

Det giver god mening, men skal indholdet fortsat være online, kan du en Noindex på sider og indhold. Det er så op til den enkelte søgemaskine at overholde den anmodning.

Samtidig er det værd  at tjekke om du har Google kampagner eller andre eksterne henvisninger til den pågældende gamle side. Sørg for at kampagner og eksterne links ændres, så de linker til en anden/ nyere side.

 

Sådan redigerer du mange billeder til hjemmesiden på en gang

Står du med en mængde billeder, der alle skal bruges online, og alle skal følge en vis standard højde eller bredte?

Bulkresizephotos.com klarer jobbet bedre en andre automatiserede løsninger jeg har set. Et kæmpe plus er at det fungerer UDEN at du skal uploade alle billederne til en eller anden server. Det foregår altså nede på din egen computer, og derfor ganske hurtig.

Overskuelige indstillinger

Når du har valgt biblioteket eller mængden af billeder du ønsker Bulkresizephotos skal arbejde på, får du mulighed for at vælge mellem; Scale, Longet Side, Width, Height og Exact Size.

De siger måske sig selv, altså gør et billede procentvis mindre, lav en fast bredte og lad højden varierer (for at holde proportionerne i billedet), eller omvendt, hold en fast højde. Eller ændre alle billederne til en specifik størrelse og udfyld evt. “baggrund” der måtte fremkomme ved det med en farve.

MEN, måske rigtig interessant, så kan du også bruge; Longest Side. Med den indstilling kan du sørge for at det enten er højden eller bredden der sættes, alt efter om du har med et høj eller bredformat billede at gøre.

Skærmbillede 2015-10-20 08.26.57
Når du stiller på tingene, får du nederst på siden heletiden et eksempel vist ud fra de billeder du har valgt.

Skærmbillede 2015-10-20 08.27.42

På den måde kan du hurtigt se om indstillingerne giver det ønskede resultat.

Gemmer originalen

Oh, og så skal du ikke være bange for at prøve dig frem, for ændringen sker ikke på dine originale billeder. Du får helt automatisk et nyt sæt billeder med de ændrede proportioner.

Og HUSK, en god tommelfingerregl ift. billedestørrelser:

Filen aldrig større end 300kb for et fuldskærmsbillede, og max 1900px i bredden for de fleste skærme.

 

Bookmark http://bulkresizephotos.com/ nu :)

Se mit Onlinehajs hangout hvor vi blandt andet taler om hvilke plugins og temaer der er gode..

Jeg snakker jo oftest KUN om WordPress og har netop været i Hangout med Onlinehaj.dk hvor vi kom rundt om temaer, plugins og det med at arbejde med indholdet frem for “hjemmesiden”

Se optagelsen her:
http://youtu.be/d8hICBdimsw

 

WordPress et år fra nu – set i lyset af WordCamp Europe

Med #wceu vel overstået og fint dokumenteret af Visue, er det tid til at tænke over hvor WordPress er på vej hen, ud fra et Dansk perspektiv.

Årets store emner var

Content editing

Vi så, eller genså, hvordan FrontKit ikke var nået synderligt længere end sidst, men dog stadig en ret interessant vej for indholdsredigering. Et godt tegn på at, trods den støj drag and drop themes giver til selve tekstforfatter delen, så er der også fokus på at gøre WordPress til et endnu bedre værktøj til at skrive og redigere tekst i, direkte.

Hele 3 talks om Content editing, og alligevel savnede jeg en stillingtagen til de mange drag and drop themes, der blander copy sammen med struktur. Det er nemlig et område hvor det kan gå rigtig galt for et projekt, når der ikke tidligeligt i en designprocess tages hånd om den dynamiske natur indhold og design pludselig får i hænderne på content editoren.

Personligt tror jeg rigtig meget på denne sammensmeltning vi får med Drag and Drop builders, og har længe været fortaler for Visual Composer som værende den bedste drag and drop motor på markedet – det er den stadig. Men tjek lige layerswp.com ud også. Det er et builder tema som ser så super spændende ud at jeg er igang med at teste det af – det syntes jeg også du skal til dit næste projekt.

Drag and Drop giver os mulighed for IKKE at låse hele strukturen for designet fast på et alt for tidligt tidspunkt, og på den måde sørge vi for at kunne levere en hjemmeside der nemt kan ændres, i takt med det indhold som siden skal bære også ændre sig.

Design bliver på den måde en specialiseret process, hvor design til enkelt elementer, og deres dynamiske sammenhæng bliver alt afgørende for et fremtidssikret design.

Så næste gang du skal have designet noget, så bed ikke kun om et færdigt design, men om specifikke elementer, som du selv kan sammensætte vha. en drag and drop builder.

Specialiseret hosting

er allerede vejen frem – det har vi bare ikke helt fattet i Danmark endnu, og os der har, er stadig vilde med Siteground.
(Note: ovenstående er et affiliate link, som jeg tjener penge på)

Tenko Nikolov fra Siteground holdt et godt oplæg om hvordan fremtidens cloud hosting ser ud, som får mig til at rulle med øjnene når jeg for load-capacity problemer på en kundes danske hosting udbyder, WTF !! #skerbareikkei2016vel?

Jeg er ikke server specialst, men jeg ved at det er her vi sikre hastighed,  stabilitet og sikkerhed for vores sites, vigtige faktorer idag, så vælg nu bare en ordentlig host.

Kode

WP REST API, backbone og kode i det hele taget, var selvfølgelig på programmet i stor stil. Ingen tvivl om at REST API’et kommer til at ændre hvordan vi skal tænke WordPress og de muligheder det giver i forhold til WordPress som bagvedliggende maskine til fremtidens web services / apps.

Jeg havde forventet mindst et oplæg som opfølgning på Matt’s Q&A fra WordCamp i Sofia i 2014, hvor han netop så frem til de mange mobile apps der kan kører på WordPress.

Det så vi desværre ikke så meget til i år, men med en markeds share på snart 25% af internettet der drives af WordPress og antallet af mobile internet besøg ca. 30% –  spået stigende til 50% i midten af 2016, kan det ikke vare længe før vi ser nogle fede WordPress drevne mobil løsninger.

Læs lige den sætning igen, den er vild men vigtig – 50% af dine besøgende vil komme fra mobilen  – det er på tide at tænke mobil-first for langt de fleste.

Accessibility

Der tales mere og mere om Accessibility som en vigtig faktor når vi bygger sider. Både ud fra den klassiske content tanke om korrekt brug af H1, alt tekster, link-naming osv. , men også ud fra en diversitets tanke, altså det at vi ikke er ens som mennesker. En pointe som jeg ikke havde hørt før, men som giver mening at tænke på, når vi designer og koder hjemmesider.

I Danmark skal offentlige hjemmesider endda leve op til visse krav. Jeg lagde mærke til at det godt nok er vigtigt, og jeg forstår pointen i, at vi ikke alle læser lange tekster, ser så godt eller har to hænder på tastaturet 95% af dagen.

Men jeg spotter en modsatrettet tendens i de værktøjer, vi anvender til at hjælpe os med at bearbejde indhold fra Internettet.  De bliver mere og mere intelligente, faktisk så intelligente, at vi som udviklere blev bedt om IKKE at anvende nogle af de accessibility tags der findes. De forstyrrer mere end de gavner, da værktøjerne idag er gode til at læse koden selv, og pointen må derfor være at semantisk korrekt HTML er det du skal sigte efter.

Elefanten i rummet

Ud over emnerne var der lidt af en elefant i rummet , nemlig Woocommerce – det var allerede old news i communitiet, og derfor ikke noget der blev brugt tid på, på WordCamp. Med Woocommerce’s indtræden i Automattic familien tidligere i år, er fremtidsudsigterne gode, for en endnu bedre oplevelse på shop området.

En samling af WordPress og Woocommerce under samme hat, kan kun betyde væsentlige fremskridt for den allerede voldsomt populære shop løsning. Et ankepunkt mange har haft med WordPress – det er ikke rigtig en shop… well it is now!

Vi kommer helt bestemt til at se en shop løsning fra Woocommerce der nyder godt af insider viden fra Automattic folket over det næste års tid.

Og for lige at blive i de store nyheders hjørne, så er YOAST – vores alle sammens SEO plugin leverandør, blevet købt af Crowd Favorit, som i forvejen er en kæmpe på WordPress scenen.

Fremtiden

Tingene går i min optik mod en samling af de vigtigste elementer i og omkring WordPress, på færre og ganske ressourcestærke organisationer. Samtidig ser vi en hastigt voksende underskov af bedre og mere specialiserede services. De små ikke specialiserede udbydere af WordPress produkter dør.

Udfordringen

bliver at hitte rede i de bedste special løsninger og 3. parts værktøjer i dette kæmpe marked, og i tilknytning til det, de mange bureauer der tilbyder webudvikling og rådgivning.

Til gengæld

bliver det endnu lettere at vælge og bruge de rette værktøjer til 80% af arbejdet. Dermed bliver det ganske overskueligt for flere at komme igang, og endda nå rigtig langt, blot ved at bruge de elementer der er størst på markedet.

Elementerne du skal bruge i 2016

Der er et hav af gode plugins og 3.parts løsninger du nok bør overveje, og den helt rette sammensætning kommer an på netop din virksomheds situation. Det du betaler et bureau for at hjælpe med normalt.

Men selv uden hjælp går du ikke helt galt i byen med en basispakke af WordPress på f.eks. siteground (stadig et affiliate link)
Tema, f.eks. LayersWP eller et andet godt tema med Visual Composer
En basis pakke af følgende plugins: iThemes securityUpdraftPlus backup, Yoast SEO, Jetpack, Google Analytics, Mailpoet.

 

25% af internettet gør det, så der er INGEN grund til, at du ikke også bruger WordPress.

Jeg tror fremtiden bringer endnu flere SKALLERBARE, MOBILE og KONTEKST baserede løsninger. Hvis du ikke har disse elementer med i dine tanker om online tilstedeværelse for 2016 og frem, så er du bagud – ring!

Så snakker vi ;)

Skræmmekampagne: Opdater dit site eller dø!

Hver gang jeg får en opringning fra en ulykkelig WordPress ejer, dør jeg lidt inden i

Faktum er, at langt de fleste med hackede eller fejlbehæftede sites, kunne have været undgået det, med lidt af Mærsks rettidige omhu. Brug nu det, det koster at holde din hjemmeside opdateret LØBENDE!

Det koster langt mere at skulle eftersøge og fjerne hacks eller forkert sammensatte plugins når skaden først er sket.

Der skal to ting til

1. Sørg for at du har backup og sikkerheden i orden. Det er langsigtet tankegang, ikke noget du skal bruge lang tid på, men sørg for at du kan genskabe din hjemmeside og at du ikke bliver ramt af de helt klassiske hackerangreb. Det gør du f.eks. med UpdraftPlus og iThemes Security plugins.

UpdraftPlus er rigtig nem at gå til, også hvis du laver småfejl, hvor du stadig har adgang til backenden. Du nemlig vælge at hente en backup af tema, database eller filer, alt efter hvad der er gået galt. Desuden kan plugin’et sende en fil til f.eks. Dropbox, så du har en backup liggende eksternt, hvis det virkelig skulle gå galt. MEN – husk på at alle hosting selskaber idag tager backup af dine ting, så du kan altid ringe til din udbyder hvis du vil have en backup “rullet tilbage”..

iThemes sørger for at du ikke bliver lagt ned af klassiske brute force angreb og andet skidt. Det kan holde næsten alt fra døren, undtagen dårlig skrevet kode… Det finder du oftest i plugins du installerer, og hvis du installerer noget der er skidt, ELLER (se punkt 2), ikke opdateret, så hjælper iThemes ikke noget.

2. At du, hver gang at der sker opdatering af WordPress, af dit tema eller et af de mange plugins du har installeret;

– undersøger hvad opdateringen gør
Er det et sikkerhedshul der lappes?
Er det nye eller ændrede funktioner?

Sikkerhedshuller, er der ingen vej uden om, de SKAL på – ellers er du sårbar og så er alt andet lige gyldig, hvis du nu er uheldig og en hackerbot kommer forbi dit site.

Nye eller ændrede funktioner kan du overveje om er nødvendige. Ofte kan du ikke undgå dem når der også opdateres for sikkerhedshuller, og du bliver derfor nødt til at tage hånd om, eller i det mindste acceptere at nu er der noget der sker eller gøres på en anden måde.

– overvejer hvad opdateringen af netop det plugin, tema eller WP kommer til at betyde for resten af din opsætning
Kan de forskellige versioner fungerer sammen?
Bliver der introduceret nye funktioner eller design elementer, som nu skal tages hånd om?

Det er WordPress version der dikterer om tingene virker sammen – men ingen garanti. Når WordPress 1-2 gange om året kommer med en større versions opdatering, kan det ofte være en god ide at vente med at springe på vognen, indtil du er sikker på at alle dine plugins og tema også er opdaterede. Ellers risikerer du at tingene ikke virker sammen.

Det betyder desværre ikke, at du er sikker på at de enkelte plugins kan fungerer i kombination, så her er du  stadig nødsaget til at tjekke de enkelte plugins ift. hinanden.

De senere år er “bygge temaer”, temaer med page builders, blevet populære. Med dem kommer man hurtigt til et flot resultat, men du er underlagt en udviklers luner ift. designvalg, så dine ændringer i et childtema kan pludselig stoppe med af fungerer, hvis temaet ændre væsentlig struktur. Det så vi sidst da WordPress gjorde det obligatorisk for temaer at anvende Customizeren istedet for de klassiske settings pages.

 

PUHA, en omgang, jeg bliver helt bange, hvad skal jeg gøre?

Vejen til et simplere liv

Jo færre plugins og simplere tema, jo færre af ændringer vil forekomme – hvilket på den lange bane kan være godt! Derfor er der også mange udviklere der anbefaler at bygge temaer og andet fra bunden, eller på basis af noget som ikke har en masse ting med sig som vi måske ikke får brug for alligevel.

Hvis du ikke bygger selv, så er min klarer anbefaling; simpelt tema, og få men gode plugins.

Lad være med at installere temaer som “udvidder” design muligheder (kasser, kolonner, knapper, popups, shortcodes i et væk), så hellere vælg et tema der har de dele, hvis du ikke kan leve uden. Installer istedet et par gode plugins som f.eks.: Jetpack, Yoast SEO, WP-Edit, iThemes og UpdraftPlus.

 

Er dit site allerede opdateringsmodent ( det er det altid), så er det nu du skal overveje om du skal trykke på OPDATER knappen, eller sende en mail til opdatermignu@dejliglama.dk ;)

#pøjpøjmeddet


Og så et par af de generelle sikkerhedsråd

Åfjord.no

Det er fedt når man får lov til at arbejde med et team der tager en udfordring op i sådan en grad som Åfjord holdet har gjort det.

I samarbejde med Konvers kommunikation og iosq.dk har vi implementeret et stykke oplevelsesbaseret hjemmeside for Åfjordutvikling på www.Åfjord.no

Åfjord er en utrolig smuk region et par timer tid nord for Tronheim, med både tourisme og erhvervs interesser for slet ikke at tale om en hel masse aktive borgere. Derfor har Konvers skåret kommunikationen ud i en række sektioner som alle bygger på en stor base af oplevelser og der er lagt vægt på store flotte billeder og en tag-baseret opdeling af indholdet så du kan fordybe dig i mulighederne.

“Opplevelser” eksisterer i tid og sted, og inden for tourisme, at bo i Åfjord, erhvervs rettede oplevelser og en helt særlig sektion som hedder Utopia, hvor fremtidens Åfjord allerede indeholder en række oplevelser.

Åfjord har allerede haft besøg af Claus Meyer, så du kan være sikker på at et besøg også er lig med god Lokal Mat :)

Sitet er iøvrigt under konstant udvikling, for vi står jo ikke stille og det gør en hjemmeside heller ikke. F.eks. er det super fedt at oplevelserne automatisk tilpasser sig årets gang, så får du altid serveret det der er mest aktuelt lige nu.

Jeg samler på glade kunder, og her er en af dem

Innovation Roundtable 2015

For andet år i træk arbejder vi sammen med Innovation Roundtable om deres hovedevent Innovation Roundtable Summit.

Det er en vild omgang WordPress bygget på Total temaet, men med nogle specialiserede Visual Composer elementer og posttypes som giver os mulighed for at styrer Speaker delen som er en videreudvikling af standard GRID visningen.  Vi har lavet en “push-down” visning af Speaker detaljerne så du ikke behøver at forlade grid oversigten. Hver speakers detalje-visning indeholder et fuld Visual Composer redigerbart område, inklusiv hentning af en præsentation posttype (altså den enkelte talers oplæg) – vi taler posttypes in posttypes. Meget nørdet..

Ud over det er der selvfølgelig arbejdet med en opdatering af designet fra 2014, og en række nye ikoner og farver er introduceret af Lars fra IOSQ som har bragt os sikkert ind i 2015.

Sitets indhold og form ændre sig iøvrigt løbende op mod afholdelsen af eventen, så det er en helt klassisk event side som aldrig sover!

 

Facebook + WordPress + IFTTT = Connected

Jeg er vild med WordPress, og jeg ved at I er vilde med Facebook, så tag lige at tjek IFTTT.com’s mange muligheder for at sende indehold FRA Facebook til WordPress eller den anden vej hvis du hellere vil det…

Nu er jeg også fan af Jetpack, som jo kan sende din WordPress posts ud til Facebook, Linkedin, Google+ og Twitter, så hvis du BARE vil det, så installer Jetpack NU.

Hvis du er ude efter mere specialiserede løsninger, så er det den her samling hos IF THIS THEN THAT du skal kigge på

Let’s pick a fight with WordPress

At sætte en hjemmeside op med WordPress er en balancegang mellem nemme plugin kombinationer og vild kode der bryder rammerne for hvad et content management system kan idag.

Man skulle egentlig tro, at det store plugin udbud havde alt hvad man kunne ønske sig, ofte i flere variationer. Men virkeligheden er nok en lidt anden.

Nemme plugin kombinationer kan skabe et fantastisk flot og funktionelt site, men måske nærmere en visuel rodebutik med funktioner der kan for meget, eller for lidt og som ikke giver et ønskværdigt flow rundt på siden (Det de smarte kalder UX).

At få tingene til at lykkedes GODT kan altså være lidt af en kamp…

Men hov, Kåre, er du ikke fortaler for WordPress ? 

Jo! Bestemt – det handler nemlig om den gode gamle 80/20 regel. Lad os komme 80% af vejen med de standard løsninger der findes for 20% af budgettet/tiden, og lad os så bruge 80% af budgettet på de sidste 20% af arbejdet der giver den RIGTIGE løsning.

De 80% af budgettet gælder både for mig som leverandør, og dig som kunde, der skal nemlig bruges tid på de små detaljer i indholdet, hvis du vil have en RIGTIG løsning.

Det er her overskriften kommer ind – tyvstjålet fra Jack White i filmen It might get loud hvor han siger noget a la “pick a fight with the guitar, pick a fight and win the fight”.

Det er når vi bruger 80% af vores energi på de svære 20%, det bliver rigtig sjovt ;)

Hej, jeg hedder jo iøvrigt Kåre

Nu kom jeg lidt hovedkulds ind i det der med at blogge,så jeg glemte helt at introducere mig selv.

Jeg hedder Kåre Mulvad Steffensen, 36.

Uddannet programmør I 2000 og kodet min del ASP frem til 2006 hvor jeg blev projektleder og produktudvikler med fokus på php. Stiftede DejligLama I 2009 som et udviklingshus med 100% fokus på WordPress som jo heldigvis også kører på PHP.

Gift med Trine, og far til Linus som er lige så ny som bloggen her. Elsker outdoor udstyr, og drømmer nok mere om det end jeg bruger det, men sådan er det jo bare!

En mere kedelig gennemgang af mit liv kan du læse her, eller se hvad der sker på Facebook eller Instagram. Du må selvfølgelig også gerne skrive eller ringe

Så nemt skifter du skriftype på dit WordPress tema

Skriftyper eller fonte som de også hedder er en del af designet, og et tema som du har fundet har måske nok det rette layout og struktur, men ikke de rigtige skriftyper.

Jeg anbefaler at bruge Google Fonts, da der er så mange gode at vælge imellem. Og så er de nemme at implementerer i WordPress.

Du kan vælge at implementerer ved at tilføje et kaldt til Googls font bibliotek i din header.php fil, og lave yderligere styling via style.css filen i dit child theme…

MEN

du kan også bare installerer Typecase, det er simpelthen den nemmeste måde at ændre font, jeg længe har set.


 

Når du først har installeret Typecase, vil du blive præsenteret for en søgbar liste af Google fonte. Du vælger den eller de fonte du ønsker at bruge på dit site, ved at trykke på et lille grønt plus.

Sådan tilføjer du en font med Typecase Web Fonts

 

Det er en god idé at vælge en let læselig skrifttype til selve teksten og en anden til overskrifter mv. Udvalget er stort, så tricket er at vælge to fonte der matcher hinanden i stil.

Det er der en masse designere der har mere styr på end mig, men lad dig inspirerer og prøv dig frem.

Når du nu har valgt en skriftype, skal du vælge hvilke “selectors” den nye font skal virke på. En Selector er et CSS begreb. F.eks. er H1 en selector. Så hvis din nye font skal virke på H1 elementer kan du skrive h1 …

Du finder dit temas selectors ved at

bruge Google Chrome’s Inspect Element værktøj eller Mozillas Firebug (Mere om disse værktøjer senere – de er MEGET nyttige)

Her viser jeg hvordan jeg bruger Inspect Element til at finde den rigtige CSS selector for derefter at indsætte den i Typecase.

 

Typecase kræver ingen kode og faktisk heller ikke et child theme som normalt vil være påkrævet ved sådan en ændring.

Det virke på alle temaer, så hvad stopper dig fra at lave en hurtig ændring?

 

Sådan laver du et child theme i 5 simple skridt

Det er virkelig ikke så svært, så nu jeg står og skal lave et child theme til mit Twenty Fifteen tema, kan du jo lige så godt se med

Grunden til at jeg opretter et child theme er fordi jeg gerne vil have et logo (billede) ind i sidebaren istedet for temaets standard sidetitel og tagline som du kan ændre under Udseende > Tilpas, i wp-admin.

Under Udseende > Tilpas finder du din sidetitel som er navnet på din hjemmeside, og mulighed for en beskrivelse.
Under Udseende > Tilpas finder du din sidetitel som er navnet på din hjemmeside, og mulighed for en beskrivelse.

Jeg vælger at lade felterne, og især beskrivelsen være udfyldt og afkrydset til at blive vist i headeren, selvom jeg rent faktisk kommer til at fjerne dem i mit kommende child theme. Det gør jeg for at bruge felterne her til at give min side en meta beskrivelse som måske kan hjælpe lidt på SEO’en ;)


Nu er vi klar til at oprette de filer et Child tema består af.

Faktisk er det kun en fil, nemlig style.css altså en cascading style sheet fil som skal ligge i et bibliotek med det navn du gerne vil have at dit child theme skal hedde.

UPDATE:

Tiderne skifter og min viden skulle lige opdateres, så selvom videoen her viser noget der fungerer, så anbefaler WordPress nu at man enqueuer (sætter i kø) ens style sheet filer, og ikke laver en @import som var den gamle måde.

For at få det til at lykkedes er det nødvendigt at have en functions.php fil i ens child theme også. Så artiklen er så den reflektere denne best practice.

Se en video af mig der går gennem de 5 skridt på ca 35 sekunder ;)
#oldschool @import måde – fyfy…

1.

Via FTP, f.eks. FTP programmet FileZilla skal du navigere ind til dit tema bibliotek i din WordPress installation.

Det ser nogenlunde sådan ud:

/wp-content/themes/

Vær opmærksom på at der godt kan være et par biblioteker FØR dine WordPress filer når du browser dig frem til dem via FTP, f.eks. WWW/ eller HTDOCS/.

 2.

Opret et nyt og tomt bibliotek under themes/. Jeg vælger at oprette et tema kaldet dejliglama2015, så mit bibliotek kommer til at se sådan ud:

/wp-content/themes/dejliglama2015/
Læg mærke til at dejliglama2015 er åbent, men tomt
Læg mærke til at dejliglama2015 er åbent, men tomt.

Jeg anbefaler at bruge små bogstaver hele vejen gennnem ens biblioteks og fil navne generelt, da det er det flest servere kan forstå.

Store bogstaver, æ,ø,å og andre special tegn her under også mellemrum skal man holde sig fra når der oprettes filer eller biblioteker.

3.

Gå ind i dit nye bibliotek og opret en ny fil. Filen skal hedde style.css

wp-content/themes/dejliglama2015/style.css

style.css fil oprettet men tomNavnet style.css er vigtigt, da det er den fil WordPress kigger efter for at finde ud af hvad der gemmer sig i et bibliotek under /themes mappen.

Når et tema er aktivt inde i wp-admin, aflæses style.css filen for at afgøre hvorledes temaet tager sig ud.

4.

Vi skal nu sørge for at vores nye mappe og ene fil faktisk ER et tema, men vi laver ikke et helt tema, men vælger blot at refererer et eksisterende tema for de elementer WordPress måtte kræve af et tema, hvis de da ikke findes i vores child theme mappe.

En gang til – altså, vi laver et tema, men siger til WordPress – “HEY, hvis du ikke kan finde de filer du plejer at bruge til at vise et tema, så kig lige i den her mappe.” Vi skal altså angive den her anden mappe, også kaldet parent mappen, eller parent theme.

WordPress vil i vores tilfælde så kigge efter ALLE andre filer end den ene vi har lavet, nemlig style.css. Og faktisk vil WordPress ikke nøjes med at kigge på filerne, men også inde i dem, så selvom vi har style.css så har parent temaet jo også en style.css. Dens design elementer, altså css’en vil gøre sig glædende i alle de tilfælde hvor vores child theme IKKE har en css definition.

Et Child theme overskriver på den måde de  CSS definitioner et parent tema måtte have.

Her kan du se hele den tekst, eller KODE som du skal skrive ind i din tomme style.css

/*
Theme Name: Twenty Fifteen Child
Description: A Twenty Fifteen Child Theme
Author: DejligLama
Author URI: http://example.com
Template: twentyfifteen
Version: 1.0.0
*/
/* =Dit child temas css overskrivninger starter her
-------------------------------------------------------------- */

Alt tekst der står mellem en /* og en */ er en kommentar, og ikke noget kode andre systemer end WordPress bruger til noget.

“Theme name:” er dit selvvalgte navn til dit tema. Her må du gerne være vildere end dejliglama2015, og det kunne f.eks. godt hedde DejligLama child tema for 2015.

“Description:” er en forklaring til temaet som vises i wp-admin området under Udseende – Temaer, så her kan det betale sig at give en forklaring på hvad dette tema gør eller kan.

“Author:” er dit navn, gerne dit WordPress.org brugernavn så folk kan finde dig hvis de gerne vil have hjælp ;)

“Author URI:” er en henvisning til hvor folk kan finde dig på nettet.  Det er måske ikke super relevant hvis du bare laver dit eget tema, men det er her du kan finde ophavsmanden til andre temaer du bruger.

“Template:” er SUPER VIGTIG, og skal være 100% lig med parent temaets biblioteksnavn. I mit tilfælde er det “twentyfifteen” med små bogstaver lige som biblioteksnavnet.

Det er blandt andet her vi fortæller WordPress at vi bygger dette tema oven på et andet, en template ;)

“Version:” ikke vigtig, men for kodenørder er det godt at holde styr på hvor mange gange man har været igang med at ændre på ens kode ;)


For at give vores nye style.css fil vægt, skal den enqueues via en functions.php fil

Når vi sætter vores nye style.css fil i kø efter parent temaets style fil, vil vores child theme overskrive parent temaets styles.

functions.php filen oprettes på samme måde som style.css, og skal indeholde:

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style',
get_stylesheet_directory_uri() . '/style.css',
array('parent-style')
);
}

Her beder vi WordPress sætte parent themets style.css i kø før vores child theme style.css.

Alt fra parent temaets style.css kommer altså til at stå før de CSS definitioner vi laver i vores child theme. Det er derfor vi kan overskrive et parent themes CSS.

Min style.css fil kommer med mit child theme navn til at se således ud:

/*
Theme Name: DejligLama 2015
Description: Et Twenty Fifteen Child Theme
Author: DejligLama
Author URI: http://dejliglama.dk
Template: twentyfifteen
Version: 1.0.0
*/
/* =Theme customization starts here
-------------------------------------------------------------- */

5.

Når style.css og functions.php filerne er gemt, er det tid til at gå ind under Udseende > Temaer.

Før musen hen over temaet med dit navn, og tryk på den grå “Aktiver” knap.
Aktiver dit child theme

Skete der ikke noget specielt ? – Så har du gjort det hele rigtigt, og din side kører nu et tomt child theme, klar til dine egne CSS ændringer (og meget mere).

 

Kan du selv finde rundt på din hjemmeside ?

Du kender det sikkert selv, man kommer ind på en hjemmeside, og så kan man ikke finde det man kom der for…

Det sker typisk hvis hjemmesiden ikke har et klart formål, eller efter længere tid hvor indhold har fået lov til at få hjemmesiden til at “sande til”; altså at vi har indhold liggende lidt på må og få, så det forstyrrer mere end det oplyser og vejleder.

Når vi bygger hjemmesider er et “See/ Do” flow diagram et godt værktøj til at skabe et nødvendigt overblik på hjemmesidens kommende struktur, også inden vi overhovedet har skrevet en linje kode, designet eller forfattet en smart tekst…. det er smart.

Start med forsiden

Udfyld de to elementer See; hvad en besøgende ser, og Do; hvad en besøgende kan gøre på netop den side, for at komme videre ind til dit indhold.

For hver ny side, eller ting en besøgende kan (Do) som kræver lidt beskrivelse men ikke nødvendigvis en hel ny side, laver du en ny See/ Do. Efterhånden hænger dine See/ Do-papirlapper sammen, og danner grundstrukturen for din hjemmeside.

Det er OK, ikke at udfylde det hele på en See/ Do inden du går til næste – kom tilbage til en side når det giver mening i forhold til det flow du gerne vil understøtte på din hjemmeside. Husk også at en side på din hjemmeside kan have flere formål og derfor være en del af flere flows.

Har du allerede en side som er lidt svær at bruge

Så det er også en god test for at finde ud af om din hjemmeside hjælper til at opfylde formålet (MÅLET) med hjemmesiden… kan folk finde derhen hvor du gerne vil have dem, f.eks. en køb eller kontakt knap ?

 

Gratis download lige her

Download min See-Do-skabelon lige her, og kom igang NU.

Jeg lever af at rådgive om WordPress og online strategi. Har jeg hjulpet dig videre, må du gerne hjælpe mig, ved at give mig en kommentar med på vejen her eller på facebook.

Jeg hjælper dig selvfølgelig også gerne igang med dit See/ Do træ.