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.
Vous ne le saviez peut-être pas mais l’ensemble des templates de page peuvent être gerées avec un simple fichier index.php.
Besoin d’un spécialiste WordPress pour votre projet ? Contactez-moi
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.
Besoin d’un spécialiste WordPress pour votre projet ? Contactez-moi
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 ?
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.
Besoin d’un spécialiste WordPress pour votre projet ? Contactez-moi
<?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 😉