• 15 hours
  • Easy

Free online content available in this course.

Paperback available in this course

Certificate of achievement available at the end this course

You can get support and mentoring from a private teacher via videoconference on this course.

Got it!

Last updated on 3/13/18

TP : Personnalisez votre thème

Log in or subscribe for free to enjoy all this course has to offer!

Nous avons d'ores et déjà parcouru de nombreuses fonctionnalités de WordPress pour lesquelles il vous est possible de faire des développements spécifiques. L'objectif étant d'adapter l'application au design que vous désirez. Ce TP est l'occasion de mettre en pratique ces notions, en créant votre premier thème original !

Présentation de l'exercice

Consignes

Pour cet exercice, vous devez créer un thème original sans base de départ et sans utiliser l'héritage de thème. De plus, votre thème devra inclure les éléments suivants :

  • au moins un emplacement pour le menu ;

  • au moins une zone de widget ;

  • le support des pages, articles et commentaires ;

  • les différents éléments doivent être judicieusement séparés en utilisant les template tags ;

  • les portions de texte faisant partie du design doivent pouvoir être traduites.

En plus de ces points, vous pouvez, si vous vous sentez à l'aise, utiliser le système de fallback de WordPress en créant un affichage spécifique pour une page catégorie (avec le fichier category.php), ou bien pour les publications de type « Page » (avec un fichier page.php).

Si vous êtes en mal d'inspiration, voici (dans la figure suivante) la page d'accueil du thème réalisé pour cet exercice et qui inclut les éléments demandés.

Exemple de réalisation
Exemple de réalisation

Indications

Vous ne savez pas par où commencer ? Voici un exemple de marche à suivre, que vous pouvez appliquer :

  • déclarer le nouveau thème avec les fichiers index.php et style.css ;

  • mettre en place les différents fichiers PHP dont vous aurez besoin ;

  • construire le fichier index.php petit à petit en testant et vérifiant régulièrement que les éléments se comportent comme prévu.

Enfin, prenez le temps d'implémenter chaque fonctionnalité demandée en y allant progressivement. Rien ne presse, l'important étant d'arriver au bout !

Correction

Déclarer les emplacements du menu et du widget

Commençons par le fichier functions.php, afin de déclarer tout de suite un emplacement pour le menu et une zone de widget, que nous utiliserons par la suite dans le thème.

<?php
add_action('widgets_init','tp_add_sidebar');
function tp_add_sidebar()
{
  register_sidebar(array(
    'id' => 'zone_widget_droite',
    'name' => 'Zone latérale droite',
    'description' => 'Apparait sur la droite site',
    'before_widget' => '<aside>',
    'after_widget' => '</aside>',
    'before_title' => '<h1>',
    'after_title' => '</h1>'
  ));
}

add_action('init', 'tp_add_menu');
function tp_add_menu()
{
  register_nav_menu('main_menu', 'Menu principal');
}

Gestion des éléments affichés

Nous continuons ensuite avec index.php, dont le rôle est de rassembler la gestion de tous les éléments affichés sur le site. Nous devons appeler l'en-tête, la barre latérale pour les widgets et le pied de page. Au milieu, nous ajoutons la boucle de rendu qui se charge d'afficher les publications en fonction de la page sur laquelle nous nous trouvons.

<?php get_header(); ?>
<div class="container">
<div class="content">
  <?php
  while (have_posts()) {
    the_post();
    get_template_part('content');
  }?>
</div>
<?php get_sidebar() ?>
</div>
<?php get_footer();

Vous pouvez noter l'utilisation d'un template spécifique pour l'affichage du contenu des publications grâce à la fonction get_template_part().

Dans le fichier header.php, nous ajoutons le début du code HTML pour nos pages, avec l'inclusion du fichier CSS, le titre du blog ainsi que son slogan avec la fonction bloginfo(), et le menu qui a été déclaré plus haut.

<!doctype html>
<html>
  <head>
    <title><?php echo wp_title() ?></title>
    <link rel="stylesheet" href="wp-content/themes/themetp/style.css" type="text/css"/>
  </head>
<body>
<header class="header">
  <div class="container">
    <h1><?php bloginfo() ?></h1>
    <h2><?php bloginfo( 'description' ); ?></h2>
    <?php wp_nav_menu(array('theme_location' => 'main_menu')) ?>
  </div>
</header>

Le pied de page est ici très simple. Vous pouvez y ajouter une mention de l'auteur et le nom de votre thème par exemple. Pensez à donner la possibilité de traduire le texte avec la fonction _e() !

<footer>
  <p><?php _e('Mon premier thème') ?></p>
</footer>
</body>
</html>

Pour afficher les widgets, nous passons par le fichier sidebar.php, appelé grâce à la fonction get_sidebar() depuis index.php.

<div class="widgets">
  <?php dynamic_sidebar('zone_widget_droite'); ?>
</div>

Il nous reste maintenant à afficher le contenu des publications en lui-même. Faisons cela dans le fichier content.php et affichons le titre de chaque article, son contenu puis les commentaires associés, ces derniers étant traités dans comments.php.

<article class="post">
  <h1><?php the_title() ?></h1>
  <div>
    <?php the_content(); ?>
  </div>
  <?php comments_template() ?>
  <?php comment_form(); ?>
</article>
<ol>
  <?php wp_list_comments(); ?>
</ol>

Vous êtes maintenant capables de mettre en place (ou de modifier) un thème WordPress pour l'adapter aux besoin d'un site. N'oubliez pas que l'apparence est la première chose que l'on voit lorsque l'on arrive sur une page web. Il est donc important d'y apporter du soin, notamment avec les règles de formatage CSS !

Corrigé type

Vous trouverez donc ci-dessous le fichier CSS utilisé pour réaliser l'illustration d'exemple présentée avec les consignes de ce TP.

/*
Theme Name: Thème TP
*/

* {
  margin:0;
  padding:0;
  text-decoration:none;
  color:black;
  font-family:sans-serif;
}
body {background:#F5F5F5;}
h1,h2 {color:#555;}
a {color:#DDAA88}

.container {
  margin:0 auto;
  width:900px;
}
.header {
  background:#E9E9E9;
  border-bottom:1px solid #E0E0E0;
  margin-bottom:20px;
  padding-top:10px;
}
.header h1 {
  color:#CC3030;
  font-size:40px;
  margin:10px 0;
}
.header h2 {
  color:#FF9090;
  font-size:24px;
}
.content {
  display:inline-block;
  width:650px;
}
.menu li {
  border-right:1px solid #DDD;
  display:inline-block;
  padding:10px;
  list-style:none;
}
.menu li:last-child {border:none;}
.menu a {color:#555;}
.current-menu-item a {color:#E44;}

.widgets {
  display:inline-block;
  width:200px;
  vertical-align:top;
}
.widgets li {list-style:none;}
.widgets aside {
  background:#FFF;
  border-radius:3px;
  box-shadow:0 2px 6px -2px #999;
  margin:0 0 15px;
  padding:15px;
}
.widgets aside h1 {
  border-bottom: 1px dashed #CCC;
  color:#555;
  margin-bottom:10px;
  font-size:18px;
}

.post {
  background:#FFF;
  border-radius:3px;
  box-shadow:0 2px 6px -2px #999;
  margin:0 10px 15px;
  padding:20px;
}
.post h1 {margin-bottom: 15px;}
.comment-respond {
  border-top:1px solid #DDD;
  font-size:14px;
  margin:20px 5px;
  padding-top:10px;
}
footer {
  text-align:center;
  font-size:12px;
  background:#E9E9E9;
  border-top:1px solid #E0E0E0;
  margin-top:20px;
  padding:10px 0;
}
Example of certificate of achievement
Example of certificate of achievement