Créer son propre thème WordPress à partir de zéro
Ce petit tuto a pour but de vous permettre de créer en quelques minutes seulement votre propre thème en WordPress. Ce tuto s’adresse à tout public qui est à l’aise avec le HTML & le CSS. Il permet d’aller chercher tous les contenus WordPress pour les intégrer dans une production HTML & CSS pré-existante. Ou à faire dans un 2e temps une fois tous les contenus WordPress affichés.
Créer les fichiers minimum requis
Pour obtenir un premier résultat, il suffit de :
- créer un nouveau répertoire dans wp-contents/themes p.ex. mon-propre-theme
- y créer un fichier index.php
- dans ce fichier écrire p.ex. Salut, ça fonctionne
- y créer un fichier style.css
- dans ce fichier copier le code suivant et modifier les informations
/* Theme Name: NOM DE VOTRE THEME
URI: http://www.VOTRE-SITE.COM
Description: DESCRIPTION DE VOTRE THEME.
Version: 1.0
Author: VOTRE NOM
*/
- y créer un fichier screenshot.png (dimensions 1200×900) illustrant le thème
- aller dans le backend apparence > thèmes et y activer le nouveau thème
- retourner sur l’URL publique du site et rafraichir la page
- La page affichera: Salut, ça fonctionne
Afficher des contenus dynamiques relatifs au site (nom, description, chemin vers le dossier du thème)
Maintenant que nous avons affiché le contenu de notre page index.php en activant le thème, passons en revue les quelques tags WP les plus utiles pour commencer, je pense notamment à:
- titre du site
- description / slogan du site
- chemin vers le répertoire du thème, afin de pouvoir lier notre feuille de style style.css à notre page index.php
<?php bloginfo('stylesheet_directory'); ?> <!-- chemin vers le répertoire/thème du site du site -->
<?php bloginfo('name'); ?> <!-- nom du site -->
<?php bloginfo('description'); ?> <!-- description du site -->
Bonne méthode pour lier la feuille de style
function ajouter_style() {
wp_enqueue_style( 'monstyle', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'ajouter_style', PHP_INT_MAX );
Créer une boucle pour afficher tous les articles et leurs contenus
Nous allons maintenant créer une boucle qui permet d’afficher tous les aritcles / posts. Par défaut ils seront affichés par ordre antéchronologique (les plus récent en premier)
<!-- Commencer la boucle -->
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<!-- Afficher les contenus de la boucle -->
<?php the_post_thumbnail(); ?> <!-- remplace la balise <img> !
alternativement, on peut remplacer l'attribut src de la balise <img>
par --> <?php echo get_the_post_thumbnail_url(); ?>
<?php the_title(); ?> <!-- titre du post -->
<?php the_content(); ?> <!-- contenu du post -->
<?php the_excerpt() ?> <!-- extrait du post-->
<?php echo get_the_date(); ?> <!-- date du post / on le fait des cette façon car
sinon WP n'affiche qu'une fois la date si plusieurs posts on la même date-->
<?php the_permalink(); ?> <!-- lien vers le détail du post -->
<?php the_time(); ?> <!-- date de création du post -->
<?php the_author(); ?> <!-- auteur du post -->
<?php the_category();?> <!-- la/les catégorie(s) assignée(s) au post -->
<!-- on peut également afficher le nom et/ou le slug du post type-->
<?php
// Get current post type
$post_type = get_post_type();
// Get post type object
$post_type_obj = get_post_type_object( $post_type );
// Display post type name
echo 'Post Type Name: ' . esc_html( $post_type_obj->labels->singular_name );
// Display post type slug
echo 'Post Type Slug: ' . esc_html( $post_type_obj->name );
?>
<!-- Terminer la boucle -->
<?php endwhile; endif; wp_reset_query(); ?>
On peut aussi filtrer les boucles pour n’afficher que ce qui nous intéresse.
<!-- n'afficher que les contenus de type 'post' (dans une page p.ex. -->
<?php query_posts('post_type=post') ?>
<!-- n'afficher que le premier post. On n'affiche qu'un post -->
<?php query_posts('posts_per_page=1'); ?>
<!-- Afficher uniquement le 2e, 3e et 4e post. On skip le premier et on en affiche 3 au total-->
<?php query_posts('offset=1&posts_per_page=3'); ?>
<!-- afficher tout excepté le premier post. -->
<?php query_posts('offset=1'); ?>
<!-- afficher tout excepté les 4 premiers posts. -->
<?php query_posts('offset=4'); ?>
<!-- afficher tous les posts de la catégorie trucmachin -->
<?php query_posts('category_name=trucmachin'); ?>
<!-- afficher les 3 derniers posts de la catégorie trucmachin -->
<?php query_posts('posts_per_page=3&category_name=trucmachin'); ?>
Requête plus complexe permettant de passer plus d’arguments. plus d’infos
<?php
// 1) définir les arguments/filtres de la requête
$args = array(
'post_type' => 'prof'
);
// 2) exécuter la requête et lancer la boucle
$the_query = new WP_Query( $args );
if ( $the_query->have_posts() ) {
while ( $the_query->have_posts() ) {
$the_query->the_post();
?>
<?php the_title(); ?>
<?php
} // end while
} // end if
wp_reset_query(); ?>
Activer la possibilité d’ajouter une image mise en avant et créer des tailles personnalisées d'images
Dans functions.php, ajouter le code suivant
//activer image mise en avant
add_theme_support( 'post-thumbnails' );
//créer des propres tailles
add_image_size( 'images-moyennes', 312, 255, true );
add_image_size( 'images-grandes', 527, 390, true );
Lorsque l’on veut afficher cette taille personnalisée, on peut le faire de cette façon
<?php the_post_thumbnail("images-moyennes"); ?>
<?php the_post_thumbnail("images-grandes"); ?>
On peut encore ajouter une fonction pour que ces tailles soient disponibles dans le menu dropdown des médias dans le contenu des articles
<?php add_filter( 'image_size_names_choose', 'my_custom_sizes' );
function my_custom_sizes( $sizes ) {
return array_merge( $sizes, array(
'images-moyennes' => __('Images Moyennes'),
'images-grendes' => __('Images Grandes'),
));
} ?>
Afficher le menu
Vous verrez que par défaut il ne vous est pas possible d’ajouter un menu. Il faut le spécifier à WordPress. Dans le fichier functions.php, copier le code suivant:
// ajouter une zone de menu
register_nav_menu( 'primary', __( 'Navigation Menu' ) );
Ensuite dans votre thème, vous pouvez appeler votre menu de cette façon
<?php wp_nav_menu(); ?>
On peut aussi passer toute une série d’arguments dans le menu, comme ici: pas de container autour du UL, un ID et des classes sur le UL
<?php
wp_nav_menu(array(
'container' => false, // Ne pas mettre de container
'menu_class' => 'navbar-nav fw-bold justify-content-end align-items-center flex-grow-1', // Ajouter des classes à <ul>
'menu_id' => 'navbar', // Ajouter un ID à <ul>
));
?>
Personaliser le lien Suite…
Dans functions, copier ce code:
//personaliser "lire la suite"
function modify_read_more_link() {
return '<a class="more-link" href="' . get_permalink() . '">lire la suite...</a>';
}
add_filter( 'the_content_more_link', 'modify_read_more_link' );
Ensuite dans le style personaliser la classe more-link
Ajouter une zone de widgets
Dans functions, copier ce code:
// Enregistrer une zone appelée 'Ma zone de widgets'
function add_widget_Support() {
register_sidebar( array(
'name' => 'Ma zone de widgets',
'id' => 'zone-widgets',
'before_widget' => '<div>',
'after_widget' => '</div>',
'before_title' => '<h2>',
'after_title' => '</h2>',
) );
}
// Hook the widget initiation and run our function
add_action( 'widgets_init', 'add_Widget_Support' );
// puis mettre ceci dans le thème à l'endroit désiré:
<?php dynamic_sidebar( 'zone-widgets' ); ?>
Ajouter plusieurs zones de widgets
// Enregistrer une zone appelée 'Ma zone de widgets'
function add_widget_Support() {
register_sidebar( array(
'name' => 'Ma zone de widgets',
'id' => 'zone-widgets',
'before_widget' => '<div>',
'after_widget' => '</div>',
'before_title' => '<h2>',
'after_title' => '</h2>',
) );
register_sidebar( array(
'name' => 'Ma zone de widgets 2',
'id' => 'zone-widgets-2',
'before_widget' => '<div>',
'after_widget' => '</div>',
'before_title' => '<h2>',
'after_title' => '</h2>',
) );
}
// Hook the widget initiation and run our function
add_action( 'widgets_init', 'add_Widget_Support' );
// puis mettre ceci dans le thème à l'endroit désiré:
<?php dynamic_sidebar( 'zone-widgets' ); ?>
<?php dynamic_sidebar( 'zone-widgets-2' ); ?>
Ajouter des classes sur le body
<body <?php body_class(); ?>>
Ajouter wp_head() et wp_footer()
Pour terminer, il faut encore ajouter les 2 fonctions qui permettent à WordPress d’ajouter tout le code nécessaire au bon fonctionnement des plugins etc.
<!-- Pour wp_head(), il faut le mettre juste avant la fermeture de la balise <head> -->
<?php wp_head(); ?>
</head>
<!-- Pour wp_footer(), il faut le mettre juste avant la fermeture de la balise <body> -->
<?php wp_footer(); ?>
</body>
<!-- ou alors tout en bas si on inclut la fermeture des balises body et html dans le footer -->
Afficher les taxonomies en tant que liens (pour un post donné)
<?php
$categories = get_the_terms(get_the_ID(), 'type-sneakers');
$couleurs = get_the_terms(get_the_ID(), 'couleurs-sneakers');
if (!empty($categories)) {
foreach ($categories as $category) {
echo '<a href="'.get_site_url().'/type-sneakers/'.$category->slug.'">'.$category->name.'</a> ';
}
}
echo '<br><br><br><br>';
if (!empty($couleurs)) {
foreach ($couleurs as $couleur) {
echo '<a href="'.get_site_url().'/couleurs-sneakers/'.$couleur->slug.'">#'.$couleur->name.'</a> ';
}
}
?>
Divers
<!-- Insérer le nom d'une page ou d'un post suivi du nom du site dans la balise <title> -->
<title><?php wp_title(' - ', true, 'right'); ?> <?php bloginfo('name'); ?></title>