HTML5 thema omzetten naar Wordpress

**Marika Hartog** · 30-10-2015, 12:50

Hallo,

Ik heb een html 5 template die ik graag wil omzetten naar wordpress. Ik ben minder handig dan ik dacht met html5 en hoe of wat. Ik heb het zelf geprobeerd, maar het wordt een grote puinhoop. Kan iemand mij daarmee helpen of tips geven waar ik een goede uitleg kan vinden?

Of hoe je een cms systeem in de html5 website kunt krijgen? Er is zoveel dat ik niet precies weet wat ik moet gebruiken.

Het html thema staat te draaien nu op www.baroque-horses.com

Alvast bedankt!

**Patrick Groot** · 30-10-2015, 12:56

Hallo Marika,

Je zou simpel gewoon wat thema's kunnen downloaden en kunnen bekijken hoe die zijn opgebouwd.

Ook is bijna alles wat je moet weten te vinden in de codex op wordpress.org.

En anders google.nl -> Wordpress tutorials waarin vaak de basis word behandeld voor het bouwen van een simpele thema en of plugin.

**Marika Hartog** · 30-10-2015, 13:00

Dank je voor je antwoord.

Dat weet ik wel, maar ik wil graag weten hoe het html5 thema naar Wordpress thema wordt omgezet.

Ik heb het via deze link geprobeerd, maar bij de scheiding van de index.php naar een header.php en een footer.php gaat het mij een beetje duizelen... Het is meer dat ik niet precies weet welke info ik uit de index.php moet halen voor die files.

http://www.lingulo.com/tutorials/php/create-wordpress-template-html5-responsive-website

**Patrick Groot** · 30-10-2015, 13:20

Hallo Marika,

Ik weet niet of ik je hiermee op weg kan helpen maar ik probeer het toch.

Thema kan uit ontzettend veel bestanden bestaan maar laten we het voor nu even simpel houden.

Je theme dient te bestaan uit minstens een index.php, footer.php, header.php en een functions.php en natuurlijk je style.css niet te vergeten!

header.php

PHP Code:


!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" />
<title><?php bloginfo('name'); ?> <?php wp_title(); ?></title>
<!-- EXTRA SCRIPTS -->
<?php wp_head(); ?>
<!-- EXTRA SCRIPTS --> 
</head>
<body>

Dan hier je code voor de header gedeelte van de website.
Code hieronder laad dan bijv. je menu.

<nav><?php wp_nav_menu( array( 'theme_location' => 'hoofdmenu' ) ); ?></nav>

index.php

PHP Code:


<?php get_header();?>
<!-- header -->

content html plaats je hier

Code hieronder laat je posts/content

<div class="content">

<?php if(have_posts()) : while(have_posts()) : the_post(); ?>        
<?php the_content(''); ?>            
<?php endwhile; ?>        
<?php else : ?>        
<p>Pagina niet gevonden.</p>
<?php endif; ?>

</div>

<!-- footer -->
<?php get_footer();?>

footer.php

PHP Code:



Hier je footer html

<?php wp_footer(); ?>
</body></html>

functions.php

PHP Code:


<?php
/* MENU INSTAL */

add_action( 'init', 'register_my_menus' );

function register_my_menus() {    
register_nav_menus(        
array(        'hoofdmenu' => __( 'Hoofdmenu' )
)    
);
}
?>

style.css

Code:

/*
Theme Name: NAAM
Author: Marika
Author URI: https://marika.nl/
Version: 1.0
Text Domain: naam
*/

Jouw css hier

Dan heb je natuurlijk nog veel meer nodig indien je alle functionaliteit wilt zoals in de demo van alle html bestanden.

**Marika Hartog** · 31-10-2015, 09:38

Dank je wel, ik ga ermee verder

HTML5 thema omzetten naar Wordpress