När webben först startade var webbplatser ganska dumma. Det vill säga, de var inget annat än text och statisk HTML-kod, utan snygga effekter och väldigt lite interaktivitet.

Tjugo år senare är webbplatser baserade på komplex programmering och kan ta veckor och veckor att bygga. De är funktionsspäckade, mycket interaktiva, mer lyhörda, snyggare och så vidare.

Idag, istället för att skriva kod på egen hand, kan du använda Content Management System som själva hanterar koden bakom din webbplats. Allt du behöver göra är att välja ett tema och börja publicera.

WordPress är ett sådant CMS, som nu används av miljoner runt om i världen. Det bästa med WordPress är att det är en väldigt flexibel plattform. Det kräver ingen kodningskunskap för att använda det och du kan skapa de mest responsiva och fantastiska webbplatserna med det.

Om du äger en webbplats som inte har uppgraderats sedan 1990-talet, kommer den här artikeln skapad av vårt team på wpDataTables att hjälpa dig att konvertera HTML till WordPress så att du också kan dra nytta av modern webbteknologi.

Fortsätt läsa för att få veta mer.

Varför ska du konvertera HTML till WordPress?

Anledningarna till varför en person bör konvertera HTML till WordPress är ganska olika. Här är ett urval av de viktigaste:

Konvertering till WordPress ger dig full kontroll över varje detalj på din webbplats. När du inte gillar en del av din sajt kan du enkelt anpassa den efter eget tycke.
WordPress-webbplatser är mycket lättare att komma åt, hantera och underhålla jämfört med statiska HTML-webbplatser. Detta är en mycket viktig anledning att göra en HTML till WordPress-migrering.
Genom att konvertera din HTML-mallstil till WordPress kommer du att få ett unikt tema som ingen annan person som använder CMS kommer att äga.
WordPress hjälper till med sökmotoroptimering och kommer att se till att du får din webbplats upptäckt av fler människor.
Som webbutvecklare kommer ditt arbete att minska till hälften eftersom WordPress kommer att hantera de flesta aktiviteter som tidigare var onödigt tidskrävande.

Att flytta från statisk HTML till WordPress: Metoderna

Nu när du har alla anledningar att konvertera HTML till WordPress kan du fortsätta för att lära dig hur du gör det.

Det finns två metoder du kan välja mellan: den manuella metoden, som går ut på att göra allt själv, från grunden; och barntemametoden, som innebär att du använder ett grundläggande WordPress-tema och justerar det efter dina behov.

Att välja metod beror på din erfarenhet av kodning, hur mycket tid du vill investera i denna uppgift, samt på dina egna preferenser. Var och en av dessa metoder kommer att presenteras i avsnitten nedan, där du kommer att lära dig hur du konverterar HTML till WordPress.

Den manuella metoden

1 Skapa en ny temamapp

Skapa en ny mapp på skrivbordet där dina temafiler kommer att lagras. Namnge den här mappen vad du vill (den kommer att representera temats namn). Skapa dessa filer i din föredragna kodredigerare och lämna dem öppna:

style.css
index.php
header.php
sidebar.php
sidfot.php

2 Kopiera den befintliga CSS-koden till din nya stilmall

När du har skapat filerna kan du gå vidare till att kopiera din CSS-kod. De som vill duplicera sina webbplatser och flytta dem till WordPress måste exportera och importera CSS-koden för sin tidigare webbplats. CSS är ansvarig för hur webbplatsen ser ut, så redigera filen style.css genom att lägga till följande kodrader till den:


/*
Theme Name: Replace with your Theme's name.
Theme URI: Your Theme's URI
Description: A brief description.
Version: 1.0
Author: You
Author URI: Your website address.
*/

Ersätt den nödvändiga informationen med din egen, lägg till de återstående CSS-raderna och du är klar. Glöm inte att spara filen. Du är nu fri att stänga style.css.

3 Hämta din nuvarande HTML-kod

Gå till din webbplats index.html-fil och markera allt innehåll från början av dokumentet till taggen div class="main". Det här avsnittet måste klistras in i header.php-filen du skapade i steg 1.

Gå tillbaka till filen index.html och markera allt i elementet class="sidebar". Kopiera innehållet och klistra in det i filen sidebar.php som du skapade. Gör samma sak för sidfoten, med allt innehåll efter sidofältselementet.

För index.php-filen, välj allt innehåll som finns kvar efter markering och klistra in det i den nya filen, spara och lämna det öppet för nästa steg.

4 Redigera filen index.php

För att slutföra din index.php-fil, kopiera dessa kodrader och klistra in dem överst i dokumentet:

Sedan, längst ner i din index.php-fil, placera dessa rader med PHP.

Filen är inte färdig ännu eftersom du behöver skapa en inläggsslinga, som representerar viss PHP-kod som WordPress behöver för att visa din webbplats blogginlägg eller artiklar korrekt. Lägg till följande kodrader i filens innehållsavsnitt:

När du är klar, spara filen, stäng den och gå vidare till nästa steg.

5 Ladda upp ditt nya tema

När din temamapp är klar måste du ladda upp den till din webbplats och slutföra HTML till WordPress-konverteringen. För att göra det, navigera till mappen där du installerade WordPress och placera mappen du just har skapat i /wp-content/themes/.

Gå till din WP Admin-sida, Utseende och sedan Teman för att se om temanamnet visas i listan eller inte. Om den gör det har du gjort allt korrekt och du kan aktivera det. Om det inte gör det, läs noga igenom alla steg om hur du konverterar HTML till WordPress igen.

Det finns också den här användbara videoguiden från Traversy Media som du bör kolla in:

Använda ett WordPress barntema

Om stegen som nämns i föregående steg verkar för komplicerade för din nivå är detta en metod som kräver mindre kunskap inom kodningsområdet. Det är lättare att hantera och tar också kortare tid.

För att konvertera HTML till WordPress snabbare kan du använda ett barntema från ett befintligt tema. Barnteman heter så här eftersom de bygger på ett andra tema, som är det överordnade temat.

1 Välj tema

Först av allt, välj ett tema som passar din HTML-design. Leta efter ett barntema som liknar din befintliga webbplats. Leta efter strukturen den har, så att du inte behöver gräva för mycket i kodning.

Du bör välja ett starttema eftersom de förlitar sig på mycket grundläggande kodrader.

2 Skapa en ny temamapp

Precis som i det föregående fallet måste du skapa en ny temamapp. Den enda skillnaden är att du namnger mappen på samma sätt som det överordnade temat som ditt underordnade tema är baserat på och lägger till suffixet "-barn" till det.

Till exempel, om ditt tema heter Twenty Nine, kommer du att kalla mappen "twentynine-child". Se till att du inte lägger till några mellanslag i namnet.

3 Skapa en ny stilmall

Skapa sedan filen style.css i mappen och lägg till dessa kodrader:


/*
Theme Name: Twenty Nineteen Child
Theme URI: http://example.com/twenty-nineteen-child/
Description: Twenty Nineteen Child Theme
Author: John Doe
Author URI: http://example.com
Template: twentynineteen
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: twenty-nineteen-child
*/

Tänk på att detta är ett exempel. Du måste ersätta informationen med din egen. Spara filen när du är klar.

4 Skapa filen functions.php

När du har filen style.css kan du aktivera temat som det är. Men för att webbplatsen ska se ut och fungera bättre måste du använda föräldratemats funktioner och stilar. För detta måste du skapa filen functions.php.

Använd dessa kodrader och spara filen:


/*
Theme Name: Twenty Nineteen Child
Theme URI: http://example.com/twenty-nineteen-child/
Description: Twenty Nineteen Child Theme
Author: John Doe
Author URI: http://example.com
Template: twentynineteen
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: twenty-nineteen-child
*/

5 Aktivera barntemat

Slutligen måste du aktivera temat. Zip upp mappen och lägg till den i WordPress genom att navigera till menyn Utseende, Teman och klicka sedan på "Lägg till nytt". Ladda upp den zippade filen där. Ett annat alternativ skulle vara att dra mappen i wp-content/themes.

Avslutning

Du behöver lite tålamod för att konvertera HTML till WordPress, men det är verkligen värt besväret. Även om processen kräver en del av din uppmärksamhet, kommer du att få en verkligt unik webbplats som är mycket bekvämare att hantera från alla synvinklar.

Om du följer stegen som presenteras i den här artikeln noggrant kan inget gå fel, så oroa dig inte! Om du däremot stöter på några problem, tveka inte att kolla in WordPress-gemenskapens supportforum. Det finns många användare där som gärna hjälper dig.

Om du tyckte om att läsa den här artikeln om att konvertera HTML till WordPress, bör du kolla in den här om WordPress-utvecklarlön.

Vi skrev också om några relaterade ämnen som bästa kodredigerare, WordPress-utbildning, JavaScript-bibliotek och Brackets-tillägg.

Inspelningskälla: wpdatatables.com