I början (av webben) gjordes alla webbplatser med enbart text och statisk HTML. Nu, över 20 år senare, är webben dock en mycket annorlunda plats. Webbplatserna är mycket mer komplexa. De ger rikare och roligare upplevelser för både webbplatsens skapare och besökare.
Detta är till stor del tack vare projekt med öppen källkod som WordPress. Som under de senaste tio åren eller så har lyckats med sitt huvuduppdrag att demokratisera publicering på nätet (och mycket annat i processen) så att vem som helst med en WordPress-installation och rätt tema/plugins kan få en modern webbplats med avancerad design och funktionalitet. Ingen kodning – inte ens HTML – krävs.
Detta är anledningen till att det för ivriga WordPress-användare som jag själv nästan är svårt att tro att någon år 2018 fortfarande kan driva en statisk HTML-webbplats i stället för en WordPress-webbplats med ett tema och insticksprogram. Men faktum är att det fortfarande finns en betydande mängd aktiva HTML-webbplatser. (Eller HTML med lite CSS.)
Givetvis kan dessa webbplatsägare ha goda skäl att inte uppgradera eller konvertera. Kanske ändras innehållet på deras webbplats aldrig och den enkla formateringen och designen som redan finns på plats är användbar? Eller kanske är det mindre krångligt än att oroa sig för att hålla en WordPress-webbplats uppdaterad? Båda är giltiga skäl (bland andra). Det är ett utmärkt exempel på ”laga inte det som inte är trasigt”.
Jag har dock en känsla av att detta kanske inte är den främsta anledningen till att vissa (kanske många) inte har tagit steget. Den mest uppenbara är att de helt enkelt inte vet hur de ska omvandla sin HTML-webbplats till en WordPress-webbplats. Särskilt utan att förlora innehåll eller behöva göra överdriven formatering sida för sida.
Tacksamt nog finns det, som ofta är fallet med WordPress, ett antal sätt att lösa det här problemet. Jag har sammanställt några alternativ nedan.
Prenumerera på vår Youtube-kanal
Dina alternativ för att konvertera en statisk HTML-webbplats till en WordPress-webbplats
Hur du väljer att konvertera din statiska HTML-webbplats till en WordPress-webbplats kommer utan tvekan att bero på dina personliga preferenser, önskad tids-/monetainvestering och färdighetsnivå med kod. Du måste själv avgöra vad som är bäst för dig, men med hjälp av sammanfattningarna nedan bör du kunna bestämma dig snabbt och hoppa direkt till den mest relevanta informationen i det här inlägget för din specifika situation.
Det finns tre huvudalternativ:
1. Skapa manuellt ett WordPress-tema baserat på din nuvarande statiska HTML-webbplats.
Detta kräver att du går in i din kod. Du måste få tillgång till din nuvarande webbplatskatalog via FTP och använda din befintliga kod som utgångspunkt. Därifrån måste du skapa de nödvändiga filerna för ett WordPress-tema och kopiera kodbitar från WordPress codex. Detta är ganska enkelt och rakt fram om du har viss erfarenhet av HTML, CSS och lite PHP.
2. Installera ett färdigt tema och migrera helt enkelt ditt innehåll.
Detta är förmodligen det bästa alternativet i skärningspunkten mellan enkelhet och värde. Om du antar att du redan har hosting för din nuvarande webbplats behöver du bara spendera pengar om du väljer att köpa ett premiumtema. Det insticksprogram som vi kommer att använda för att importera innehåll finns fritt tillgängligt i det officiella WordPress Plugin Repository.
3. Betala för att låta en HTML-till-Wordpress-konverteringstjänst återskapa din webbplats.
Detta är den enklaste lösningen, eftersom det inte kräver att du gör mycket av någonting. Den kommer dock inte att göra mycket för att göra dig bekant med WordPress och kostnaden kommer att variera beroende på vem du väljer att anlita. Jag kommer inte att täcka detta alternativ i avsnitten nedan eftersom om detta är den väg du är intresserad av kan du helt enkelt göra en snabb sökning efter tjänsteleverantörer och de kommer att ta hand om resten.
Förberedelser för HTML till WordPress-konvertering
Oavsett vilken väg du bestämmer dig för att ta nedan finns det några saker du vill göra innan du dyker in.
Den första är att välja en hostingplan. Du vill titta på de alternativ som finns där ute och bestämma dig för ett paket som bäst passar dina behov. Eller kanske vill du skapa en lokal WordPress-installation i stället? Du kan alltid migrera den till en webbhotellstjänst senare.
När du har valt måste du installera WordPress och logga in på WP Admin. Detta är den punkt där våra två möjliga vägar delar sig.
Manuellt konvertera din statiska HTML-webbplats till WordPress
Om ditt mål inte bara är att få ditt innehåll från din statiska HTML-webbplats till WordPress, utan också duplicera din nuvarande design, innebär detta att du måste skapa ditt eget anpassade tema. Tack och lov är det inte så skrämmande som det kan låta till en början. Det handlar bara om att skapa några mappar och filer, kopiera och klistra in lite och sedan ladda upp resultatet.
Du behöver en kodredigerare som Sublime eller Notepad++ och tillgång till både katalogen för din HTML-webbplats och katalogen för din nya WordPress-installation.
Steg 1: Skapa en ny temamapp och de nödvändiga filerna
Skapa en ny mapp på skrivbordet för att hålla dina temafiler. Namnge den så som du vill att ditt tema ska heta.
Nästan skapar du några filer (som alla hamnar i din nya temamapp) i din kodredigerare. Gör ingenting med dem ännu. Lämna dem bara öppna för vidare redigering.
- Style.css
- Index.php
- header.php
- sidebar.php
- footer.php
Steg 2: Kopiera befintlig CSS till nytt formatmallblad
Om du vill kopiera en design betyder det förmodligen att du har åtminstone lite CSS som du vill spara. Så den första filen du vill redigera är din Style.css-fil.
För att börja lägger du till följande längst upp i filen.
/*Theme Name: Replace with your Theme's name.Theme URI: Your Theme's URIDescription: A brief description.Version: 1.0Author: YouAuthor URI: Your website address.*/
Efter det här avsnittet klistrar du helt enkelt in din befintliga CSS nedan. Spara och stäng filen.
Steg 3: Separera din nuvarande HTML
Innan vi går in på steg tre vill jag ge dig en snabb notis om hur WordPress fungerar. WordPress använder PHP för att anropa och hämta delar av data från den underliggande databasen. Varje fil som vi använder i den här lilla handledningen är utformad för att tala om för WordPress vilken del av innehållet på din webbplats som ska visas och var.
Så när jag säger att vi ska ”stycka upp” din befintliga HTML, är det vi faktiskt gör helt enkelt att klippa och klistra in delar av din befintliga kod i de olika filerna som vi just har skapat, så att WordPress vet var de ska visas.
Här kommer vi igång.
Först öppnar du din nuvarande webbplats index.html-fil. Markera allt från början av filen till den inledande taggen div class=”main”. Kopiera och klistra in detta avsnitt i filen header.php, spara och stäng.
För det andra går du tillbaka till filen index.html. Markera elementet aside class=”sidebar” och allt inom det. Kopiera och klistra in detta avsnitt i din sidebar.php-fil, spara och stäng.
För det tredje markerar du i din index.html-fil allt som finns efter din sidebar och kopierar och klistrar in det i din footer.php-fil, spara och stäng.
För det sista markerar du i din index.html-fil allt som finns kvar (det här ska vara avsnittet med huvudinnehåll) och klistrar in det i din index.php-fil. Spara, men stäng inte ännu.
Du kan dock stänga din index.html-fil nu och gå vidare till de sista stegen. Nästan klart!
Steg 4: Slutför din index.php-fil
För att slutföra ditt nya temas index.php-fil måste du se till att den kan kalla upp de andra sektionerna (förutom huvudinnehållet) som finns i de andra filerna du har skapat. Eller med andra ord, sätt tillbaka ihop de element som vi just ”hackade upp”.
Längst upp i din index.php-fil ska du placera följande rad php.
<?php get_header(); ?>
Sedan, längst ner i din index.php-fil, ska du placera dessa rader php.
<?php get_sidebar(); ?><?php get_footer(); ?>
Och till sist måste vi lägga till det som kallas för The Loop. Detta är den primära biten php som WordPress använder för att visa innehållet i ditt inlägg för besökarna. Så det sista steget i skapandet av ditt nya temas index.php-fil är att lägga till koden nedan i innehållssektionen.
<?php if ( have_posts() ) : ?><?php while ( have_posts() ) : the_post(); ?> <div <?php post_class(); ?>> <div class="post-header"> <div class="date"><?php the_time( 'M j y' ); ?></div> <h2><a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2> <div class="author"><?php the_author(); ?></div> </div><!--end post header--> <div class="entry clear"> <?php if ( function_exists( 'add_theme_support' ) ) the_post_thumbnail(); ?> <?php the_content(); ?> <?php edit_post_link(); ?> <?php wp_link_pages(); ?> </div> <!--end entry--> <div class="post-footer"> <div class="comments"><?php comments_popup_link( 'Leave a Comment', '1 Comment', '% Comments' ); ?></div> </div><!--end post footer--> </div><!--end post--><?php endwhile; /* rewind or continue if all posts have been fetched */ ?> <div class="navigation index"> <div class="alignleft"><?php next_posts_link( 'Older Entries' ); ?></div> <div class="alignright"><?php previous_posts_link( 'Newer Entries' ); ?></div> </div><!--end navigation--><?php else : ?><?php endif; ?>
Spara din index.php och stäng. Ditt tema är nu färdigt! Allt som återstår är att ladda upp det till din WordPress-webbplats.
Steg 5: Ladda upp ditt nya tema
Nu när du har skapat dina temafiler och har dem alla lagrade i din nya temamapp måste du komma åt katalogen för din nya WordPress-installation.
Placera din nya temamapp i /wp-content/themes/. Navigera sedan tillbaka till WP Admin > Appearance > Themes och ditt nyskapade tema bör visas där. Gå vidare och aktivera det!
Allt som återstår att göra nu är att fylla din nya WordPress-webbplats med din gamla webbplats innehåll. Följ med i avsnittet nedan (hoppa över delen om att använda ett förtillverkat tema) för att se hur det går till.
Användning av ett förtillverkat WordPress-tema och import av HTML-innehåll
Om stegen ovan verkar för intensiva eller tidskrävande för dig kan du vara säker på att det finns ett annat sätt. Istället för att konvertera den design du råkar arbeta med just nu till ett WordPress-tema kan du dra nytta av något av de tusentals teman som finns tillgängliga på den bredare WordPress-marknaden.
Det finns gratis teman och det finns premiumteman. Innan du bestämmer dig för vilket som är bäst för dig kan du läsa på om vilka teman som är utformade för att tillgodose dina behov och bläddra efter temakategori här på Elegant Themes och på andra ställen.
När du har valt ett tema som du gillar (och har laddat ner dess komprimerade filpaket) vill du gå tillbaka till WP Admin > Appearance > Themes > Add New och installera/aktivera ditt nya WordPress-tema.
När detta är gjort har du en ny WordPress-webbplats och ett nytt tema – men inte mycket mer. När du förhandsgranskar din webbplats kommer den att vara tom på innehåll och förmodligen se ganska tråkig ut. Det är okej, för härnäst ska vi importera din gamla webbplats innehåll.
I WP Admin går du till Plugins > Add New och söker efter ett plugin som heter HTML Import 2 av Stephanie Leary. När det här insticksprogrammet är installerat och aktiverat följer du dess praktiska användarhandledning för att importera hela din katalog med HTML-sidor. Komplett med bilder!
Efter detta kommer du att ha allt ditt gamla innehåll levande på WordPress och formaterat av ditt nya tema. Eller, om du skapade ditt eget tema ovan, bör din webbplats se ut ungefär som den gjorde tidigare – bara den körs på WordPress.
Slutsats
Om du har använt det här inlägget som en guide för att migrera din webbplats till WordPress har du precis anslutit dig till en av de största open source-gemenskaperna i världen. Välkommen! Det är en rolig plats med massor av utvecklare, designers, bloggare, gör-det-självare med flera – alla bygger, leker och skapar med WordPress och WordPress-teman/plugins.
Om du har ”fastnat för WordPress” är den officiella webbplatsen WordPress.org full av användbara teman, plugins och andra resurser. Om du vill finjustera dina temafiler ytterligare kan du utforska Codex för till synes oändliga tips, tricks och variationer.