WordPress tema funktioner og guide

Admin CSS – et WordPress plugin

Et lille simpelt plugin som kan være til stor hjælp, i når der arbejdes i WordPress.

WordPress brugerhåndtering er desværre ikke så avanceret som man eksempelvis finder i Drupal.
Som udgangspunkt finde der kun 5 forskellige brugertyper:

1. Administrator
2. Redaktør
3. Forfatter
4. Bidragyder
5. Abonnent

Hver burger rolle har forskellige rettigheder til at ændre, tilføje o.lign. på hjemmesiden. Administrator som har rettighed til alt og Abonnent med færrest muligheder.

I det daglige arbejde med WordPress hjemmesiden er bruger rollen Redaktør den mest oplagte, og mange af minde kunder benytter stort set kun denne bruger rolle. (alle kunder har selvfølgelig også en Administrator konto!)
Som Redaktør kan du oprette nyt indhold på siden samt rette og slette eksisterende indhold.

Desværre er administrationspanelet i WordPress for Redaktøren overfyldt med information og muligheder, som for mange af mine kunder bare virker forvirrende.
Langt de fleste kunder ønsker en så enkel administration som mulig, og her kommer dette lille plugin ind.
Ved hjælp af simpel CSS skjules alt det kunden ikke ønsker at se … ikke vil forvirres af!

På denne måde kan jeg tilpasse administrationen mere individuelt til mine kunders ønsker og behov.

Animation på hjemmesiden

I øjeblikket er temaet IKKE udviklet med så mange animationer, men flere vil løbende komme til.
Det er altid en svær overvejelse over, hvor meget man skal fylde på af funktioner i forhold til hjemmesidens load hastighed!

Zoom in

Tilføj i containeren til billeder en class der hedder .zoom-in til billeder der printes i en class .img-zoom.

Eks

[post class=zoom-in]

Se eksempel her

Banner på hjemmesiden

Med mit custom kodet banner plugin er det muligt at oprette bannere, til præcis de sider på hjemmesiden man ønsker.
Billederne fader langsomt imellem hinanden.

I øjeblikket benyttes bxSlider scriptet til “fade” funktionen. På sigt skal det udskiftes … men mere om det senere!

Hvert banner består af et antal billeder (du bestemmer hvor mange) samt eventuelle link ved hver billede.

Når banner plugin’et er instaleret, kan du i WordPress administrationen se en ny indholdtype = “Banner”

Når du opretter et banner, skal du:

• Uploade billeder (de enkelte bannerbilleder)
• Evt. angive hvor de enkelte billeder skal linke hen
• Skriv evt. en Title og sub-title der vises oven på billedet
• Angive hvor på hjemmesiden du ønsker at banneret vises

Banneret vises nu automatisk på de sider, du har angivet lige under området med hjemmesidens menu.

Se hvilke størrelse der er optimal for dine banner billeder her.

Se eksempel her på demo siden hvor der skifter 3 banner billeder på “blog” siden.

Billeder på din hjemmeside

Billeder på hjemmesiden er efter min mening meget vigtige … og JA jeg ved godt at jeg ikke har nogle her 🙂

Billedstørrelser og format

• Banner billeder – Her vil jeg anbefale 1600px x 550px eller ca. deromkring.
  Format = WebP (Læs om banner-plugin)
• Personer – Her vil jeg anbefale 1000px – XX
  (Vigtigt at billedet er 1000px i bredden, da det er den optimale bredde på siden, hvor du kan læse mere indgående omkring personen. Se eksempel.)
  Format = WebP eller jpg
• Event billede – kommer snart!
• Produktbilleder til WooCommerce – Det kan være svært at anbefale en billedstørrelse her, da du som shopejer formodentlig vil opleve, at få tilsendt alle mulige billedstørrelser fra de forskellige producenter.
  Det er dog altid vigtig, at optimere dem så de er så “letter” som mulige, så dine kunder ikke skal vente på en langsom webshop.
  (På DEMO shoppen har jeg benytte en billedebrede på 1000px)

Vær konsekvent

Jeg vil bestemt anbefale, at du er konsekvent med dine billedstørrelser som du benytter på hjemmesiden. Det ser mere professionelt ud, når alle banner billederne har samme format, når du klikker rundt på hjemmesiden. Det medvirker, at designet står skarpt og ensartet på alle sider og ikke hopper og danser, hvergang du klikker hen på en ny side.

Formatet WebP

WebP billedformatet er forholdsvis nyt og har den store fordel, at det fylder meget mindre end de almindelige billedformater jpg, png etc.
Ulempen er, at nogle ældre browsere ikke kan vise dette format. Det gælder eksempelvis ældre smartphones og Windows systemer.
Læs mere her.

Fordelen ved at billedet fylder mindre er, at din hjemmeside loader hurtigere. Det er vigtigt for brugeroplevelsen og ikke mindst for din mulighed for at komme til tops i Googles søgeresultater (SERP).

Det eneste sted jeg stadig ikke vil anbefale at benytte WebP, er ved produktbilleder på webshoppen. Alle andre steder er jeg af den mening, at de få der ikke kan se dit billede, fordi de benytter gamle systemer, bare må undværer – SEO er så meget vigtigere!

Logo

Hvis man ønsker, at benytte et specielt logo når hjemmesiden vises på mobiler og tablets, kan man i tema mappen (child theme) placere en billede fil med navnet logo-mobil.png.
Nu vil WordPress temaet benytte dette logo ved mobil-visniger. Samtidig skjules det “normale” logo.

At benytte et specielt mobil-logo er ikke optimalt, når man arbejder med at optimere hastigheden på hjemmesiden, da der nu skal hentes to billeder. Et logo til desktop og et andet til telefonen. Når det er sagt, er det dog ikke den største udfordring m.h.t. hastighedsoptimering, specielt hvis man husker at gøre fil størrelsen så lille som mulig.

Elements

En post-type “Elements” der ikke er “direkte synlig” på siden, men kræver at den bliver vist via en shotrcode.

[elements]

Visninger:

• normal
• Accordion
• Med indholdsmenu

Filer / Arkiv

Har du mange filer som PDF, Word dokumenter, Excel o.lign, som du skal have vist i forskellige kategorier på hjemmesiden, har jeg lavet et nemt lille plugin.

Arkiv udvidelsen er delt op i to elementer. Selve filen og visnigen af filer.

Filen

Du oplader selve filen i en ny indholdstype med navnet “Arkiv“.
I Arkiv skal / kan du udfylde følgende:

1. En titel, som er teksten der benyttes ved visning (link-tekst til selve filen)
2. Selve filen som du uploader fra din computer eller vælger fra Medier i WordPress
3. Angiver hvilken “Type” (kategori) som du ønsker at filen vises under
4. Angiver et tal for sortering (hvis der ikke benyttes dato sortering!) – default = 0

Visning af filer / Arkiv

Visning af alle dine uploadede filer laves med en shortcode, på den side hvor du øsnker, at de skal listes.

[arkiv]

Som ved visningen af Personer, er der her en lang række muligheder for at ændre hvad og hvordan shortcode [arkiv] printer listen af filer.

Type

Angive hvilken type (kategori) af filer du øsnker på siden ved at benytte:

[arkiv type=forretningsudvalg]

Sortering – “order”

Filerne printes pr. default i dato rækkefølge med den seneste tilføjede fil øverst i listen.
Order er pr. default sat til “DECS” – derfor behøver du IKKE at skrive nedenstående kode!

[arkiv order=DECS]

MEN – hvis du ønsker, at de ældste skal vises først, skal du skrive:

[arkiv order=ASC]

Sortering på dato eller Indlægsattributter Rækkefølge – orderby

Pr. default er det dato der sorteres efter

[arkiv orderby=date]

Men det kan du ændre til Indlægsattributter Rækkefølge ved at skrive:

[arkiv orderby=menu_order]

Grid

Pr. default vises filerne i 1 række men også det kan du ændre.
Se Personer for hvordan du benytter Grid og Gap

Antal og offset

Om du nogensinde får behov for at bestemme antallet af filer, du vil vise er nok tvivlsomt, men muligheder er der. Skriv eksempelvis:
(Viser 6 filer men ikke de første 3 i sorteringen)

[arkiv number=6 offset=3]

NB!
Skal du bare vise nogle få PDF filer på en side, er det mere hensigtsmæssigt at benytte Gutenberg Fil Block, som WordPress kommer med.

Gutenberg blocks med ACF

Der findes flere forskelige custom made Gutenberg blocks til temaet.
Jeg har tilføjet mulighede for nemt at oprette:

1. Billedegalleri hvor du kan vælge imellem visningerne CSS Masonry layout hvor billederne bevarer deres aspect-ratio, eller en vining hvor thumbnails er kvadratiske.
   (Er Lightbox aktiveres vises billederne i denne!)
2. Accordions som oftes benyttes til FAQ sider. (Ved klik på overskrift vises selve indholdet til den pågældende overskrift) – se eksempel
   Man kan selv bestemme baggrundsfarven samt tekstfarven på den samlede accordion. Derudover kan man for hver enkelt element angive en class for yderligere design muligheder. Der kan oprette et Ancher for link direkte.
3. Kontakt Gutenberg block med de mest almindelige kontakt informationer. Kan med fordel oprettes i en “element post” og på den måde genbruges alle de steder på hjemmeside du ønsker.
4. Opsætning af billeder og tekst i to spalter hvor designet skifter imellem billede til venstre, tekst til højre og omvendt – se eksempel
5. Opsætning af kontaktinfo med adresse, email og telefon. Se eksempel øverst på siden
   Denne Gutenberg block er egentlig kodet for at ikonerne står præcist ved siden af kontaktdata (et ønske for en kunde!)
6. Book et møde. En simpel block som opsætter et kalender ikon ved siden af et link. Link benyttes typisk til ekstern mødebooker system. (igen et ønske for en kunde!)

Det smarte ved at lave disse funktioner som Gutenberg blocks via ACF (Advance Custom Fields), er at de kan indsættes alle steder på hjemmesiden og lige så ofte du ønsker. Kombineret med de mange forskellige sidelayout giver det utal af muligheder for at tilpasse hjemmesiden efter dine behov og øsnker.

Kontaktformular og nyhedsbrev

Det er nemt at integrer en kontaktformular eller en nyhedsbrevformular (signup) på hjemmesiden.

Med WordPress plugin Contact Form 7 oprettes nemt unikke kontaktformularer som passer dine behov.

Nyhedsbrev

Har du et nyhedsbrev og vil vises signup formularen på hjemmesiden, kan den nemt integreres.
Populær nyhedsbrev systemer som MailChimp eller Ubivox kan nemt integreres. Enten som et Tekst Widget eller direkte på en enkle side.

Overskrift på de enkelte sider

Som noget helt specielt kan man i overskriften benytte “ny linje” for at gøre de enkelte overskrifter mere fængende og interessante at se på.

Ny linje i overskrift

Ved at indsætte tegnet pipe ( | ) indsættes der i overskriften et tvunget linjeskifte <br />

Eksempel:

Her er min overskrift
– og her kommer så den næste del af overskriften

<h1>Her er min overskrift<br />-og her kommer så næste del af overskriften</h1>

Indtastning i WordPress i sides overskrift felt:

Her er min overskrift | – og her kommer så den næste del af overskriften

“Pipe” tegnet indsættes ved hjælp af tastekombinationen:
Mac OS = <fn> + <alt> + <i>
Windows = <Alt> + <¨>

Personer i WordPress

Den specielle indholdstype til at oprette personer i WordPress, gør det nemt at vise flere pænt ved siden af hinanden. Derudover er det nemt at rette og tilføje persondata til den enkelte person.
Se eksempel her.

Den enkelte person har sin “egen side” hvor man kan læse mere indgående om personen.
Ønsker man ikke at benytte dette, undlader man bare at udfylde selve “Body” feltet i WordPress. Hvis “Body” feltet er tom vises linket “Læs mere” ikke!

Sortering

Personerne sorteres via WordPress feltet “Rækkefølge” under punktet “Indlægsattributter“.
Et lavt tal angiver, at personen skal vises først i visningen.
Eksempel: En person med værdien 1 vises før personen med værdien 2.
Der kan benyttes negative værdier i feltet!

For at vise personer på en side opretter man shortcode

[personer]

Når man opretter personer kan man vælge at give dem en kategori (Type), så man kan vælge at vise alle personer med eksempelvis kategorien (typen) “Kontoret”.
Skriv shortcode:

[personer type=kontoret]

Grid

Shortcode [personer] viser personerne tre og tre, men ønskes eksempelvis 4 personer ved siden af hindanden kan du i shorcode tilføje

[personer grid=4]

Grid kan have værdierne = 1,2,3,4,5 eller 6 (antallet af personer ved siden af hinanden!)

Med Gap kan man øge mellemrummet mellem hver person.

[personer gap=3]

Default værdi er gap=2

Gap kan have værdierne = 0,1,2,3 eller 4 (jo større gap jo mere mellemrum!)

Class

Indsætte en class i dit grid via.

[personer class=min-class]

Benyttes typisk når du vil designe/style selve visningen. Der skal derfor samtidig i din CSS kodes angives, hvordan du vil have min-class til at se ud!

Antal og offset

Med number og offset kan du angive antal personer, der printes og hvor de skal begynde fra.

[personer number=8 offset=4]

Ovenstående viser 8 personer, men springer de 4 første personer over der er oprette i WordPress.
Denne mulighed kan være lidt “tricky“, i forhold til hvordan man har kategoriseret, og hvad man har angivet i “Rækkefølge værdien”.

Sæt det hele sammen

Du kan sætte alle informationerne ind i din shortcode.

[personer type=kontoret grid=4 gap=3 class=min-class]

Felter

En person er opbygget af følgende

• Navn (WP titel)
• Body felt
• Titel
• Initialer
• Mobiltelefon
• Telefon
• Email
• Linkedin (link)
• Facebook (link)
• Hjemmeside (link)
• Billede (WP Udvalgt billede)
• Kort besked (WP Uddrag)

Læs her om billedestørrelser og format, og at det er vigtig at benytte samme billedestørrelse på alle personer.

Skabeloner i fuld bredde

Indsættes visning af personer på en af de to skabeloner, som benytter skærmens fulde bredde (“Article NO wrap” eller “Top img / Article NO wrap“), centreres visning som på en “normal” sideskabelon.
Fordelen er her, at man har mulighed for at opdele siden i farvede felter, der fylder hele skærmens bredde og samtidig vises person-grid pænt i midten af skærmen.

Skabeloner til WordPress tema

Hver enkel side på hjemmesiden (domænet) kan opbygges forskelligt, ved at vælge imellem en af de forskellige skabeloner temaet kommer med.

Med eller uden sidebar og integreret billede

Skabelonerne giver mulighed for at have op til to sidebar (aside) og et indholdsfelt (article) hvor billedet (WP’s Udvalgte billede) vises i selve indholdet.
(Der kan selvfølgelig frit indsætte andre billeder i selve indholdsfeltet!)

Skabeloner

• Article (bred side uden sidebar)
• Aside left – Article (sidebare til venstre og normal indhold til højre)
• Article – Aside right (normal indhold til venstre og sidebar til højre)
• Aside left – Article – Aside right (sidebar til venstre, normal indhold i midten og en sidebar til højre)
• Article NO wrap – (Her vises indholdet på hele skærmens bredde. Benyttes til at opsætte komplicerede og custom designs!)
• Left / Right TOP – Titel og kort tekst ved siden af billede i toppen af siden

Skabeloner med banner billede

Opbygning er helt som ovenstående med den forskel, at selve det Udvalgte billede vises over indholdet som et banner billede.
Det betyder, at du her har samme opbygning af sidebare i venstre og højre side, alt efter hvad du ønsker på den enkelte side.

Skabelonerne med banner viser sidens titel oven på selve banner-billedet. Du kan dog vælge at skjule titlen på disse skabeloner, ved at vælge “Skjul titel” som vises nederst til højre under “Tema (Top img)” når du retter i siden.

Se mulighederne på DEMO hjemmesiden.

Slider / Carousel

Hvis du ønsker kan du benytte en slider visning til dine:

• Blog indlæg (posts)
• Undersider
• Sider generelt

Ved at tilføje nedenstående besked til dine shortcode

• slider=silder-2
• slider=slider-3
• slider=slider-4

Som navnet antyder vises der enten 2,3 eller 4 slides i karrusellen.

Eks.

[post slider=slider-3]
[child-grid number=8 slider=slider-4]
[page id=1,2,3,4,5,6 slider=slider-3]

I øjeblikket benyttes der BxSlider til funktionen, men da den ikke er så glad for billeder med loading lazy, kan det være, at jeg på et tidspunkt vælger en anden løsning til denne visning!

<img decoding="async" src="image.jpg" alt="..." loading="lazy">

BX Slider skal udskiftes med Swiffy Slider (swiffyslider.com) hurtigst muligt!

The Events Calendar

Temaet er klargjort til The Events Calendar WordPress plugin.

The Events Calendar kommer i en gratis (free) og en betalt Pro version.
Jeg har arbejdet og arbejder løbende på at klargøre og tilpasse den gratis version af kalenderen til mit WordPress tema.

The Events Calendar er i Pro version et meget stort plugin med rigtig mange funktioner og muligheder. Her Kan du eksempelvis sælge billetter til din begivenheder og modtage betalinger via PayPal eller via WooCommerce integration en af de danske online-betalings-udbydere.
Desværre er Pro versionen efter min mening meget dyr. Har jeres firma brug for at sælge billetter til events, vil jeg anbefale at undersøge markedet grundigt før i vælger system.

Ser vi kun på den gratis version af The Events Calendar, er det stadig et fantastisk kalender event plugin til WordPress.

Visning

Kalenderen kan vises som:

1. Måned (alm. tabel kalender)
2. Liste (event kalender)
3. Dag
4. Widget der viser x antal kommende begivenheder
   (der findes flere widget visninger i Pro versionen)

Alle 4 visninger kan benyttes på hjemmesiden samtidig, eller man kan vælge kun at benytte en af dem.

Den widget der følger med i den gratis version, kan desværre ikke filtrer hvilke typer, kategorier o.lign den skal vise. Her viser alle typer eller featured events.
En CSS (SCSS) mulighed er dog at skjule og kun vise dem med et bestemt tag – her .tag-xxx

.tribe-events-widget-events-list__event-row {
	display: none !important;
	&.tag-xxx {
		display: flex !important;
	}
}

Denne "snyde" løsning giver problemer med styring af antallet af events, der må vises, da den ren faktisk printer alle (X antal), men kun viser dem man giver lov til via CSS.
Det kan der selvfølgelig også "snydes" med via nedestående CSS selector. - Men måske er det her, man bare skal bide i det sure æble og betale for PRO versionen 😉

:nth-child(n+5) {display:none}

Kategorier, tags, arrangører o.a

Der findes flere muligheder for at kategoriserer begivenheder.
Tags, Kategorier, Steder (fysisk placering) og Arrangører.

Benytter man eksempelvis de samme tags altid, kan man vi CSS give dem et bestemt udseende. På den måde er det nemt at se forskel på de forskellige typer af begivenheder.

Her er alle tags = "Fødselsdage" farvet rød og med hvid skrift.

.type-tribe_events.status-publish.tag-foedselsdage .tribe-events-calendar-month__multiday-event-bar,
.type-tribe_events.status-publish.tag-foedselsdage {
    background: red;
    color: #fff;
}

Felter

Udover de oplaget felter til angivelse af dato og tidspunkt for både start og slut, kommer The Events Calendar med en lang række ekstra data-felter som:

• Sted hvor begivenheden afholdes
• Arrangører
• Begivenhedens hjemmeside
• Pris
• Tags
• Kategorier
• Status for begivenhed
• Billede
• Mulighed for at skjule begivenhed, eller modsat at fremhæve den med et lille ikon

Dette kan yderligere "udbygges" og tilpasses netop jeres behov ved hjælp af ACF, som er en af de vigtigste plugin i moderne WordPress hjemmesider og/eller ved tilkøb af Pro udgaven.

En mere simple administration

Da flere af mine kunder, ikke har brug for alle muligheder The Events Calendar tilbyder, har jeg udviklet et lille plugin, hvor jeg med simpel css kan skjule funktioner, der ikke benyttes.
Det sikre en mere enkel administration.
Det skal være simpelt og nemt at administrer sin hjemmeside!

Gem i din egen kalender

Dine besøgende kan nemt overføre / gemme kalenderbegivenheder i deres egen personlige kalender. Der er mulighed for at gemme i Google kalender, iCalendar (Mac OS), Outlook 365 og Outlook live.

Theme code snippets

Lightbox js hentes nu IKKE ind pr. default

Vil man benytte Lightbox effekt på billeder, skal man nu “bede” om at hente javascript filen i child theme functions.php via:

function web_lightbox() {
	wp_enqueue_script('lightbox');
}
add_action('wp_enqueue_scripts', 'web_lightbox');

do_action()

do_action('webspeed_after_header');
do_action('webspeed_after_header_front');
Printes efter </header> - typisk der hvor menu, logo etc. printes

do_action('webspeed_before_body_end');
Printes umiddelbart før body tag lukkes </body>

do_action('webspeed_before_footer');
Printes før footer indhold på hjemmesiden

remove_action()

Reference link til Hjemmesider.DK fjernes via:

add_action( 'wp_head', 'remove_reference' );
function remove_reference() {
	remove_action('webspeed_before_body_end', 'web_reference', 10);
}

add_action()

Et eksempel hvor der indsættes kode i webspeed_after_header:

add_action('webspeed_after_header', 'function_navn');
function function_navn() {
echo 'Det her bliver indsat i webspeed_after_header';
}

Fjerne theme javascript

add_action('wp_enqueue_scripts', 'remove_webspeed_script', 30);
function remove_webspeed_script() {
wp_dequeue_script('theme-script');
wp_deregister_script('theme-script');
}

Time booking i WordPress / online tidsbestilling

Tema er optimeret til at benytte Appointment Hour Booking plugin.
Dette plugin, findes ligeledes i en PRO version med flere muligheder for dig der ønsker booking i WordPress hjemmesiden.
PRO versionen findes med forskellige muligheder og funktioner, alt efter hvor meget man betaler!
Betaling kan være et engangbeløb eller pr. måned. Det er modsat mange andre betalte WordPress PRO plugins, der kun tilbyder månedsbetaling.
Et STORT plus i min bog at der er mulighed for engangs betaling 🙂

Se online booking DEMO

Den gratis version – Booking plugin til WordPress.

Den frie gratis version af Appointment Hour Booking, er et rigtig godt plugin, som efter min mening kan opfylde manges behov for booking på WordPress hjemmesiden.
Der er absolut ingen grund til, at starte med at køber PRO versionen, før den frie version er testet godt igennem.

Frisører, alternative behandlere, klubber o.lign kan ofte nøjes med det gratis booking plugin til deres online booking.

Jeg kan anbefale den gratis version til mange mindre firmaer, foreninger og klubber, der har brug for, at deres kunder eller medlemmer kan booke online.
Online tidsbestilling / reservering af ydelser, lokaler, baner o.lign.

Funktioner

• Opret så mange ydelser, lokaler o.lign du ønsker
• Angiv i timer og minutter hvor lang din ydelse / booking forløber
• Angiv “fri tid” før og efter (padding) ydelsen
• Bestem om en booking skal godkendes automatisk eller kræver din accept
• Opret dine booking-slots (tider) automatisk på ugedage eller angiv helt eksakt hvornår du vil have, at kunder og medlemmer kan tidsbestille
• Opret felter som skal udfyldes af brugere, der vil reservere en tid (navn, email etc.) (PRO versionen giver flere input typer end “text”)

Troubleshoot

Vises booking formularen ikke på den side, hvor du har placeret den via shortcode, kan du under fanen Troubleshoot Area ændre Script load method til Direct.

Udvalgte sider i grid

Har du brug for at vise udvalgte sider i en grid-visning, kan du ligeledes ved hjælp af en shortcode, “fortælle” WordPress hvilke sider du ønsker at vise.

Shortcode

• [page id=2,4,7,12,55,100] – page fortæller nok ikke overraskende, at WordPress skal hente sider og id fortælle hvilke sider.
  Læg mærke til at de enkelte id’er skrives som en kommasepareret liste!
• [page id=1,2,3 link=no] – Visning linker IKKE til de aktuelle sider
• [page id=1,2,3 grid=4] – viser siderne i et grid med 4 kolonner
• [Page id=1,2,3 gap=3] – Viser et “gap” på 3rem (afstand mellem kolonerne)
• [page id=1,2,3 read_more=no] – skjuler “Læs mere” link (men link på titel og billede virker stadig)
• [page id=1,2,3 class=min-class] – tilføjer en class på container elementet (bruges til css)
• [page id=1,2,3 excerpt=no] - skjuler tekst
• [page id=1,2,3 img=no] – skjuler billedet
• [page id=1,2,3,4,5,6,7,8 slider=slider-4] – viser siderne i en slider
• [page id=1,2,3,4 orderby=post_title order=DESC] – Default orderby=menu_order og order=ACS

Hvordan finder jeg en sides ID?

For at kunne benytte denne funktion er det afgørende, at du kender sidens ID.
WordPress tilføjer et ID til hver enkel side du opretter på hjemmesiden. Det gør den for selv at kunne “holde styr på” siderne (opslag i databasen). Det er netop dette ID, vi her benytter til at hente siderne ind i visningen.

Der er flere forskellige metoder til at finde en sides ID.
Den nemmeste er formodentlig at stå inde i WordPress administrationen under listen af alle siderne. Når du holder musen over “Rediger linket”, vises der typisk i din browser en URL til hvor “Rediger linket” linker hen.
I denne URL skal du leder efter en sted der hedder “post=xx” – Eks post=5 hvilket betyder at sidens ID er 5

Lyder ovenstående lidt kryptisk og uoverskueligt, kan du installere et plugin, som viser post id i WordPress administrationen.
wordpress.org/plugins/wpsite-show-ids
Så kan det vist ikke blive nemmere 🙂
MEN husk, at det er vigtigt at holde antallet af plugin nede på et minimum, så prøve først om du ikke kan benytte ovenstående metode med “Redigere linket”.

Edit link

Ved oversigter (loop) af indhold vises et “edit link” som åbner i et nyt vindue. På den måde er det både nemt at rette og se oversigten samtidig.

Vis WordPress undersider i et grid

WordPress undersider er en mulighed for at gemme en side som en “underside” til en tidligere oprettet side. Den overordnet side kaldes i WordPress en “Forældreside“.
Bliver vi i den terminologi, er “undersider” altså “børnesider” til en “forældreside”!

Arver URL fra forældresiden

Når man gemmer en side som underside i WordPress ændres URL’en, ved at forældresidens URL vises før undersidens.
Eks.

/ydelser/flytninng-klaver

Her har forældresiden URL’en /ydelser og undersiden /flytning-klaver

En oplagt brug af denne funktionalitet i WordPress er som ovenstående eksempel, når et firma vil beskrive sine forskellige ydelser. Eller en skole der beskriver hvert fag på selvstændige sider, og lader dem alle være undersider til forældresiden “Fag”.

/fag/dansk, /fag/musik, fag/design, fag/natur-teknik etc.

Et eksempel på demo hjemmesiden er denne side.

Benyt shortcodes til “designe” forældresider med indhold fra dine WordPress undersider

Ved hjælp af shortcodes kan du oprette flotte visninger af alle undersiderne.

• [child-grid] – viser alle undersider
• [child-grid number=4] – viser kun fire af undersiderne
• [child-grid offset=2] – viser ikke de to første
• [child-grid title=no] – skjuler titel
• [child-grid excerpt=no] – skjuler den korte beskrivelse
• [child-grid img=no] – skjuler billedet
• [child-grid read_more=no] – skjuler “læs mere” link
• [child-grid grid=4] – viser undersider i et grid på fire (default=2) (mulige værdier = 1,2,3,4)
• [child-grid gap=3] – ændre mellemrum mellem de enkelte sider i grid (default= 2) (mulige værdier = 0,1,2,3,4)
• [child-grid class=min-class] – tilføjer en class på HTML container (benyttes til designe yderligere via custom CSS)
• [child-grid slider=slider-3] – viser undersiderne i en slider
• [child-grid orderby=post_title] – ændre sortering til alfabetisk sortering. Default sortering er via “Rækkefølge”
• [child-grid order=DESC] – default = ACS

NB!
Hvis du benytter offset SKAL alle siderne have et unikt “Rækkefølgenummer“.

Rækkefølge på siderne

Ved at angive et tal i feltet “Rækkefølge” under “Sideattributter”, kan du styre rækkefølgen på undersiderne i din visning.
Den mindset værdi vises først. Der kan benytte negative værdier.

Eks.
Værdien -1 listes før en underside med værdien 0

NB!
Vær opmærksom på at en side IKKE er en underside, bare fordi den vises som et “underpunkt” i menuen. Menustrukturen og muligheden for at angive en forældreside i WordPress har ikke noget med hinanden at gøre.

Menu – Child menu

Du kan også vælge at vise en child-menu via en shortcode.
Typsik vil man vise den i venstre eller højre side (aside) af hjemmesiden. Denne menu viser undersider til en top-side. Altså de underliggende niveauer!

• [childmenu] – viser menuen

WordPress blog

En beskrivelse af de mange muligheder og funktioner du har i din WordPress blog

Se eksempel her

Liste med shortcodes

• [post] – Den mest simple der viser de 3 seneste blogindlæg
• [post number=5] – Du kan ændre antal til eksempelvis 5
• [post offset=3] – Koden viser ikke de 3 seneste blogindlæg
• [post img=no] – Skjul billedet der benyttes på det enkelte blogindlæg
• [post read_more=no] – Skjul “Læs mere” link
• [post link=no] – Fjern alle link fra listen (titel, “Læs mere” og billede)
• [post type=Arrangementer] – Vis kun blogindlæg i kategorien “Arrangementer”
• [post date=no] – Skjul dato
• [post date_cat=yes] – Vis kategori ved siden af udgivelsesdato
• [post excerpt=no] – Skjul det korte uddrag af blogindlæget
• [post slider=slider-4] – viser blogindlæg i en slider

Alle koder kan sammensættes så du eksempelvis kan skrive:

• [post number=7 img=no type=min-kategori]

Opret komplekse design til din WordPress blog

Ved hjælp af offset muligheden samt alle de andre parametre, kan du nemt oprette komplekse design til din WordPress blog. Det er næsten kun fantasien der sætter begrænsingen for opsætningen.

Her kan du se et eksempel, der via 3 shortcodes opretter en kompleks side – klik her

Koderne der er brugt, til at oprette siden er:

• [post number=2] – Viser de to seneste blogindlæg
• [post number=3 grid=3 offset=2] – Viser de tre næste blogindlæg i et grid på tre
• [post excerpt=no number=8 grid=4 offset=5] – Viser 8 blogindlæg unden det korte uddrag i et grid på fire

Ved hjælp af type kan du inddele oversigten i bestemte kategorier, og gør siden endu mere kompleks og specialiceret. Du kan selvfølgelig også vælge at oprette hver kategori på egne selvstændige sider.

no-link
Vælger du kategorien no-link vil hele posten vises, når du benytter shortkoden [post]

Vis relaterede blogindlæg i højre spalte

På det enkelte indlæg kan du vise relaterede indlæg. Indlæg der har samme kategori!
Ved at indsætte nedenstående koden i Widget området = “Aside indlæg”

Se eksempel hvor der i højre side af blogindlæget, er liste de relaterede indlæg – klik her

• [post_related grid=1]

Du kan ligeledes her kombinerer alle koderne, så du eksempelvis kan skrive

• [post_related number=4 grid=1]

WordPress plugin til skoler – friskoler, lilleskoler, efterskoler o.lign.

Da jeg efterhånden har lavet rigtig mange friskole og lilleskole hjemmesider i WordPress (tidligere i Drupal), er jeg begyndt at udvikle et custom plugin specielt til skoler.
Dette plugin er allerede i brug på enkelte skolers hjemmeside, MEN det er et Work-in-progress-plugin, som bestemt ikke er færdig udviklet – hvis man nogen siden bliver færdig med udvikling 😉

Dette “WordPress Skole Plugin” udvikles ud fra ønsker / funktioner jeg gang på gang mødes med fra skolerne.

Udviklingen koncentrere sig omkring 4 områder:

1. Filer
   – nem administration af alle typer informations-dokumenter som skoler benytter i deres kommunikation med elever, forældre og andre interesserede.
2. Personale
   – nem administration af skolens ansatte kontaktinformation.
3. Fag
   – nem administration af fag og visning af relevant indhold som filer, personale o.lign.
4. Forside info
   – nem administration af forsiden som hele tiden kan holdes relevant og interessant.

I et selvstændig plugin udvikler jeg en løsning til skoler, der IKKE benytter skoleintra e.lign. løsning, men som stadig har brug for en mindre intranet løsning. WordPress plugin til vidensdeling mellem skolens ansatte og/eller til kommunikationen mellem skole og hjem.

Shortcoder til FILER

Årgang & Type

• [aargang-type aargang=2018 type=trivsel]
  – viser alle filer i kategorien “trivsel”, men kun til årgang 2018
• [aargang-type orderby=post_title aargang=2018 type=trivsel]
  – viser listen alfabetisk
  (desværre virker det KUN med engelske bogstaver. Det betyder eksempelvis at ord der begynder med “Å” tolkes som “A”!)
• [aargang-type orderby=post_title order=DESC aargang=2018 type=trivsel]
  – vender rækkefølgen / soteringen med: order=DESC

Default settings:

• orderby=menu_order
• order=ASC

Klasse & Type

• [kl-type kl=3kl type=aarsrapport]
  – viser alle årsrapporter til 3. klasse

Samme opsætning / muligheder som ved Årgang & Type

Type

• [type type=bilag]
  – viser alle filer med som er tagget med type = bilag
• [type type=bilag orderby=date order=DESC]
  – viser alle bilag i den rækkefølge de oprettes i WordPress

Sortering som ved Årgang & Type

Skole-hjemmesider.dk
Se mere omkring WordPress hjemmesider til skoler på:
www.hjemmesider.dk/skole

Top-bar

Mange skole benytter sig af SkoleIntra (ElevIntra, ForældreIntra og LærerIntra) til kommunikationen mellem skole og hjem. Med Top-baren kan der smart vises link her til.
Top-bar kan samtidig vises:

• Link til skolens Facebook side
• Link til skolens Instagram side
• Søgefunktion
• Email
• Telefon nr. (samt alt. tlf.)
• Mulighed for at vise link til “Download” eller “Kalender” med ikon

Hurtige / daglige beskeder

En funktion der gør det nemt at vise indhold på forsiden.
Funktionen er tænkt til de daglige / hyppige meddeler, man som skole har brug for at kommunikerer.
Indhold der har relevans lige nu og her!

Funktionen indeholder:

• Overskrift i <h2> ... </h2> (“Husk tilmelding til sommerfesten“)
• Almindelig tekstfelt med Wysiwyg-editor
• Filer til download
• “Dagens” billedgalleri (“Snevejr i skolegården“)

For at vise beskedfunktionen benyttes shortcode [skolebesked]

Simpel liste til begivenheder og lign.

Under fanebladet SKOLE -> BEGIVENHEDER findes muligheden for at oprette en simpel nyheds/kalender liste.
Der er IKKE dato styring, men derimod mulighed for at flytte de enkelte punkter i listen op og ned ved at trække med musen.

Hvert listepunkt består af:

• Overskrift
• Tekst
• Billede

For at vise listen skal du benytte shortcode [skolebegivenheder]

WordPress theme customize

Du kan i WordPress indbygge tema customizer ændre på hvordan menuen vises på hjemmesiden.

Header

• Vis sidetitel sammen med logo : Normalt vises hjemmesidens titel og sub-title ikke. hvis der uploades et logo – det kan her ændres
• Sticky Header : På desktop visning bliver menuen i toppen når du scroller på siden
• Menu – Left : Placer menuen umiddelbart til højre for logo
• Menu – Vertical : Vælg : Top, center eller bund
• Woo Card : Vis mini-card på menulinjen hvis WooCommerce er installeret

Youtube lazy loading i WordPress

Hvis du har videoer fra Youtube på din WordPress hjemmeside, ved du formodentlig nok, hvor meget det påvirker din pagespeed.
Hvis ikke – vil jeg klart anbefale dig at teste din side på Google PageSpeed, så du selv kan få syn for sagen.

En Youtube iframe henter mange gigabyte data hvergang du afspiller videoen.
Det WordPress plugin jeg her har kodet, venter med at hente data, til brugeren ren faktisk kliker på selve videoen … vil se filmen.
Det betyder, at når siden loader, skal den kun hente selve biledet fra Youtube, som benyttes som thumbnail for filmen.
Her henter jeg det store billede men i webp format. På den måde kan vi både have et 100% skarpt billede og samtidig kun hente nogle få kilobyte. Typisk 50 -70 kb.

<img decoding="async" src="https://i.ytimg.com/vi_webp/' . $youtubeID . '/maxresdefault.webp" alt="' . get_field('video_titel') . '" loading="lazy">

Gutenberg block med ACF

Jeg gør brug af ACF felter. Derfor kræver det, at du har Advanced Custom Fields installeret for at benytte dette Gutenberg Youtube Block plugin.
Du kan selvfølgelig kode input felter direkte i en Gutenberg block, men ACF er bare så nem at arbejde med. Kan kun anbefale ACF 🙂

Nemt at bruge

Hele ideen med Gutenberg block i WordPress er, at det skal være nemt at oprette indhold.
I Youtube block'en skal du angive URL'en til videoen. Den finder du, når du klikker på knappen "DEL" lige under selve filmen på Youtube.
Derudover er der mulighed for at angive en alt tekst til billedet, som samtidig bruges til title på videoen.