HTML converteren naar WordPress (stap voor stap)


HTML converteren naar WordPressDe weg van sites die met pure HTML naar WordPress zijn gebouwd, was niet kort. Van een ervaring met alleen tekst, is webdesign overgegaan op een zeer interactieve aanwezigheid op het web. Bovendien hoeven we niet langer zelf markeringen te schrijven, maar kunnen we contentmanagementsystemen het zware werk laten doen.


Dat betekent echter niet dat statische HTML-websites niet meer bestaan. In feite is HTML5, de nieuwste versie van de opmaaktaal, zeer krachtig en stelt u in staat hoogwaardige websites te bouwen zonder een CMS erachter.

Toch laat het groeiende marktaandeel van WordPress zien dat steeds meer mensen overstappen op het platform.

WordPress marktaandeel in 2019

Voor sommigen betekent dit dat ze van statische HTML naar WordPress moeten gaan. Dit kan een ontmoedigende taak zijn, maar in dit bericht wordt geprobeerd op een paar eenvoudige manieren uit te leggen hoe je dit moet doen.

Hieronder laten we u verschillende manieren zien hoe u van HTML naar WordPress kunt converteren. Eerst leert u wat de verschillende opties zijn, evenals hun voor- en nadelen. Daarna laten we u stap voor stap zien hoe u ze allemaal kunt uitvoeren.

Laten we gaan.

De 3 manieren om van statische HTML naar WordPress te gaan

Om van HTML naar WordPress te gaan, moet u uw HTML-ontwerp omzetten in een WordPress-thema. Een thema bepaalt het uiterlijk en het gevoel van een WordPress-website, terwijl de functionaliteit wordt geleverd door het CMS zelf en door extra plug-ins.

Om de overstap te maken, heb je verschillende opties. Welke voor u de juiste is, hangt af van factoren zoals de tijd en het geld dat u kunt en wilt investeren, uw codeervaardigheden en persoonlijke voorkeuren. Hieronder volgen de belangrijkste opties.

A) HTML handmatig converteren naar een WordPress-thema

De eerste optie is ook de meest technische. Als u deze route volgt, neemt u uw bestaande code en gebruikt u deze als startpunt om de WordPress-themabestanden te maken.

Het is niet te ingewikkeld, vooral als je ervaring hebt met coderen. Je kunt het doen met een beetje HTML, CSS en wat PHP-kennis. Veel ervan is kopiëren en plakken.

Het nadeel: hoewel je een werkend WordPress-thema krijgt, heeft het niet alle mogelijkheden die WordPress te bieden heeft. Tenzij u het bijvoorbeeld achteraf inbouwt, heeft uw site geen widgetgebieden of de mogelijkheid om uw menu te wijzigen vanuit de WordPress-backend.

Hoewel uw site zijn werk doet, kunt u deze niet volledig beheren via WordPress. Om die reden geven wij persoonlijk de voorkeur aan de volgende optie.

B) HTML naar WordPress via WordPress Child Theme

Naar onze mening is dit waarschijnlijk de gemakkelijkste en meest redelijke weg qua inspanning en geldinvesteringen. In plaats van uw bestaande site als startpunt te gebruiken, gebruikt u in plaats daarvan een kant-en-klaar WordPress-thema. Je past dan alleen het ontwerp aan zodat het lijkt op je oude website.

Als u dit doet, kunt u volledig profiteren van WordPress met behoud van het uiterlijk van uw oude site. U hoeft daarna ook geen WordPress-functies meer toe te voegen. In plaats daarvan kunt u voortbouwen op een bestaand thema – iets waarvoor het WordPress-platform expliciet is gemaakt.

C) Importeer inhoud van HTML naar WordPress met behulp van plug-in

Het is duidelijk dat als u er niet op staat uw huidige ontwerp te gebruiken en openstaat om het te veranderen, het nog gemakkelijker wordt. In dat geval hoeft u alleen maar een site op te zetten, het thema te installeren en uw HTML-inhoud te importeren. Zoals u hieronder zult zien, is dit een zeer snel en pijnloos proces.

A) HTML handmatig converteren naar een WordPress-thema

Als het je doel is om helemaal opnieuw te beginnen en je eigen WordPress-thema te maken dat lijkt op je bestaande HTML-website, begin dan hier.

Maak je geen zorgen als het intimiderend klinkt, je zult zien dat het allesbehalve is. Slechts een paar bestanden en mappen, evenals wat kopiëren en plakken, is voldoende.

1. Maak een themamap en basisbestanden

Het eerste dat u hoeft te doen, is een nieuwe themamap maken. U kunt dat op uw bureaublad doen zoals u zou doen voor een map op uw computer. Noem het hoe je wilt dat je thema wordt genoemd.

Ga daarna naar de code-editor en maak een aantal tekstbestanden. Noem ze het volgende:

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

Doe er nog niets mee, houd de bestanden open in de editor. Je hebt ze snel nodig.

2. Kopieer bestaande CSS naar het WordPress Style Sheet

Nu is het tijd om het WordPress-stijlblad (het bestand) voor te bereidenstyle.css die u zojuist heeft gemaakt) om de CSS van uw oude site erin te kopiëren. Open daarvoor het bestand en plak het volgende:

/ *
Thema naam: Twenty Thirteen
Thema-URI: http://wordpress.org/themes/twentythirteen
Auteur: het WordPress-team
Auteur URI: http://wordpress.org/
Beschrijving: Het 2013-thema voor WordPress brengt ons terug naar de blog, met een volledige reeks postformaten, elk prachtig weergegeven op hun eigen unieke manier. Ontwerpdetails zijn er in overvloed, te beginnen met een levendig kleurenschema en bijpassende kopafbeeldingen, prachtige typografie en pictogrammen, en een flexibele lay-out die er geweldig uitziet op elk apparaat, groot of klein.
Versie: 1.0
Licentie: GNU General Public License v2 of hoger
Licentie-URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: zwart, bruin, oranje, bruin, wit, geel, licht, één kolom, twee kolommen, rechterzijbalk, flexibele breedte, aangepaste koptekst, aangepast menu, editorstijl, uitgelichte afbeeldingen, microformats, post-formaten, rtl-taalondersteuning, sticky-post, klaar voor vertaling
Tekstdomein: twintig dertien

* /

Dit is de zogenaamde stijlbladkop (Belangrijk: laat de opmerking niet achter)/*...*/ tags uit!). Vul elk deel als volgt in:

  • Thema naam – Hier komt de naam van je thema. Het kan alles zijn wat je wilt, maar het is meestal hetzelfde als de naam van je themamap.
  • Thema-URI – Meestal plaatst u hier de startpagina van het thema, maar u kunt uw eigen siteadres gebruiken.
  • Auteur – Dat ben jij. Zet hier uw eigen naam of hoe u ook genoemd wilt worden.
  • URI van auteur – Een link naar uw startpagina. Het kan degene zijn die u aan het bouwen bent of wat dan ook logisch is.
  • Omschrijving – Een optionele beschrijving van uw thema. Dit wordt weergegeven in de WordPress-backend.
  • Versie – De versie van uw thema. Aangezien u het niet publiceert, maakt het niet echt uit. We plaatsen hier meestal 1.0.
  • Licentie, licentie-URI, tags – Deze zaken zijn alleen belangrijk als u van plan bent uw thema aan de WordPress themamap. U kunt ze in dit geval weglaten, we hebben ze gewoon opgenomen voor de volledigheid.

Kopieer en plak na de koptekst de bestaande CSS van uw statische HTML-website. Sla het bestand vervolgens op in uw nieuwe themamap en sluit het. Tijd om naar de rest te gaan.

3. Scheid uw bestaande HTML

Voor het volgende deel moet je begrijpen dat WordPress meestal PHP gebruikt om informatie uit zijn database te halen. Om die reden moet je je bestaande HTML in verschillende stukjes hakken, zodat het CMS ze correct kan samenstellen.

Hoewel dit ingewikkeld klinkt, betekent dit alleen dat u delen van uw HTML-document kopieert en plakt in verschillende PHP-bestanden. Om dit beter te demonstreren hebben we een simpele voorbeeldpagina samengesteld die je hieronder kunt zien.

html naar wordpress voorbeeldpagina

Zoals je kunt zien, is het eigenlijk een standaard HTML-sjabloon met een koptekst, inhoudsgebied, een zijbalk en een voettekst. De bijbehorende code is dit:





Website titel







Website titel

  • nav item # 1
  • nav item # 2
  • nav item # 3

Artikel titel

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

Onderverdeling

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

Onderverdeling

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

Als uw ontwerp anders is, moet u de onderstaande stappen mogelijk enigszins aanpassen. Het algehele proces blijft echter hetzelfde.

Open eerst je huidige index.html (het hoofdbestand van uw HTML-site). Ga daarna door uw nieuw gemaakte WordPress-bestanden en kopieer het volgende erin (de onderstaande voorbeelden zijn mijn opmaak):

header.php

Alles vanaf het begin van uw HTML-bestand tot het belangrijkste inhoudsgebied (meestal aangeduid met

of

) gaat in dit bestand. Bovendien, vlak voordat het zegt, knippen en plakken . Dit is cruciaal voor veel WordPress-plug-ins om correct te werken.




Website titel






Website titel

  • nav item # 1
  • nav item # 2
  • nav item # 3

zijbalk.php

Alles wat tot de sectie behoort

Daarna ben je klaar met index.html en kan het sluiten. Sla alle andere bestanden op in uw themamap en sluit ze, behalve header.php en index.php. Je hebt nog wat werk te doen.

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

Het enige dat overblijft voor de koptekst is het wijzigen van de aanroep voor het stijlblad van HTML naar WordPress-indeling. Zoek hiervoor een bestaande link in de sectie. Het zou er ongeveer zo uit kunnen zien:

Vervang het door dit:

Cool, nu kun je opslaan en sluiten header.php. Ga dan naar index.php. Het moet op dit moment leeg zijn. Kopieer en plak dus eerst deze coderegels:




Dit zijn de oproepen voor de andere bestanden die de rest van uw site bevatten. Mogelijk merkt u de ruimte tussen de aanroep van de koptekst en de zijbalk. Dat is waar je aan toevoegt De lus.

De laatste is het deel van WordPress waar de CMS inhoud uitvoert die in de backend is gemaakt. Het is cruciaal als u wilt dat WordPress inhoud dynamisch aan uw pagina’s toevoegt, die u later zult importeren. Plak dit hier meteen daarna :


Bespaar nu index.php bestand en sluit het. Goed gedaan! Je basisthema is klaar. Nu kunt u het toevoegen aan uw nieuwe WordPress-site.

5. Maak een Screenshot en Upload Thema

Nu voegt u een thema-screenshot toe dat, samen met de informatie uit uw stijlbladkop, zal dienen als een voorbeeld van uw website in de WordPress-backend.

Om dat te doen, opent u uw bestaande site in een browser en maakt u een screenshot met uw favoriete methode. Open daarna de beeldbewerkingssoftware van uw keuze en snijd deze bij tot 880 × 660 pixels. Bewaar het als screenshot.png en voeg het toe aan je themamap. Nu ben je klaar om je thema te uploaden.

Om het nieuwe thema op je WordPress-site te krijgen, heb je verschillende opties. De voorwaarde is echter dat alle bestanden zich in uw themamap bevinden.

De eerste optie is om er een zip-bestand van te maken. Ga daarna naar uw WordPress-site en vervolgens naar Uiterlijk> Thema’s. Klik hier Nieuw toevoegen bovenaan en dan Thema uploaden.

upload geconverteerd thema

Gebruik in het volgende menu de knop om naar de locatie van uw zipbestand te bladeren. Markeer het en klik Open, dan Installeer nu. Activeer het thema als het klaar is.

Als alternatief kunt u via FTP verbinding maken met uw server (of ga gewoon naar de lokale map op uw harde schijf) en navigeer naar wp-content / thema’s. Upload vervolgens uw (uitgepakte) themamap daar. Activeer daarna het thema vanaf dezelfde plek als voorheen.

Mooi hoor! De voorkant van uw nieuwe site zou er nu uit moeten zien als uw oude site. Het enige dat overblijft om de overstap van HTML naar WordPress te voltooien, is het importeren van uw bestaande inhoud. We zullen dit hieronder verder bespreken wanneer we het hebben over het gebruik van een bestaand WordPress-thema.

Houd er echter rekening mee dat hoewel het basisthema nu werkt, er meer dingen zijn die u kunt doen om uw HTML beter te integreren met WordPress. Dit bevat de titel en beschrijving van uw blog bewerkbaar maken, widgetgebieden toevoegen, opmerkingen en nog veel meer. Mogelijk moet u ook CSS-opmaak toevoegen omdat de inhoud geen deel uitmaakt van uw oorspronkelijke ontwerp, zoals afbeeldingen.

Omdat het veel werk is, gebruiken we persoonlijk graag een oplossing die al die functionaliteit heeft en alleen een ontwerpwijziging nodig heeft. Dat is wat we je hierna zullen laten zien.

B) HTML naar WordPress via WordPress Child Theme

Als het bovenstaande u te intens lijkt, is de volgende methode misschien beter beheersbaar. Hiermee kunt u profiteren van duizenden bestaande WordPress-thema’s met behoud van uw oorspronkelijke ontwerp.

Dat is door een zogenaamd kindthema te gebruiken. Deze thema’s zijn gebouwd bovenop een ander thema (de ouder) dat niet op zichzelf staat, maar alleen het ouderthema aanpast aan uw behoeften. Makkelijk genoeg om te doen, hoewel het een beetje detectivewerk kost.

1. Kies een geschikt thema

De eerste stap is het kiezen van een geschikt thema om je ontwerp op te baseren. Daarvoor helpt het om een ​​thema te vinden dat dicht bij uw bestaande ontwerp ligt of een themakader of een startthema te gebruiken, die beide zijn gemaakt om te werken als basis voor aangepaste thema’s.

Controleer de WordPress themamap, onze lijst met geweldige thema’s of kijk in premium thema’s om een ​​geschikte kandidaat te vinden. Na wat zoeken besloten we dat de Twintig twaalf thema zou een goed startpunt zijn voor mijn overstap van HTML naar WordPress. Meestal kiezen we iets actuelers, maar het past goed bij het eenvoudige ontwerp waarmee we werken.

Nadat u uw keuze heeft gemaakt, installeert u het thema op uw WordPress-website zoals u elk thema zou installeren. Het is niet nodig om het te activeren. Zoals eerder vermeld, is het er gewoon om een ​​basis te bieden waarmee u kunt werken. De rest gebeurt in het kindthema.

2. Maak een nieuwe map

Net als bij de eerdere methode, moet u voor het onderliggende thema een themamap maken. Hier plaatst u alle bestanden die erbij horen.

Bij het maken van onderliggende thema’s is het gebruikelijk om de map dezelfde naam te geven als het bovenliggende thema plus -kind. Omdat ons kindthema is gebaseerd op het Twenty Twelve-thema, noemen we de directory Twentytwelve-kind.

Welke naam u ook kiest, zorg ervoor dat u geen spaties opneemt, want zo werkt het niet.

3. Stel het stijlblad in

Het kindthema heeft ook een stijlblad nodig. Deze werkt bijna hetzelfde als het stijlblad dat hierboven is gemaakt. Het heeft echter een iets andere koptekst en zal minder code bevatten.

We komen later bij het tweede deel. Maak voor nu het gebruikelijke style.css en plaats het in de themamap. Voeg vervolgens het volgende toe:

/ *
Thema Naam: Twenty Fifteen Child
Thema-URI: http://example.com/twenty-fifteen-child/
Beschrijving: Twenty Fifteen Child Theme
Auteur: John Doe
URI van auteur: http://example.com
Sjabloon: twintig vijftien
Versie: 1.0.0
Licentie: GNU General Public License v2 of hoger
Licentie-URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: licht, donker, twee kolommen, rechterzijbalk, responsieve lay-out, toegankelijkheidsklaar
Tekstdomein: vijfentwintig kinderen
* /

Zoals je kunt zien, lijkt het erg op de stijlbladkop die je eerder gebruikte, met één uitzondering: het bevat de Sjabloon label.

In dat gedeelte moet je de naam van het thema plaatsen dat als ouder zal fungeren. Zonder dit werkt het kind-thema niet. Om dit te voorkomen, voert u de mapnaam van de ouder in. Dus voor Twenty Twelve zou dat zijn Sjabloon: twentytwelve.

4. Maak Functions.php en Overnemen van bovenliggende stijlen

Met alleen het stijlblad en de map is het al mogelijk om het onderliggende thema te activeren. Dat zou echter niet veel goeds doen, aangezien uw site er op dit moment als een HTML-pagina uitziet zonder enige vormgeving.

Om dat te veranderen, moet je eerst de stijlen van de ouder erven en daarvoor heb je nodig functies.php. Dit bestand is een belangrijk onderdeel van elke WordPress-installatie en stelt u in staat ingrijpende wijzigingen aan te brengen aan uw website.

In dit geval gebruik je het echter alleen om de styling van de ouder aan te roepen. Maak daarvoor een nieuw bestand aan en noem het functies.php. Het eerste dat u helemaal aan het begin toevoegt, is dit:

Met een PHP-openingstag is het bestand in theorie klaar, maar het doet nog niets. Dus u moet dit ook invoeren:

functie child_theme_enqueue_styles () {

$ parent_style = 'ouderstijl';

wp_enqueue_style ($ parent_style, get_template_directory_uri (). '/style.css');
wp_enqueue_style ('kinderstijl',
get_stylesheet_directory_uri (). '/style.css',
array ($ parent_style),
wp_get_theme () -> get ('Version')
);
}
add_action ('wp_enqueue_scripts', 'child_theme_enqueue_styles');

Dit stuk code vertelt WordPress om naar de sjabloondirectory te gaan (ook wel het ouderthema genoemd) en de daar opgenomen stijlen te gebruiken. Het maakt het ook mogelijk om het thema aan te passen via je kindthema (daarover later meer).

5. Activeer het kindthema

Op dit punt is het kindthema klaar om te worden geactiveerd.

Je kunt er een screenshot aan toevoegen zoals in de bovenstaande instructies als je wilt. Afgezien van dat, kunt u het ofwel dichtritsen en toevoegen aan WordPress via Uiterlijk> Thema's> Nieuw toevoegen> Thema uploaden of door simpelweg de map toe te voegen zoals deze is wp-content / thema's.

In beide gevallen, wanneer u het thema activeert, moet uw site er nu precies hetzelfde uitzien als de bovenliggende pagina.

6. Pas het ontwerp aan

Hier begint het bovengenoemde detectivewerk. Het is nu tijd om het ontwerp van het bestaande thema te wijzigen zodat het lijkt op uw oorspronkelijke HTML-site.

Een van de eerste dingen die bijvoorbeeld opvalt, is dat ons WordPress-thema ruimte boven de koptekst en onder de voettekst toevoegt die onze HTML-site niet heeft.

html naar wordpress via child theme voorbeeldpagina

Om dit te verhelpen, kunnen we de HTML-site bekijken met onze browserontwikkelaarstools om de verantwoordelijke voor de opmaak te vinden. Wanneer we dit doen, komen we dit tegen:

lichaam {
marge: 0;
}

Vervolgens doen we hetzelfde met mijn nieuwe WordPress-thema waar we deze stijlen vinden:

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

Mijn doel is nu om de styling van de HTML-site toe te passen op het WordPress-thema. In dit geval kunnen we dit eenvoudig bereiken door het volgende toe te voegen aan de thema's van mijn kind style.css:

body .site {
marge: 0 auto;
}

Na het opslaan heeft het WordPress-thema de nieuwe stijlen erop toegepast:

html naar wordpress via child theme bewerkte voorbeeldpagina

Dat komt omdat alles wat u aan het opmaakmodel van het onderliggende thema toevoegt, de stijlen in de ouder overschrijft. De rest van de opmaak blijft echter intact, dus u kunt alleen de dingen wijzigen die relevant zijn.

Plus, als u een HTML5-sjabloon als starter gebruikt en een modern WordPress-thema als uw ouder, komt veel van de basisopmaak overeen, waardoor uw leven veel gemakkelijker wordt.

U kunt veel meer doen met kindthema's, die u kunt leren hier. Als je klaar bent met het aanpassen van het ontwerp, is het tijd om je inhoud te importeren. Laten we daar nu op ingaan.

C) Importeer inhoud van HTML naar WordPress met behulp van plug-in

Ten slotte gebruikt de lijst van het verplaatsen van HTML naar WordPress een bestaand thema zoals het is en migreert eenvoudig uw inhoud van uw HTML-site erin. Dit is de eenvoudigste manier - u hoeft alleen maar het thema van uw keuze te installeren en te activeren (we nemen aan dat u weet hoe u dat nu moet doen) en volg dan de onderstaande stappen.

Trouwens, hoewel dit proces niet super moeilijk is, zijn er dingen die fout kunnen gaan. Zorg er daarom voor dat u een back-up van uw WordPress-site maakt voordat u ermee doorgaat.

1. Installeer de Import Plugin

Het eerste dat u hoeft te doen, is de plug-in installeren HTML-import 2. De eenvoudigste manier om dit te bereiken is door naar te gaan Plug-ins> Nieuw toevoegen en zoek het op naam. Als je het in de lijst vindt (het kan verder onderaan staan), klik je op Installeer nu. Activeer het als het klaar is.

html naar WordPress import plugin

2. Bereid de import voor

Om meerdere pagina's tegelijk te importeren, moet je ze uploaden naar dezelfde server als je WordPress-installatie. De plug-in zal zoiets voorstellen html-bestanden om te importeren  de mapnaam, maar u kunt kiezen wat u maar wilt. Zorg ervoor dat u de padnaam onthoudt.

Zoals u hieronder zult zien, kunt u ook afzonderlijke pagina's één voor één importeren. Ga voor beide methoden naar WordPress en Instellingen> HTML-import. We zullen nu de meest elementaire instellingen doornemen. Als u aanvullende informatie nodig heeft of als er iets onduidelijk is, raadpleeg dan de officiële gebruikershandleiding.

Bestanden

html naar wordpress importbestanden

Configureer dit scherm als volgt:

  • Directory om te importeren - Voer het pad in waarnaar u zojuist uw bestaande bestanden hebt gekopieerd.
  • Oude site-URL - Gebruikt voor omleidingen. Voer uw oude URL in. We zullen dit later in dit artikel opnieuw behandelen.
  • Standaard bestand —Het standaardbestand voor mappen op de oude site, meestal index.html.
  • Bestandsextensies om op te nemen - De extensies van bestanden die u wilt importeren.
  • Directories om uit te sluiten - Als u mappen op de oude site heeft die u niet wilt importeren, voert u deze hier in.
  • Bestandsnamen behouden - Schakel dit selectievakje in om ervoor te zorgen dat de plug-in automatisch uw bestandsnamen gebruikt als de nieuwe URL. Dit is logisch als uw titels erg lang zijn, omdat de importeur ze meestal gebruikt om de slak te maken.

Inhoud

Onder inhoud moet u de HTML-tag configureren die uw site-inhoud bevat.

html om inhoud te importeren in WordPress

Kies daarvoor de optie HTML-tag op de top. Configureer vervolgens de tag in de volgende drie velden. Als uw inhoud bijvoorbeeld is opgenomen in een tag genaamd

, de informatie die u invoert zou zijn div, ID kaart en hoofd.

De andere instellingen op deze pagina spreken voor zich en stellen u in staat afbeeldingen, documenten te importeren, interne links bij te werken en meer.

Titel en metagegevens

html om de titel en metagegevens van import te importeren

Dit deel is vergelijkbaar met het inhoudsdeel eerder. Het gaat echter om paginatitels. In het begin moet u de plug-in vertellen hoe titels in uw HTML-sjabloon zijn gemarkeerd, zodat deze deze op de juiste plaats kunnen importeren.

Bovendien kunt u overtollige zaken zoals de sitetitel eruit filteren, omdat die vaak standaard door WordPress-thema's worden weergegeven. Als uw titels zich in de inhoud bevinden, kunt u de importeur ook vertellen om ze te verwijderen, zodat ze niet twee keer worden opgenomen.

Wat belangrijk is, is dat u beslist of u uw oude inhoud zoals berichten of pagina's wilt importeren. De rest spreekt voor zich en laat je WordPress-instellingen configureren voor nieuwe pagina's.

Aangepaste velden

html om aangepaste velden te importeren

Als u gegevens heeft die in aangepaste velden moeten worden geïmporteerd, kunt u deze hier configureren.

Categorieën & Tags

html naar wordpress import categorieën en tags

Hier kunt u categorieën, tags en berichtformaten toewijzen aan uw geïmporteerde inhoud. De plug-in toont de bestaande taxonomie op uw site om deze stap gemakkelijker te maken.

Hulpmiddelen

html naar WordPress importtools

Dit scherm bevat een aantal handige tools voor het succesvol importeren van HTML naar WordPress.

3. Begin met importeren

Sla de instellingen op als u klaar bent. Dit zal de Bestanden importeren knop. Klik erop om te beginnen.

html naar wordpress import

(Let op: je kunt hier ook komen via Extra> Importeren en dan plukken Voer Importer uit onder de HTML keuze.)

Kies vervolgens of u een map met bestanden of een enkel bestand wilt importeren (u moet ernaar bladeren) en druk vervolgens op Verzenden. De plug-in gaat dan aan het werk.

Als je klaar bent, zou je alle bestaande inhoud op je WordPress-site moeten hebben en opgemaakt zijn volgens het nieuwe thema. Of, als u een van de andere routes heeft gevolgd, zou uw site er in principe hetzelfde moeten uitzien als uw vorige HTML-website. Mooi gedaan!

Extra stappen

Als u van plan bent de WordPress-site te implementeren op dezelfde plaats als waar de statische HTML-website was, zijn er nog een paar dingen die u moet doen voordat u klaar bent.

De eerste is om de URL's van uw nieuw geïmporteerde berichten en pagina's te controleren om er zeker van te zijn dat ze zoekmachinevriendelijk zijn (d.w.z. de zoekwoorden bevatten waarvoor u wilt rangschikken). Het is heel eenvoudig: ga gewoon naar een pagina of post en kijk naar de URL onder de titel.

check permalinks na html naar wordpress import

Klik op om het te wijzigen Bewerk aan de rechterkant, verander naar de URL naar jouw keuze en druk op OK.

Een tweede ding is om doorverwijzingen van de oude URL's naar de nieuwe te implementeren. Op die manier verliest u de bestaande SEO-waarde niet.

Als u het oude siteadres in de HTML-plug-in heeft ingevuld, wordt de omleidingscode voor u gemaakt. Je kunt dit kopiëren en in het bestand plakken.htaccess die zich op uw server bevindt (meestal in de hoofdmap).

Je hebt er toegang toe via FTP, maar misschien moet je het zien van verborgen bestanden inschakelen omdat het standaard niet zichtbaar is. Bewerk vervolgens .htaccess en voer de regels in.

Houd er rekening mee dat het alleen werkt als u de URL's ongewijzigd heeft gelaten. Gebruik de. Als u geen aangepaste omleidingen wilt en hoeft in te stellen Omleidingsplug-in. Het is een zeer comfortabele oplossing die ook bijhoudt wanneer iemand op een niet-bestaande URL op uw site terechtkomt. Op die manier kunt u ook voor die links omleidingen implementeren.

Bent u met succes overgestapt van HTML naar WordPress?

En dat is het. Je hebt zojuist geleerd hoe je een statische HTML-site naar WordPress converteert. Als gevolg hiervan bent u onderdeel geworden van een van de grootste communities op internet en heeft u toegang gekregen tot duizenden bronnen om uw site nog beter te maken.

Afhankelijk van welke oplossing je hierboven hebt gekozen, heb je al een indruk gekregen hoe WordPress werkt. Vanaf hier is het vrij eenvoudig om te vertakken en dieper in te gaan op het maken van websites met het WordPress-platform. Als u op dit gebied extra hulp nodig heeft, heeft deze site er veel van. U kunt leren hoe u:

  • Pas WordPress stap voor stap aan
  • Verplaats uw site van HTTP naar HTTPS
  • Voeg aangepaste lettertypen toe aan WordPress
  • Versnel uw WordPress-website
  • Voeg een contactformulier toe aan uw WordPress-site

Afgezien daarvan wensen we je veel succes met je nieuw geslagen WordPress-website. We hopen dat u net zo geniet van het werken met WordPress als wij.

Heeft u uw site verplaatst van HTML naar WordPress? Hoe was je ervaring? Eventuele tips om toe te voegen? Laat het ons weten in de comments hieronder.

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