Créer le thème minimal

Un thème classique apparaît dans Apparence → Thèmes lorsqu’il contient au minimum style.css avec un en-tête valide et index.php. functions.php ajoute ensuite menus, options et ressources.

Arborescence du thème

wp-content/themes/atelier-horizon/ ├── style.css ├── index.php ├── functions.php ├── header.php ├── footer.php ├── front-page.php ├── home.php ├── page.php ├── single.php ├── 404.php ├── template-parts/content-card.php └── assets/css/main.css

Exemple style.css

/* Theme Name: Atelier Horizon Version: 1.0.0 Text Domain: atelier-horizon */

Exemple index.php

<?php get_header(); ?> <main id="contenu" class="site-main"> <?php while ( have_posts() ) : the_post(); ?> <h1><?php the_title(); ?></h1> <?php the_content(); ?> <?php endwhile; ?> </main> <?php get_footer(); ?>

Pas à pas

1. Créez le dossier et les fichiers sur staging.
2. Placez l’en-tête dans style.css, sauvegardez.
3. Activez Atelier Horizon depuis Apparence.
4. Vérifiez le chargement d’un article et d’une page.
5. Ajoutez les autres templates au fil des prochaines étapes.

À éviter : renommer le thème parent ou modifier directement le Core pour personnaliser l’affichage.

Coder le header, le menu et le footer

Le header et le footer sont inclus partout. Les points d’extension wp_head(), wp_body_open() et wp_footer() sont indispensables à de nombreux plugins.

header.php, version simplifiée

<!doctype html> <html <?php language_attributes(); ?>> <head> <meta charset="<?php bloginfo( 'charset' ); ?>"> <meta name="viewport" content="width=device-width,initial-scale=1"> <?php wp_head(); ?> </head> <body <?php body_class(); ?>> <?php wp_body_open(); ?> <a class="skip-link" href="#contenu">Aller au contenu</a> <header class="site-header"> <a href="<?php echo esc_url( home_url( '/' ) ); ?>"> <?php bloginfo( 'name' ); ?> </a> <nav aria-label="Navigation principale"> <?php wp_nav_menu( [ 'theme_location' => 'primary' ] ); ?> </nav> </header>

footer.php

<footer class="site-footer"> <p>&copy; <?php echo esc_html( date( 'Y' ) ); ?> Atelier Horizon</p> </footer> <?php wp_footer(); ?> </body></html>

Pas à pas

1. Ajoutez register_nav_menus() dans functions.php (semaine 2).
2. Dans Apparence → Menus, créez le menu et affectez-le à l’emplacement principal.
3. Vérifiez le lien du logo vers l’accueil.
4. Naviguez au clavier avec Tab ; le lien d’évitement doit être utilisable.
5. Contrôlez que le footer apparaît sur accueil, page et article.

Attention : un menu visible sur desktop n’est pas automatiquement accessible sur mobile. Le thème exemple fourni comprend un script de navigation à tester.

Les pages d’article et The Loop

single.php affiche par défaut un article classique. La requête principale est déjà prête : inutile de lancer un nouveau WP_Query pour afficher l’article courant.

Exemple de single.php

<?php get_header(); ?> <main id="contenu" class="container"> <?php while ( have_posts() ) : the_post(); ?> <article <?php post_class(); ?>> <h1><?php the_title(); ?></h1> <p>Publié le <?php echo esc_html( get_the_date() ); ?></p> <?php if ( has_post_thumbnail() ) the_post_thumbnail( 'large' ); ?> <div class="entry-content"><?php the_content(); ?></div> <?php the_category( ', ' ); ?> </article> <?php endwhile; ?> </main> <?php get_footer(); ?>

Pas à pas

1. Créez un article « Préparer son site » avec image, catégorie et paragraphes.
2. Ajoutez single.php au thème.
3. Ouvrez l’article et vérifiez les données dynamiques : titre, date, image, catégorie et texte.
4. Modifiez le titre depuis l’admin ; vérifiez que le template change sans modification de code.
5. Faites un second test avec un article sans image.

Résultat

Un seul template permet de présenter autant d’articles que nécessaire, sans copier-coller le HTML de chaque publication.

Accueil personnalisé et composants réutilisables

front-page.php est le template prioritaire pour l’accueil. Les Template Parts réutilisent un même affichage, par exemple une carte d’article.

Exemple de front-page.php

<?php get_header(); ?> <main id="contenu"> <section class="hero"> <h1>Sites web et conseil digital</h1> <a href="<?php echo esc_url( home_url( '/contact/' ) ); ?>"> Demander un devis </a> </section> <section class="container"> <h2>Derniers articles</h2> <?php $news = new WP_Query( [ 'post_type' => 'post', 'posts_per_page' => 3 ] ); while ( $news->have_posts() ) { $news->the_post(); get_template_part( 'template-parts/content', 'card' ); } wp_reset_postdata(); ?> </section> </main> <?php get_footer(); ?>

Pas à pas

1. Créez template-parts/content-card.php, contenant un lien vers le titre et un extrait.
2. Intégrez le fragment dans front-page.php.
3. Ajoutez un quatrième article et constatez que seuls trois sont affichés.
4. Ajoutez une section « Nos services » alimentée d’abord par le contenu de votre page Services.
5. Remplacez les chaînes figées par des données administrables lorsque c’est nécessaire.

À éviter : construire une page d’accueil entièrement statique si le client doit pouvoir modifier les contenus sans développeur.

Responsive, lisibilité et accessibilité

La qualité n’est pas seulement visuelle : le site doit fonctionner sans défilement horizontal ni menu inaccessible.

CSS mobile-first

.container { width:min(100% - 2rem, 1160px); margin:auto; } .cards { display:grid; grid-template-columns:1fr; gap:1.25rem; } img { max-width:100%; height:auto; } :focus-visible { outline:3px solid #d95e4f; outline-offset:3px; } @media (min-width:768px) { .cards { grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (min-width:1100px) { .cards { grid-template-columns:repeat(3,minmax(0,1fr)); } }

Pas à pas

1. Testez aux largeurs 320, 375, 768 et 1440 px.
2. Vérifiez les liens, menus, focus, contraste, tailles de caractères et images.
3. Vérifiez que les boutons ont un texte explicite, pas seulement « Cliquer ici ».
4. Sur mobile, assurez-vous que la navigation peut s’ouvrir et se fermer au clavier.
5. Consignez deux défauts trouvés et leurs corrections.

Livrable

Une vidéo courte ou quatre captures avant/après, un thème versionné et une page de vérification responsive.