Som standard kan du bygga sidor och skapa innehåll inom WordPress utan att någonsin behöva ladda upp några anpassade HTML-filer. Det beror på att WordPress-kärnan levereras med inbyggda innehållstyper. Dessutom kommer WordPress-temat du använder sannolikt att ha sin egen uppsättning fördesignade sidmallar som du kan dra nytta av för att skapa en unik webbplats som uppfyller dina behov.

Utöver det finns det gott om WordPress målside-plugins du kan använda för att skapa anpassade sidmallar där besökare kan landa från sökresultat, e-postkampanjer och även sociala medier.

Så det finns egentligen mycket lite behov av att ladda upp HTML-filer till WordPress eftersom allt du behöver för att formatera din webbplats vanligtvis redan finns där. Som sagt, det finns några anledningar till att du skulle behöva veta hur du laddar upp en HTML-fil till WordPress, varav några går längre än att ladda upp en mall för designändamål.

I det här inlägget, kommer jag därför visa dig hur du laddar upp HTML-filer till WordPress. Jag ska också diskutera i detalj varför du borde ha denna färdighet, så du är beredd oavsett vad som händer.

Vad är en HTML-fil?

HTML står för Hypertext Markup Language och utvecklades av Tim Berners-Lee 1990. Kort sagt, HTML är den kod som används för att skapa elektroniska dokument på internet, mer känt som webbsidor. Faktum är att varje webbsida du ser på internet skrevs med HTML-kod.

HTML-koden på webbplatsens webbsidor ansvarar för att se till att innehållets text och bilder formateras på rätt sätt.

Utan HTML skulle webbläsare inte förstå hur den visuellt ska visa strukturen på din webbplats för användare. Men med rätt HTML-kod som skapar grunden för dina webbsidor, och lite CSS-kod för att lägga till i vissa designelement, visas din webbplats perfekt för besökare.

Vad är en HTML-mall?

Så du vet att HTML är koden som är ansvarig för att skapa strukturen för enskilda webbsidor på internet.

Men vad är en HTML-mall?

En HTML-mall är en fördesignad uppsättning HTML-filer som innehåller saker som text, bilder och stödfiler för typsnitt och Javascript. Med andra ord, är en HTML-mall ett färdigt paket med HTML-kod som du enkelt kan ladda upp till din webbplats och använda.

När du använder en HTML-mall på din WordPress-webbplats, laddar du upp filen och kopplar in den text och de bilder du vill att mallen ska visa på frontenden av din webbplats.

Det är viktigt att komma ihåg att HTML-mallar skiljer sig från WordPress-teman:

  • WordPress-teman: även om du ansluter text och bilder till WordPress-teman, är de ansvariga för utseendet på hela din webbplats. Många elementförändringar inom webbplatsens tema är globala, vilket innebär att de gäller för hela din webbplats.
  • HTML-mallar: dessa är fristående ZIP-filer som du laddar upp till din webbplats individuellt. De påverkar bara utseendet på en enda webbsida på din webbplats. Med andra ord, ändringar du gör till en uppladdad HTML-mall kommer bara att påverka den webbsidan.

Tyvärr förstår många inte skillnaderna mellan teman och HTML-mallar och använder termerna ”tema” och ”mall” utbytbart.

Varför du kan behöva ladda upp en HTML-fil till WordPress

Det finns några specifika anledningar till att du kanske borde ladda upp en HTML-fil till WordPress:

  1. Du har dina favoriter: om du använde en bra HTML-mall på en gammal webbplats och ville använda den på din nya webbplats, kanske du vill ladda upp mallen till din nya webbplats i stället för att göra om hela grejen. Detta kommer att spara tid och se till att det ser exakt samma ut.
  2. Du borde ha en anpassad Sidlayout: om ditt nuvarande WordPress-tema inte stöder en specifik sidlayout kan du ladda upp en HTML-fil med den design du vill ha och anpassa den efter behov.

Slutligen kan du behöva verifiera din WordPress-webbplats med Google Search Console och vill använda den rekommenderade metoden för att ladda upp en Google HTML-verifieringsfil för att göra det.

Hur din webbplats visas i sökmotorer, särskilt en stor sajt som Google, spelar en roll i din framgång som webbplatsägare.

Därför finns verktyg som Google Search Console. Med Google Search Console garanterar du att Google indexerar och rangordnar din webbplats i relevanta sökresultat, allt i hopp om att ta sig till första sidan.

Google Search Console ger dig också information om dina nuvarande SERPs (sökmotorresultatsidor), så att du kan förbättra dina SEO-ansträngningar och få högre klickfrekvens till din webbplats.

Saken är att för att använda Google Search Console, måste du verifiera din WordPress-webbplats. Och det råkar vara så att ett av de bästa sätten att göra detta är att ladda upp en Google HTML-verifieringsfil.

Låt oss nu ta en titt på de olika sätten att ladda upp en HTML-fil till WordPress.

1. Metod: Så uppladdar du HTML-filer till WordPress i WordPress-panelen

Den första metoden för att ladda upp en HTML-fil till WordPress vi ska titta på inkluderar WordPress-panelen.

Du behöver inget mer än backenden på din webbplats och en HTML-mall för att slutföra denna process eftersom du kommer att ladda upp HTML-filen direkt via ett inlägg, sida eller mediabiblioteket.

För att ladda upp en HTML-fil via ett inlägg eller en sida, sätt in ett ”Fil”- block i Gutenberg-redigeraren. Klicka sedan på Ladda upp för att ladda upp HTML-filen.

Ladda upp HTML-fil i Gutenberg
Ladda upp HTML-fil i Gutenberg

Så här ser det ut om du har inaktiverat Gutenberg och använder den klassiska redigeraren. Klicka bara på Lägg till Media och sedan Ladda upp för att ladda upp din HTML-fil.

Välj den HTML-fil du vill ladda upp och klicka sedan på Infoga i inlägg. Genom att göra detta infogar du länken till filen i inlägget eller på sidan och sparar den automatiskt till ditt mediebibliotek.

Ladda upp HTML-fil i klassiska redigeraren
Ladda upp HTML-fil i klassiska redigeraren

Du kan hoppa över att ladda upp HTML-filen till ett inlägg eller en sida i WordPress och ladda upp den direkt till ditt mediebibliotek. Klicka på Mediebibliotek i WordPress-panelen, sedan Lägg till nytt och välj HTML-filen från den plats du har sparat den (t.ex. din dator, hårddisk eller extern lagring).

Tänk på att du kan stöta på ett fel när du laddar upp din HTML-fil när du använder Gutenberg. Så här ser det ut:

Filtyp ej tillåten
Filtyp ej tillåten

Titta här för detaljerade instruktioner om hur du fixar ”Tyvärr är den här filtypen inte tillåten av säkerhetsskäl”-felet i WordPress.

2. Metod: Så här laddar du upp HTML-filer till WordPress med en FTP-klient

Att ladda upp HTML-filer via WordPress-panelen är den enklaste metoden. Men för stora mallar som består av flera filer är det bäst att använda en FTP-klient som FileZilla.

Att använda en FTP-klient är också till hjälp för de gånger du vill arbeta lokalt på en testsajt innan du tar eventuella ändringar du gör till din live-webbplats. Detta kommer att förhindra onödiga driftstopp om något går fel.

För att komma igång, skapa alltid en säkerhetskopia av din webbplats först eftersom du aldrig vet vad HTML-filen kommer göra när du laddat upp den till din webbplats.

Öppna sedan din FTP-klient.

Nu måste du ansluta till ditt hosting-konto genom att ange dina FTP-uppgifter. Denna information finns vanligtvis i ditt hosting-konto. Om du har problem med att hitta dem, kontakta din värd och be dem hjälpa dig.

Om du använder Kinsta-hosting, logga först in på ditt MyKinsta-konto och klicka på Webbplatser i instrumentpanelen och klicka sedan på Info för att få de uppgifter som behövs.

Hämta dina SFPT-uppgifter i MyKinsta
Hämta dina SFPT-uppgifter i MyKinsta

När du gör det ska du se dina uppgifter under SFTP/SSH. Du behöver ditt användarnamn, lösenord och port.

SFTP-uppgifter
SFTP-uppgifter

Här är den information du behöver för att komma in i FileZilla:

  • Värd: webbplatsens domännamn som föregås av ”sftp://”. Till exempel måste du ange sftp://www.mysite.com.
  • Användarnamn: från din MyKinsta-panel
  • Lösenord: från din MyKinsta-panel
  • Port: från din MyKinsta-panel

Så här ser det ut överst på FileZilla-skärmen:

Logga in på FileZilla
Logga in på FileZilla

När du har angett dina uppgifter, klickar du på Quickconnect.

Nu är det dags att ladda upp HTML-filen från din dator till WordPress. Börja med att navigera till din webbplats rotmapp (som innehåller wp-content-mappen, wp-config.php-filen, etc.) på höger sida.

Gå sedan till vänster och hitta HTML-filen du har sparat. När du hittar den, högerklicka på den och välj Ladda upp för att lägga till den på din webbplats. För att se alla dolda filer i Filezilla kan du följa den här korta handledningen.

HTML-fil uppladdad
HTML-fil uppladdad

Du ser att filen har laddats upp till WordPress. Om du vill kontrollera att den är synlig på din webbplats skriver du in webbadressen i din webbläsare och lägger till namnet på HTML-filen på slutet. Det kan till exempel se ut så här: www.mywebsite.com/html-file.

När du gör det omdirigeras du till den nya webbsidan du har skapat med HTML-filen.

3. Metod: Så här laddar du upp HTML-filer till WordPress med cPanel

Den sista metoden vi kommer att dela med dig inkluderar cPanel och filhanteraren för att ladda upp en HTML-fil till WordPress.

Börja med att logga in på ditt hostingkontos cPanel och komma åt filhanteraren.

Filhanteraren i cPanel
Filhanteraren i cPanel

När du är i Filhanteraren har du två alternativ:

    1. Skapa en ny mapp: skapa en ny mapp i webbplatsens rotmapp att ladda upp din HTML-fil till.
    2. Ladda upp till rotmappen direkt: i stället för att skapa en ny mapp, ladda upp HTML direkt till WordPress. Om det är så här du vill göra det, packa upp HTML-filen där du har sparat den, ändra html-mappen till något nytt, och zippa sedan filen igen för att fortsätta ladda upp till WordPress. Om du inte gör det åsidosätter HTML-mallen webbplatsens startsida.

I det här exemplet skapar vi en ny mapp eftersom det finns några extra steg när du gör det här.

Skapa en ny mapp och ladda upp en HTML-fil till WordPress

Navigera först till rotmappen på din webbplats (som innehåller wp-content-mappen, wp-config.php-filen, etc.). Klicka sedan på Ny mapp.

skapa ny mapp

Namnge din nya mapp och klicka på Skapa ny mapp.

Skapa en ny mapp i cPanel
Skapa en ny mapp i cPanel

Dubbelklicka på mappen du just skapat och klicka sedan på Ladda upp för att välja din HTML-fil.

Ladda upp-knappen
Ladda upp-knappen

När detta är gjort ser du din zippade HTML-fil i mappen.

Zippad HTML-fil
Zippad HTML-fil

Nu måste du packa upp HTML-filen genom att högerklicka och välja Extrahera.

Extrahera HTML-fil
Extrahera HTML-fil

När modalfönstret dyker upp klickar du på Extrahera filer för att avsluta uppackningsprocessen. När HTML-filen har packats upp, ser du alla de olika filerna som ingår i mallen. Kom ihåg att detta innebär att du ser saker som CSS, typsnittsfiler, bilder och JavaScript.

Extraherade HTML-filer
Extraherade HTML-filer

Nu är allt du behöver göra för att se till att HTML-mallen och filerna laddades upp är att ange webbplatsens URL i webbläsaren och lägga till den nya mappens namn på slutet.

Om du stöter på ett 404-fel, oroa dig inte. Detta är ett vanligt WordPress-fel och kan lösas enkelt.

Om din server inte stöder omdirigering och index.php-filen inte omdirigeras när du laddar webbadressen i din webbläsare, kommer du se ett 404-fel efter att ha laddat upp dina HTML-filer.

För att åtgärda detta, stanna kvar i filhanteraren och kom åt din .htaccess-fil genom att dubbelklicka på den. Lägg sedan till följande kod och spara dina ändringar:

RewriteRule ^(.*)index\.(php|html?)$ /$1 [R=301,NC,L]

Denna kod kommer att omdirigera din index.php-fil och ladda den i webbläsaren.

Sammanfattning

WordPress är det mest använda innehållshanteringssystemet på marknaden eftersom det ger webbplatsägare den flexibilitet som de behöver för att skapa unika webbplatser som sticker ut bland konkurrenterna. Att kunna ladda upp en HTML-fil till WordPress med någon av de ovan nämnda metoderna är bara ytterligare ett exempel på hur WordPress tillgodoser behoven hos webbplatsägare och ger dem frihet att anpassa sina webbplatser efter behov.

Att veta hur man laddar upp en HTML-fil till WordPress är dessutom bara en bra färdighet att ha om behovet uppstår. När allt kommer omkring vet du aldrig när du kan stöta på en HTML-mall du älskar eller behöver en viss typ av sidlayout som ditt tema inte stöder.