<

div class=”entry atype”>Si vous avez commencé avec un site Web HTML (+ CSS), vous n’avez pas à tout jeter lorsque vous passez à WordPress. Vous pouvez convertir votre HTML en WordPress et exécuter votre site Web (maintenant plus puissant) sur la plate-forme WordPress dynamique.

Ou peut-être que ce n’est pas le cas. Vous vous demandez peut-être simplement comment convertir la conception HTML d’un client en un thème WordPress à part entière. Ou peut-être aimeriez-vous apprendre la programmation de base WordPress (+ PHP) du côté HTML plus familier.

Quelle que soit la raison pour laquelle vous êtes ici aujourd’hui, ce tutoriel WordPress vous présentera les bases de la création d’un thème WordPress à partir de HTML. Vous pouvez suivre ce guide pour créer votre thème à partir de zéro ou vous pouvez vous rendre sur Github et télécharger le Themelocal thème de démarrage qui fournit un «canevas vide» pour créer votre thème avec tous les fichiers modèles et le code nécessaires pour commencer. Donc si vous faites partie de ces personnes qui apprennent plutôt en lisant le code puis téléchargez le thème de démarrage, ignorez le guide et voyez comment les choses fonctionnent… Sinon, procurez-vous un éditeur de code (j’utilise et recommande Bloc-notes ++, ou SublimeText) et un navigateur prêt, puis suivez ce guide simple jusqu’à la fin.

Nommer votre thème WordPress

Tout d’abord, nous devons donner à votre thème un nom unique, ce qui n’est pas nécessaire si vous créez un thème pour votre site Web uniquement. Quoi qu’il en soit, nous devons nommer votre thème pour le rendre facilement identifiable lors de l’installation.

Hypothèses générales à ce stade:

  • Vous avez votre index.html et votre feuille de style CSS prêts.
  • Vous avez une installation WordPress fonctionnelle avec au moins un thème, par exemple Twenty Fourteen
  • Vous avez déjà créé un dossier de thème dans lequel vous enregistrerez votre nouveau thème WordPress 🙂

Revenons à nommer votre thème WordPress. Ouvrez votre éditeur de code et copiez-collez le contenu de votre feuille de style dans un nouveau fichier et enregistrez-le sous style.css dans votre dossier de thème. Ajoutez les informations suivantes tout en haut de la style.css nouvellement créé:

/*
Theme Name: Your theme's name
Theme URI: Your theme's URL
Description: A brief description of your theme
Version: 1.0 or any other version you want
Author: Your name or WordPress.org's username
Author URI: Your web address
Tags: Tags to locate your theme in the WordPress theme repository
*/

Ne laissez pas les balises de commentaire (/ *… * /). Enregistrez les modifications. Cette information indique à WordPress le nom de votre thème, l’auteur et des éléments complémentaires comme celui-ci. La partie importante est le nom du thème, qui vous permet de choisir et d’activer votre thème via le tableau de bord WP.

Diviser votre modèle HTML en fichiers PHP

Ce didacticiel suppose en outre que votre modèle HTML est disposé de gauche à droite: en-tête, contenu, barre latérale, pied de page. Si vous avez un design différent, vous devrez peut-être jouer un peu avec le code. C’est amusant et super facile.

L’étape suivante consiste à créer quatre fichiers PHP. À l’aide de votre éditeur de code, créez index.php, header.php, sidebar.php et footer.php, et enregistrez-les dans votre dossier de thème. Tous les fichiers sont vides à ce stade, ne vous attendez donc pas à ce qu’ils fassent quoi que ce soit. À des fins d’illustration, j’utilise les fichiers index.html et feuille de style CSS suivants:

INDEX.HTML

<!DOCTYPE html>
    <head>
        <meta charset="UTF-8">
        <title>How To Convert HTML Template to WordPress Theme - Themelocal</title>
        <link rel="stylesheet" type="text/css" media="all" href="style.css"/>
    </head>
    <body>
        <div id="wrap">
            <header class="header">
                <p>This is header section. Put your logo and other details here.</p>
            </header><!-- .header -->
            <div class="content">
                <p>This is the main content area.</p>
            </div><!-- .content -->
            <div class="sidebar">
                <p>This is the side bar</p>
            </div><!-- .sidebar -->
            <footer class="footer">
                <p>And this is the footer.</p>
            </footer><!-- .footer -->
        </div><!-- #wrap -->
    </body>
</html>

FEUILLE DE STYLE CSS

#wrap{margin: 0 auto; width:95%; margin-top:-10px; height:100%;}
.header{width:99.8%; border:1px solid #999;height:135px;}
.content{width:70%; border:1px solid #999;margin-top:5px;}
.sidebar{float:right; margin-top:-54px;width:29%; border:1px solid #999;}
.footer{width:99.8%;border:1px solid #999;margin-top:10px;}

Vous pouvez récupérer les deux codes si vous n’avez rien avec quoi travailler. Copiez-collez-les simplement dans votre éditeur de code, enregistrez-les, créez les quatre fichiers PHP que nous venons de mentionner et préparez-vous pour la partie suivante. Ouvrez votre nouvellement créé (et vide) header.php. Connectez-vous à votre installation WordPress existante, accédez à Apparence – >> Editeur et ouvrir header.php. Copiez tout le code entre les balises et collez-le dans votre fichier header.php. Ce qui suit est le code que j’ai obtenu du fichier header.php dans le thème Twenty Fourteen:

<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width">
    <title><?php wp_title( '|', true, 'right' ); ?></title>
    <link rel="profile" href="http://gmpg.org/xfn/11">
    <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
    <!--[if lt IE 9]>
    <script src="<?php echo get_template_directory_uri(); ?>/js/html5.js"></script>
    <![endif]-->
    <?php wp_head(); ?>
</head>

Puis ouvrez votre index.html et copiez le code d’en-tête (c’est-à-dire le code de la section

) dans votre header.php juste en dessous des balises comme indiqué ci-dessous:

<html>
    <head>
        <meta charset="<?php bloginfo( 'charset' ); ?>">
        <meta name="viewport" content="width=device-width">
        <title><?php wp_title( '|', true, 'right' ); ?></title>
        <link rel="profile" href="http://gmpg.org/xfn/11">
        <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
        <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" />
        <!--[if lt IE 9]>
        <script src="<?php echo get_template_directory_uri(); ?>/js/html5.js"></script>
        <![endif]-->
        <?php wp_head(); ?>
    </head>
    <body>
        <header class="header">
        <p>This is header section. Put your logo and other details here.</p>
    </header>

Puis ajouter…

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" />

… N’importe où entre les balises dans le fichier header.php pour lier votre feuille de style. N’oubliez pas également de mettre les balises d’ouverture et dans le header.php comme indiqué ci-dessus. Enregistrer toutes les modifications.

Copiez la deuxième section (c’est-à-dire

de index.html vers le index.php nouvellement créé , et ajouter…

<?php get_header(); ?>

… Tout en haut et…

<?php get_sidebar(); ?>
<?php get_footer(); ?>

… Jusqu’au fond absolu. Ces trois lignes récupèrent les fichiers header.php, sidebar.php et footer.php (dans cet ordre) et les affichent dans l’index.php, qui rassemble votre code. Enregistrer toutes les modifications. À ce stade, votre fichier index.php devrait ressembler à:

<?php get_header(); ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Copiez ensuite le contenu des sections de la barre latérale et du pied de page de votre index.html vers sidebar.php et footer.php respectivement.

Ajout de messages

Votre modèle HTML est sur le point de se transformer en un thème WordPress. Nous devons juste ajouter vos messages. Si vous avez des articles sur votre blog, comment les afficheriez-vous dans votre thème personnalisé «HTML vers WordPress»? Vous utilisez un type spécial de fonction PHP connu sous le nom de Boucle. La boucle n’est qu’un morceau de code spécialisé qui affiche vos publications et vos commentaires où que vous les placiez.

Maintenant, pour afficher vos messages dans le section de contenu du modèle index.php, copiez et collez le code suivant entre le

et

balises comme indiqué ci-dessous:

<div class="content">
    <?php if ( have_posts() ) : ?>
        <?php while ( have_posts() ) : the_post(); ?>
            <div id="post-<?php the_ID(); ?>" <?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><!--.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><!--. entry-->
                <footer class="post-footer">
                    <div class="comments"><?php comments_popup_link( 'Leave a Comment', '1 Comment', '% Comments' ); ?></div>
                </footer><!--.post-footer-->
            </div><!-- .post-->
        <?php endwhile; /* rewind or continue if all posts have been fetched */ ?>
            <nav class="navigation index">
                <div class="alignleft"><?php next_posts_link( 'Older Entries' ); ?></div>
                <div class="alignright"><?php previous_posts_link( 'Newer Entries' ); ?></div>
            </nav><!--.navigation-->
        <?php else : ?>
    <?php endif; ?>
</div><!--.content-->

Cela prendra soin de vos messages. Facile comme ABC. À ce stade (et en utilisant les exemples de fichiers fournis dans ce didacticiel), votre header.php devrait ressembler à ceci:

<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width">
    <title><?php wp_title( '|', true, 'right' ); ?></title>
    <link rel="profile" href="http://gmpg.org/xfn/11">
    <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
    <!--[if lt IE 9]>
    <script src="<?php echo get_template_directory_uri(); ?>/js/html5.js"></script>
    <![endif]-->
    <?php wp_head(); ?>
</head>

Votre sidebar.php devrait ressembler à ceci:

<?php dynamic_sidebar( 'sidebar' ); ?>

Votre footer.php devrait ressembler à ceci:

<footer class="footer">
    <p>And this is the footer</p>
</footer>
<?php wp_footer(); // Crucial core hook! ?>
</body>
</html>

Avez-vous remarqué les balises de fermeture et dans le pied de page? N’oubliez pas de les inclure également.

Votre style.css devrait ressembler à ceci:

/*
Theme Name: Creating WordPress Theme from HTML
Theme URI: http://wpexplorer.com
Description: This theme shows you how to create WordPress themes from HTML
Version: 1.0
Author: Freddy for @Themelocal
Author URI: http://Themelocal.com/create-wordpress-theme-html-1/
Tags: wpexplorer, custom theme, HTML to WordPress, create WordPress theme
*/
body {
    font-family: arial, helvetica, verdana;
    font-size: 0.8em;
    width: 100%;
    height: 100%;
}

.header {
    background-color: #1be;
    margin-left: 14%;
    top: 0;
    border-width: 0.1em;
    border-color: #999;
    border-style: solid;
    width: 72%;
    height: 250px;
}

.content {
    background-color: #999;
    margin-left: 14%;
    margin-top: 5px;
    float: left;
    width: 46%;
    border-width: 0.1em;
    border-color: #999;
    border-style: solid;
}

.sidebar {
    background-color: #1d5;
    margin-right: 14%;
    margin-top: 5px;
    float: right;
    border-width: 0.1em;
    border-color: #999;
    border-style: solid;
    top: 180px;
    width: 23%;
}

.footer {
    background-color: red;
    margin-left: 14%;
    float: left;
    margin-top: 5px;
    width: 72%;
    height: 50px;
    border-width: 0.1em;
    border-color: #999;
    border-style: solid;
}

Et votre index.php devrait ressembler à:

<?php get_header(); ?>
<div class="content">
    <?php if ( have_posts() ) : ?>
        <?php while ( have_posts() ) : the_post(); ?>
            <div id="post-<?php the_ID(); ?>" <?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><!--.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><!--. entry-->
                <footer class="post-footer">
                    <div class="comments"><?php comments_popup_link( 'Leave a Comment', '1 Comment', '% Comments' ); ?></div>
                </footer><!--.post-footer-->
            </div><!-- .post-->
        <?php endwhile; /* rewind or continue if all posts have been fetched */ ?>
            <nav class="navigation index">
                <div class="alignleft"><?php next_posts_link( 'Older Entries' ); ?></div>
                <div class="alignright"><?php previous_posts_link( 'Newer Entries' ); ?></div>
            </nav><!--.navigation-->
        <?php else : ?>
    <?php endif; ?>
</div><!--.content-->
<?php get_sidebar(); ?>
<?php wp_footer(); // Crucial footer hook! ?>
<?php get_footer(); ?>

Encore une fois – ceci est basé sur un site Web de gauche à droite avec un en-tête, un contenu, une barre latérale et une disposition de pied de page. Suivez-vous? Tous les cinq fichiers doivent être enregistrés dans votre dossier de thème. Nommez le dossier comme vous le souhaitez et compressez-le dans une archive ZIP à l’aide de WinRar ou d’un programme équivalent. Téléchargez votre nouveau thème sur votre installation WordPress, activez-le et voyez votre thème converti en action!

C’était facile, non? Vous pouvez styliser votre thème comme vous le souhaitez, mais la plupart des fonctionnalités que nous aimons dans WordPress sont toujours inactives depuis… ce tutoriel couvre les bases de la conversion de modèles HTML en WordPress et devrait être d’une grande valeur pour vous en tant que débutant. Dans le prochain tutoriel, nous allons prendre les choses un cran plus haut et jouer avec d’autres aspects de la programmation WordPress (tels que Fichiers de modèle et Template Tags) qui vous permettront de transformer vos modèles HTML comme vous le souhaitez. Restez à l’écoute!

Share: