WordPress tema funktioner og guide
Læs om de enkelte elementer og muligheder ved temaet og de specielt kodet plugin.
Virker samtidig som en guide for brugen af hjemmesiden.
Læs om de enkelte elementer og muligheder ved temaet og de specielt kodet plugin.
Virker samtidig som en guide for brugen af 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:
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.
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('webspeed_after_header');
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
Reference link til web.dk fjernes via:remove_action('webspeed_before_body_end', 'web_reference', 10);
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';
}
add_action('wp_enqueue_scripts', 'remove_webspeed_script', 30);
function remove_webspeed_script() {
wp_dequeue_script('theme-script');
wp_deregister_script('theme-script');
}
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 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.
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.
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.
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 sev 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 src="https://i.ytimg.com/vi_webp/' . $youtubeID . '/maxresdefault.webp" alt="' . get_field('video_titel') . '" loading="lazy">
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 🙂
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.
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.
Kalenderen kan vises som:
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}
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;
}
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:
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.
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!
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.
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:
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.
Du kan i WordPress indbygge tema customizer ændre på hvordan menuen vises på hjemmesiden.
EDIT:
Tidligere har denne funktion vært mere udbygget med farver og størrelser. Men da styling oftes laves i et child-theme, blev det forvirrende at kunne “style” siden flere steder!
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!
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
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.
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.
[aargang-type aargang=2018 type=trivsel]
[aargang-type orderby=post_title aargang=2018 type=trivsel]
[aargang-type orderby=post_title order=DESC aargang=2018 type=trivsel]
order=DESC
Default settings:
orderby=menu_order
order=ASC
[kl-type kl=3kl type=aarsrapport]
Samme opsætning / muligheder som ved Årgang & Type
[type type=bilag]
[type type=bilag orderby=date order=DESC]
Sortering som ved Årgang & Type
Skole-hjemmesider.dk
Se mere omkring WordPress hjemmesider til skoler på:
www.hjemmesider.dk/skole
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:
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:
<h2> ... </h2>
(“Husk tilmelding til sommerfesten“)For at vise beskedfunktionen benyttes shortcode [skolebesked]
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:
For at vise listen skal du benytte shortcode [skolebegivenheder]
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.
[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. [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=ACSFor 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”.
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.
Hvis du ønsker kan du benytte en slider visning til dine:
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 src="image.jpg" alt="..." loading="lazy">
BX Slider skal udskiftes med Swiffy Slider (swiffyslider.com) hurtigst muligt!
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.
Du oplader selve filen i en ny indholdstype med navnet “Arkiv“.
I Arkiv skal / kan du udfylde følgende:
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.
Angive hvilken type (kategori) af filer du øsnker på siden ved at benytte:
[arkiv type=forretningsudvalg]
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]
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]
Pr. default vises filerne i 1 række men også det kan du ændre.
Se Personer for hvordan du benytter Grid og Gap
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.
Der findes flere forskelige custom made Gutenberg blocks til temaet.
Jeg har tilføjet mulighede for nemt at oprette:
class
for yderligere design muligheder. Der kan oprette et Ancher
for link direkte.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.
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”!
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.
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 = ACSNB!
Hvis du benytter offset
SKAL alle siderne have et unikt “Rækkefølgenummer“.
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.
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 menuenSe eksempel her
[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 sliderAlle koder kan sammensættes så du eksempelvis kan skrive:
[post number=7 img=no type=min-kategori]
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å fireVed 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.
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]
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!
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]
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 eller 4 (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!)
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!
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”.
Du kan sætte alle informationerne ind i din shortcode.
[personer type=kontoret grid=4 gap=3 class=min-class]
En person er opbygget af følgende
Læs her om billedestørrelser og format, og at det er vigtig at benytte samme billedestørrelse på alle personer.
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.
Hver enkel side på hjemmesiden (domænet) kan opbygges forskelligt, ved at vælge imellem en af de forskellige skabeloner temaet kommer med.
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!)
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.
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å.
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> + <¨>
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.
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.
Billeder på hjemmesiden er efter min mening meget vigtige … og JA jeg ved godt at jeg ikke har nogle her 🙂
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.
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!
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.