In het begin (van het web) werden alle websites gemaakt met niets anders dan tekst en statische HTML. Nu, meer dan 20 jaar later, is het web echter een heel andere plek. Websites zijn veel complexer geworden. Ze bieden rijkere en aangenamere ervaringen voor zowel makers als bezoekers van de site.
Dit is voor een groot deel te danken aan open-sourceprojecten zoals WordPress. Dat is er de afgelopen tien jaar in geslaagd om zijn kerntaak te vervullen: het democratiseren van online publishing (en nog veel meer), zodat iedereen met een WordPress-installatie en de juiste thema’s/plugins een moderne website kan maken met een geavanceerd ontwerp en geavanceerde functionaliteit. Geen codering – zelfs geen HTML – vereist.
Daarom is het voor fanatieke WordPress-gebruikers zoals ikzelf bijna moeilijk te geloven dat iemand in 2018 nog steeds een statische HTML-website kan beheren in plaats van een WordPress-website met een thema en plug-ins. Maar het is een feit dat er nog steeds een aanzienlijk aantal actieve HTML only sites bestaan. (Of HTML met een beetje CSS.)
Getwijfeld, deze site-eigenaren kunnen goede redenen hebben om niet te upgraden of te converteren. Misschien verandert de inhoud van hun site nooit en is de eenvoudige opmaak en vormgeving nog bruikbaar? Of misschien is het minder een gedoe dan zorgen te maken over het houden van een WordPress site bijgewerkt? Beide zijn geldige redenen (naast anderen). Goede voorbeelden van, “repareer niet wat niet kapot is.”
Hoewel, ik heb het gevoel dat deze misschien niet de primaire reden zijn waarom sommigen (misschien velen) de sprong nog niet hebben gemaakt. De meest voor de hand liggende reden is dat ze gewoon niet weten hoe ze hun HTML-site moeten omzetten in een WordPress-site. Vooral zonder inhoud te verliezen of overdreven opmaak te moeten doen op een pagina per pagina.
T gelukkig zijn er, zoals vaak het geval is met WordPress, een aantal manieren om dit probleem op te lossen. Ik heb hieronder een aantal opties verzameld.
Subscribe To Our Youtube Channel
Your Options for Converting a Static HTML site to a WordPress site
Hoe u ervoor kiest om uw statische HTML site om te zetten in een WordPress site zal ongetwijfeld afhangen van uw persoonlijke voorkeur, gewenste tijd/monetaire investering, en vaardigheidsniveau met code. U zult zelf moeten beslissen wat het beste voor u is, maar met de samenvattingen hieronder zou u snel moeten kunnen beslissen en meteen door moeten gaan naar de meest relevante informatie in dit bericht voor uw specifieke situatie.
Er zijn drie hoofdopties:
1. Handmatig een WordPress-thema maken op basis van uw huidige statische HTML-site.
Dit vereist dat u in uw code komt. U moet toegang krijgen tot uw huidige site directory via FTP en uw bestaande code gebruiken als uitgangspunt. Van daaruit moet u de nodige bestanden voor een WordPress thema maken en stukjes code kopiëren uit de WordPress codex. Dit is vrij eenvoudig en rechttoe rechtaan als je wat ervaring hebt met HTML, CSS, en een beetje PHP.
2. Installeer een kant-en-klaar thema en migreer gewoon uw inhoud.
Dit is waarschijnlijk de beste optie op het kruispunt van eenvoud en waarde. Ervan uitgaande dat u al hosting voor uw huidige website, hoeft u alleen maar geld uit te geven als u ervoor kiest om een premium thema te kopen. De plugin die we zullen gebruiken voor het importeren van inhoud is vrij beschikbaar in de officiële WordPress Plugin Repository.
3. Betalen om een HTML naar WordPress conversie service opnieuw uw site.
Dit is de makkelijkste oplossing, omdat het vereist niet dat u veel van iets te doen. Het zal echter niet veel doen om u vertrouwd te maken met WordPress en de kosten zullen variëren, afhankelijk van wie u kiest in te huren. Ik zal niet betrekking hebben op deze optie in de secties hieronder, want als dit de route die u geïnteresseerd bent in, kunt u gewoon doen een snelle zoektocht naar service providers en zij zullen zorgen voor de rest.
Voorbereiding voor HTML naar WordPress Conversion
Het maakt niet uit welke route u besluit te nemen hieronder, zijn er een paar dingen die je zult willen doen voordat duiken in.
De eerste is het kiezen van een hosting plan. U zult willen kijken over de opties die er zijn en beslissen over een pakket dat het beste past bij uw behoeften. Of misschien wilt u in plaats daarvan een lokale WordPress installatie maken? U kunt het altijd later migreren naar een hosting service.
Als u eenmaal hebt gekozen, moet u WordPress installeren en inloggen op WP Admin. Dit is het punt waarop onze twee mogelijke paden splitsen.
Handmatig converteren van uw statische HTML-site naar WordPress
Als uw doel is om niet alleen uw inhoud van uw statische HTML-site in WordPress te krijgen, maar ook uw huidige ontwerp te dupliceren, betekent dit dat u uw eigen aangepaste thema zult moeten maken. Gelukkig is dat niet zo eng als het in eerste instantie klinkt. U hoeft alleen maar een paar mappen en bestanden aan te maken, een beetje te kopiëren en te plakken, en het resultaat te uploaden.
U hebt een code editor nodig zoals Sublime of Notepad++ en toegang tot zowel de map van uw HTML site als de map van uw nieuwe WordPress installatie.
Stap 1: Maak een nieuwe themamap en de benodigde bestanden
Op uw bureaublad maakt u een nieuwe map aan waarin u uw themabestanden kunt plaatsen. Geef het een naam zoals u die wilt hebben voor uw thema.
Maak vervolgens een paar bestanden (die allemaal in uw nieuwe themamap komen) in uw code-editor. Doe er nog niets mee. Laat ze gewoon open voor verdere bewerking.
- Style.css
- Index.php
- header.php
- sidebar.php
- footer.php
Stap 2: Kopieer bestaande CSS naar nieuw stylesheet
Als u een ontwerp wilt dupliceren, betekent dit waarschijnlijk dat u op zijn minst wat CSS heeft die u wilt opslaan. Dus het eerste bestand dat u wilt bewerken is uw Style.css bestand.
Om te beginnen, voeg het volgende toe aan de bovenkant van uw bestand.
/*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.*/
Na dit gedeelte plakt u gewoon uw bestaande CSS eronder. Sla het bestand op en sluit het.
Stap 3: Scheid uw huidige HTML
Voordat we aan stap drie beginnen, wil ik u even laten weten hoe WordPress werkt. WordPress gebruikt PHP om gegevens uit de onderliggende database op te roepen en op te halen. Elk bestand dat we in deze kleine tutorial gebruiken, is ontworpen om WordPress te vertellen welk deel van de inhoud van uw site moet worden weergegeven en waar.
Dus als ik zeg dat we uw bestaande HTML gaan “versnipperen”, wat we in feite doen is simpelweg delen van uw bestaande code knippen en plakken in de verschillende bestanden die we zojuist hebben gemaakt, zodat WordPress weet waar ze moeten worden weergegeven.
Daar gaan we.
Opent u eerst het bestand index.html van uw huidige site. Markeer alles vanaf de bovenkant van het bestand tot aan de eerste div class=”main” tag. Kopieer en plak dit gedeelte in uw header.php bestand, sla op en sluit af.
Ten tweede, ga terug naar uw index.html bestand. Markeer het aside class=”sidebar” element en alles wat er in staat. Kopieer en plak dit gedeelte in uw sidebar.php bestand, sla op en sluit.
Derde, in uw index.html selecteer alles na uw sidebar en kopieer en plak het in uw footer.php bestand, sla op en sluit.
Ten slotte, in uw index.html bestand, selecteer alles wat over is (dit moet de hoofdinhoud sectie zijn) en plak het in uw index.php bestand. Sla op, maar sluit nog niet af.
U kunt nu wel uw index.html bestand sluiten en verder gaan met de laatste stappen. Bijna klaar!
Stap 4: Maak uw index.php bestand af
Om het index.php bestand van uw nieuwe thema af te maken, moet u ervoor zorgen dat het de andere secties kan oproepen (naast de hoofdinhoud) die zijn ondergebracht in de andere bestanden die u hebt gemaakt. Of met andere woorden, zet de elementen die we zojuist hebben “verknipt” weer bij elkaar.
Naast de top van uw index.php bestand, plaatst u de volgende regel php.
<?php get_header(); ?>
Daarna, helemaal onderaan uw index.php bestand, plaatst u deze regels php.
<?php get_sidebar(); ?><?php get_footer(); ?>
En tenslotte, moeten we toevoegen wat wordt genoemd The Loop. Dit is het primaire stukje php dat WordPress gebruikt om de inhoud van uw bericht weer te geven aan bezoekers. Dus de laatste stap in het maken van het bestand index.php van uw nieuwe thema is het toevoegen van de onderstaande code in de inhoudssectie.
<?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; ?>
Sla uw index.php op en sluit af. Uw thema is nu klaar! U hoeft het alleen nog maar naar uw WordPress website te uploaden.
Stap 5: Upload uw nieuwe thema
Nu u uw themabestanden hebt gemaakt en ze allemaal in uw nieuwe themamap hebt opgeslagen, moet u de map van uw nieuwe WordPress-installatie openen.
Plaats uw nieuwe themamap in /wp-content/themes/. Navigeer dan terug naar WP Admin > Uiterlijk > Thema’s en uw nieuw aangemaakte thema zou daar moeten verschijnen. Ga uw gang en activeer het!
Het enige wat u nu nog hoeft te doen is uw nieuwe WordPress website te vullen met de inhoud van uw oude site. Volg de onderstaande sectie (sla het deel over het gebruik van een kant-en-klaar thema over) om te zien hoe dat in zijn werk gaat.
Een kant-en-klaar WordPress Thema gebruiken en HTML inhoud importeren
Als de bovenstaande stappen u te intensief of tijdrovend lijken, wees dan gerust, er is een andere manier. In plaats van het ontwerp waar u nu toevallig mee werkt om te zetten in een WordPress thema, kunt u gebruik maken van een van de duizenden thema’s die beschikbaar zijn in de bredere WordPress marktplaats.
Er zijn gratis thema’s en er zijn premium thema’s. Alvorens te beslissen welke het beste voor u is, wilt u misschien eerst lezen welke thema’s zijn ontworpen om aan uw behoeften te voldoen en per thema categorie te bladeren hier bij Elegant Themes en elders.
Als u eenmaal een thema hebt gekozen dat u bevalt (en u hebt het gezipte bestandspakket gedownload), gaat u terug naar WP Admin > Uiterlijk > Thema’s > Nieuw toevoegen en installeert/activeert u uw nieuwe WordPress thema.
Als dit is gebeurd, hebt u een nieuwe WordPress website en een nieuw thema, maar verder weinig. Wanneer u een voorbeeld van uw site bekijkt, zal deze leeg zijn van inhoud en er waarschijnlijk saai uitzien. Dat is niet erg, want nu gaan we de inhoud van je oude site importeren.
In WP Admin ga je naar Plugins > Nieuwe toevoegen en zoek je naar een plugin genaamd HTML Import 2 door Stephanie Leary. Zodra deze plugin is geïnstalleerd en geactiveerd, volgt u de handige gebruikershandleiding om uw hele map met HTML-pagina’s te importeren. Compleet met afbeeldingen!
Hierna heeft u al uw oude inhoud op WordPress staan en opgemaakt volgens uw nieuwe thema. Of, als u hierboven uw eigen thema heeft gemaakt, zou uw site er ongeveer hetzelfde uit moeten zien als voorheen – alleen dan op WordPress.
In Conclusie
Als u dit bericht heeft gebruikt als een gids voor het migreren van uw website naar WordPress, dan bent u zojuist lid geworden van een van de grootste open source gemeenschappen in de wereld. Welkom! Het is een leuke plek met veel ontwikkelaars, ontwerpers, bloggers, doe-het-zelvers, en nog veel meer-allemaal aan het bouwen, spelen en creëren met WordPress en WordPress thema’s/plugins.
Als u “het WordPress-virus te pakken hebt”, staat de officiële WordPress.org website boordevol nuttige thema’s, plugins, en andere bronnen. Als u uw themabestanden verder wilt verfijnen, kunt u de Codex verkennen voor schijnbaar eindeloze tips, trucs en variaties.