Oplæg WordPress hjemmeside og webshop

Opgaver

Du kan lave følgende opgaver:

Bemærk: Det er muligt at installere WordPress på XAMPP fra linket her: https://www.wpbeginner.com/wp-tutorials/how-to-create-a-local-wordpress-site-using-xampp/

Opgave 1. Hjemmeside for et rejsebureau

  • Lav en hjemmeside for rejser til et valgfrit sted. Du skal have minimum 6 sider: Forside, kontakt, om firmaet og destinationer. Under destinantioner skal du lave sider for minimum 2 installationer
    • Du skal installere en kontaktformular
    • Du skal installere et galleri eller en karussel
    • Du skal lave mindre tilpasning af dit valgte tema med egen CSS
    • Lav et område med nyheder, som gerne må være lidt blog-agtig. Lige som du finder på forsiden af hjemmesiden her
    • Udforsk WordPress’ muligheder

I gang med opgaven:

  • Læs hele afsnittet, som hedder “Inden du går i gang”
  • Udfør evt. afsnit 1. Installation af WordPress lokalt med XAMPP
  • Arbejd ud fra hele afsnit 2. I gang med WordPress

Link til toppen.

Opgave 2. Valgfri hjemmeside

  • Lav cirka den samme side som ovenfor, men valgfrit emne. Det kan f.eks. være mode, biler, du bestemmer

I gang med opgaven:

  • Læs hele afsnittet, som hedder “Inden du går i gang”
  • Udfør evt. afsnit 1. Installation af WordPress lokalt med XAMPP
  • Arbejd ud fra hele afsnit 2. I gang med WordPress

Link til toppen.

Opgave 3. Webshop

  • Lav en webshop med tøj
  • Du skal bruge WordPress’ plugin’net WooCommerce, men det skal jeg nok guide dig i

I gang med opgaven:

  • Læs hele afsnittet, som hedder “Inden du går i gang”
  • Udfør evt. afsnit 1. Installation af WordPress lokalt med XAMPP
  • Arbejd ud fra hele afsnit 3. Webshop i WordPress med WooCommerces
  • Du skal både oprette variable varer og samlevarer, men det lærer du alt sammen mere om ud fra afsnit 3.

Link til toppen.

Inden du går i gang

Som nævnt i kapitel 28 om CMS systemer er WordPress verdens mest populære CMS system. Intet mindre. WordPress er oven i købet gratis, så hvad mere kan du ønske dig.

Link til toppen.

Overvej et community

Der er heldigvis et godt dansk community omkring WordPress. Du kan f.eks. blive medlem af en Facebook gruppe om WordPress, hvis du vil. Om ikke andet, så kik ind i gruppen

Link til toppen.

Blog, hjemmeside, webshop eller en blanding

I virkeligheden er WordPress slet ikke et system til hjemmesider. Det er udviklet til at håndtere blogs. WordPress kan sagtens håndtere blogs og hjemmeside og webshop eller en blanding i samme system. Hjemmesiden bliv-klogere.ibc.dk, som du er på nu, er både hjemmeside og blog.

Link til toppen.

Widgets afhænger af temaet

Widgets er mini-ekstra programmer, som er afhængige af temaet. De er normalt installeteret.

Link til toppen.

Plugins er “rigtige” ekstraprogrammer

De fleste CMS systemer har en masse små ekstra programmer, som både kan være gratis eller mod betaling. WordPress er verdens mest udbredte CMS system til små og mellemstore hjemmesider, så er er 1.000 – vis af  ekstra programmer. Du skal selv hente dine egen plugins

Nogle af programmerne er betalingsprogrammer, ofte til måske 20 – 30$. Nogle er gratis, og mange er gratis “i begyndelsen”, men hvis du vil have hele programmet, skal du betale.

Det her betyder, at selvom du ikke selv kan kode f.eks. en webshop eller et foto galleri, så kan du installere og arbejde med kode, som andre har lavet. Du læste rigtigt. Du kan gratis lave din egen fuldt professionelle webshop i WordPress, og det skal vi kikke på senere.

Link til toppen.

Eksempler på plugins

  • Akismet anti spam kommer med, så aktiver den bare. Den er nok mest til blogs
  • WordPress Super Cache: Rydder cachen så du kan arbejde hurtigere
  • Du kan få gratis kontaktformularer med ContactForm 7
  • Yoast kan hjælpe dig med SEO (søgemaskine optimering)
  • WooCommerce giver dig en gratis webshop

Link til toppen.

Tutorials

Du finder mange gode video tutorials på dansk hos Nemprogrammering: https://www.nemprogrammering.dk/Tutorials/Wordpress/wordpress_kursus.php. Der er endda video om at installere WordPress med XAMPP.

Ellers kan du bruge min vejledning 10. Hjemmesider med WordPress.

Link til toppen.

Karens videoer

Karen Skovmand underviser på STX i Slagelse. Hun er dygtig til WordPress, og hun har rigtigt meget på hendes Youtube kanal på https://www.youtube.com/user/Ainsha12/videos.

WordPress opstart

WordPress ekstra

Link til toppen.

1. Installation af WordPress lokalt med XAMPP

Installer XAMPP ud fra Vejledning 7. PHP og MySQL i Visual Studio Code. Vi skal som udgangspunkt ikke bruge Visual Studio Code, så du skal kun gennemføre det første punkt 1. Installation af nødvendige servere med XAMPP.

VIGTIGT: Når du kommer til skærmbilledet her, skal du klikke på WordPress-ikonet. Så installerer WordPress.

Når installationen er færdig, så start både Apache og MySQL databasen. Nedenfor er vinduet vist, hvor de er startet. De knapper, hvor du skal trykke på Start, laver vinduet om til Stop, når Apache hhv. MySQL er startet.

Start Apache og MySQL

Link til toppen.

2. I gang med WordPress

Jeg har installeret WordPress i en mappe i htdocs, der hedder “wordpress”.

Så værsko at logge ind. Husk dit brugerlogin. Login adressen er localhost/wordpress/wp-admin/

Så er du inde i WordPress’ administrationsmodul

Link til toppen.

2.1 Hav flere WordPress hjemmesider lokalt

Det er enkelt at lave ekstra, uafhængige og, lokale udgaver af WordPress. Følg vejledningen i afsnit 15.1 Installer WordPress lokalt. Du kan sikkert springe flere afsnit over, da du nok allerede har XAMPP serveren kørende. Der er følgende ændringer:

  • I phpMyAdmin-databasen skal du lave en ny database. F.eks. wordpress01 eller hvis du skal lave en hjemmeside for ”Verdensfirmaet ApS”, så kald databasen for ”verdensfirmaet”
  • I XAMPP mappen skal du i mappen htdocs lave en ny mappe, f.eks. wordpress01, og her skal du kopiere den unzippede udgave af WordPress ind. I browseren skal du så selvfølgelig skrive localhost/wordpress01.

Link til toppen.

2.2 Arbejde i WordPress

Jeg har fundet en dansk guide til dig på www.ordpress.dk, skrevet af Knut Nägele. Hele guiden starter her: http://ordpress.dk/lav-din-egen-hjemmeside.

De første 2 trin handler om at få installeret en WordPress online, men dem kan vi springe over, når vi arbejder lokalt med WordPress.

Bemærk: Der er virkeligt mange youtube tutorials til WordPress, som du selvfølgelig også kan kaste dig over!

Link til toppen.

2.3 Skriv og rediger sider

Når du lige har installeret WordPress på din hjemmeside, så vil der være en side der hedder “eksempelside”. 

Hvis du vil oprette flere sider, så går du ind i menupunktet Sider. når du er logget ind i backend’en af WordPress. Bemærk, at vi opretter sider, selvom vi ikke koder en linje. Brugeren skal selv kunne gøre det her

  • Vælg: Sider > Tilføj ny
  • Skriv en overskrift, her ”Forside”
  • Og skriv en tekst til forsiden.
  • Til sidst gem dit arbejde ved at klikke på knappen Udgiv.
  • Du kan se din side ved at klikke på Permanent link: Her kan du også ændre URL’en, hvis du vil.

Link til toppen.

2.4 Få adgang til alle dine sider

Klik på Alle sider for at se alle dine sider. Du ser nu alle siderne. Rul musen over den enkelte side, så får du en menu frem. I menuen kan du bl.a. redigere, slette eller andet.

Link til toppen.

2.5 Indsæt et billede/media

Jeg er inde på forsiden. Jeg vil indsætte et billede. Når du vil have billeder indsat i et CMS system, sker det i 2 trin.

  • Først skal du tilføje det til mediebiblioteket. Det er måske irriterende, men det betyder, at du kan indsætte billedet på andre sider også
  • Herefter indsætter du billedet på siden
  • For at tilføje dit billede/medie til biblioteket, klik på Tilføj medier
  • Udpeg det billede, du ønsker. Tilføj et alt-tag til billedet. Du kan indsætte det direkte fra biblioteket ved at klikke på knappen Indsæt på siden.
  • Når billedet er inde på siden, kan du ved at klikke på det, få det venstre stillet, højre stillet, hvad du vil. Klik på billedet og brug lokalmenuen over billedet.

Link til toppen.

2.6 Links i WordPress

Det er simpelt at lave links i WordPress, og du får god hjælp.

Åben den side, du ønsker at lave et link fra. Markér den tekst, du vil lave et link på, og klik på kæden i menulinjen. Du får du et felt på skærmen, hvor du begynder at skrive navnet på den side, du vil linke til. Her siden ”Om os”. Efter kort tid gætter programmet, hvad du vil linke til, og du kan klikke på den ønskede side. Gem til sidst siden.

Link til toppen.

2,7 Skift mellem almindelig og HTML visning

Du skifter mellem visningerne ved at bruge fanebladene til højre på siden.

  • Fanen Visuel (standard) giver dig den almindelige visning
  • Fanen Tekst giver dig HTML visning og mulighed for at redigere i koden. Denne visning er vist nedenfor

Link til toppen.

2.8 Lav en underside

Det er nemt at lave en underside/undermenu i WordPress. Som regel er det defineret på forhånd i skabelonerne, og det gælder også her. Dvs. ingen kodning, men man skal lige vide hvordan først.

  • Jeg har her en side med nogle af verdens vigtigste vulkaner:
  • Siden er gemt som ”Alverdens vulkaner”
  • Jeg vil nu lave en side om den første vulkan på listen, Hekla på Island. Åben en ny side og indsæt tekst og evt. billeder på siden helt som du plejer.
  • Når du gemmer, skal du ude til højre først klikke på knappen Forældre. I fald-ned menuen vælger du den side, som skal være over-side (= ”forældre”) til siden. Når det er gjort, kan du udgive siden.

  • Tjek om det virker. Hvis ikke, så er der en anden metode:
  • Gå ind under Udseende > Menuer > vælg den side, der skal tilføjes til menuen > Knappen Tilføj til menu
  • Nu er menupunktet tilføjet. Så skal du trække i menupunktet, så det er rykket lidt ind.

Resultatet er under alle omstændigheder et undermenu.

Link til toppen.

2.9 Temaer

Indtil nu har fokus været på at kunne producere indhold. Nu er turen kommet til sidens udseende.

Skabeloner i WordPress hedder temaer. Der findes i tusindvis af temaer, og mange af dem er gratis. At lægge et tema på en hjemmeside er en nem måde at få siden til hurtigt at se pæn ud. Du vil i mange tilfælde endda have mulighed for at justere temaet. Alt sammen uden at du skal have kodekendskab. Skal du helt i bund med temaerne, kræver det dog kodekendskab. Men forsøg at find et tema, som understøtter dit budskab, og som samtidigt ikke er for kompliceret.

Link til toppen.

2.10 Hjælp til at finde et tema

  • Vælg til venstre Udseende > Temaer. Så får du allerede her mulighed for at vælge et par temaer
  • Inde under Udseende > Temaer klik på knappen Tilføj nyt.

Du er nu inde, hvor du kan vælge temaer. Der er mange muligheder for at finde det tema, der passer til dig. Klik f.eks. på knappen Funktionsfilter og prøv at ving et par muligheder af. Bemærk, at du under Funktioner har mulighed for at vælge, at du f.eks. vil have et brugerdefineret menu eller selv kunne redigere i CSS’en.

I første omgang vil jeg gøre det sikre: Vælge en af de mest populære temaer, her Twenty Thirteen. Når du ruller musen over et tema, så klik endelig på Detaljer og forhåndsvisning. Så har du muligheden for at kikke det igennem inden du til sidst overfører temaet til din samling ved at klikke på Installér.

Gratis temaer til WordPress

Mange hjemmesider tilbyder gratis WordPress hjemmesider. Tjek f.eks. den rigtigt gode side: https://www.siteground.com/wordpress-hosting/wordpress-themes.htm

Link til toppen.

2.11 Anvend det valgte tema

Det er næsten for nemt. Under Udseende > Temaer sørger du for, at temaet er aktivt.

Når det er aktivt, bliver det automatisk brugt som baggrund for alle siderne. Prøv at tage en af siderne, her forsiden, og vis den i en browser. Bemærk, at menuen dannes automatisk, og at der er en søgefunktion ude til højre. Vi er dog ikke i mål endnu, se de næste afsnit om styling og plugins til at styre sidens rækkefølge med.

Link til toppen.

2.12 Tilpas din sides udseende uden at kode

Ved de fleste temaer har du mulighed for tilpasning. Et langt stykke hen ad vejen kan det lade sig gøre uden kode. 

  • Vælg Udseende. På det tema, du arbejder med, klikker du på knappen Tilpas.

Så er du inde i et tilpasningsområde. Det afhænger af skabelonen, hvad du kan tilpasse. Her vil jeg i første omgang lægge et andet billede ind øverst samt lave en anden baggrundsfarve på menubjælken.

  • Vælg Tilføj nyt billede
  •  det nye vindue klik på knappen Tilføj nyt billede. Her vælger du en anden billedfil.

Bemærk, at den billedfil, der bruges som standard i temaet, er meget stor. Den er 4600 x 500px eller noget i den stil. WordPress foreslår selv senere, dvs. når du har klikket på billedet, en størrelse på 1600 x 230. Følg disse anvisninger og vælg et stort billede.

  • Din side ser nu således ud, noget mere passende for en vulkan-side. Klik til sidst på knappen Gem og udgiv.

Link til toppen.

Tilpasning af øvrige elementer i temaet

Med hensyn til forsidebilledet var vi heldige. Der var en indstilling, som passede lige til det, vi ville. Det kan vi bare ikke altid regne med. Hvis vi vil tilpasse baggrundsfarven til menuen, skal vi ind i CSS’en til temaet. Det handler næste afsnit om. Hvis vi vil f.eks. selv bestemme rækkefølgen i menuen eller lave billedgalleri og/eller en karrusel, så skal vi have fat i widgets og plugins. Widgets og plugins er små tilføjelser til WordPress, der ofte er gratis.

Link til toppen.

2.13 Tilpas temaets CSS

Med mindre, at du gerne vil skabe en masse problemer, så hold dig fra temaets CSS. Du kan få adgang, men det er nemmere at lave sit eget stylesheet, tilføje det og så rette alting derfra.

  • Fra hovedmenuen vælg Udseende > Tilpas

I det nye skærmbillede vælg Ekstra CSS.

Så kan du skrive løs. Hvis du vil rette i klassen “MinKlasse”, så laver du bare en ny klasse med samme navn i det ekstra CSS. Evt. tilføj koden “!important” efter stylen. Så overstyrer du den eksisterende kode. Her er den ekstra css til hjemmesiden her:

Link til toppen.

2.14 Plugins

Du opnår adgang til plugins ved at vælge Plugins > Tilføj nyt. Jeg har tidligere nævnt nyttige plug-ins som f.eks.:

  • Akismet anti spam kommer med, så aktiver den bare. Den er nok mest til blogs
  • WordPress Super Cache: Rydder cachen så du kan arbejde hurtigere
  • Du kan få gratis kontaktformularer med ContactForm 7
  • Yoast kan hjælpe dig med SEO (søgemaskine optimering)
  • WooCommerce giver dig en gratis webshop

Du kan dog også gå på jagt. Prøv at f.eks. at finde et plug-in til at lave et galleri eller en karrusel (carousel på engelsk) . En karrusel kan skifte mellem billeder. Her er et eksempel, lavet med et gratis plug-in:

Link til toppen.

3. Webshop i WordPress med WooCommerce

Ganske kort: Det går ud på, at du skal installere og lære at bruge plug-in’et WooCommerce. WooCommerce kan give dig en webshop, som du 100% selv kan styre.

Link til toppen.

3.1 Start med en tom WordPress installation

Først skal du starte en tom WordPress. Du skal ikke oprette sider i WordPress. Husk at sætte dit sprog til dansk i din WordPress installation. Hvis det giver problemer, så se på https://en.support.wordpress.com/language-settings/. Bagefter skal du lave en webshop med WooCommerce. Sådan kan indstillingerne se ud, når de er ændret til Dansk:

Brug gerne vejledningen på www.nemprogrammering.dk.

Link til toppen.

3.2 Installation af plug-in’net WooCommerce

Bemærk: Teksten her er en opsummering af video 24: Webshop med WooCommerce og WordPress | Installationen: https://www.nemprogrammering.dk/Tutorials/Wordpress/wordpress_kursus24.php.

Installationen kører som et normalt plug-in, du skal bare vælge WooCommerce. Når du har installeret din WordPress, skal du gå ind under Pluginns > Installer nyt. I det nye vindue brug søgefeltet og søg efter WooCommerce.

Du skal bruge det første pluginn, som bare hedder WooCommerce. Resten er udvidelser til WooCommerce, som du ikke skal bruge i første omgang. Bemærk, at du også kan downloade WooCommerce zippet fra WooCommerces hjemmeside. Det her er dog nemmere. WooCommerce ser sådan ud: Klik på knappen Installer nu / Install now.

Når du har installeret, klik på Aktiver. Du vil få en installationsguide frem. Læs dog afsnit 3.3 først, så du fra starten har WooCommerce på dansk. Installationsguiden ser vi på i afsnit 3.4.

Link til toppen.

3.3 WooCommerce på dansk

Bemærk: Teksten her er en opsummering af video 25. VooCommerce på dansk. https://www.nemprogrammering.dk/Tutorials/Wordpress/woocommerce-dansk.php

Sproget i WordPress skal være dansk. Hvis ikke, så skal du ændre sproget under Indstillinger. Se gerne https://en.support.wordpress.com/language-settings/.

Hvis du er heldig, så kan du få WooCommerce på dansk. Hvis ikke, skal du muligvis ind på hjemmesiden WooCommerce oversættelse.

Link til toppen.

3.4 WooCommerce installationsguide

Bemærk: Teksten her er en opsummering af video 26. Konfiguration og opsætning af WooCommerce: https://www.nemprogrammering.dk/Tutorials/Wordpress/konfiguration-woocommerce.php.

Du finder adgangen til installationsguiden øverst, når du aktiverer WooCommerce som plugin

  • Du skulle nu gerne have WooCommerce på dansk. Hvis ikke, så læs forrige afsnit og husk at WordPress skal have dansk som sprog inden, at du installerer WordPress
  • Så skal vi i gang. Klik på knappen Kom i gang. Måske ser du den øverste mulighed herunder. Gør du det, så gå der ind. Muligvis skal du selv gå ind under indstillinger (se nr. 2 + 3 vindue herunder)
  • I det næste skal du vælge at oprette alle 4 sider, som WooCommerce foreslår dig: Shop, Kurv, Betaling og Min konto. Når du er færdig, klik på knappen Næste
  • Det næste vindue hedder Opsætning af shoppens hjemsted. Udfyld således:
FELTUDFYLDNING
Hvor er din butik placeretDanmark
Hvilken valuta vil du bruge …Danske kroner (DKK)
ValutapositionHøjre med mellemrum
Tusindtalseparator. (dvs. punktum)
Decimalseparator, (dvs. komma)
Antal af decimaler2
Enhed til produkters vægtKg
Hvilken enhed vil du brugeCm
  • Næste vindue er Opsætning af forsendelse og moms
FELTUDFYLDNING
Kommer du til at sende produkterHer skal du, modsat videoen, klikke nej. Dvs. lad være med at klikke på ja
Vil du opkræve salgsmomsKlik først ja   Bagefter klik til, at du vil vise produkternes pris inklusive moms for brugerne

Måske skal det se således ud:

Klik videre ved at klikke på knappen Næste.

  • Det næste vindue om Betalinger springer du over. Vi skal ikke opsætte betaling til webshoppen
  • Du skal heller ikke tillade folk at oprette konti
  • Du må gerne slå de 3 her til
  • Du skal ikke installere jetpack
  • Du er nu igennem og kan gå i gang med at oprette dit første produkt

Link til toppen.

3.5 WooCommerce temaer

Hvis du ønsker en ren webshop, så kan du med fordel bruge WooCommerce temaer. Der er mange temaer, og nogle af dem er gratis. Vælg et tema, der på forhånd ligner en webshop. Du kan altid skifte det ud, hvis du er utilfreds.

Link til toppen.

3.6 Ekstra plugins

Du skal installere plugins. I første omgang skal du blot installere dem med gul baggrund.

PLUGINHVORFORBILLEDE
Yoast SEOStyrer din SEO
WP Super CacheGør siderne hurtigere
CookiesLovpligtigt hvis du samler cookies ind
MailChimpTil nyhedsbreveLidt kompliceret, så vent med den
AnalyticsMan skal have en gmail, men laver Google Analytics<

Link til toppen.

3.7 WooCommerce overblik

Teksten i afsnittet er en opsummering af video 27. Overblik over WooCommerce. https://www.nemprogrammering.dk/Tutorials/Wordpress/overblik-woocommerce.php

Du har nu installeret WooCommerce på dansk og fuldført installationsguiden.

For at skabe dig et overblik, gå ind under Sider > Tilføj ny.

Her finder du nu pludselig en ny side, ”Butik” og ”Kurv”. Bare lad siderne være, du må ikke slette dem.

Vi har med WooCommerce fået et nyt menupunkt i venstremenuen.

MENUPUNKTFORKLARING
OrdrerHer får du overblikket over de ordrer, som er indgået til butikken. Du kan ordrebehandle her
RapporterKan vise f.eks. salg pr dag, du kan få en masse statistik
IndstillingerOpsætning af webshoppen, kommer vi tit ind på
StatusRet teknisk, mest hvis der opstår tekniske problemer
TilføjelserDer findes masser af plugins til WooCommerce, som du kan få brug for

Underpunkter til Varer

MENUPUNKTFORKLARING
OrdrerHer får du overblikket over de ordrer, som er indgået til butikken. Du kan ordrebehandle her
RapporterKan vise f.eks. salg pr dag, du kan få en masse statistik
IndstillingerOpsætning af webshoppen, kommer vi tit ind på
StatusRet teknisk, mest hvis der opstår tekniske problemer
TilføjelserDer findes masser af plugins til WooCommerce, som du kan få brug for

Videoen nævner ”produkter”. I nyere udgaver hedder den ”Varer”. Du får her et overblik. I næste video, dvs. næste afsnit, skal vi oprette varer.

MENUPUNKTFORKLARING
Alle varerViser alle varer i webshoppen, og der kan være virkeligt mange. Måske 1.000
Tilføj nyTilføjer ny vare
KategorierVarerne skal tilhøre en kategori, og kategorierne skal give mening for kunden. F.eks. ”skjorter”, ”bukser”, ”bluser” osv.
TagsSEO, kan virke i forhold til at søgemaskineoptimere
EgenskabDu kan oprette egenskaber, som du så kan tilføje til dine varer. F.eks. vil egenskaberne ”farve”, ”materiale” og ”størrelse” være fornuftige egenskaber i forhold til tøj

Link til toppen.

3.8 Oprette varer

Allerførst skal du forstå webshoppens opbygning.

I WordPress har vi 3 niveauer i en webshop

  1. Overordnet niveau, hvor man kan se flere varer. Her er det vist med varekategorier

Afsnittet er et uddrag af videoen Sådan opretter du dit første produkt i WooCommerce, https://www.nemprogrammering.dk/Tutorials/Wordpress/wordpress_kursus25.php.

  • Gå ind under Varer > Tilføj ny
  • Følg videoen og prøv at oprette en kasket. Find et billede af kasketten på nettet
FELT UDFYLDNING
VaredataVælg ”Enkelt vare” i første runde. Har du f.eks. sokker eller t-shirts, der skal vises i forskellige farver, skal du vælge ”Variabelt produkt”
Virtuelt produktEt produkt, der ikke eksisterer fysisk (f.eks. en ebog). Tøjnummeret er ikke virtuelt
TilbudMan kan lave tilbud derinde
LagerstyringVi skal IKKE bruge lagerstyring
RestordreVi tillader ikke restordrer
Fanen EgenskaberSkal vi nok komme ind på

Link til toppen.

Upload af billeder

Inden at du kan vise din vare på din hjemmeside, skal du uploade den til dit ”medie-bibliotek”. I WordPress som i alle andre CMS systemer skal man uploade medier til et arkiv, hvor man så indsætter dem fra. I mediearkivet kan man så have alle mulige ”medier”: Billedfiler, lydfiler, pdf, video …

Du får adgang til mediearkivet mange steder fra. Enten kan du gå ind direkte fra menuen til venstre, alternativt er der mange ”smutveje” i form af knappen Tilføj medier, der dukker op mange steder.

Når du er inde, udfyld som nedenfor. Vær grundig, det er altafgørende for din webshops succes, at dine billeder er nemme at søge på udefra.

Vigtigt. Sørg for at frilægge dine billeder, så de ser nogenlunde éns ud i webshoppen. Du kan lære at frilægge i lektion 5. Frilægning.

FELTUDFYLDNING
TitelDame-kasket-rød  (fabrikant-navn-egenskab, husk bindestreger)
Billed-tekstBehøver man ikke at udfylde
AltRød kasket damemodel
BeskrivelseBehøver man ikke at udfylde

Link til toppen.

Udfyldning af vinduet rediger vare

FELTUDFYLDNING
Det øverste tekstfelt  Det er din opgave at finde ud af, hvad det bruges til J
Det nederste tekstfelt, ”Kort varebeskrivelse”Det er også her din opgave at finde ud af, hvad det bruges til
Felter til højre: Varekategorier
Felter til højre: ProdukttagsUdfyld med mindst 1 tag, gerne flere. Det giver plusser i SEO
Felter til højre: Varebillede (i videoen hedder det produktbillede).Skal udfyldes, og det skal udfyldes med standardbilledet
Felter til højre: Varegalleri (i videoen hedder det produktgalleri)Ikke nødvendigt at udfylde, men det virker meget professionelt at få det udfyldt. Herunder har jeg kun 1 billede, der skal ellers altid være mindst 2 billeder med standardbilledet først
Felter til venstre: Produkt data mv.Vælg som udgangspunkt Enkelt vare. Vi kommer senere ind på, hvad de andre slags varer er for noget:
Øvrige felter i området udfyldes, så varen er momspligtig

Link til toppen.

3.9 Produktkategorier

Afsnittet er et uddrag af videoen Sådan opretter du dit første produkt i WooCommerce, https://www.nemprogrammering.dk/Tutorials/Wordpress/produktkategorier-woocommerce.php.    

  • Du opretter nye kategorier under Varer > Kategorier > Ny kategori
  • Vedhæft gerne et miniturebillede, det gør det pænere

For at vise kategorien, skal du ind under Udseende > Widgets. Indsæt Produktkategorier under Primær sidebar ved at trække den over.

Nu kan du inde fra produkter tilføje produkterne til din sidebar. Prøv at gøre det.

Link til toppen.

3.10 Egenskaber og variabel vare

Hvis du har en vare, som findes i flere varianter, kan det være en idé at oprette den som variabel vare. Det kunne f.eks. være sokker i forskellig farve og størrelse.  Hvis du f.eks. har sokker i 3 størrelser og 3 farver, kan du nøjes med at oprette 1 vare i stedet for 3 x 3 = 9 varer. Den ene vare skal så oprettes i 9 varianter.

Når du skal lave varianter, skal du oprette egenskaber. Et eksempel. Du har et par sokker, der findes i 3 farver.  Sort, rød og hvid. For at lave varianter, skal du oprette en egenskab, der hedder farve. Egenskaben skal du så tilknytte den vare, som du opretter som variabel. Så kan du lave varianter af den.

Link til toppen.

3.11 Start med at oprette egenskaber

Vigtigt: Jeg anbefaler, at du opretter egenskaberne under ”Egenskaber”. Du kan oprette dem, mens du opretter varen. Men det kræver, at du kan indtaste en lodret streg, som ikke findes på Mac.

  • Først skal du gå ind under Varer > Egenskaber. Under Egenskaber skal du i feltet Navn skrive navnet på egenskaben, her ”Farve”. Klik til sidst på knappen Tilføj egenskab
  • I det nye vindue skal du under Temaer vælge Tilføj temaer (egenskaber)
  • I det næste vindue udfyld den ønskede farve i feltet Navn, her Sort. Lav evt. en beskrivelse, farver er dog rimeligt lette at forstå og kræver næppe en beskrivelse J
  • Fortsæt på samme måde, indtil du har det ønskede antal farver. Du kan sagtens sætte ”for mange” farver ind, det betyder ikke noget i visningen. Det gør det kun mere bekvemt for dig at genbruge egenskaben til andre varer. Her har jeg sat sort, rød og hvid ind

Link til toppen.

3.12 Opret den variable vare og knyt egenskaber til varen

  • Vælg Variabel vare
  • Nu skal du knytte egenskaben farve til varen. Vælg fanen Egenskaber. I det nye vindue vælg fra fald-ned menuen Tilpasset vareegenskab den rigtige egenskab, her ”Farve”. Til sidst klik på knappen Tilføj
  • Ving begge muligheder Synlig på varesiden og Anvendt til varianter af.
  • Klik herefter på knappen Vælg alle. Så kommer varianterne til syne, her Hvid, Rød og Sort. Skal du ikke bruge dem alle, kan du bare klikke nogle af dem fra.
  • Klik til sidst på knappen Gem egenskaber. Bemærk: Ser du ikke vinduet nedenfor, så læs den næste boks

Varevinduer

Varevinduerne kan åbnes og lukkes. Nogle gange er de lukkede.  Hvis de er det, så kan du åbne vinduet ude til højre.

Link til toppen.

3.13 Variable varer

  • Nu er du endelig klar til at oprette varianterne. Gå ind under fanen Varianter og klik på knappen Fortsæt
  • I det næste vindue skal du først vælge en af egenskaberne. Vi har kun egenskaben ”farve”, men vi kunne sagtens have andre egenskaber, f.eks. størrelse og alt muligt andet. Når du har vagt den/de ønskede egenskab(-er), skal du til venstre klikke på linket Åben
  • Når området er åbent, kan du vedhæfte et billede og skrive om varen som du plejer. Jeg har her lavet en rød variant, men det er for, at du bedre kan se det lille billede, der er sat ind. Indtast de nødvendige oplysninger om f.eks. pris mv. Klik til sidst på knappen Gem ændringer nederst i vinduet.
  • Gentag proceduren for at oprette en ny variant. Når du opretter en ny variant, skal du først klikke på knappen Fortsæt.
  • Under Tilføj variant vælger du en ny farve, her Hvid. Skift billedet til den hvide variant, indtast oplysningerne og gem ændringerne.
  • Når du opretter varianterne, vil du kunne se dem listet på din skærm
  • I webshoppen vil det nu se således ud. Brugeren ser et generelt billede af varen, her en rød sok. Priserne vises, og klikkes der på knappen Vælg en mulighed, så kan brugeren vælge en variant og se oplysninger og billede. Dejligt brugervenligt J

Link til toppen.

3.14 Opret varianterne direkte

Du tilføjer egenskaberne under vareoprettelsen på

Du kan oprette varianterne direkte ved at vælge under

  • Varedata > Variable vare
  • Vælg knappen Tilføj
  • Vælg et navn (her ”Farve”). Her er varianterne Sort, Rød, Hvid, Grøn. Skriv varianterne på følgende måde, dvs. med mellemrum og en lodret streg mellem dem
Sort | Rød | Hvid | Grøn |
  • Husk at vinge følgende muligheder af:
    • Synlig på varesiden
    • Anvendt til varianter

Link til toppen.

3.15 Menuer i WooCommerce

Bemærk: Afsnittet her er et uddrag af videoen https://www.nemprogrammering.dk/Tutorials/Wordpress/woocommerce-menu.php.

Hvis du vil styre menuerne, herunder få webshoppens varekategorier som menupunkter, så gå ind i WordPress-menuen under Udseende > Menuer.

Her kan du hente varekategorierne ind som menupunkter.

Vigtigt

  • ”Kategorier” er slet ikke det samme som ”Varekategorier”. ”Kategorier er noget, som har med almindelig WordPress at gøre. Varekategorier hører til WooCommerce
  • Hvis du ikke kan se varekategorierne ude til venstre, så følg vejledningen i boksen herunder
Hvis du ikke kan se varekategorierne ..
Under Menuer vælg Skærmindstillinger øverst til højre. Når du klikker, folder der sig et menu ud. Vælg her Varekategorier. Så vises de:

Link til toppen.

3.16 Vis kun varekategorier på shoppens forside

Du skal først og fremmest vælge et WooCommerce tema. Ellers vil det ikke virke!

  • Du skal selvfølgelig have oprettet varekategorier i WooCommerce og have varer tilknyttet disse kategorier.
  • Gå ind på temaet i WordPress menuen: Vælg Udseende > Tema. På temaet vælger du Tilpas
  • Så får du en lang række muligheder til højre for at tilpasse temaet. Disse kan være lidt forskellige fra tema til tema. I alle tilfælde skal du gå ind under punktet WooCommerce
  • Til sidst vælger du, at vareshoppen kun skal vise kategorier. Så vises kategorierne som menuer

Link til toppen.

3.17 Søgemaskine optimering

Installer et plug-in der hedder ”Yoarst” og brug det. Men du skal løbende skrive en masse om dine enkelte billeder.

Link til toppen.