Démarrer votre site WordPress en quelques minutes

Les notions de base pour créer un thème WordPress

Dernière mise à jour le 20 décembre 2021 Publié le 20 décembre 2017
créer un thème WordPress

Nous allons ensemble décortiquer les étapes pour créer un thème WordPress. Bien entendu, il ne s’agit pas d’une formation complète étant donné l’ampleur de WordPress, mais cet article saura vous guider sur des bases solides afin de démarrer votre projet du bon pied. Vous pourrez poursuivre votre éducation si vous souhaitez développer des thèmes WordPress personnalisés et obtenir davantage d’information sur des fonctionnalités avancées.

Ce tutoriel s’adresse aux personnes qui ont certaines bases en CSS et en HTML. Si j’étais tombé sur un article du genre lorsque j’ai terminé ma formation d’intégrateur multimédia au cégep il y a plus de 13 ans, ça m’aurait probablement sauvé bien du temps!

Ce que nous accomplirons dans ce tutoriel:
  • Installer WordPress sur votre environnement (MAMP ou XAMPP)
  • Décortiquer comment débuter la création d’un thème WordPress
  • Utiliser une page HTML existante et convertir celle-ci en thème WordPress

Pourquoi d’abord créer un thème WordPress et utiliser cette plateforme?

WordPress a été conçu en 2003 comme plateforme de blog. Cela a beaucoup changé! On parle maintenant de la console de gestion de contenu la plus populaire pour la création de sites Internet, et ce, par une très forte majorité!

La plateforme WordPress s’adresse à n’importe qui désirant développer un site web qui évoluera dans le temps de par l’ajout de nouveaux contenus, de nouvelles fonctionnalités, de nouveaux articles et/ou de nouvelles sections. La simplicité et la versatilité de la plateforme (grâce aux plugins) sont ce qui la rend aussi autant populaire.

Installer WordPress sur un environnement local ou sur un serveur en ligne

Que vous soyez sur Mac ou sur Windows, développer un site WordPress sur un environnement local a deux avantages majeurs. Le premier est que vous n’aurez pas à « uploader » chacun de vos fichiers PHP, JS, CSS en ligne lorsque vous effectuerez des modifications. Le deuxième est au niveau du temps de chargement. Avec un environnement local, c’est presque instantané.

Débuter la création de votre thème WordPress

Dans le processus de développement d’un thème ou de modification d’un site WordPress, sachez que vos modifications, votre programmation et vos ajouts de fichiers se feront à l’intérieur du dossier « wp-content » situé à la racine de votre dossier d’installation. Je vous suggère fortement de ne pas toucher aux fichiers à l’extérieur de ce dossier, puisqu’il s’agit des fichiers core de WordPress.

Je vous montre ici comment créer la base de votre thème. Si par la suite vous souhaitez approfondir vos connaissances, le Codex de WordPress et StackOverflow sont d’excellentes ressources en ligne. Aussi, vous remarquerez qu’entrer presque n’importe quelles questions WordPress dans Google apportent la réponse dans 99 % des cas.

Commençons par nous diriger dans le dossier des thèmes situés dans « wp-content -> themes ». Vous y trouverez les thèmes par défaut Twentyfifteen, Twentysixteen, Twentyseventeen. Créez-y un nouveau dossier du nom de votre thème. Seulement 2 fichiers sont nécessaires pour que WordPress reconnaisse votre nouveau thème : style.css et index.php.

CSS – style.css

Dans votre nouveau dossier, créez un fichier appelé « style.css ». Ajoutez-y les commentaires suivants :

/*
Theme Name: WP Pour Les Nuls
Author: Louis-Philippe Dea
Description: Template WordPress d'exemple pour un article de WP Pour les Nuls
Version: 0.0.1
Tags: bootstrap
*/

Modifiez bien sûr le nom du thème, le nom de l’auteur et la description. Le reste est facultatif.
Vous pourrez ensuite y ajouter tous les styles, classes et IDs désirés pour personnaliser les visuels de votre site. À noter que plusieurs thèmes professionnels séparent leurs feuilles de styles CSS en plusieurs fichiers différents classés dans un dossier à part. Les CSS pourraient être séparés comme ceci : « responsive.css, shortcodes.css, woocommerce.css, stylesheet.css, etc. ».

Index – index.php

Voici un fichier de base pour vous aider à démarrer votre thème. Vous verrez que j’y ai ajouté la feuille de style de Bootstrap avec son adresse en CDN, son fichier JS (min) en bas de la page ainsi que le fichier jQuery.

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Exemple de thème WordPress</title>
<!-- CSS de Bootstrap -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<!-- Ajout d'une nouvelle feuille de style qui sera spécifique à notre thème -->
<link href="<?php bloginfo('template_directory');?>/blog.css" rel="stylesheet">
<!-- HTML5 shim et Respond.js pour supporter les éléments HTML5 pour les versions plus anciennes que Internet Explorer 9 -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="header>
<div class="container">
<nav id="navigation-principale" role="navigation">
<a class="active" href="#">Accueil</a>
<a href="#">Services</a>
<a href="#">À Propos</a>
<a href="#">Contact</a>
</nav>
</div>
</div>
<div class="container">
<div class="blog-header">
<h1 class="blog-title">Exemple de thème WordPress</h1>
<p class="lead blog-description">Création d'un thème WordPress à titre de tutoriel sur WP Pour Les Nuls.</p>
</div>
<div class="row">
<div class="col-sm-8 blog-main">
<div class="blog-post">
<h2 class="blog-post-title">Un article de blog</h2>
<p class="blog-post-meta">20 décembre 2017 par <a href="#">Louis-Philippe</a></p>
<p>Cum sociis natoque penatibus et magnis <a href="#">dis parturient montes</a>, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum.</p>
</div><!-- /.blog-post -->
</div><!-- /.blog-main -->
<div class="col-sm-3 col-sm-offset-1 blog-sidebar">
<div class="sidebar-module sidebar-module-inset">
<h4>À Propos</h4>
<p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
</div>
</div><!-- /.blog-sidebar -->
</div><!-- /.row -->
</div><!-- /.container -->
<footer class="blog-footer">
<p>Par <a href="https://www.wppourlesnuls.com/">WP Pour les Nuls</a>.</p>
</footer>
<!-- JavaScript de Bootstrap et jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>

Dans votre console de gestion WordPress, cliquez sur « Apparence -> Themes ». Vous y verrez votre nouveau thème et pourrez ainsi l’activer.

créer un thème WordPress

Une façon plus propre de charger « blog.css » serait plutôt d’intégrer celui-ci via un nouveau fichier qui s’appellerait « functions.php ». Ce fichier sert à ajouter de nouvelles fonctionnalités et à en modifier certaines autres déjà présentes par défaut dans WordPress. Je retirerais donc les lignes suivantes dans le fichier index.php :

<!-- CSS de Bootstrap -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">

Et j’ajouterais ceci dans le fichier functions.php :

<?php
/*** Ajouter un script ou un fichier CSS de la bonne façon */
function wpdocs_theme_name_scripts() {
wp_register_style('main-style', get_template_directory_uri().'/blog.css', array(), true);
wp_enqueue_style('main-style');
wp_register_style('bootstrap-style', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css', array(), true);
wp_enqueue_style('bootstrap-style');
}
add_action( 'wp_enqueue_scripts', 'wpdocs_theme_name_scripts' );
?>

P.S. N’ajoutez pas les balises d’ouverture <?php avant ce code si celle-ci est déjà présente. Même chose pour la balise de fermeture ?>.

Référence : wp_enqueue_style() sur WordPress Codex

Le saviez-vous? Les plugins WordPress et le fait d’ajouter des fonctions personnalisées dans le fichier functions.php font pratiquement la même chose. La seule différence est que lorsque votre code est ajouté dans le fichier functions.php, celui-ci est appliqué dès l’activation de votre thème.

Séparer votre page selon la structure de pages WordPress

Pour l’instant dans votre thème, tout le code se trouve dans votre fichier index.php. Nous voulons que notre en-tête (header), notre pied-de-page (footer) et notre barre latérale (sidebar) se trouvent sur toutes les pages du site. C’est pourquoi nous diviserons notre fichier index.php en 4 fichiers distincts : header.php, footer.php, sidebar.php et content.php.

Header – header.php

Dans index.php, copiez tout le code à partir de <!DOCTYPE html> jusqu’au titre du blog dans un nouveau fichier header.php. Nous allons aussi y ajouter le code <?php wp_head(); ?>juste avant la fin de la balise </head>. Cette fonction permet à des plugins et à différentes fonctions d’ajouter des éléments à cet endroit précis. Voici le code à ajouter dans votre header.php :

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Exemple de thème WordPress</title>
<!-- Ajout d'une nouvelle feuille de style qui sera spécifique à notre thème -->
<link href="<?php bloginfo('template_directory');?>/blog.css" rel="stylesheet">
<!-- HTML5 shim et Respond.js pour supporter les éléments HTML5 pour Internet Explorer 8 -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<?php wp_head(); ?>
</head>
<body>
<div class="header">
<div class="container">
<nav id="navigation-principale" role="navigation">
<a class="active" href="#">Accueil</a>
<a href="#">Services</a>
<a href="#">À Propos</a>
<a href="#">Contact</a>
</nav>
</div>
</div>
<div class="container">
<div class="blog-header">
<h1 class="blog-title">Exemple de thème WordPress</h1>
<p class="lead blog-description">Création d'un thème WordPress à titre de tutoriel sur WP Pour Les Nuls.</p>
</div>

* Vous remarquerez que nous ne fermons pas la balise <div class="container"> puisque nous la fermerons dans notre fichier footer.php.

Footer – footer.php

Pour le fichier footer.php, nous ajouterons la ligne de code <?php wp_footer() ?> juste avant la fermeture de la balise </body>.

</div> <!-- /.container -->
<footer class="blog-footer">
<p>Par <a href="https://www.wppourlesnuls.com/">WP Pour les Nuls</a>.</p>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<?php wp_footer(); ?>
</body>
</html>

Sidebar – sidebar.php

La plupart des blogs et des sites Internet possèdent une barre latérale pour y afficher différents types de contenus tels que des archives, des catégories d’articles, un module de recherche, des publicités, etc. Voici quoi ajouter pour le moment dans votre fichier sidebar.php.

<div class="col-sm-3 col-sm-offset-1 blog-sidebar">
<div class="sidebar-module sidebar-module-inset">
<h4>À Propos</h4>
<p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
</div>
</div><!-- /.blog-sidebar -->

Zone de contenu – content.php

Content.php contiendra tout le contenu principal de vos articles.

<div class="blog-post">
<h2 class="blog-post-title">Un article de blog</h2>
<p class="blog-post-meta">20 décembre 2017 par <a href="#">Louis-Philippe</a></p>
<p>Cum sociis natoque penatibus et magnis <a href="#">dis parturient montes</a>, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum.</p>
</div><!-- /.blog-post -->

Index.php

Votre page index.php devrait maintenant être plutôt vide! Nous allons y ajouter un peu de code pour que la page puisse aller chercher le contenu de nos différents fichiers header.php, content.php, sidebar.php et footer.php.

<?php get_header(); ?>
<div class="row">
<div class="col-sm-8 blog-main">
<?php get_template_part( 'content', get_post_format() ); ?>
</div> <!-- /.blog-main -->
<?php get_sidebar(); ?>
</div> <!-- /.row -->
<?php get_footer(); ?>

Si vous rechargez votre page d’accueil, votre site devrait s’y afficher au complet avec les contenus des fichiers php que nous venons de créer.

tutoriel thème wordpress

Paramètres généraux

Avant de commencer à développer nos pages d’articles et nos pages de contenu, nous devons définir quelques paramètres de notre site WordPress. Dans notre fichier header.php, nous pouvons voir que le titre de notre site dans la balise <title>, notre titre dans la balise <h1> et la description de notre site sont (comme on appelle dans le milieu) « hardcodés » dans le fichier. Donc rien de dynamique. Nous souhaitons que ceux-ci soient modifiables dans notre console de gestion de contenu. Repérez donc ceci dans header.php :

<div class="blog-header">
<h1 class="blog-title">Exemple de thème WordPress</h1>
<p class="lead blog-description">Création d'un thème WordPress à titre de tutoriel sur WP Pour Les Nuls.</p>
</div>

Et remplacez-le par ceci :

<div class="blog-header">
<h1 class="blog-title"><a href="<?php echo get_bloginfo( 'wpurl' );?>"><?php echo get_bloginfo( 'name' ); ?></a></h1>
<p class="lead blog-description"><?php echo get_bloginfo( 'description' ); ?></p>
</div>

La ligne <a href="<?php echo get_bloginfo( 'wpurl' );?>"> ajouter un lien vers la page d’accueil de votre site web. Vous pourrez modifier votre titre et votre description dans votre console d’administration sous Réglages -> Général.

La loop WordPress

Nous allons ajouter du contenu dans nos pages et dans nos articles grâce à la loop WordPress. Il s’agit de la fonction la plus importante de WordPress puisque presque tous vos contenus textes de votre console seront appelés par l’entremise de celle-ci.

Dans la console, si vous cliquez sur Articles, vous verrez un article par défaut « Bonjour tout le monde ! » que WordPress a ajouté lors de notre installation. Notre but est maintenant d’afficher le contenu de cet article dans une page.
Pour y parvenir, nous allons modifier le contenu de notre fichier index.php par ceci :

<?php get_header(); ?>
<div class="row">
<div class="col-sm-8 blog-main">
<?php
if ( have_posts() ) : while ( have_posts() ) : the_post();
get_template_part( 'content', get_post_format() );
endwhile; endif;
?>
</div> <!-- /.blog-main -->
<?php get_sidebar(); ?>
</div> <!-- /.row -->
<?php get_footer(); ?>

La loop indique à WordPress que SI il y a des articles, JUSQU’À CE QU‘il y ait des articles, AFFICHE les articles. Tout ce qu’il y a dans cette boucle sera alors répété pour tous les articles du blog. Dans notre cas, nous lui avons dit d’aller chercher le contenu du fichier content.php. Nous allons donc remplacer le contenu de content.php par ceci :

<div class="blog-post">
<h2 class="blog-post-title"><?php the_title(); ?></h2>
<p class="blog-post-meta"><?php the_date(); ?> par <a href="#"><?php the_author(); ?></a></p>
<?php the_content(); ?>
</div><!-- /.blog-post -->

C’est super simple, nous lui indiquons d’afficher le titre, la date, l’auteur et le contenu de l’article.

Rendre la barre latérale dynamique

Pour notre sidebar, nous pourrions y ajouter un bloc À Propos qui affichera la description de l’auteur (dans la section « Utilisateurs » de votre WordPress en cliquant sur l’auteur désiré) et une section Archives. Modifiez le code de la sidebar.php par ceci :

<div class="col-sm-3 col-sm-offset-1 blog-sidebar">
<div class="sidebar-module sidebar-module-inset">
<h4>À Propos</h4>
<p><?php the_author_meta( 'description' ); ?> </p>
<h4>Archives</h4>
<ol class="list-unstyled">
<?php wp_get_archives( 'type=monthly' ); ?>
</ol>
</div>
</div><!-- /.blog-sidebar -->

Votre site devrait maintenant ressembler à ceci :

exemple-theme-wp-2

Menu

Nous allons rendre la navigation du thème WordPress dynamique. Nous allons utiliser le module de « Menus » dans votre panneau WordPress, mais par contre, celui-ci n’est pas disponible par défaut dans votre console. Pour le rendre accessible, ajoutez le code ci-dessous dans votre fichier functions.php :

<?php
register_nav_menus( array(
'menu-principal' => 'Menu principal'
) );
?>

Rendez-vous ensuite dans votre CMS sous Apparence -> Menus. Créez-y votre menu et associez celui-ci au « Menu principal ».

créer un menu dans WordPress

Modifiez ensuite les lignes suivantes dans votre fichier header.php pour afficher ce menu à votre site :

<div class="header">
<div class="container">
<nav id="navigation-principale" role="navigation">
<?php wp_nav_menu( array( 'theme_location' => 'menu-principal' ) ); ?>
</nav>
</div>
</div>

Pour styliser le menu, nous pourrions ajouter quelques propriétés CSS assez simples dans votre fichier blog.css :

.header {
background: #377bb5;
}
#navigation-principale li {
position: relative;
display: inline-block;
padding: 10px;
font-weight: 500;
}
#navigation-principale li a {
color: #fff;
}

navigation

Page – page.php

J’aimerais finalement que l’interface de mes pages soit légèrement différente de la mise en page de mes articles de blog. Je me créerai donc un nouveau fichier page.php, j’y retirerai la barre latérale et indiquerai à mon contenu de prendre toute la largeur de la page. Pour ce faire, je vais ajouter ma loop dans une balise <div class="col-sm-12"></div>. Voici le code à ajouter dans un nouveau fichier page.php :

<?php get_header(); ?>
<div class="row">
<div class="col-sm-12">
<?php
if ( have_posts() ) : while ( have_posts() ) : the_post();
get_template_part( 'content', get_post_format() );
endwhile; endif;
?>
</div> <!-- /.col -->
</div> <!-- /.row -->
<?php get_footer(); ?>

Voici le résultat final, sans CSS bien sûr!

exemple-mise-en-page

Conclusion

Ce tutoriel n’a fait qu’effleurer le sujet de la création d’un thème WordPress. Il y a tant à apprendre avec cette console de gestion de contenu! Merci de me mentionner dans les commentaires si une erreur s’est glissée malencontreusement dans le code. Je corrigerai celle-ci le plus rapidement possible!

Si jamais vous souhaitez apprendre comment transférer la version locale de votre site web sur un serveur en ligne, je vous invite à suivre notre tutoriel sur la migration d’un site WordPress qui s’applique aussi bien à une version locale qu’à une version en ligne!

Source de l’image : WPBegginer

Commentaires

  1. Ribeyrolles Fabienne a écrit

    Bonjour Louis Philippe,
    Je dois être plus nulle que nulle car je n’y arrive pas. J’ai enregistré WP en distant chez OVH . je voulais que ce site une fois fait remplace celui qui est en ligne et qui est un peu obsolète. Pour cela, j’ai crée un « sous-domaine » de mon site ribeyrolles en l’appelant ribeyrolword et en créant une nouvelle BDD. Comme les Htaccess sont différents, pour pouvoir utiliser mon site WP, j’ai dû les changer et ça a tout décalé les pages de mon site qui émanaient de leur BDD.
    Je n’ai pas trouvé de thèmes qui m’intéressaient parmi les thèmes embarqués et j’ai payé pour avoir « Elegant Thème  » et en particulier « Divi » qui a l’air de correspondre à ce que je recherche. Au moment de télécharger, on me demande de choisr entre « Themes Package » ou « PSD Files » Que faire? Ensuite, où dois-je inclure ce thème et comment pour le voir apparaître sue mon site test? je suis perdue!! Pourriez-vous m’aider SVP? Merci d’avance

  2. Louis-Philippe Dea a écrit

    Bonjour,
    Vous devez choisir le « Themes package ». L’option PSD ne vous fournira que le visuel des thèmes non intégré en thème WordPress. Ensuite, il faut inclure le dossier du thème dans votre répertoire « wp-content -> themes ».
    Bonne suite 🙂

  3. Maud a écrit

    Bonjour, j’ai suivi pas à pas vos explications pour créer un site internet et j’y suis arrivée ! Merci beaucoup ! (En utilisant évidement le lien bluehost de votre site…) Je suis malheureusement coincée car mon mot de passe ne fonctionne plus et le lien vers mot de passe oublié non plus. Je ne comprends pas. Je suis allée sur des forums mais je n’ai pas les connaissances nécessaires pour le modifier via ftp ou autre. Auriez-vous une idée ?

  4. Sarah a écrit

    Bonjour,
    Très bon blog. Vos articles sont tous au top. Cet article-là est une parfaite fiche de rappel.
    Merci

    • Valentina a écrit

      Cet article est tiré d’un article anglais datant de plusieurs années. Les images, exemple et codes sont exactement les mêmes. S’il est utile, dommage que la source ne soit pas citée, le droit d’auteur est un droit, même sur Internet. Vous auriez au moins pu vous donner la peine de changer quelques détails ou citer la source….

  5. Oceane a écrit

    Bonjour,
    Chouette tutoriel, hélas je l’ai suivi pas à pas et malgré cela ca ne fonctionnne pas. Une fois mis en ligne, lorsque je l’active sous WP j’ai une page blanche qui s’affiche et c’est tout …
    De l’aide serait la bienvenue si vous avez une idée ! =)
    Amicalement,
    Océane

    • Oceane a écrit

      Bonjour,
      Hum juste après avoir posté mon message ça a décidé de fonctionner .. Mystère. Peut etre juste un lag mais j’avais pourtant attendu et raffraichit. Enfin l’essentiel c’est que cela foncitonne. Merci !

  6. Anthony Peltier a écrit

    Merci pour ce petit tutoriel bien utile pour démarrer.

  7. alexandre serres a écrit

    Bonjour Louis-Philippe,
    Quelques questions concernant la création d’un thème ; je souhaite créer un thème très simple, comme la physionomie de ce site : http://telfar.net/
    est-ce que c’est possible? mettre un gif en main area dans le fichier index.php, et un sidebar avec 3 ou 4 sous catégories.
    et ainsi négliger header et pourquoi pas aussi footer.
    merci par avance pour votre réponse,
    Cordialement,

  8. Louis-Philippe a écrit

    Salut Alexandre,
    Bien entendu! C’est très possible. En fait, tu ne pourrais qu’avoir un fichier index.php et un fichier style.css que ton thème fonctionnerait quand même 🙂

  9. ndoye a écrit

    Bonjour,
    J’ai suivi votre tuto est ça marche.
    Maintenant, je souhaite ajouter un menu horizontal, développer le sidebar et le footer.
    Comment faire pour intégrer le disign ds pages et mettre des couleur de fond

  10. jual roro mendut a écrit

    Everything composed made a bunch of sense. However, think
    on this, suppose you typed a catchier title? I mean, I don’t wish to tell
    you how to run your website, however what if you added something to maybe
    grab a person’s attention? I mean Les Notions de Base pour Créer
    un Thème WordPress – WP Pour les Nuls is a little vanilla.
    You should look at Yahoo’s front page and note how they
    create article titles to grab people interested.
    You might try adding a video or a related pic or two to get people
    interested about what you’ve got to say. Just my opinion,
    it could make your blog a little bit more interesting.

  11. Julien a écrit

    Bonjour !
    Je rencontre un probleme au moment de lier ma feuille de style de la bonne maniere, dans le functions.php, cela marche niquel sur le site, mais j’ai ce message dans mon panneau d’administration :
    Warning: Cannot modify header information – headers already sent by (output started at /homepages/32/d713522542/htdocs/monsite/wp-content/themes/Strasbourg/functions.php:1) in /homepages/32/d713522542/htdocs/monsite/wp-admin/includes/misc.php on line 1114

    • Louis-Philippe Dea a écrit

      Bonjour Julien,
      As-tu essayé de désactiver tous tes plugins actifs? Aussi, essaie de changer pour le thème twentyseventeen et de voir si le problème est causé par ton thème personnalisé ou par une incompatibilité de plugin.

  12. marketing internet a écrit

    Je n’ai jamais créé de thème WordPress, jusqu’à maintenant cela n’était pas dans mes projets. Mais ce que tu donne comme explication, va m’aider assurément. Je vais essayer cela dans les prochains jours. Qui sait, peut-être que je vais aimer ce style de projet. Jusqu’à maintenant, juste le référencement était quelques chose que j’aimais, mais la création peut être un plus aussi. Merci de toutes ces infos.

  13. Vanessa a écrit

    Bonjour et merci pour ce tuto qui est une excellente entrée en matière en effet, j’y ai trouvé beaucoup d’éclaircissements !
    Sauf erreur de ma part, vous parlez au début d’un fichier style.css, mais ensuite vous parlez de blog.css qui semble désigner le même fichier ?
    Par ailleurs vous supprimez intentionnellement Bootstrap puisque vous supprimez le lien vers le cdn ?
    Et pour finir (pardon c’est la première fois que je m’intéresse à ce sujet je débute…), vous ne parlez pas de créer le fichier functions.php, j’ai tourné un moment en rond avant de me décider à le faire, ah oui et si certains s’étonnent du fait que le script ne marche pas, c’est parce qu’il manque <? php au début si on crée le fichier…
    Merci encore pour ce tuto tout simple 😉

    • Louis-Philippe Dea a écrit

      Salut Vanessa!
      Merci d’avoir pris le temps d’écrire tes commentaires! J’apprécie 🙂
      Concernant le style.css et le blog.css, il s’agit en fait de 2 fichiers distincts. Un thème a besoin d’un fichier style.css pour fonctionner et être repéré par WordPress. Par contre, comme je mentionnais, plusieurs développeurs segmentent leur fichier CSS en plusieurs fichiers différents. D’où le fichier blog.css qui ne servirait qu’à styliser la portion Blog du site.
      Concernant Bootstrap, en fait, c’est seulement la mention CSS que j’enlève dans le fichier Header.php puisque (et mon oublie était ici), j’ai ajouté celui-ci dans le fichier functions.php pour appeler le CSS avec la fonction wpdocs_theme_name_scripts().
      La mention du fichier functions.php y était. Peut-être avais-tu parcouru ce point trop rapidement?
      Et j’ai rajouté le qu’il manquait par rapport à la mention du menu. C’est bien là que tu voulais dire?
      Merci!

  14. siham a écrit

    Merci bien pour votre effort ça m’éclaircis vraiment l’esprit 🙂

  15. Vendre des thèmes wordpress | Devenez E[...] a écrit

    […] d’innombrables possibilités. En effet, il existe de nombreux tutoriels en ligne qui expliquent comment créer un thème WordPress. Il suffit de suivre ces consignes à la lettre et vous deviendrez un professionnel de […]

  16. Gilles a écrit

    Bonjour,

    Je suis tomber sur votre tuto super bien fait car je cherchais justement a créé un thème de A à Z sans passer par _S par exemple.

    J’ai donc pu allez voir plus loin et trouver certaine chose pour ajouter des « options » au thème pour le modifier via l’interface Personnalisation (les couleurs plus particulièrement).

    Malheureusement, bien que mes couleurs fonctionne parfaitement, mes typo, elle, ne fonctionne absolument pas. Je me demandais donc si vous saviez comment intégrer des typos au site via une option qui nous permettrais de les sélectionner parmi une liste de Google Font.

    J’arrive à récupérer la liste de Google Font mais après…. impossible de modifier la typo.

  17. Gilles a écrit

    Merci beaucoup pour cette réponse rapide, je file voir les liens que vous m’avez fournis 🙂

  18. Mickael B. a écrit

    Bonjour,

    Sauf erreur de ma part, Il y a un petit kwak dans le tutoriel : lorsque vous suggérez de retirer le lien vers bootstrap et de le rajouter dans le fichier functions.php, il manque les balises à la fin pour que functions.php soit interprété.

    • Louis-Philippe Dea a écrit

      Bonjour Mickel, est-ce que vous voulez dire les balises <?php et ?> ?

  19. Mickaël B a écrit

    Oui il manque les balises d’encapsulation du code php pour le fichier functions.php afin que le code php soit interprété. De ce fait, quelqu’un qui débute en dev web, n’aura peut être pas le réflexe de les rajouter et verra le contenu du fichier functions.php s’afficher en raw.

    Là ou il y a la méthode wpdocs_theme_name_scripts() pour injecter le lien vers bootstrap.

    • Louis-Philippe Dea a écrit

      Merci Mickaël. Du coup, si j’ajoute celles-ci, un débutant comme vous dites rajoutera peut-être les balises quand celles-ci sont déjà ajoutées dans son propre fichier, ce qui revient au même problème… Je crois que je vais ajouter les balises comme vous proposez et ajouter une ligne descriptive dans le tutoriel pour préciser 🙂
      Merci!

  20. Mickaël B. a écrit

    Re bonjour,

    Il y a une autre coquille, vous suggérez d’appeler le fichier CSS : style.css alors que dans le fichier functions.php, vous faite un appel à blog.css à la place : wp_register_style( ….. /blog.css …. )

    • Louis-Philippe Dea a écrit

      Salut, tu peux voir ma réponse à Vanessa pour cette question. Il s’agit en fait de 2 fichiers différents.

  21. Gilles a écrit

    Re-bonjour,

    J’ai un petit peu regarder les lien et tester le plugin Easy Google Font. Concrètement c’est un peu cela mais j’aimerais réussir à l’intégrer directement dans mon function.php de mon thème.

    J’utilise ce fichier pour récupéré les nom de toute les typo de Google Font mais impossible de les importer et de les appliquer. Je pense que je dois avoir une erreur dans mon function.php mais je ne vois malheureusement pas.

    Google Font : https://www.googleapis.com/webfonts/v1/webfonts?key=AIzaSyBv5fQuH1DL3MX-csouxAj3piH6ZtY_mFQ

    Si vous avez besoin de bout de code en lien avec les font de mon function.php, je peux vous les envoyer 🙂

  22. Dana Barget a écrit

    Bonjour j’ai un truc qui apparait « ?php /*** Ajouter un script ou un fichier CSS de la bonne façon */ function wpdocs_theme_name_scripts() { wp_register_style(‘main-style’, get_template_directory_uri().’/blog.css’, array(), true); wp_enqueue_style(‘main-style’); wp_register_style(‘bootstrap-style’, ‘https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css’, array(), true); wp_enqueue_style(‘bootstrap-style’); } add_action( ‘wp_enqueue_scripts’, ‘wpdocs_theme_name_scripts’ ); ?>  » C’est quoi le problème?? Car j’ai suivi le tuto.

    • Louis-Philippe Dea a écrit

      Difficile à dire quand je n’ai pas le code devant moi. Peux-tu m’envoyer tout le contenu de ton fichier functions.php par email? info at wppourlesnuls.com.

  23. Dana Barget a écrit

    Voilà j’ai envoyé le mail sur ton courriel.

  24. delphine a écrit

    mon style ne s’exécute pas et je comprends pas pourquoi.
    voilà ce qui est écrit dans mon fichier function.php

  25. Géraldine a écrit

    Bonjour,
    j’aimerais intégrer un menu bootstrap.
    Dois-je ajouter quelques chose dans functions.php ?

  26. Samuel a écrit

    Bonjour,
    J’ai crée un ensemble de pages sous wordpress à partir d’un template Bootstrap.
    Maintenant je cherche à contrôler l’accès de ces pages via le système d’identification / login de wordpress.
    Dans l’arborescence du theme, quel fichier ou instruction dois je ajouter ?

Ajouter un commentaire

Étant donné que chaque site WordPress est différent (versions, thèmes, plugins, etc.) et que WP Pour les Nuls est un site gratuit, le module de commentaire n'est pas un service d’assistance technique WordPress gratuit.