Konvertering av HTML til WordPress (trinn for trinn)


Konvertering av HTML til WordPressVeien fra nettsteder bygget med ren HTML til WordPress var ikke en kort vei. Fra en tekstopplevelse har webdesign gått over til en svært interaktiv nett-tilstedeværelse. I tillegg til det trenger vi ikke lenger å skrive markering selv, men kan la innholdsstyringssystemer gjøre det tunge løftet.


Det betyr imidlertid ikke at statiske HTML-nettsteder ikke eksisterer lenger. Faktisk er HTML5, den siste iterasjonen av markeringsspråket, veldig kraftig og lar deg bygge kvalitetsnettsteder uten CMS bak dem.

Likevel viser den voksende markedsandelen til WordPress at flere og flere bytter til plattformen.

WordPress Market Share i 2019

For noen av dem betyr det å gå fra statisk HTML til WordPress. Dette kan være en skremmende oppgave, men dette innlegget vil forsøke å forklare hvordan du gjør det på noen få enkle måter.

Nedenfor viser vi flere måter hvordan du konverterer fra HTML til WordPress. Først lærer du hva de forskjellige alternativene er, så vel som fordeler og ulemper. Etter det vil vi vise deg hvordan du kjører hver av dem trinnvis.

La oss komme igang.

De tre måtene å flytte fra statisk HTML til WordPress

For å flytte fra HTML til WordPress, må du gjøre HTML-designet ditt til et WordPress-tema. Et tema styrer utseendet og følelsen av et WordPress-nettsted, mens funksjonaliteten tilbys av CMS selv, i tillegg til tilleggsprogrammer.

For å gjøre bryteren, har du flere alternativer. Hvilken som er riktig for deg, avhenger av faktorer som tid og penger du er i stand til og villig til å investere, kodingsevner og personlige preferanser. Følgende er de viktigste alternativene.

A) Konverter HTML til et WordPress-tema manuelt

Det første alternativet er også det mest tekniske. Hvis du går denne ruten, tar du din eksisterende kode og bruker den som et utgangspunkt for å lage WordPress-temafilene.

Det er ikke for komplisert, spesielt hvis du har kodingserfaring. Du kan trekke den av med litt HTML, CSS og litt PHP kunnskap. Mye av det er kopiere og lime inn.

Ulempen: mens du ender opp med et fungerende WordPress-tema, vil det ikke ha alle mulighetene WordPress har å tilby. For eksempel, med mindre du bygger det inn etter faktum, vil nettstedet ditt være uten widget-områder eller muligheten til å endre menyen fra WordPress-backend.

Selv om nettstedet ditt vil gjøre jobben sin, vil du ikke kunne administrere det fullstendig via WordPress. Av den grunn foretrekker vi personlig det neste alternativet.

B) HTML til WordPress via WordPress Child Theme

Etter vår mening er dette sannsynligvis den enkleste og mest fornuftige veien når det gjelder innsats og monetære investeringer. I stedet for å bruke det eksisterende nettstedet ditt som et avkjøringspunkt, bruker du et ferdig WordPress-tema i stedet. Deretter justerer du bare designet slik at det ligner på det gamle nettstedet ditt.

Hvis du gjør det, kan du dra nytte av WordPress fullt ut og samtidig beholde utseendet til det gamle nettstedet. Du trenger heller ikke å legge til WordPress-funksjoner etterpå. I stedet kan du bygge på et eksisterende tema – noe WordPress-plattformen eksplisitt er laget for.

C) Importer innhold fra HTML til WordPress ved hjelp av plugin

Hvis du ikke insisterer på å bruke det nåværende designet og er åpen for å endre det, blir det selvfølgelig enda enklere. I så fall trenger du bare å sette opp et nettsted, installere temaet og importere HTML-innholdet. Som du vil se nedenfor, er dette en veldig rask og smertefri prosess.

A) Hvordan manuelt konverterer HTML til et WordPress-tema

Hvis målet ditt er å starte helt fra bunnen av og lage ditt eget WordPress-tema som ligner ditt eksisterende HTML-nettsted, kan du starte herfra.

Ikke bekymre deg hvis det høres skremmende ut, du vil se at det er alt annet enn. Bare noen få filer og mapper, i tillegg til å kopiere og lime inn, er alt det som trengs.

1. Lag en temamappe og grunnleggende filer

Det første du trenger å gjøre er å lage en ny temamappe. Du kan gjøre det på skrivebordet ditt, som for en katalog på datamaskinen. Gi den navnet hva du vil at temaet ditt skal hete.

Gå deretter til kodeditoren og lag et antall tekstfiler. Gi dem følgende navn:

  • style.css
  • index.php
  • header.php
  • sidebar.php
  • footer.php

Ikke gjør noe med dem ennå, hold filene åpne i redigeringsprogrammet. Du trenger dem snart.

2. Kopier eksisterende CSS til WordPress Style Sheet

Nå er det på tide å utarbeide WordPress stilark (filenstyle.css du nettopp opprettet) for å kopiere det gamle nettstedets CSS til det. For det, åpne filen og lime inn følgende:

/ *
Tema navn: tjue tretten
Tema URI: http://wordpress.org/themes/twentythirteen
Forfatter: WordPress-teamet
Forfatter URI: http://wordpress.org/
Beskrivelse: Temaet for WordPress fra 2013 bringer oss tilbake til bloggen, med et stort utvalg av innleggsformater, hver vises vakkert på sin egen unike måte. Designdetaljer florerer, og begynner med et pulserende fargeskjema og matchende topptekstbilder, vakker typografi og ikoner, og en fleksibel layout som ser bra ut på alle enheter, store eller små enheter.
Versjon: 1.0
Lisens: GNU General Public License v2 eller nyere
Lisens URI: http://www.gnu.org/licenses/gpl-2.0.html
Tagger: svart, brun, oransje, solbrun, hvit, gul, lys, en-kolonne, to-kolonner, høyre sidefelt, fleksibel bredde, tilpasset topptekst, tilpasset meny, redigeringsstil, funksjoner, mikroformater, postformater, rtl-språkstøtte, klebrig innlegg, oversettelsesklar
Tekstdomener: tjuende

* /

Dette er den såkalte stilarkoverskriften (Viktig: ikke legg igjen kommentaren/*...*/ tagger ut!). Fyll ut hver del slik:

  • Tema Navn – Her går navnet på temaet ditt. Det kan være hva du vil, men det er vanligvis det samme som navnet på temamappen.
  • Tema URI – Du vil vanligvis legge ut temaets hjemmeside her, men du kan bruke din egen nettadresse.
  • Forfatter – Det er deg. Legg ditt eget navn her eller hva du vil bli kalt.
  • Forfatter URI – En lenke til hjemmesiden din. Det kan være den du bygger, eller hva det gir mening.
  • Beskrivelse – En valgfri beskrivelse av temaet ditt. Dette vises i WordPress-backend.
  • Versjon – Versjonen av temaet ditt. Siden du ikke publiserer det, spiller det ingen rolle. Vi legger vanligvis 1.0 her.
  • Lisens, lisens URI, tagger – Disse tingene er bare viktige hvis du planlegger å sende temaet ditt til WordPress temakatalog. Du kan la dem være ute i dette tilfellet, vi inkluderte dem bare for fullføring.

Etter overskriften, kopier og lim inn eksisterende CSS fra det statiske HTML-nettstedet ditt. Lagre deretter filen i den nye temamappen og lukk den. På tide å flytte til resten.

3. Skill din eksisterende HTML

For neste del må du forstå at WordPress vanligvis bruker PHP for å hente informasjon fra databasen. Av den grunn må du hakke opp din eksisterende HTML i forskjellige deler slik at CMS kan sette dem sammen ordentlig.

Selv om dette høres komplisert ut, er alt det betyr at du kopierer og limer deler av HTML-dokumentet inn i flere PHP-filer. For å demonstrere dette bedre har vi satt sammen en enkel eksempelside som du kan se nedenfor.

html til wordpress eksempel side

Som du ser er det veldig mye en standard HTML-mal som inneholder en topptekst, innholdsområde, en sidefelt og en bunntekst. Den tilhørende koden er denne:





Nettstittel







Nettstittel

  • nav vare nr. 1
  • nav vare nr. 2
  • nav vare nr. 3

Artikkel Tittel

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas midlertidig. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra i. I semper consequat est, eu porta velit mollis nec.

varenr

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas midlertidig. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra i. I semper consequat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat temporalt. Etiam ullamcorper lorem dapibus velit suscipit ultrices. Proin in est sed erat facilisis pharetra.

varenr

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas midlertidig. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra i. I semper consequat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat temporalt. Etiam ullamcorper lorem dapibus velit suscipit ultrices. Proin in est sed erat facilisis pharetra.

Hvis designen din er annerledes, kan det hende du må justere trinnene noe. Imidlertid forblir den totale prosessen den samme.

Åpne strømmen din først index.html (hovedfilen til HTML-nettstedet). Etter det, gå gjennom de nyopprettede WordPress-filene dine og kopier følgende til dem (eksemplene nedenfor er min markering):

header.php

Alt fra begynnelsen av HTML-filen til hovedinnholdsområdet (vanligvis angitt med

eller

) går inn i denne filen. I tillegg til det, rett før der det står, kopiere og lime inn . Dette er avgjørende for at mange WordPress-plugins fungerer ordentlig.




Nettstittel






Nettstittel

  • nav vare nr. 1
  • nav vare nr. 2
  • nav vare nr. 3

sidebar.php

Alt som hører til seksjonen

Etter det er du ferdig med index.html og kan lukke den. Lagre alle andre filer i temamappen og lukk dem med unntak av header.php og index.php. Du har litt mer arbeid å gjøre med dem.

4. “WordPressify” Header.php og Index.php

For overskriften er det eneste som er igjen å endre samtalen for stilarket fra HTML til WordPress-format. For å gjøre dette, se etter en eksisterende lenke i seksjon. Det kan se slik ut:

Erstatt den med denne:

Kult, nå kan du lagre og lukke header.php. Så vend deg til index.php. Den skal være tom for øyeblikket. Så først kopier og lim inn disse kodelinjene:




Dette er anropene for de andre filene som inneholder resten av nettstedet. Du vil kanskje merke avstanden mellom anropet om topptekst og sidefelt. Det er der du vil legge til Sløyfen.

Det siste er den delen av WordPress der CMS gir ut innhold som er opprettet i backend. Det er avgjørende hvis du vil at WordPress skal legge til innhold dynamisk på sidene dine som du vil importere senere. Lim det her rett etter :


Nå, lagre index.php arkiver og lukk den. Bra gjort! Det grunnleggende temaet ditt er klart. Nå kan du legge det til på det nye WordPress-nettstedet ditt.

5. Lag et skjermbilde og last opp tema

Nå vil du legge til et temaskjermbilde som sammen med informasjonen fra stilarkhodet ditt vil tjene som en forhåndsvisning av nettstedet ditt i WordPress backend.

Å gjøre det, åpne det eksisterende nettstedet i en nettleser og ta et skjermbilde med din foretrukne metode. Etter dette åpner du bildebehandlingsprogramvaren du velger og beskjær den til 880 × 660 piksler. Lagre den som screenshot.png og legg den til i temamappen. Nå er du klar til å laste opp temaet ditt.

For å få det nye temaet inn på WordPress-nettstedet ditt, har du flere alternativer. Forutsetningen er imidlertid at alle filene ligger i temamappen.

Det første alternativet er å lage en zip-fil ut av den. Gå deretter til ditt WordPress-nettsted og deretter til Utseende> Temaer. Klikk her Legg til ny øverst og deretter Last opp tema.

laste opp konverterte tema

I den kommende menyen bruker du knappen for å bla til plasseringen av zip-filen. Merk det og klikk Åpen, deretter Installere nå. Når det er gjort, aktiverer du temaet.

Alternativt kan du koble til serveren din via FTP (eller bare gå til den lokale katalogen på harddisken) og navigere til wp-content / themes. Last opp din (ikke-pakket) temamappe der. Etter det aktiverer du temaet fra samme sted som før.

Hyggelig! Frontnettet til det nye nettstedet ditt skal nå se ut som det gamle nettstedet. Alt som gjenstår for å fullføre overgangen fra HTML til WordPress er å importere det eksisterende innholdet. Vi vil dekke dette nærmere nedenfor når vi snakker om å bruke et eksisterende WordPress-tema.

Vær imidlertid oppmerksom på at selv om det grunnleggende temaet fungerer nå, er det flere ting du kan gjøre for å integrere HTML-en din bedre med WordPress. Dette inkluderer gjør bloggtittelen og beskrivelsen din redigerbar, legge til widgetområder, kommentarer, og mye mer. Du må kanskje også legge til CSS-markering fordi innholdet ikke er en del av det originale designet som bilder.

Ettersom det er mye arbeid, liker vi personlig å bruke en løsning som allerede har all den funksjonaliteten og bare trenger en designendring. Det er det vi vil vise deg neste gang.

B) HTML til WordPress via WordPress Child Theme

Hvis ovennevnte virker for intens for deg, kan den neste metoden være mer håndterbar. Det lar deg dra nytte av tusenvis av eksisterende WordPress-temaer mens du fortsatt beholder det originale designet.

Det er ved å bruke et såkalt barnetema. Disse temaene er bygget oppå et annet tema (overordnede) som ikke står på egenhånd, men bare endrer overordnet tema for å passe til dine behov. Enkelt å gjøre selv om det krever litt detektivarbeid.

1. Velg et passende tema

Det første trinnet er å velge et passende tema å basere designet på. For det hjelper det å finne et tema som ligger i nærheten av din eksisterende design eller bruke et temarammeverk eller et starttema, som begge er laget for å fungere som en base for tilpassede temaer..

Undersøk WordPress temakatalog, vår liste over fantastiske temaer eller se nærmere på premium temaer å finne en passende kandidat. Etter litt søking bestemte vi oss for at Tjue tolv temaet vil være et godt utgangspunkt for flyttingen min fra HTML til WordPress. Vanligvis vil vi velge noe mer oppdatert, men det stemmer godt med det enkle designet vi jobber med.

Når du har valgt, kan du installere temaet på WordPress-nettstedet slik du installerer et hvilket som helst tema. Du trenger ikke å aktivere den. Som nevnt er det bare der for å gi et grunnlag for deg å jobbe med. Resten skjer i barnetema.

2. Opprett en ny mappe

På samme måte som den tidligere metoden, for barnetema, må du opprette en temamappe. Her vil du plassere alle filene som tilhører den.

Når du oppretter temaer for barn, er det vanlig å kalle mappen med samme navn som overordnet tema pluss -barn. Så siden vårt barnetema er basert på Twenty Twelve-temaet, kaller vi katalogen for den twentytwelve-barn.

Uansett hvilket navn du velger, må du huske å ikke ta med noen mellomrom fordi det ikke fungerer slik.

3. Sett opp stilarket

Barnetemaet trenger også et stilark. Denne vil fungere nesten den samme som stilarket laget ovenfor. Den har imidlertid en litt annen overskrift og vil inneholde mindre kode.

Vi kommer til den andre delen senere. Foreløpig lager du det vanlige style.css og legg den i temamappen. Deretter legger du til følgende:

/ *
Tema navn: tjue femten barn
Tema URI: http://example.com/twenty-fifteen-child/
Beskrivelse: Twenty Fifteen Child Theme
Forfatter: John Doe
Forfatter URI: http://eksempel.no
Mal: twentyfifteen
Versjon: 1.0.0
Lisens: GNU General Public License v2 eller nyere
Lisens URI: http://www.gnu.org/licenses/gpl-2.0.html
Tagger: lys, mørk, to-kolonner, høyre sidefelt, responsiv layout, klar for tilgjengelighet
Tekstdomener: tjuefemende-barn
* /

Som du kan se, er det veldig likt stilarkoverskriften du brukte før med ett unntak: den inneholder Mal stikkord.

I den delen, bør du sette navnet på temaet som vil fungere som overordnet. Uten det fungerer ikke barnetemaet. For å unngå dette, skriv inn mappenavnet til overordnet. Så for tjue tolv ville det være det Mal: twentytwelve.

4. Lag Functions.php og arve forelderstiler

Med bare stilarket og mappen er det allerede mulig å aktivere underordnet tema. Det ville imidlertid ikke gjort mye bra, siden nettstedet ditt ser ut som en HTML-side uten styling.

For å endre det, må du først arve foreldrenes stiler, og for det trenger du functions.php. Denne filen er en viktig del av enhver WordPress-installasjon og lar deg gjøre omfattende endringer på nettstedet ditt.

I dette tilfellet vil du imidlertid bare bruke det til å kalle foreldrenes styling. Opprett en ny fil for det, og kall den functions.php. Det første du vil legge til helt i begynnelsen er dette:

Med en åpende PHP-kode er filen teoretisk klar, men den gjør ikke noe ennå. Så i tillegg må du legge inn dette:

funksjon child_theme_enqueue_style () {

$ parent_style = 'forelderstil';

wp_enqueue_style ($ parent_style, get_template_directory_uri (). '/style.css');
wp_enqueue_style ("barnestil",
get_styleheet_directory_uri (). '/Style.css',
matrise ($ parent_style),
wp_get_theme () -> get ( 'versjon')
);
}
add_action ('wp_enqueue_scripts', 'child_theme_enqueue_style');

Denne koden forteller WordPress å gå til malkatalogen (alias overordnet tema) og bruke stilene som er inkludert. Det gjør det også mulig å endre temaet via ditt barnetema (mer om det senere).

5. Aktiver Child Theme

På dette tidspunktet er barnetemaet klart til å aktiveres.

Du kan legge til et skjermbilde til det som i instruksjonene ovenfor hvis du vil. Bortsett fra det, kan du enten zip det opp og legge det til WordPress via Utseende> Temaer> Legg til nytt> Last opp tema eller bare ved å legge til mappen som den skal wp-content / themes.

I begge tilfeller, når du aktiverer temaet, skal nettstedet ditt nå se ut som det overordnede.

6. Juster designen

Her begynner det nevnte detektivarbeidet. Det er nå på tide å endre utformingen av det eksisterende temaet slik at det ligner det originale HTML-nettstedet.

Noe av det første som skiller seg ut er for eksempel at WordPress-temaet vårt legger til plass over overskriften og under bunnteksten som HTML-nettstedet vårt ikke har.

html til wordpress via eksempeltema for barnets tema

For å avhjelpe dette, kan vi se på HTML-nettstedet med vårt nettleserutviklerverktøy å finne markeringen ansvarlig. Når vi gjør det, møter vi dette:

kropp {
margin: 0;
}

Deretter gjør vi det samme med mitt nye WordPress-tema der vi finner disse stilene:

body .site {
margin-top: 48px;
margin-top: 3.428571429rem;
margin-bottom: 48px;
margin-bottom: 3.428571429rem;
}

Målet mitt er nå å bruke stylingen fra HTML-siden til WordPress-temaet. I dette tilfellet kan vi oppnå dette ved å legge til følgende i temaet mitt barn style.css:

body .site {
margin: 0 auto;
}

Etter lagring har WordPress-temaet de nye stilene brukt på det:

html til wordpress via redigert eksempelside for barnetema

Det er fordi alt du legger til stiltemaet for barnetema overstyrer stilene i foreldrene. Resten av markeringen forblir imidlertid intakt, slik at du bare er i stand til å endre de tingene som er relevante.

I tillegg, hvis du bruker en HTML5-mal som en startpakke og et moderne WordPress-tema som foreldre, vil mye av den grunnleggende markeringen samsvare, noe som gjør livet ditt mye enklere.

Det er mye mer du kan gjøre med temaer som du kan lære her. Når du er ferdig med å justere designet, er det på tide å importere innholdet. La oss komme til det nå.

C) Importer innhold fra HTML til WordPress ved hjelp av plugin

Til slutt bruker listen et eksisterende tema på listen over å flytte fra HTML til WordPress og bare flytte innholdet fra HTML-nettstedet ditt inn i det. Dette er den enkleste måten - alt du trenger å gjøre er å installere og aktivere ønsket tema (vi antar at du vet hvordan du gjør det nå) og følg deretter trinnene nedenfor.

For øvrig, selv om denne prosessen ikke er veldig vanskelig, er det ting som kan gå galt. Av den grunn må du sørge for å ta sikkerhetskopi av ditt WordPress-nettsted før du går gjennom det.

1. Installer importplugin

Det første du trenger å gjøre er å installere plugin-modulen HTML Import 2. Den enkleste måten å oppnå dette på er å gå til Plugins> Legg til nytt og søk etter det med navn. Når du finner den på listen (den kan være lenger til bunnen), klikker du på Installere nå. Aktiver den når det er gjort.

html til wordpress import plugin

2. Forbered importen

For å importere flere sider samtidig, må du laste dem opp til samme server som WordPress-installasjonen. Programtillegget foreslår noe som html-filer til import  mappenavnet, men du kan velge hva du vil. Bare husk å huske banenavnet.

Som du vil se i det følgende, kan du også importere enkeltsider én etter én. Gå til WordPress og for begge metodene Innstillinger> HTML-import. Vi vil gå over de mest grunnleggende innstillingene nå. Hvis du trenger ytterligere informasjon, eller hvis noe er uklart, se offisiell brukerveiledning.

filer

html til wordpress importfiler

Konfigurer denne skjermen som følger:

  • Katalog som skal importeres - Skriv inn banen du nettopp kopierte eksisterende filer til.
  • URL for gammel side - Brukes for viderekoblinger. Skriv inn din gamle URL. Vi vil takle dette igjen senere i denne artikkelen.
  • Standardfil — Standardfilen for kataloger på det gamle nettstedet, vanligvis index.html.
  • Filendelser å inkludere - Utvidelsene av filer du vil importere.
  • Kataloger å ekskludere - Hvis du har noen kataloger på det gamle nettstedet du ikke vil importere, skriver du dem inn her.
  • Bevar filnavn - Hvis du vil at pluginprogrammet automatisk skal bruke filnavnene dine som den nye URLen, merker du av i denne boksen. Dette er fornuftig hvis titlene dine er veldig lange, fordi importøren vanligvis bruker dem til å lage sneglen.

Innhold

Under innhold må du konfigurere HTML-koden som inneholder nettstedets innhold.

html til wordpress importinnhold

For å gjøre det, velg alternativet HTML-kode på toppen. Konfigurer deretter koden i de følgende tre feltene. Hvis innholdet ditt for eksempel er inneholdt i en kode som heter

, informasjonen du legger inn ville være div, id og hoved-.

De andre innstillingene på denne siden skal være selvforklarende og gjøre det mulig å importere bilder, dokumenter, oppdatere interne lenker og mer.

Tittel og metadata

html til wordpress importtittel og metadata

Denne delen ligner på innholdsdelen før. Imidlertid handler det om sidetitler. I begynnelsen må du fortelle plugin-programmet hvordan titler er merket i HTML-malen din, slik at de kan importere dem til rett sted.

I tillegg er du i stand til å filtrere ut overflødige ting som nettstedstittelen, som det ofte vises av WordPress-temaer som standard. Hvis titlene dine er inne i innholdet, kan du også be importøren om å slette dem slik at de ikke blir inkludert to ganger.

Det som er viktig er at du bestemmer deg for om du vil importere det gamle innholdet ditt som innlegg eller sider. Resten er ganske selvforklarende og lar deg konfigurere WordPress-innstillinger for nye sider.

Tilpassede felt

html til wordpress importere tilpassede felt

Hvis du har data som må importeres til tilpassede felt, kan du konfigurere dette her.

Kategorier & tagger

html til wordpress importkategorier og -koder

Her kan du tilordne kategorier, tagger og postformater til det importerte innholdet. Programtillegget viser den eksisterende taksonomien på nettstedet ditt for å gjøre dette trinnet enklere.

Verktøy

html til wordpress importverktøy

Denne skjermen viser en rekke nyttige verktøy for vellykket import fra HTML til WordPress.

3. Begynn å importere

Når du er ferdig, lagrer du innstillingene. Dette vil aktivere Importer filer knapp. Klikk på den for å komme i gang.

html til wordpress import

(Merk: du kan også komme hit via Verktøy> Import og deretter plukke Kjør importør under HTML alternativ.)

Velg deretter om du vil importere en katalog med filer eller en enkelt fil (du må bla til den), og trykk deretter Sende inn. Plugin-en går deretter på jobb.

Når du er ferdig, bør du ha alt eksisterende innhold på WordPress-nettstedet ditt og formatert av det nye temaet. Eller, hvis du gikk en av de andre rutene, bør nettstedet ditt i utgangspunktet se ut som det tidligere HTML-nettstedet. Bra gjort!

Ytterligere trinn

Hvis du planlegger å distribuere WordPress-nettstedet samme sted som det statiske HTML-nettstedet pleide å være, er det noen flere ting å gjøre før du er ferdig.

Den første er å sjekke nettadressene til de nylig importerte innleggene og sidene for å sikre at de er søkemotorvennlige (dvs. ta med nøkkelordene du vil rangere etter). Det er veldig enkelt - bare gå til en side eller et innlegg og se på nettadressen under tittelen.

sjekk permalinks etter HTML til wordpress import

Klikk på for å endre det Redigere til høyre, endre til URLen du ønsker, og trykk ok.

En annen ting er å implementere viderekoblinger fra de gamle URL-ene til de nye. På den måten vil du ikke tape på eksisterende SEO-verdi.

Hvis du har fylt ut den gamle nettadressen i HTML-pluginen, vil den opprette omdirigeringskoden for deg. Du kan kopiere og lime dette inn i filen.htaccess som ligger på serveren din (vanligvis i rotkatalogen).

Du får tilgang til den via FTP, men det kan hende du må aktivere å se skjulte filer da de ikke er synlige som standard. Rediger deretter .htaccess og legge inn reglene.

Vær oppmerksom på at det bare fungerer hvis du har forlatt nettadressene uendret. Hvis du ikke har og trenger å angi tilpassede viderekoblinger, bruker du Omdirigeringsplugin. Det er en veldig behagelig løsning som også sporer når noen lander på en ikke-eksisterende URL på nettstedet ditt. På den måten kan du også implementere viderekoblinger for disse koblingene.

Flyttet du vellykket fra HTML til WordPress?

Og det er det. Du har nettopp lært hvordan du konverterer et statisk HTML-nettsted til WordPress. Som en konsekvens har du blitt en del av et av de største lokalsamfunnene på nettet og fått tilgang til tusenvis av ressurser for å gjøre nettstedet ditt enda bedre.

Avhengig av hvilken løsning du valgte ovenfor, har du allerede fått et inntrykk av hvordan WordPress fungerer. Herfra og med er det ganske enkelt å forgrense seg og dykke dypere i å lage nettsteder med WordPress-plattformen. Hvis du trenger mer hjelp på dette området, har dette massevis av det. Du kan lære hvordan du:

  • Tilpass WordPress trinn for trinn
  • Flytt nettstedet ditt fra HTTP til HTTPS
  • Legg til tilpassede skrifter til WordPress
  • Få fart på WordPress-nettstedet ditt
  • Legg til et kontaktskjema til ditt WordPress-nettsted

Bortsett fra det, ønsker vi deg lykke til med det nylig myntede WordPress nettstedet. Vi håper du liker å jobbe med WordPress så mye som vi gjør.

Flyttet du nettstedet ditt fra HTML til WordPress? Hvordan var opplevelsen din? Noen tips å legge til? Gi oss beskjed i kommentarfeltet nedenfor.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map