MIN WORDPRESS WEBBPLATS

MIN WORDPRESS WEBBPLATS

DOKUMENTATION V 1.1

Webbutveckling 1 Hermods

Uppdrag 5 Mila Kononova

Innehåll

Konstruktion av en tillgänglig webbsajt ... 7

Inledning ... 8

Förberedelse och planering ... 8

Min Webbplats Planering ... 8

Webbplatskart ... 8

Wireframe ... 9

Visuella stilar ... 11

Stylescape ... 11

Undersökning ... 12

Wordpress Teman Grunderna ... 12

Mallfiler ... 12

Malldelar ... 12

Inlägg vs Sida ... 13

Inlägg ... 13

Sidor ... 13

Mallfiler hierarki ... 14

Funktioner ... 15

Functions.php ... 15

Function.php vs tillägg / plugin ... 15

Slutsats ... 16

Genomförande ... 17

WordPress Teman Uppsättning ... 17

My functions.php file ... 17

Resurser jag använde mest: ... 31

Malluppsättning ... 32

Aktivera en mall ... 32

Applicera en mall ... 32

Mina mallfiler ... 33

Total lista över mina mallfiler:... 33

Min mall delar: ... 33

Mallfiler innehåll ... 33

Mall delar ... 33

Mallar ... 34

Anpassning av mallar ... 35

Anpassad bildstorlek ... 36

Så här placerar man anpassad widget plats ... 37

Så här placerar man anpassad logotyp ... 38

Så här placerar man anpassad webbplatstitel och slogan ... 39

Mall För Huvudsida ... 40

Webbplats Konstruering ... 43

Inlägg ... 43

Sidor ... 47

Formulär ... 49

Navigering ... 51

Bilder media ... 54

Stilmallar ... 55

Mobil först ... 55

Font Awesome ... 55

Min layoutinställning ... 56

Navigering flex ... 56

Huvudinnehåll flex ... 57

Normalize.css ... 58

DOM-Script... 59

Planering ... 59

Genomförande ... 59

Tillgänglighet ... 64

Navigerbart ... 64

Textalternativ ... 64

Tydliga länkar ... 65

Tydliga användarinmatning riktningar ... 65

Beskrivande rubriker ... 66

Kontrast ... 66

Konsekventa datum... 66

Flexibel layout ... 66

Utskriftsvänligt ... 66

Wordpress tillgänglighet god praxis ... 67

Kodning ... 67

Media: detaljer för bilaga ... 68

Altternativtext ... 70

Rubrik ... 70

Beskrivning ... 70

Bildtext ... 70

Testning och kvalitetssäkring ... 71

Testning ... 72

Länkar Testing ... 72

Responsivt test ... 72

Korsa webbläsartest ... 75

Google Chrome ... 76

Firefox ... 76

Opera ... 77

Microsoft Edge ... 77

Internet Explorer ... 78

Internet Explorer lösning ... 78

kvalitetssäkring ... 81

Validering ... 81

Sidor validering ... 82

Inlägg validering ... 84

CSS validering ... 85

Bildoptimering ... 85

Tillägg ... 86

Smush ... 86

WP Retina 2x ... 87

Metoder och verktyg ... 89

Bild Kvalitet ... 90

Bild Format ... 90

Bild storlek: ... 91

Lazy Loading ... 91

Programvara ... 91

Tips ... 93

Korrekturläsning ... 93

Kod Komprimering ... 94

Autoptimize ... 96

JHC optimize ... 98

Kodminifiering tips ... 100

Galleri ... 101

Vad kan förbättras ... 104

KONSTRUKTION AV EN TILLGÄNGLIG

WEBBSAJT

Inledning

Detta dokument förklarar hur jag arbetade för att skapa min WordPress -webbplats. Detta arbete är en del av Hermods Web Utveckling 1 kurs. Syftet med denna dokumentation är att visa hur den färdiga webbsajten ser ut och hur jag arbetat med tillgängligheten.

Förberedelse och planering

Min Webbplats Planering

I det här avsnittet skulle jag vilja ge en mycket kort beskrivning av min webbplatsplanering eftersom de lösningar jag har kommit med för att skapa min WordPress -webbplats är baserade på min planering.

Webbplatskart

Wireframe

Så här var min layout och wireframe ursprungligen planerad:

Visuella stilar

Det här är de visuella stilar som jag skulle genomföra i min webbplatsdesign. Jag skulle använda Roboto Typeface av Google och dessa färger:

Stylescape

Undersökning

Wordpress Teman Grunderna

Jag tittade på min planering och insåg att jag saknar mycket WordPress-funktionalitet som skulle tillåta min teman vändare att till exempel ändra bakgrundsfärg eller lägga till anpassat innehåll utanför inlägg. Så började jag undersöka WordPress teman-funktionalitet.

Mallfiler

Två viktigaste filer utan vilket WordPress-tema inte fungerar är index.php och style.css. Men när jag tittar på min layoutplan inser jag att för att få det till liv som jag planerat måste jag använda flera mallar. När man bygger sitt tema använder man mallfiler för att påverka layout och design av olika delar av webbplatsen. WordPress-teman består av mallfiler.

Malldelar

En mall fil består av mall delar (template partials). Vanliga mall delar inkluderar:

• header.php för att generera sidans rubrik

• footer.php för att generera sidfoten

• sidebar.php för att skapa sidofältet

Genom att kombinera olika mall partials får jag visa olika innehåll på olika sidor.

Inlägg vs Sida

Olika posttyper visas av olika mallfiler. Eftersom hela föremålet med en mall fil är att visa innehåll på ett visst sätt, är posttypens syfte att kategorisera vilken typ av innehåll man hanterar. Vissa posttyper är knutna till vissa mallfiler. De två posttyperna som jag var intresserad av i mitt sidinnehåll var:

Inlägg (Posttyp: ‘inlägg’) / Post (Post Type: ‘post’) Sidan (Posttyp: 'sida') / Page (Post Type: ‘page’)

Inlägg

Inlägg används i bloggar.

• De visas i omvänd sekventiell ordning med tiden, med de senaste inläggen först

• De har datum och tidstämpel

• De kan ha kategorier och taggar tillämpade

• De används för att skapa feeds

De är idealiska för artiklar och kategorier som jag ville använda.

Standardmallar för post typ "inlägg" är: single.php och single-post.php och category.php.

Sidor

Sidor är en statisk post typ, utanför den normala bloggen / feeds. Deras egenskaper är:

• icke-tidsberoende och utan tidsstämpel

• organiseras inte med kategorierna och / eller taggarna

• kan ha sidmallar applicerade till dem

• kan organiseras i en hierarkisk struktur - dvs sidor kan vara moder / barn sidor till andra sidor Mallfilerna som visar sidposttypen är: page.php och alla dess iterationer, custom.php och alla dess iterationer.

Det innebär att alla mina artiklar kommer att vara "Inlägg" så att jag kan skapa feed och sortera dem enligt kategorier.

Och alla mina navigationssidor kommer att bli "Sidor" så att jag kan anpassa dem så som jag vill.

Mallfiler hierarki

Det viktigaste med mallfiler är att WordPress adresser olika mallar för att visa sidans innehåll beroende på vilka filer man har tillgängligt i sitt tema.

Denna förenklade tabell hjälper till att förstå hur det fungerar:

Allt går tillbaka till index.php om andra mallar inte finns i teman.¹

1 Hela listan med mallfiler finns på https://developer.wordpress.org/. och https://wphierarchy.com/ ger en bra visuell

Funktioner

En viktig sak som jag upptäckte på min strävan att få min sida till liv precis som jag planerade det var WordPress-funktioner.

Functions.php

Functions.php är där man lägger till unika funktioner för sitt WordPress-tema. Den beter sig som ett WordPress-tillägg och lägger till funktioner och funktionalitet på en WordPress-webbplats. Man kan använda den för att kalla WordPress-funktioner och för att definiera sina egna funktioner.

Function.php vs tillägg / plugin

Jag noterade att samma resultat kan produceras med antingen ett tillägg eller functions.php. Om man skapar nya funktioner som borde vara tillgängliga oavsett hur webbplatsen ser ut, är det bästa sättet att lägga dem i ett tillägg. Jag ville inte skapa nya funktioner. Jag ville ha tillgång till funktioner som WP redan hade som handlar bara on webbplats utseende.

För extra innehåll bestämde jag mig för att använda widgetar och fokusera på WP functions.php-filen i stället för tillägg eftersom jag verkligen ville ha en uppfattning om vad den kan göra.

Det är väldigt lätt att få ett tillägg i WordPress. I admin-panelen välj Plugins /Tillägg -> Lägg till nytt.

I nytt fönster kan man se flera alternativ för att få ett tillägg. Man kan ladda upp det, söka efter ett tillägg eller filter med nyckelord.

När man hittar sitt tillägg klickar man helt enkelt på "Installera nu" och sedan "Aktivera".

Slutsats

För att kunna hålla platsstrukturen och navigationen som jag ville behövde jag att WordPress skulle få tillgång till kategorin funktionalitet som inte var inställd i våra startfiler. Vår uppgift var att

inkludera Webbtekniker och Internet samt Etik i innehållet. Om jag inte ville skapa en separat menysida för de artiklarna behövde jag kunna sortera dem i kategorier. För detta behövde jag visa kategorier och använda en loop som liknar den som vi hade i våra uppgift filer.

Mina huvuduppgifter var:

• Fixa saknade funktioner i WordPress med hjälp av funktioner

• Ta reda på mall systemet

• Visa ytterligare information i mallar

Genomförande

WordPress Teman Uppsättning

Funktioner

Jag analyserade min webbplatsplan och insåg att jag verkligen inte behövde några komplicerade funktioner eller tillägg för min webbplats och därmed minska hastighetsbelastningen och

tillgängligheten för den delen. Med den här tankegången och noll PHP-kunskap satte jag mig på min spännande resa till functions.php.

My functions.php file

Först och främst skapar jag en funktion för att länka alla mina css-filer här, eftersom jag har ytterligare css som jag vill använda förutom style.css:

Först använder jag Font Awesome CSS. Jag länkar också min style.css för det ät det ”rätta” sett att göra det. Jag ”hook” min funktion till en specifik aktion i WP.²

2 Mer Information https://www.wpbeginner.com/glossary/hooks/

Därefter skapar jag en funktion som ställer in standardinställningar och registrerar stöd för olika WordPress-funktioner.

Därefter aktiverar jag stöd för Utvalda bilder och miniatyrer på inlägg och sidor:

Inlägg miniatyrer på min webbplats visas ovanför.

För att kunna tillämpa Utvalda bilder och miniatyrer gör man följande:

1. Öppna ditt inlägg eller sida på admin-panelen.

2. På den högra panelen är det möjligt nu att lägga till Utvald Bild.

3. Samma bild används för miniatyrbild.

Nästa aktiverar jag funktionen för att låta WordPress hantera dokumenttiteln.

Genom att lägga till detta temastöd, förklarar vi att det här temat inte använder en hårdkodad <title>

-tag i dokumenthuvudet och förväntar oss att WordPress tillhandahåller det för oss. Detta gör mitt tema mer tillgängligt för användaren.

För att använda den här funktionen öppna admin-panelen välj Utseende och Anpassa:

Välj sedan Webbplatsens identitet.

Nästa panel visar alternativ för att anpassa webbplatsens titel och slogan och Ikon för webbplatsen.

Därefter fixade jag WordPress funktion att anpassa färg för bakgrund. Detta gör att min

temaanvändare kan välja vilken bakgrundsfärg som helst för webbplatsen. Jag tillhandahåller även den standard lila nuvarande färgen som min användare kan falla tillbaka till genom att trycka på

"Standard".

För att använda den här funktionen:

Öppna admin-panelen välj Utseende och Anpassa.

Välj sedan Webbplatsens identitet.

Sedan kan man välja vilken färg man vill ha.

Tryck på 'Default' för att återställa dina

inställningar och gå tillbaka till den ursprungliga lila färgen.

Därefter skapar jag en funktion för att kunna anpassa den panelen som man öppnar om man tryker på Utseende och Anpassa på min sida:

Jag tar bort funktionen för att lägga till anpassad bakgrundsbild till webbplatsen, eftersom jag vill behålla min bakgrundsöverlägg för mitt tema. Jag tar också bort åtkomst till widgetar via den panelen.

Then I add support for custom picture logo³:

För att använda den här funktionen öppna admin-panelen välj Utseende och Anpassa. Välj sedan Webbplatsens identitet som jag visade förut. Välj bort eller byt logotyp.

Jag stänger min stora mila_setup() funktion:

Sedan skapar jag flera widgetar områden. De kallas alla "sidebars" men man kan placera dem var man vill i sina mallar:

De består av namn, id, beskrivning, wrap tag och en titel.

Jag skapar flera av dem och stänger min funktion och ansluter den.

Nu kan jag komma åt Widgetar panel för att lägga till innehåll som jag vill ha.

Välj Widgetar i Utseende:

Här är mina widgetar:

Man kan välja innehåll från tillgängliga widgetar och placera det på de staplar som man skapade.

Som man kan se sidofältet har Senaste Inlägg, Kategorier och en kopia av en meny.

Sen registrerade jag position för min navigering:

Nu kan jag anpassa mina menyer. För att se hur det fungerar öppna admin-panelen välj Utseende och sedan Menyer:

Här kan man se att jag skapade 2 menyer:

huvudmeny och socialmeny.

Men nu kan jag välja var jag vill att menyn ska visas i Visa plats. Och då kan jag anpassa det i mina mallar. Jag kommer att förklara senare hur jag gjorde det när jag kommer till mallar avsnitt.

Nästa skapade jag ett dynamiskt upphovsår:

Den här funktionen uppdaterar automatiskt upphovsrättsåret till aktuellt, så att min temaanvändare inte behöver oroa sig för att uppdatera det.

Nästa skapar jag en "läs mer" länk:

Jag använder Font Awesome⁴ en fantastisk typsnitt för att ersätta texten, och jag använder attributet

"titel" som visar ett litet verktygstips för att öka tillgängligheten.

Sedan skapade jag mina egna bildstorlekar:

4 https://fontawesome.com/

Jag använder dem för att generera mina miniatyr och utvalda bilder. Senare i Mallar avsnittet förklarar jag hur jag gör det.

Sedan skapade jag en funktion för att ändra utdragslängden:

‘Return 20’ betyder att jag tillåter endast 20 ord i mina utdrag:

Och det sista jag gjorde var att skapa en funktion som kontrollerar hur många senaste inlägg jag visar på min hemsida:

Jag visar bara 4 senaste inlägg.

Det här är allt för min functions.php-fil. Det var mycket lärande. Från att ha noll ledtråd gick jag till att ha en bra grundläggande förståelse om hur PHP fungerar i WordPress.

Resurser jag använde mest:

https://codex.WordPress .org/

https://developer.WordPress .org/

https://www.wpbeginner.com/

https://stackoverflow.com/

Malluppsättning

Jag började planera att konfigurera mina mallar enligt min webbplatsplanering. Vissa oplanerade moment som jag upptäckte under processen var kopplade till mallarhierarkin.

Aktivering av kategorier och författarnamn ger följande möjligheter:

• att generera en sida som visar inlägg för varje kategori om man klickar på ett kategorinamn.

• att generera en sida som visar alla artiklar av samma författare om man klickar på författarens namn.

Aktivera en mall

För att WordPress ska kunna identifiera mall måste man skriva in mallnamnet i sin php-fil:

Då blir det tillgängligt i administratörsidan. Kom ihåg att man bara kan använda mallar på sidor, inte inlägg.

Applicera en mall

Så här applicerar man mall på en sida:

• öppna sidor på instrumentpanelen och välj mallar i den högra panelen

Mina mallfiler

Total lista över mina mallfiler:

• template-main.php

• single.php

• template-long-aside.php

• template-short-aside.php

• category.php

• author.php

Min mall delar:

• header.php

• header-custom.php

• sidebar.php

• sidebar-short.php

• footer.php

Mallfiler innehåll Mall delar

Filnamn Innehåll

header.php Banner och navigering header-custom.php Banner och navigering

Döljer banner på små skärmar

sidebar.php Sociala menyn

Huvud Sidebar: senaste inlägg, kategorier, huvudmeny kopia, 2 anpassade widgetar

sidebar-short.php Sociala menyn

Huvud Sidebar: senaste inlägg, kategorier, huvudmeny kopia

footer.php Footer-widget: huvudmeny, socialmeny, tillskrivning.

Tema Skapare Upphovsrätt

Mallar

Filnamn Innehåll Länkade sidor

index.php

header.php senaste inlägg

2 anpassade widgetar sidebar.php

footer.php

Hem Sida

template-main.php

header-custom.php kategorier meny

Artiklar sorterade efter kategori sidebar.php

footer.php

Artikel sida

single.php

header-custom.php inlägg innehåll sidebar.php footer.php

Alla inlägg

template-long-aside.php

header-custom.php sida innehåll

sidebar.php footer.php

Om mig

template-short-aside.php

header-custom.php sida innehåll

sidebar-short.php footer.php

Kontakter sida Tack sida

category.php

header-custom.php

Artiklar för specifik kategori sidebar.php

footer.php

Används om man klickar på

"Kategorier"

author.php

header-custom.php

alla artiklar av samma författare sidebar.php

footer.php

Används om man klickar på

“Artikel författare”

Anpassning av mallar

Så här lägger man till anpassad mall partials:

Observera att vi vanligtvis bara lämnar parametern tomt:

Titta på detta exempel:

Var uppmärksam på att jag har ’custom’ som parameter. Det hänvisar till min header-custom.php.

Parameter namnet måste stämma med det namn man har efter header-” ” i php fil. ‘Min anpassade header döljer webbplatsbanner på små skärmar.

Så här kan man få WordPress att använda olika rubriker för olika sidor:

I det här exemplet tillämpar jag bara header.php på hemsidan, alla andra sidor får custom header om de blir refererade till samma mall.

Anpassad bildstorlek

I admin-panelen om man går till Inställningar -> Media kan man se alla bildformat som WordPress har som standard.

Man kan välja att ändra dem här, men man kan även skapa egna bildstorlekar i functions.php. Samt kan man hitta ett bra tillägg för detta.

I mina funktioner skapade jag en anpassad bildstorlek:

Parametrarna är: inställningsnamn, storlek i pixlar och boolean för att aktivera hard crop.

Standardinställningen är false.

Titta på den här koden i min mall:

När jag aktiverar visning av min utvalda bild och miniatyrbild använder jag också det anpassade bildstorleknamnet jag skapade tidigare som parameter. WordPress formaterar automatiskt alla mina bilder⁵.

Så här placerar man anpassad widget plats

Först registrerade jag mina widgetar i min functions.php-fil. Jag tar min footer-widget som exempel:

5 https://developer.wordpress.org/reference/functions/add_image_size/

Nu i mina mallfiler kan jag välja den plats där jag vill att min widget ska visas.

Jag använder ID som parameter och jag placerar min widget i div-taggen.

Så här placerar man anpassad logotyp

Jag aktiverade anpassad logotyp i min function.php-fil i min installationsfunktion.

Nu kan jag välja plats för det och skriva följande kod.

Notera den kommenterade informationen.

Som standard använder WordPress logotypen som en länk till startsidan. Jag ville inte ha det för min bild. Så jag använde denna lösning som endast får länken till bilden.

Så här placerar man anpassad webbplatstitel och slogan

Jag aktiverade titel- och slogan-support i min functions.php-fil i min installationsfunktion.

Nu kan jag välja plats för dem:

Mall För Huvudsida

Jag skulle vilja gå igenom min inställning för mallsidan och ta min huvudartikelsida som ett exempel.

Först lägger jag till min anpassade header:

Därefter aktiverar jag visning av en widget där man kan se ytterligare meny för kategorier för att göra den mer tillgänglig. Användaren kan klicka på en kategori och filtrera bort andra. WordPress-

administratören kan välja att inte visa det alls på widget-menyn.

Sedan skapar jag någon PHP-kod för att komma åt kategorier från databasen, loop genom dem, skapa deras ID, skapa en rubrik för en kategori, skapa anpassad WP-query och sedan starta WordPress-loop.

Loop kollar om jag har inlägg och visar begärda inlägg i ett visst format:

• post titel med en hyperlänk till motsvarande post

• miniatyrbild

• datum och författaren länk

• inlägg utdrag

• en fallback text om inga inlägg finns

Sedan aktiverar jag sidfältet och sidfoten:

Webbplats Konstruering

När jag var nöjd med min tematillsättning började jag fylla i innehållet på min webbplats med WordPress grafiska redaktör.

Inlägg

Jag började med mina artiklar. Jag ville att mina artiklar skulle visas i feed och sorteras efter kategori.

Det betyder att jag måste skapa mina artiklar innehåll i "inlägg, inte i "sidor".

Klicka på "Lägg till nytt" för att skapa nytt inlägg:

Ny tomt inlägg öppnas. Man kan lägga till Titel och sedan genom att trycka på "plus" tecken kan man lägga till olika block på innehåll:

Man kan leta efter blocktyper i sökfältet eller skrolla ner för att se alla varianterna:

Jag valde ett stycke block och fyllde i allt innehåll för alla mina artiklar. Jag ser till att välja en bild och tilldela kategori till varje artikel:

Det är enkelt att skapa en ny kategori. I admin-panelen väljer man ’Kategorier’ alternativ under

’Inlägg’.

Och sen ’Lägg till ny kategori’:

Sidor

Efter att jag fyllt i mina artiklar började jag jobba med mina sidor, som ingår i navigeringen:

• Artikler

• Om mig

• Kontarker

• Tack!

Jag fyller inte någon information på artikelns sida, eftersom jag använder WordPress-query och loop för att fylla den med artiklar där feed är sorterat efter kategori.

Sidor har exakt samma visuell redaktör, men sidopanelen är annorlunda:

Jag kan inte tilldela någon kategori.

Men jag kan välja en mall.

Jag fyller i allt innehåll exakt som jag gjorde för mina inlägg.

Formulär

Jag vet att det finns många tillägg för att skapa en kontaktformulär, men vår uppgift var att skapa det manuellt:

Sedan komprimerade jag min kod och lade till på min kontaktsida som HTML-block:

Här är mitt resultat:

Navigering

När alla mina sidor har skapats började jag skapa min navigationsmeny.

För att komma åt menyinställning måste man välja Utseende -> Meny I Admin-panelen:

Jag skapade huvudmenyn:

• Artiklar

• Om mig

• Kontakter

Jag angav plats för meny:

Sedan skapade jag min Social Media-meny:

Jag använder Font Awesome⁶ för sociala media ikoner. Jag valde flera slumpmässiga ikoner eftersom min användare kan välja några andra senare. Det är väldigt lätt att göra. Font

Awesome erbjuder speciell kod som man kan enkelt kopiera och klistra in i Navigeringsetikett.

6 https://fontawesome.com/

Bilder media

WordPress har ett mediebibliotek som gör det möjligt och enkelt för användaren att lägga till bilder till deras innehåll.

Klicka på Media i admin-panelen. Då kan du klicka på "Lägg till nytt" eller dra och släpp för att lägga till bilder. Senare kan du använda dem i innehåll du skapar:

Stilmallar

Mobil först

Nu när alla innehåll är fyllda och redo börjar jag jobba på min CSS. Jag börjar alltid med att utforma en mobil skärmlayout först. Människor surfar mestadels från sina mobila enheter nuförtiden. Mobilt Internet är mindre kraftfullt och jag tror att jag bör behålla all flex, grids och annan mer

komplicerade kod i Media-queries, som laddar senare och ger mobila enheter snabbare ladd tid.

Det här är en av anledningarna och det kanske inte verkar mycket men varje liten bit hjälper.

Font Awesome

Istället för att använda grafik för mina ikoner använder jag Font Awesome. Det är webbens mest populära ikonuppsättning och verktyg och det låter man använda vektorikoner och sociala logotyper på webbplatsen med teckensnitt. Man kan både ladda ner den lokalt eller länka till deras stilmall.

• Ställ in på din webbplats

o Kopiera stilmall koden till <head> för varje mall eller sida där du vill använda Font Awesome.

• Lägg till ikoner till din användargränssnitt

o Börja placera ikoner i HTML-koden <body>. Hitta rätt ikon och lägga till den på din sida.

• Stil dina ikoner

o Ändra enkelt storlek, färg och mycket mer.

Min layoutinställning

Jag var så frestad att använda Grid igen men sedan bestämde jag mig för att träna flexlayout och uppleva hur det funkar i andra webbläsare.

Navigering flex

För liten skärm använder jag den här inställningen:

Jag inaktiverar flex-grow för min hemikon eftersom jag inte vill att den ska sträckas: Och jag lägger till flex-grow: 1 till mina andra navigeringsobjekt:

Resultatet är:

Och det sträcker sig till 50 em:

Efter 50 ems ändras min meny:

Huvudinnehåll flex

Jag wrap min flex-objekt vid 60 ems:

Jag vill bara ha 2 objekter per rad så jag använder den här inställningen:

Vilket innebär att mina objekt kan krympa och växa och ta hälften av container bredd (47% för att rymma för marginalen)

Objekter som jag inte vill wrap som meny eller rubriker ställer jag in för att ta hela containersbredd:

Det är viktigt att ställa in flex grow, för om det bara finns en artikel kvar i rad vill jag att det tar allt utrymme:

Normalize.css

I början av min stilmall använder jag normalize.css stilformatet. Normalize.css tar bort webbläsarens inkonsekvenser för HTML-element. Normalize.css skapades för att göra inbyggd webbläsarstyling konsekvent över alla webbläsare. Vad det

hjälper till med att göra:

• Behåll användbara webbläsarinställningar.

• Normalisera stilar för ett brett spektrum av HTML-element.

• Korrigera fel och vanliga webbläsarens inkonsekvenser.

• Förbättra användbarheten med subtila förbättringar.

• Förklara koden med kommentarer och detaljerad dokumentation.

DOM-Script

Jag bestämde mig för att skapa en utskriftsikon för mina artiklar enligt denna tillgänglighetsriktlinje:

• Tillhandahåll en utskriftsikon eller liknande om målgruppen saknar kunskap om webbläsarens inbyggda utskriftsfunktion och kortkommandon som Ctrl+P.

En bra riktlinje för detta är:

Knappar, symboler och liknande för att skriva ut kräver JavaScript för att fungera. Låt även knapparna och symbolerna skapas av skriptet. Då kommer användare som inte har JavaScript påslaget inte att se knappen eller symbolen, och får då inte heller en trasig ikon.

Planering

Först skrev jag ner vad jag vill att mitt skript ska göra:

1. Det måste rikta sig bara till artikel sidor

2. Skapa ett knappelement bredvid artikelns rubrik

3. Öppna utskriftsfönstret av artikeln när man klickar på knappen

Genomförande

Först skapar jag min print.js-fil och jag ser i WordPress-dokumentationen⁷ hur man ansluter den till min webbplats. Jag lägger till följande kod till mina funktioner.php:

7 https://developer.wordpress.org/reference/functions/wp_enqueue_script/

Jag lägger den inuti funktionen som ansluter alla mina stilmallar, med villkoret att bara rikta den mall som jag vet att mina artiklar använder.

Då kontrollerar jag om mitt skript är anslutet genom att först skriva den här enkla koden:

Jag får ’hej’ meddelande och det visas bara om jag öppnar något inlägg med artikeln.

Nu när jag vet att mitt skript är anslutet och fungerar som tänkt skriver jag min huvudkod:

1. Jag skapar en funktion som jag tilldelar att ladda när dokumentkroppen är laddad.

2. Jag skapar ett knappelement.

3. Jag tilldelar ’title’ attribut till den, eftersom jag vill att det ska visa verktygstips när man håller muspekaren över den för ökad tillgänglighet.

4. Jag lägger till klassnamn för min knapp eftersom jag vill anpassa den med CSS senare.

5. Jag använder FontAwesome-ikon som displayikon.

6. Sedan tilldelar jag vad min knapp ska göra när man klickar på den - den öppnar utskriftsfönstret.

7. Och till sist lägger jag till mitt föremål som ett barn av div som har "post-title" klass, där ligger mina artiklars rubriker.

Resultatet är:

Inte vackert men det fungerar! Jag kan se att knappelementet dykte upp inuti post-title div:

Efter CSS:

Jag avaktiverade JavaScript i Google Chrome Developer tillägg för att testa att min sida laddar utan problem. Resultatet var att min knapp inte visades men webbplatsen fungerar som vanligt.

När jag trycker på knappen:

Allt fungerar som tänkt. Jag gömmer också min utskriftsknapp med CSS på utskriftslayout.

Resurser som hjälpte mig:

• https://developer.WordPress .org/

• https://www.wpbeginner.com/

• https://stackoverflow.com/

• https://www.w3schools.com/

Tillgänglighet

Jag gick igenom alla tillgänglighetsriktlinjer som www.w3.org har att erbjuda och jag insåg att jag har så mycket än att göra! Vad jag tror att jag lyckades åstadkomma på min hemsida:

Navigerbart

• Min navigering har klara namn

• Den visar aktuell sida och hjälper användaren att hitta innehåll och avgöra var de är

Kontakt mig är en “current” sida och användaren kan se den eftersom den har olika bakgrund:

• När man håller muspekaren över texten har menyobjektet en animeringsindikering att användaren riktar in sig utöver vanlig markör.

• Hem länk finns på varje sida

Textalternativ

• Alla mina bilder och innehåll som inte är text, som presenteras för användaren har ett textalternativ med samma syfte

• alla mina ikoner har tooltip(<title>) text

Tydliga länkar

• Syftet med varje länk framgår av länktexten i sig själv

• Bara länkar är understrukna.

Tydliga användarinmatning riktningar

• Det finns ledtexter/etiketter eller instruktioner när innehåll kräver inmatning från användaren.

• Jag har markerat obligatoriska fält i formulär

Beskrivande rubriker

• Alla mina rubriker beskriver ämne eller syfte

• Jag har skapat alla rubriker med h-element

Kontrast

• Jag använd tillräcklig kontrast mellan text och bakgrund

• Jag erbjuder även mina användare att välja sin egen bakgrundsfärg för mer kontrast eller om de inte gillar min lila

Konsekventa datum

• Jag har skrivit datum konsekvent

Alla datum som finns på min webbplats använder samma format. Jag är jättesäker på detta eftersom jag använder PHP-kod för att generera dem.

Flexibel layout

• Min webbplats har responsiv och flexibel layout som fungerar vid förstoring eller liten skärm.

Utskriftsvänligt

• Jag har skapa utskriftsversion av artiklarna. Jag har använt CSS för att ta bort menyer och förbättra utskriftsvänlig sidlayouten

• Jag har tillhandahållit en utskriftsikon om målgruppen saknar kunskap om webbläsarens inbyggda utskriftsfunktion och kortkommandon som Ctrl+P

• Min utskriftsknapp skapats av JS. Användare som inte har JavaScript påslaget ser inte knappen och får då inte heller en trasig ikon

Wordpress tillgänglighet god praxis Kodning

Jag undviker att koda något som jag kan referera till med WordPress-tagg eller -funktion.

Vad händer om jag hård kodar kategori namn som en rubrik? Men då bestämmer min användare att byta namn på kategori. Hårdkodat kategorinamn ändras inte dynamiskt. Måste alltid ha dynamiska förändringar i åtanke som WordPress god praxis.

Till exempel, funktion för att få hemadress:

Samma fungerar för att visa datum i konsekvent format:

Media: detaljer för bilaga

När användaren lägger till en ny bild i WordPress-mediebiblioteket blir många ytterligare option tillgängliga för bilden.

Jag skulle vilja ta en av mina bilder för att förklara bättre:

I min etik och integritet artikel använde jag den här bilden för att ange "dåligt jobb" om någon som tar andras bild. Om man öppnar den här bilden i mediebiblioteket visas bifogade detaljer:

Och panelen till höger visar:

Det finns flera fält att fylla i:

Altternativtext

Alternativtext beskriver den bild som visas om bilden inte visas, om till exempel bildladdning är avstängd eller om skärmläsaren har åtkomst till den.

Det är en dålig övning att försumma detaljerna när man beskriver alternativ text. Till exempel kunde jag bara skriva "tummen ner" eller "kvinnan tummarna ner". Teoretiskt skulle båda beskrivningarna vara korrekta, men användaren skulle aldrig få hela bilden.

Så den bästa alt texten i mitt fall är: "Obehaglig vacker kvinna i svart klänning som visar tummen ner och tittar på kameran. Strikt ung dam som ger sin utvärdering. Dåligt jobbkoncept. "

Alt text visas om bilden inte visas, så den ska vara så beskrivande som möjligt. Men håll den också kort, 125 tecken eller mindre är en bra riktlinje.

Rubrik

Visar i princip titeln på bildfilen. Och standardtiteln skulle vara exakt som bildnamnet.

Beskrivning

Bilder i WordPress har sin egen URL i mediebiblioteket. Om någon går till den här URL-adressen kommer de se vilken information som man lägger i det här beskrivningsfältet. Det här fältet kan innehålla så mycket information som man vill ha. Det kan vara som alt text, men längre och kan innehålla nyckelord, eller till och med metadata från en kamera etc. Man kan till och med lägga till länkar i beskrivningsfältet.

Bildtext

Textfältet beskriver vad som finns på bilden för personer som kan se bilden och vill veta mer om vad som finns i den. Till skillnad från alt text eller beskrivning behöver bildtexten inte spegla det som bilden verkligen visar. Jag valde att visa upphovsrätt informationen i detta fält.

TESTNING OCH

KVALITETSSÄKRING

Testning

Länkar Testing

Min webbsida har inte så många sidor så jag klickar på varenda länk och kontrollerar att den leder där den ska. Eftersom min webbplats är värd på localhost kontrollerar jag alla länkar manuellt.

Annars skulle jag använda W3C:s länktestare⁸ ytterligare.

Jag bestämmer att alla länkar fungerar som de borde. OBS att jag hade för avsikt att lämna sociala menyer och sidfot länkar tomma för nu.

Responsivt test

Man kan testa sin responsiva layout i webbläsaren. Så här gör man i Goggle Chrome:

• Öppna din webbplats

• Tryck på f12 eller högerklicka och öppna "inspektera"

• Sedan längst upp till höger kan du se mobil / tablettikonen:

Om du klickar på den, kommer din webbplats att ändra storlek och visa dessa alternativ:

Man kan antingen ändra sin webbplats manuellt med "Responsiv" eller välja specifika enheter och testa hur din webbplats ser på dem.

Samtidigt har WordPress ett alternativ att testa en responsiv layout. Välj utseende -> Anpassa från admin-panelen:

I vänstra nedre hörnet ser man:

Man kan växla mellan olika vyer om man trycker på varje ikon.

Det här är en tablett vy:

Detta är mobil vy:

Jag föredrar att använda webbläsarverktyg, men det är bra att veta att WordPress har det här alternativet också.

Jag är nöjd med mina responsiva tester. Allt skaläras smidigt och som avsett. Jag ger ett bra intryck av hur min hemsida ser senare ut i avsnittet "Grafisk Presentation".

Korsa webbläsartest

Det finns många testverktyg men jag har alla större webbläsare installerade på min dator. Jag öppnar min hemsida i varje och kontrollerar responsiv layout och varje sida.

Google Chrome

Allt ser bra ut och fungerar som planerat.

Firefox

Opera

Fungerar och ser bra ut.

Microsoft Edge

Fungerar och ser bra ut.

Internet Explorer

Och som förväntat bryts min flex på hem- och artiklar sidor. Fungerar bra endast på enstaka sidor.

Internet Explorer lösning

Jag bearbetade min CSS och fixade en lösning.

Jag använder @ supports funktion för display flex:

• Jag flyttade min flex navigering och min flex @media dit

• Jag skapade ny stil när det inte finns stöd för flex på navigering

• Jag begränsade wrapper bredd till 50ems

Jag kunde ha skapat mer floats för sidomenyer, men jag tycker att den här lösningen är bra nog eftersom när man använder gammal IE har man fortfarande tillgång till allt innehåll utan en trasig layout. Samt sparar sådan lösning lite mer tid och ger en mer tillgänglig webbsida.

kvalitetssäkring

Validering

För att validera min kod använder jag WordPress tillägg som heter "Validated". Med denna tillägg kan man kolla sina sidor / inlägg HTML mot W3C Validator.

Nu bredvid allt innehåll man har skapat i inlägg och sidor finns en knapp för att validera den:

Sidor validering

Jag klickar på knappen "Check" för varje sida:

Artiklar har ett fel. Jag inspekterar det:

Jag hittar det i min kod:

Jag undersöker hur man fixar det:

Det är avsett för WordPress REST API⁹och WordPress.org har instruktioner om hur man tar bort det.

Jag lägger till följande kod till mina funktioner:

Jag kontrollerar igen och felet är borta. Jag kontrollerar resten av mina sidor och inga har fel:

9 https://developer.wordpress.org/rest-api/using-the-rest-api/discovery/

Inlägg validering

Jag gör samma kontroll till mina inlägg och hittar inga fel:

CSS validering

Jag kontrollerar min CSS genom direktinmatning på https://jigsaw.w3.org/css-validator/validator och får inga fel:

Bildoptimering

Om webbplatsen är värd live kan man också använda en mängd olika verktyg från hela webben för att testa hastigheten på WordPress-webbplatsen, optimera databasen och mediefiler för att

maximera hastigheten utan att skada prestanda.

Från och med nu när min webbplats är på localhost installerade jag bara några tillägg för att hjälpa mig att optimera grafik på min sida, så jag behöver inte oroa mig för att mina bilder är överdrivna.

Tillägg Smush

Smush minskar bildfilstorlekar, förbättrar prestanda. Smush har en gratis och betald version som erbjuder många fler funktioner.

Smush ligger på admin-panelen:

Smush kan automatiskt optimera bilder:

Smush visar hur mycket plats man har sparat:

Smush kan automatiskt ‘smusha’ nya bilder.

WP Retina 2x

Man behöver inte Retina tillägg om man har en pro version av Smush. Att tillhandahålla Retina kvalitet bilder är en pro funktion i Smush som man måste betala för. Så jag valde att installera WP Retina 2x eftersom det tillägget har mycket bra rekommendationer och betyg. Men det finns många alternativ för varje preferens.

Man hittar Retina under Meow Apps i admin-panelen:

Jag väljer inställningar som rekommenderats:

Precis som Smush kan Retina ta hand om nya uppladdningar:

Andra Retinas alternativ hittar man just under Media:

Man kan generera miniatyrer manuellt:

Eller i bulk:

Efter mina bilder uppdaterats kan jag hitta ändringar i koden:

Nu har jag @2x inställningar tillgängliga.

Metoder och verktyg

Kortfattat skulle jag vilja berätta lite om 4 enkla grunder för bildoptimering och nämna några användbara verktyg¹⁰. Grunderna är:

1. Kvalitet 2. Format 3. Storlek 4. Lazy Loading

Bilder utgör över 60% av sidvikten¹¹.

10 https://dougsillars.com/

11 https://developers.google.com/web/fundamentals/design-and-ux/responsive/content

Bild Kvalitet

Bildstorleken beror på deras kvalitet. Här är några användbara verktyg för att arbeta med bildkvalitet:

Lighthouse¹²

Lighthouse är ett open-source, automatiserat verktyg för att förbättra kvaliteten på webbsidor av Google. Man kan köra den mot vilken webbsida som helst

Lighthouse recomenderar behålla 85% av kvalitet på alla bilderna på webben.

Butteraugli¹³

Butteraugli är en till open-sourse google verktyg som används i projekt som kräver att bilder av hög kvalitet ska jämföras med bandbreddsanvändning.

Bild Format

Alla vet jpg men formaten som jag vill fokusera på är SVG: Scalable Vector Graphics¹⁴, SVG, är ett XML-baserat vektorgrafik-format för tvådimensionella bilder som stöder animationer och interaktivitet.

• Bilder ritade som former

• Tar lite plats om de används rätt

• Kan skala oändligt utan kvalitetsförlust

• XML betyder att de kan läggas till HTML

12 https://developers.google.com/web/tools/lighthouse/

13 https://opensource.google.com/projects/butteraugli

Bild storlek:

Wordpress genererar miniatyrer för oss automatiskt. Och så gör optimerings tillägorna. Men vad händer om man inte hade dem?

Om jag tittar på mitt mediebibliotek, har jag en fil med stor storlek:

Jag vill bara påpeka ett mycket viktigt faktum:

Om man utan optimering sätter bildstorlek i CSS för denna bild till 250px, minskar man inte storleken! Bilden skalas bara ner, det kommer fortfarande vara 3264px och väga 2 mb.

Lazy Loading

Lazy loading¹⁵ är en teknik som försvarar laddning av icke-kritiska resurser vid sidan av laddningstiden. Istället laddas dessa icke-kritiska resurser vid behov.

De vanligaste lazy load kanditaterna är bilder som används i <img> -element. När vi ”lazy loadar”

<img> -element använder vi javascript för att kontrollera om de är i visningsporten. Om de är, fylls deras src (och ibland srcset) attribut med webbadresser till önskat bildinnehåll.

Programvara

För att optimera bilder manuellt kan man använda grafisk programvara som till exempel Photoshop eller GIMP. Photoshop kräver dock prenumeration, men Gimp är gratis att använda.

15 https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video/

Både Photoshop och GIMP är ämnad för både enklare och mer avancerad redigering, färgkorrigering eller optimering av bilder.

Jag använder Photoshop som hjälpmedel men jag är säker att GIMP har samma alternativ.

• När man sparar JPEG i Photoshop kan man välja kvalitetsinställningar för det

• Ju högre kvalitet desto större är filstorleken

• Hur kvalitet påverkar filstorleken visas under förhandsgranskningen

• Om förhandsgranskningsrutan är markerad kan man direkt se de visuella förändringarna på bilden

Man kan ändra bildens mått för att minska onödigt stor storlek också:

Ju fler pixlar bilden har desto större fil-storlek blir den.

Upplösningen (Resolution) är endast direkt kopplad till pixelmängden. Till exempel: om bilden har en upplösning på 72 och har 300 pixlar har den samma storlek som bilden med en upplösning på 300 och 300 pixlar i storlek.

Skillnaden kommer att vara i sin storlek i tum / centimeter vilket är viktigt för utskrift, men för webben tar vi alltid uppmärksamhet vid

pixelstorlek. För webben är det bra att använda

Tips

Här är några tips om bilder och tillgänglighet:

• Bilder kan vara vackra, roliga och informativa - men de använder också sidfastigheter, lägger till sid vikt och ökar antalet filförfrågningar.

• Bakgrundsbilder fungerar sällan bra på mobilen. Man kan använda @Media för att undvika bakgrundsbilder på små visningsportar.

• Lär känna glyferna; använd Unicode-symboler och ikoner istället för bilder, med webb fonter om det behövs.

• Det viktiga när det gäller bilder är att specificera i taggen hur stor bilden är. Då kan

webbläsaren rendera hela hemsidan mycket smidigare och snabbare eftersom hemsidan börjar renderas innan bilder laddas. Med en specificerad storlek i <img> taggen kommer hemsidan renderas korrekt direkt och lämna rätt utrymme över till hemsidan.

Korrekturläsning

Som jag ser det är korrekturläsning inte bara processen att kontrollera ett dokument för någon form av grammatiska, typografiska eller formateringsfel. Jag ser korrekturläsning som sista möjlighet att revidera ett manuskript innan det publiceras. Korrekturläsning bör alltid vara det sista steget innan ett dokument publiceras online eller delas med sin avsedda publik.

Bra tips för korrekturläsning kan vara att skjuta upp det en tid efter att man har arbetat med någon text under en lång tid, eftersom våra ögon blir så trötta efter att ha sett samma text så länge att vi blir ordblinda.

För att uppnå bästa resultat vid korrekturläsning delar jag denna stora uppgift i små avsnitt:

1. Först fokuserar jag bara på rubriker:

a. Jag kollade dem först för format, inte letade efter något annat. Till exempel, om jag väljer att kapitalisera mina rubriker så jag bara går igenom dem alla och kontrollerar just det.

b. Sedan läste jag alla rubriker en gång till för stavning / grammatikfel.

2. Sen kontrollerade jag alla stycken:

a. Jag kollade om korrekta stilar tillämpas, margin osv.

b. Om man titta på text i ett program som Microsoft Word hjälper det mycket genom att markera stavning eller grammatikfel

3. Sen kontrollerade jag sidans formatering:

a. Jag kontrollerade allmän layout utseende

4. Efter att jag har kontrollerat allt i små bitar började jag äntligen läsa text för dess faktiska innehåll.

Det är kanske inte den bästa strategin, men det fungerar för mig.

Kod Komprimering

Wordpress erbjuder många tillägg för att hjälpa man att optimera webbplatskoden. I det här avsnittet jämför jag två av dem: Autoptimize vs JHC Optimize.

För att kontrollera hur lång tid det tar att ladda sidan kan man använda Google Chrome. Med webbplatsen öppet kan man trycka på Ctrl+Skift+I på PC och välja alternativet Network (Nätverk).

Först behövs det att ladda om sidan och tömma browserns cacheminne. För att göra det trycker man på Ctrl+F5 istället för bara F5.

Mitt resultat var:

Autoptimize

Det här tillägget gör webbplatsen snabbare genom att optimera CSS, JS, bilder, Google-teckensnitt och mer.

Jag installerade och aktiverade det. Det finns flera olika alternativ:

Jag testade många alternativkombinationer för att hitta den bästa men alla var bara långsammare än innan jag aktiverade tillägg.

Mitt relativt bästa resultat var:

Jag avinstallerade det.

JHC optimize

Det här tillägg aggregerar och minskar CSS och JavaScript-filer för optimerad sidladdning.

Jag installerade och aktiverade det. Det finns flera olika alternativ:

Jag testade alla automatiska alternativ och fick det bästa resultatet med Intermediate:

Det var lite snabbare.

Kodminifiering tips

Saker som man måste ha i åtanke när man använder kodminifiering.

• Läsbarheten av komprimerade HTML-filerna minskar dramatiskt.

• Nackdelen med JavaScript Minifiering är att alla variabler namn ändras till enstaka bokstäver och det är svårt att förstå vad koden gör, speciellt om det skrivs av en annan utvecklare.

• Det är bättre att använda icke-minifierad version för testning och sedan sätta minifierad version i produktion och test sedan igen för att se till att det inte finns några fel i minifiering processen.

• Felsökning av minifierad JavaScript är alltför svårt. Men det är lätt att undvika om man har en säkerhetskopia. Men det har funnits några fall där den ominiferade versionen fungerar bra men det minifierade fungerar inte

Galleri

Eftersom min webbplats endast kan nås på localhost använder jag mockups för att visualisera dess allmänna layout och innehåll, samt visa de grundläggande funktionerna på ett statiskt sätt.

Vad kan förbättras

Det finns många saker jag fortfarande vill arbeta med och förbättra:

• Erbjuda möjligheten att slå samman sidor till en utskrift

• Publicera i första hand dokument i html och skapa tillgängliga PDF: er för mina artiklar

• Förvärva medel för att utföra test i safari webbläsare från Windows

När min webbplats flyttar till ett webbhotell får jag möjligheter att förbättra och optimera mycket mer:

• Kontrollera att mitt Webbhotell är pålitlig

• Installera optimeringars tillägg: för säkerhet, hastighet, SEO osv.

• Optimera webbplatsen för sökmotorer

• Skaffa SSL och andra säkerhets åtgärder som antispam osv

Jag tänker också förbättra anpassning av min design:

• Implementera färgändringsfunktionen till WordPress, så att min temaanvändare inte bara kan ändra bakgrundsfärg utan också textfärg senare

Jag är säker på att jag kan komma med andra förbättringar också medan jag implementerar mina förbättringsåtgärder.