Del 4 - Get ready for a plugin-party!

Forberedelse: Åbn din MAMP-server og hjemmeside og log ind. Du kan finde hjælp til dette under Lektier i del 3, hvis det er.

WordPress fleksibilitet kommer af et kæmpe stort community, som hver dag arbejder hårdt for at vedligeholde de 1000-vis af plugins og temaer, der er mulige at tilføje til din nye hjemmeside. I denne del vil vi komme ind på det meget populære plugin Yoast SEO for at vise et eksempel på, hvordan du kan udvide WordPress’ funktioner og hvor let det er. Derudover vil vi redigere lidt i vores tema og oprette et child-theme, så tema-opdateringer ikke overskriver vores ændringer. Til sidst prøver vi at lave noget udvidet CSS.

Først og fremmest - hvad er SEO?

SEO står for Search Engine Optimization og går ud på at optimere din hjemmeside, så det bliver lettere for evt. interesseret at finde dit indhold/hjemmeside på Google, Bing etc.

WordPress hjælper med det grundlæggende SEO, men for at få fuld kontrol over, hvad du gerne vil have, at Google viser (vi bruger Google i det her eksempel, da det står for ca. 80% af de søgninger, som bliver foretaget på internettet) bliver du nødt til at udvide dine funktioner. Altså er det tid til at installere vores første plugin!!!

Find dit plugin (helst via Google) - og installér det!

For at installere et plugin, som kan hjælpe os med vores SEO, gå da til google.com og tast “WordPress SEO”.

Man kunne sagtens være gået ind via Backend under punktet i menuen “Plugins”, men det er vigtigt at vide, hvordan man finder plugins via Google og installerer dem den vej, fordi man der kan læse mere om pluginnet og se andres kommentarer. Altså gøre en smule forarbejde i stedet for bare at installere det første og det bedste under Plugins.

Gå ind på Yoast’s pluginside (læg mærke til at vi er inde på wordpress.org - dette er et godt tegn på, at det er et trusted plugin) og tryk derefter på den blå knap “Download”.

Nu downloader du en zip-fil, der indeholder pluginnets filer, men pak den ikke ud. WordPress’ plugin installationen foregår med zip-filer.

Gå ind på din Backend og tryk da på “Plugins” i venstre menu. Tryk derefter på “Tilføj nyt” øverst og upload da din downloaded zip-fil. Nu giver resten sig selv. Husk at aktiver dit plugin!

Nu skulle du gerne se din plugin-liste, hvor Yoast SEO er fremhævet med en lyserblå farve, da det er aktiveret og klar til brug!

Yoast er installeret - men hvad er så fedt ved det?

For at se hvor vildt et plugin kan være, gå da til en af dine sider.

Nu skulle du gerne have et ekstra felt under din normale tekstfelt, som ser nogenlunde sådan her ud:

Spørgsmål: Hvad tror du det er? Ligner det noget, som du har set før?

..

..

..

Ja! Det er Google!

Det er et eksempel på, hvordan denne sides fremvisning ville se ud som et søgeresultat på f.eks. google.com. Den øverste blå overskrift er sidens SEO-titel (overskriften for et søgeresultat) og det nederste er SEO-description (beskrivelsen af linket - hvad indeholder siden?)

I mit tilfælde, hvis jeg havde gjort mig umage og arbejdet hårdt på min hjemmeside i flere år, havde jeg måske ligget højt på søgeord som: “køb hestevogn”, “hestevogn jylland” og “restaurering af hestevogn”. Så kunne jeg altså gå mine sider igennem og skrive en indbydende og beskrivende tekst, så jeg måske fik endnu flere besøgende.

Udfordring Prøv at rediger i din forhåndsvisning ved at trykke “Redigér snippet”.

Yoast SEO giver dig ikke kun mulighed for at redigere i hver af dine siders/indlægs/kategories forhåndsvisning til søgemaskiner, det giver dig også et par fifs med på vejen til, hvordan du gør det bedst og en farvekode for, hvor godt de mener, at du har gjort det, så du let kan få et overblik over hvilke sider/indlæg/kategorier, som mangler en kærlig hånd.

Andre indstillinger: Indstillinger for Yoast SEO er ude i menuen under “SEO”. Dette er dog ikke altid at indstillinger for et plugin er placeret der. Det afhænger meget af størrelse og funktion. Men oftest vil det være at finde under “Indstillinger” eller have sit eget menupunkt.

Vi har desværre ikke tid til at gå mere i dybden med Yoast. Det var et ultrakort indblik i SEO og funktioner, som et plugin kan tilføje din din hjemmeside. Funktioner, som rigtig mange hjemmesider gør brug af. Yoast er eksempelvis downloadet 40 millioner gange.

Læs mere om Yoast her, hvis du har lyst.

Er der en bagside af plugin-medaljen?

Før vi går videre, er det vigtigt at besvare spørgsmålet:

Spørgsmål: Skal jeg bare installere plugins, så snart jeg mangler en funktion, eller er der en bagside ved det? Gør det noget at have mange plugins installeret?

Svar: Ja, der er en bagside: hastighed og sikkerhed. Mange af de WordPress-hjemmesider, som jeg har overtaget efter en anden, har haft 5-10 plugins installeret, som ikke blev brugt - eller var lette at udskifte med få linjer kode. Efter at de var fjernet/tilpasset blev hjemmesiden hurtigere og ikke mindst lettere at navigere i.

Derudover er nogle plugins så dårligt kodet, at de kan være en trussel mod din sikkerhed, men det er sjældent - så længe, at du sørger for at opdatere dine plugins regelmæssigt.

Husk dog: Installér kun et plugin, hvis det er højest nødvendigt og husk at afinstallere det igen, hvis du ikke bruger det længere.

Tema - hvad nu?

Dit tema Twenty Seventeen, som er installeret på din side, er et meget simpelt tema med få funktioner og muligheder. Det er et godt startsted, så du ikke bliver overvældet første gang, at du åbner et tema op som f.eks. Avada, Enfold eller X theme (tre meget populære og funktionelle temaer med page-builders fra Themeforest)

Ved de større temaer er der oftest også et menupunkt kun til det (ligesom med pluginnet Yoast SEO). I Twenty Seventeen’s tilfælde forholder det sig ikke ådan, og vi skal her gå til Udseende > Tilpas > Temaindstillinger for at få mulighed for at ændre på indstillingerne.

Her har du mulighed for at vælge en side til hver af felterne på forsiden.

Udfordring 1: Gå til sider og opret en ny side, som skal være en del af din forside. Find et billede på over 1000 px i bredden, som du tænker vil passe godt til din side og upload det under “Udvalgt billede” (oftest nederst i højre hjørne af din sides redigeringsvindue).

Udfordring 2: Gå nu tilbage til Tilpas > Temaindstillinger og vælg din nyoprettet side som øverste del af din forside. Tryk “Udgiv” og besøg derefter forsiden. Hvad ser du?

Temaet giver dig altså mulighed for at bruge sider og siders udvalgte billede som moduler til din forside. Det kan i sidste ende skabe en flot og lang forside, hvor du kan scrolle igennem forskellige emner og billeder. Et eksempel på en funktion, som er indbygget i temaet.

Childtheme - hvorfor er det vigtigt?

Måske husker du afsnittet Parent og child? - ja, det bliver brugt til at forklare koder fra del 2. Dette brug af ordet child er ikke helt det samme, men et child-theme har på samme måde en parent, som i dette tilfælde er vores allerede eksisterende tema Twenty Seventeen.

Vi vil altså gerne give vores parent-theme Twenty Seventeen en overbygning (vores child), hvor vi kan være sikre på, at evt. ændringer i parent temaet ikke overskriver vores ændringer i child-temaet.

Ændringer i parent theme består oftest af en opdatering. Det er helt afhængigt af hvilket tema og hvilke udvikler, der står bag, hvor ofte dette vil ske. Hvis du har lavet ændringer direkte i dit parent temas filer, så vil en opdatering overskrive de ændringer. Det går ikke!

Måske et billede vil hjælpe lidt med forklaringen:

WordPress leder altså først efter filer i dit child tema og du kan derfor overskrive filer i dit parent-tema. F.eks. filen style.css. Hvis du lægger den i dit child-theme vil den overskrive dit parent-themes style.css.

Note: Det er svært at forstå child-theme som nybegynder i WordPress. Det vigtigste lige nu er at forstå, at det overskriver parent-theme og derfor ikke bliver overskrevet af opdateringer. Det er derfor en rigtig god vane at sætte et child-theme op hver gang, at man starter en ny WordPress side.

Bonusspørgsmål: Hvad er ulempen ved child-theme? Hvad er det, som det ikke bliver?

Oprettelse af child-theme

Istedet for at gøre det direkte i koden, så kan man installere et plugin, som gør det for en.

Udfordring 1: Installer pluginnet One-Click Child Theme helt selv! Husk at aktivere det!

Udfordring 2: Find indstillingerne til pluginnet (det ligger ikke der, hvor jeg tidligere fortalte at plugin-indstillinger oftest gør) og skriv “Twenty Seventeen Child” i navn. Generer derefter et child-theme.

Efter at dit child-theme er aktiveret kan du tilgå dine filer ved at gå til Udseende > Editor. Her har du et bedre vindue til at redigere i CSS og har også en ekstra fil functions.php, som vi kommer til at arbejde i næste gang.

Lad os afprøve vores nye CSS-vindue. Tid til en udfordring mere:

CSS udfordring: Prøv at hold musen over din menu(hover). Kunne det ikke være fedt, hvis baggrundsfarven ændrede sig, når du gjorde dette? Prøv at se, om du kan tilføje dette med hvad du lige har lært.

FIF: Brug værktøjet fra del 3 Det er stadig HTML og CSS - Inspect det for at se for at finde CSS klassen.

Disse ændringer vil ikke blive overskrevet af en opdatering. Det var de blevet, hvis du havde lagt dem i dit parents-themes style.css. Sådan! Godt gået! Nu kan du opdatere så tosset som du vil!

Hvad med effekten, når jeg holder musen over et menupunkt? (Advanceret CSS)

En CSS-del, som vi ikke har dækket endnu, hedder: pseudo-styling. Tænk på det, som en overbygning af en CSS-klasse. Altså kan man udover at have en klasse såsom .container {...} sætte en pseudo-klasse efter, f.eks.: .container:hover {...}. :hover er en pseudo-klasse, som bestemmer hvilken CSS en CSS-klasse skal have, når man holder musen over den (hover).

Eksempel:

.knappen {
  width: 100px;
  height: 20px;
  background-color: green; 
}
.knappen:hover {
  background-color: red;
}

Og knappen vil så opføre sig såden her (prøv at hold musen over)

Der findes også andre pseudo-klasser, selvom :hover nok er den, som i vil arbejde mest med.

F.eks.:

/* et link, som er ikke er blevet besøgt endnu (klikket på) */
a:link {
    color: green;
}

/* et link, som er blevet besøgt (trykket på) */
a:visited {
    color: red;
}

/* et link, der er i fokus (f.eks. ved at bruge TAB som navigation ) */
a:active {
    color: yellow;
}

Underneden er et link. Prøv at tryk på det (det åbner google), og gå tilbage til siden igen. Se nu hvordan det har ændret farve. Du kan se :active ved at holde musen nede på linket.

TRYK PÅ MIG

Prøv at ændre din menu, så den viser en anden baggrund, når man holder musen over. Eller måske skal en besøgende kunne se, når de har besøgt et link?