Blog Web & Design

Création d’un theme WordPress ultra simple

La création d’un thème WordPress peut se faire parfois de façon très simple.

Imaginons que vous ayez besoin d’un site « simple », disons avec très peux de type de présentations différentes ( ou de gabarits ). Prendre un theme complet même si celui-ci est un starter theme, vide de tout design, n’est pas toujours necessaire.

Besoin d’un spécialiste WordPress pour votre projet ? Contactez-moi

Vous ne le saviez peut-être pas mais l’ensemble des templates de page peuvent être gerées avec un simple fichier index.php.

Pour commencer vous allez devoir vous rendre sur votre FTP et créer un dossier au nom de votre theme dans le dossier wp-content/themes/ de votre installation WordPress. Dans ce dossier, vous ajouterez par la suite tous les fichiers de votre thème.

1) Créer un fichier style.css

Ce fichier CSS contient l’information principale du thème, son nom. Le nom sera affiché dans votre administration, au niveau de votre liste de thèmes disponible.

En haut du fichier, personnalisez et ajoutez ces quelques lignes :

/*
Theme Name: montheme
Text Domain: montheme
*/

2) Créer un fichier index.php

C’est le premier fichier permettant d’afficher le contenu de votre site. Vous pouvez dès lors insérer votre code HTML ou PHP pour afficher quelque chose en ligne.
Cependant, il comporte bien souvent 2 « includes » bien pratiques :

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

Personnaliser le header

ici il vous est possible de personnaliser le theme en créant un fichier header.php avec le contenu suivant :

<!doctype html>
<html <?php language_attributes(); ?>>
<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<link rel="profile" href="https://gmpg.org/xfn/11" />
	<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>

Personnaliser le footer

ici il vous est possible de personnaliser le theme en créant un fichier footer.php avec le contenu suivant :

	<?php wp_footer(); ?>

</body>
</html>

Ajouter une image aperçu

Pour finaliser la création de ce thème très basique, vous pouvez créer un fichier image intitulé « screeshot.png » faisant 1200 pixels de large et de 900px de hauteur, et représentant une capture du rendu visuel de votre thème ou toute autre image vous inspirant.

A ce moment là, votre theme est visible dans la liste des themes de votre WordPress, et un thème WordPress plus que minimal à été créé. Bravo !


Pour aller plus loin

Alors biensur afficher du html c’est bien beau mais comment faire pour profiter des fonctionnalités de WordPress, surtout celles les plus basiques comme l’édition et l’affichage de la listes des articles ?

Besoin d’un spécialiste WordPress pour votre projet ? Contactez-moi

L’affichage des articles avec la loop

Première chose à faire est de créer une bloucle pour afficher chaque articles. Dans votre fichier index.php vous pouvez coller ce code :

<?php
if ( have_posts() ) :
while ( have_posts() ) : the_post();
the_title();
the_content();
endwhile;
the_posts_navigation();
endif; 
?>

Comme vous pouvez le constater, à chaque article s’affichera donc le titre et le contenu.

L’ajout de l’image à la une

Pour utiliser les images à la une, vous allez devoir modifier le créer un fichier functions.php afin d’activer la prise en charge de l’option dans l’administration.

<?php add_theme_support( 'post-thumbnails' ); ?>

Puis dans votre fichier index.php, l’image pourra être appelée grâce à ses fonctions :

<?php echo get_post_thumbnail(); ?>
ou
<?php the_post_thumbnail(); ?>Cr

Ajouter le lien de l’article

Pour ajouter un lien, voici la fonction à appeler :

<?php echo get_permalink(); ?>
ou
<?php the_permalink(); ?>

Résultat final

Ainsi un code plus complet de la page index ressemblerait à ceci :

<?php

get_header(); 

if ( have_posts() ) :
    while ( have_posts() ) : the_post();

        echo '<a href="' . get_permalink() . '">';
            the_post_thumbnail('large');
            the_title('<h2>', '</h2>');
        echo '</a>';
        
         the_content();
       
    endwhile;

    the_posts_navigation();
    
endif; 

get_footer(); 

?>

Plus tard

Les fonctions courantes que je pourrai developper dans d’autres articles :

  • L’ajout de menus de navigation
  • L’ajout des widgets
  • L’affichage des tags et catégories de l’article
  • L’affichage du formulaire et des commentaires.

Au niveau des gabarits il existe de nombreuses possibilités afin de personnaliser l’affichage des différents types de contenus. il est ainsi possible de :

  • créer un 404.php
  • créer un archive.php pour avoir un gabarit de page catégorie, tags

Tout ceci fera l’objet d’autres articles 😉

Dernière mise à jour le Auteur : Thomas Dufranne

Ce contenu vous a-t-il été utile ?

Merci pour votre avis !

Si vous pensez pouvoir aider d'autres personnes, pensez à partager le contenu

Merci pour votre avis !

Désolé que vous n'ayez pas trouvé votre réponse.

Je vous invite à me poser vos question par commentaire ou par e-mail !

Repondre

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.