I begyndelsen (af internettet) blev alle websteder lavet med intet andet end tekst og statisk HTML. Men nu, over 20 år senere, er internettet et meget anderledes sted. Websteder er meget mere komplekse. De giver rigere og mere behagelige oplevelser for både dem, der opretter websteder, og de besøgende.
Dette skyldes i høj grad open source-projekter som WordPress. Som i løbet af de sidste ti år eller deromkring er lykkedes med sin kerneopgave om at demokratisere onlinepublicering (og meget andet i processen), så alle med en WordPress-installation og det rigtige tema/plugins kan få et moderne websted med avanceret design og funktionalitet. Ingen kodning – ikke engang HTML – er påkrævet.
Det er derfor, at det for ivrige WordPress-brugere som mig selv næsten er svært at tro, at nogen i 2018 stadig kan drive et statisk HTML-websted i stedet for et WordPress-websted med et tema og plugins. Men faktum er, at der stadig er en betydelig mængde aktive HTML-only-websteder derude. (Eller HTML med en smule CSS.)
Givetvis kan disse webstedsejere have gode grunde til ikke at opgradere eller konvertere. Måske ændres indholdet af deres websted aldrig, og den enkle formatering og det enkle design, der allerede er på plads, er brugbart? Eller måske er det mindre besværligt end at bekymre sig om at holde et WordPress-websted opdateret? Begge dele er gyldige grunde (blandt andre). Et godt eksempel på: “Reparer ikke det, der ikke er i stykker.”
Men jeg har en fornemmelse af, at disse måske ikke er den primære årsag til, at nogle (måske mange) ikke har taget springet. Den mest indlysende er, at de simpelthen ikke ved, hvordan de skal konvertere deres HTML-websted til et WordPress-websted. Især uden at miste indhold eller uden at skulle lave overdreven formatering side for side.
Trods alt er der, som det ofte er tilfældet med WordPress, en række måder at løse dette problem på. Jeg har samlet nogle muligheder nedenfor.
Abonner på vores Youtube-kanal
Dine muligheder for at konvertere et statisk HTML-websted til et WordPress-websted
Hvordan du vælger at konvertere dit statiske HTML-websted til et WordPress-websted vil uden tvivl afhænge af dine personlige præferencer, ønsket tid/monetær investering og færdighedsniveau med kode. Det er dig selv, der skal afgøre, hvad der er bedst for dig, men med nedenstående oversigter bør du hurtigt kunne træffe en beslutning og springe direkte til de mest relevante oplysninger i dette indlæg for din specifikke situation.
Der er tre hovedmuligheder:
1. Manuelt oprette et WordPress-tema baseret på dit nuværende statiske HTML-websted.
Dette vil kræve, at du går ind i din kode. Du bliver nødt til at få adgang til din nuværende webstedsmappe via FTP og bruge din eksisterende kode som udgangspunkt. Derfra skal du oprette de nødvendige filer til et WordPress-tema og kopiere kodestykker fra WordPress-kodekset. Dette er ret simpelt og ligetil, hvis du har en vis erfaring med HTML, CSS og en smule PHP.
2. Installer et præfabrikeret tema og migrér blot dit indhold.
Dette er sandsynligvis den bedste løsning i krydsfeltet mellem enkelhed og værdi. Hvis du antager, at du allerede har hosting til dit nuværende websted, skal du kun bruge penge, hvis du vælger at købe et premium-tema. Det plugin, vi vil bruge til at importere indhold, er frit tilgængeligt i det officielle WordPress Plugin Repository.
3. At betale for at få en HTML til WordPress konverteringstjeneste til at genskabe dit websted.
Dette er den nemmeste løsning, da den ikke kræver, at du gør meget af noget. Det vil dog ikke gøre meget for at gøre dig fortrolig med WordPress, og prisen vil variere alt efter, hvem du vælger at hyre. Jeg vil ikke dække denne mulighed i afsnittene nedenfor, fordi hvis dette er den rute, du er interesseret i, kan du blot lave en hurtig søgning efter tjenesteudbydere, og de vil tage sig af resten.
Forberedelse af HTML til WordPress-konvertering
Og uanset hvilken rute du beslutter dig for at tage nedenfor, er der et par ting, du vil gøre, før du dykker ned i det.
Den første er at vælge et hostingabonnement. Du vil gerne se på de muligheder, der er derude, og beslutte dig for en pakke, der passer bedst til dine behov. Eller måske vil du gerne oprette en lokal WordPress-installation i stedet? Du kan altid migrere den til en hostingtjeneste senere.
Når du har valgt, skal du installere WordPress og logge ind på WP Admin. Dette er det punkt, hvor vores to mulige veje deler sig.
Manuelt konvertering af dit statiske HTML-websted til WordPress
Hvis dit mål ikke kun er at få dit indhold fra dit statiske HTML-websted til WordPress, men også at duplikere dit nuværende design, betyder det, at du skal oprette dit eget brugerdefinerede tema. Heldigvis er det ikke så skræmmende, som det måske lyder i første omgang. Det involverer kun oprettelse af nogle få mapper og filer, lidt kopiering og indsættelse og derefter upload af resultatet.
Du skal bruge en kodeeditor som Sublime eller Notepad++ og adgang til både dit HTML-websteds mappe og din nye WordPress-installationsmappe.
Stræk 1: Opret en ny temamappe og de nødvendige filer
Op dit skrivebord skal du oprette en ny mappe til at indeholde dine temafiler. Navngiv den det, som du ønsker, at dit tema skal hedde.
Dernæst skal du oprette et par filer (som alle skal placeres i din nye temamappe) i din kodeeditor. Du skal ikke gøre noget ved dem lige nu. Lad dem blot stå åbne for yderligere redigering.
- Style.css
- Index.php
- header.php
- sidebar.php
- footer.php
Stræk 2: Kopier eksisterende CSS til nyt stilark
Hvis du ønsker at duplikere et design, betyder det sandsynligvis, at du i det mindste har noget CSS, som du ønsker at gemme. Så den første fil, du vil redigere, er din Style.css-fil.
Til at begynde med skal du tilføje følgende øverst i din fil.
/*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 dette afsnit skal du blot indsætte din eksisterende CSS nedenfor. Gem og luk filen.
Stræk 3: Adskil din nuværende HTML
Hvor vi går over til trin tre, vil jeg gerne give dig en kort bemærkning om, hvordan WordPress fungerer. WordPress bruger PHP til at kalde og hente stykker af data fra den underliggende database. Hver fil, som vi bruger i denne lille vejledning, er designet til at fortælle WordPress, hvilken del af indholdet på dit websted der skal vises og hvor.
Så når jeg siger, at vi skal “hakke” din eksisterende HTML op, er det, vi faktisk blot klipper og indsætter dele af din eksisterende kode i de forskellige filer, som vi lige har oprettet, så WordPress ved, hvor de skal vises.
Så går vi i gang.
Først skal du åbne dit nuværende websteds index.html-fil. Fremhæv alt fra toppen af filen til det indledende div class=”main”-tag. Kopier og indsæt dette afsnit i din header.php-fil, gem og luk.
For det andet skal du gå tilbage til din index.html-fil. Fremhæv aside class=”sidebar”-elementet og alt inden for det. Kopier og indsæt dette afsnit i din fil sidebar.php, gem og luk.
For det tredje markerer du i din index.html alt efter din sidebar, og kopier og indsæt det i din fil footer.php, gem og luk.
Finalt markerer du i din fil index.html alt, hvad der er tilbage (dette skulle være hovedindholdsafsnittet), og indsætter det i din fil index.php. Gem, men luk ikke endnu.
Du kan dog lukke din index.html-fil nu og gå videre til de sidste trin. Næsten færdig!
Stræk 4: Færdiggør din index.php-fil
For at færdiggøre dit nye temas index.php-fil skal du sikre dig, at den kan kalde de andre sektioner (ud over hovedindholdet), der er placeret i de andre filer, du har oprettet. Eller med andre ord, sæt de elementer sammen igen, som vi lige har “hakket” op.
Helt øverst i din index.php-fil skal du placere følgende linje af php.
<?php get_header(); ?>
Dernæst skal du helt nede i din index.php-fil placere disse linjer af php.
<?php get_sidebar(); ?><?php get_footer(); ?>
Og til sidst skal vi tilføje det, der kaldes The Loop. Dette er den primære bit af php, som WordPress bruger til at vise dit indlægs indhold til besøgende. Så det sidste trin i oprettelsen af dit nye temas index.php-fil er at tilføje nedenstående kode i indholdsafsnittet.
<?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; ?>
Spar din index.php, og luk. Dit tema er nu færdigt! Det eneste, der er tilbage, er at uploade det til dit WordPress-websted.
Stræk 5: Upload dit nye tema
Nu, hvor du har oprettet dine temafiler og har dem alle gemt i din nye temamappe, skal du have adgang til din nye WordPress-installationsmappe.
Placér din nye temamappe i /wp-content/themes/. Naviger derefter tilbage til WP Admin > Appearance > Themes, og dit nyoprettede tema bør vises der. Gå videre og aktiver det!
Det eneste, der er tilbage at gøre på dette tidspunkt, er at udfylde dit nye WordPress-websted med dit gamle websteds indhold. Følg med i afsnittet nedenfor (springe over den del, der handler om at bruge et præfabrikeret tema) for at se, hvordan det gøres.
Brug af et præfabrikeret WordPress-tema og import af HTML-indhold
Hvis ovenstående trin virker for intensive eller tidskrævende for dig, så vær beroliget, der er en anden måde. I stedet for at konvertere det design, du tilfældigvis arbejder med lige nu, til et WordPress-tema, kan du drage fordel af et af de tusindvis af temaer, der er tilgængelige på det bredere WordPress-marked.
Der er gratis temaer, og der er premium-temaer. Før du beslutter dig for, hvilket der er bedst for dig, kan du læse om, hvilke temaer der er designet til at imødekomme dine behov, og gennemse efter temakategori her på Elegant Themes og andre steder.
Når du har valgt et tema, du kan lide (og har hentet dets zippede filpakke), skal du gå tilbage til WP Admin > Appearance > Themes > Themes > Add New og installere/aktivere dit nye WordPress-tema.
Når dette er gjort, har du et nyt WordPress-websted og et tema – men ikke meget andet. Når du får vist dit websted, vil det være tomt for indhold og sandsynligvis se ret kedeligt ud. Det er ok, for som det næste skal vi importere dit gamle hjemmesides indhold.
In WP Admin gå til Plugins > Add New og søg efter et plugin kaldet HTML Import 2 af Stephanie Leary. Når dette plugin er installeret og aktiveret, skal du følge dets praktiske brugervejledning for at importere hele din mappe med HTML-sider. Komplet med billeder!
Herefter vil du have alt dit gamle indhold levende på WordPress og formateret af dit nye tema. Eller, hvis du har oprettet dit eget tema ovenfor, bør dit websted stort set se ud som før – bare det kører på WordPress.
In Conclusion
Hvis du har brugt dette indlæg som en vejledning til at migrere dit websted til WordPress, så har du lige sluttet dig til et af de største open source-fællesskaber i verden. Velkommen! Det er et sjovt sted med masser af udviklere, designere, bloggere, gør-det-selv-folk og meget mere – alle bygger, leger og skaber med WordPress og WordPress-temaer/plugins.
Hvis du har “fanget WordPress-fejlen”, er det officielle WordPress.org-websted fyldt med nyttige temaer, plugins og andre ressourcer. Hvis du gerne vil finjustere dine temafiler yderligere, kan du udforske Codex for tilsyneladende uendelige tips, tricks og variationer.