Exercice Quelle est la différence entre wordpress.com et wordpress.org ?
Exercice Téléchargez et installez Wordpress depuis https://wordpress.org/download/. Décompressez le fichier dans votre dossier de serveur (htdocs ou www) et suivez les instructions.
Attention à bien préciser le port de la base de données dans l'URL si celui-ci n'est pas
3306:localhost:8889par exemple.
Documentation : https://developer.wordpress.org/themes/
Documentation : https://developer.wordpress.org/themes/getting-started/what-is-a-theme/ Un thème Wordpress est au moins composé de deux fichiers :
index.phpstyle.css
Il peut en contenir d'avantage, notamment des fichiers PHP (fichiers de template, fichiers de fonctions...), des fichiers de localisation, des assets (css/js/images).
Un thème ne doit pas contenir de fonctionnalité : c'est le rôle des plugins ! On doit idéalement pouvoir changer de thème sans qu'une fonctionnalité vienne à manquer.
Exercice : Créez un nouveau dossier dans le dossier
wp-content/themesnomméwf3theme. Créez dedans les deux fichiers de base.
Documentation : https://developer.wordpress.org/themes/basics/main-stylesheet-style-css/
Le fichier style.css, obligatoire, doit aussi contenir obligatoirement en haut du fichier ce bloc de commentaires :
/*
Theme Name: WF3Theme
Theme URI: https://wordpress.org/themes/wf3theme/
Author: John Doe
Author URI: https://linkedin.com/in/tomsihap/
Description: Description du thème
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wf3theme
Tags: one-column, two-columns, right-sidebar, flexible-header, accessibility-ready, custom-colors, custom-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready
*/Ces informations permettent à Wordpress de détecter correctement les données du thème et de les afficher dans l'interface d'administration.
Exercice : Ajoutez et adaptez ces données à votre fichier style.css. Retrouvez votre thème dans la liste des thèmes de l'interface admin.
Dans le cas où on voudrait modifier un thème existant, on créérait un thème enfant : c'est un thème dans lequel on ajouterait la ligne
Template : NomDuThemeParentplutôt que de modifier directement le thème parent.
Documentation : https://developer.wordpress.org/themes/basics/template-files/
Documentation : https://developer.wordpress.org/themes/basics/template-tags/
Documentation: https://developer.wordpress.org/themes/basics/linking-theme-files-directories/
Un thème est composé de plusieurs templates (partials), afin de séparer son code et en incluant les portions de pages nécessaires. Comme les deux fichiers obligatoires ne sont que index.php et style.css, si un fichier de template n'est pas présent (par exemple category-$id.php), il va essayer d'afficher le contenu dans un template "parent" : on peut découvrir l'hiérarchie des templates ici : https://wphierarchy.com/ .
Exercice Créez les fichiers template suivants, directement à la racine du thème: header.php, footer.php, sidebar.php.
Exercice
- Ajoutez un Bootstrap de base dans
index.php - Ajoutez une navbar de Bootstrap de base dans le fichier
header.php - Remplissez le footer et la sidebar de données de base (par exemple: une liste dans la sidebar, un paragraphe dans le footer)
- Appelez les templates dans
index.phpgrâce aux fonctions suivantes:get_header(),get_sidebar(),get_footer().
Exercice Si je souhaite avoir un fichier template personnalisé, par exemple highlights-products.php, quelle fonction dois-je appeler ? (Réponse dans la doc)
Exercice En utilisant la découpe la plus logique, découpez le thème Blog de Bootstrap (https://getbootstrap.com/docs/4.3/examples/) en plusieurs templates.
Exemple de découpage :
- header.php // En tête et top-menu
- partials/featured-post.php // Post en grand en haut
- partials/highlight-posts.php // Deux posts "featured"
- footer.php // Pied de page
- main.php // Contenu principal (articles)
- sidebar.php // Menu de droite (inclus dans main.php)
Note Le blog Wordpress contient du CSS customisé : nous l'ajouterons juste après !
Documentation : https://developer.wordpress.org/themes/basics/including-css-javascript/
Wordpress a une logique propre à lui pour charger les scripts et styles aux moments opportuns : il faut donc que nous déclarions nos styles auprès de Wordpress afin qu'il les charge au moment voulu.
Pour cela, nous allons créer un fichier functions.php à la racine du projet.
Dans functions.php :
/**
* Fonction qui empilera nos styles
*/
function wf3_enqueue_styles() {
wp_enqueue_style( 'wf3-main', get_template_directory_uri() . '/style.css');
}
/**
* Déclanchement de wf3_enqueue_styles lors du hook "wp_enqueue_styles"
*/
add_action('wp_enqueue_scripts', 'wf3_enqueue_styles');Ici :
-
Nous créons une fonction qui appelle
wp_enqueue_style(), la fonction Wordpress qui permet d'empiler nos styles dans la queue de chargement des thèmes. -
Nous ajoutons notre fonction à un "hook" Wordpress : c'est à dire un écouteur d'évènements. En effet, lorsque Wordpress se charge, il passe par plusieurs évènements, et parmi ceux-ci, l'évènement
wp_enqueue_scripts. Nous disons ici à Wordpress d'executer notre fonction lors de ce déclancheur-là.
Exercice Vous pouvez dorénavant modifier style.css et ajouter le CSS propre au thème Blog de Bootstrap.
Exercice Pour dire à Wordpress où afficher la ligne de style dans le HTML, ajoutez la fonction wp_head() dans la balise <header> de votre thème : cela permet d'indiquer à Wordpress où se trouver le header et d'ajouter des informations automatiquement.
Documentation : https://developer.wordpress.org/themes/basics/template-tags/
Il existe des fonctions permettant d'afficher des données dynamiques, par exemple le titre du site que nous avons configuré dans l'interface admin de Wordpress.
Exercice Ajoutez le titre du site dans la balise <title> grâce à la fonction bloginfo('name').
Vous retrouverez tous les paramètres possibles pour
bloginfo()ici https://developer.wordpress.org/reference/functions/bloginfo/ .
Exercice Affichez le titre du blog dans la navbar et rendez le cliquable. L'URL du lien doit être l'URL de la page d'accueil, que vous afficherez grâce à bloginfo() et le bon paramètre permettant d'afficher l'URL de la page d'accueil.
Maintenant que les dépendances sont terminées, nous pouvons dynamiser le thème, c'est à dire utiliser les fonctions Wordpress afin d'afficher les données du blog !
Avant de commencer, veillez à écrire plusieurs articles et plusieurs catégories différents, afin d'avoir du contenu à afficher. Pour rappel, l'admin panel se trouve à [url_du_wordpress]/wp-admin. PRO TIP : Utilisez l'extension FakerPress : générateur de faux posts !
Documentation: The Loop
Commençons par le main : la partie sous "From The Firehose" qui affichera nos posts. Nous allons utiliser le principe de wordpress The Loop : s'il y a des articles à afficher, et tant qu'il y a des articles, nous instantions un pointeur vers l'article pour afficher l'article.
Dans main.php, à l'endroit où nous affichons les articles :
<?php if ( have_posts() ) : /* S'il y a des articles */ ?>
<?php while ( have_posts() ) : the_post(); /* Tant qu'il y a des articles : j'instancie le pointeur d'articles (the_post()) sur le post en question */ ?>
... Display post content
<?php endwhile; ?>
<?php endif; ?>A la place de "... Display post content", nous allons modéliser un article. Vous pouvez donc supprimer les autres articles écrits en dur dans le fichier !
<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
<div class="blog-post">
<h2 class="blog-post-title"><?php the_title(); ?></h2>
<p class="blog-post-meta">Le <?php the_date(); ?> par <a href="#"><?php the_author(); ?></a></p>
<p><?php the_excerpt(); ?></<p>
</div><!-- /.blog-post -->
<?php endwhile; ?>
<?php endif; ?>Le fichier est considérablement plus petit ! Grâce aux fonctions de The Loop (voir "What The Loop Can Display"), nous avons pu facilement afficher les informations des articles dans notre template.
Nous ne verrons pas la pagination ici, plusieurs façons de faire sont possibles (pages d'articles, flux infini avec AJAX...).
Pour afficher dans "Featured Post" un seul post, nous allons faire une requête personnalisée afin de n'afficher que les articles ayant le tag "featured". Bien sûr avec ce système, un seul article ne pourra être en tag Featured.
Pour cela, nous allons mettre dans featured-post.php :
$original_query = $wp_query;
$wp_query = null;
$args=array('posts_per_page'=>1, 'tag' => 'featured');
$wp_query = new WP_Query( $args );
if ( have_posts() ) :
while (have_posts()) : the_post();
// ... Contenu du post
endwhile;
endif;
$wp_query = null;
$wp_query = $original_query;
wp_reset_postdata();Nous créeons une sous-loop qui n'ira chercher qu'un post dans featured. Nous enregistrons la requête du Loop wordpress habituelle dans une variable avant de faire notre requête personnalisée grâce à WP_Query et $args.
Ensuite, nous affichons dans le loop (affichant 1 article, celui avec le tag "featured") le contenu du post (ce loop est facile, à remplir par vous même !). Enfin, nous réinitialisons les données de la requête pour retrouver le Loop qui affichera tous les articles plus bas (dans main.php).
Le principe est le même: nous ajoutons le tag "highlight" à deux articles, lesquels s'afficheront dans les 2 cadres. Voici l'exemple de ce loop (dans highlight-posts.php) :
<div class="row mb-2">
<?php
$original_query = $wp_query;
$wp_query = null;
$args=array('posts_per_page'=>2, 'tag' => 'highlight');
$wp_query = new WP_Query( $args );
if ( have_posts() ) :
while (have_posts()) : the_post(); ?>
<div class="col-md-6">
<div class="card flex-md-row mb-4 shadow-sm h-md-250">
<div class="card-body d-flex flex-column align-items-start">
<strong class="d-inline-block mb-2 text-primary"><?php the_category(' '); ?></strong>
<h3 class="mb-0">
<a class="text-dark" href="#"><?php the_title();?></a>
</h3>
<div class="mb-1 text-muted"><?php the_date(); ?></div>
<p class="card-text mb-auto"><?php echo strlen(get_the_excerpt()) > 50 ? substr(get_the_excerpt(), 0, 50) . '...' : get_the_excerpt(); ?></p>
<a href="#">Lire plus</a>
</div>
<img class="card-img-right flex-auto d-none d-lg-block" data-src="holder.js/200x250?theme=thumb" alt="Card image cap">
</div>
</div>
<?php endwhile;
endif;
$wp_query = null;
$wp_query = $original_query;
wp_reset_postdata();
?>
</div> <!-- /div.row mb-2 -->
</div> <!-- /div.container de header.php -->La sidebar est un élément dynamique géré par Wordpress: en effet, on doit être capable de détecter cette zone afin d'y ajouter des widgets via le back-office. Pour cela, dans functions.php, on déclare la zone Sidebar :
function tt_register_sidebars() {
/* Register the 'primary' sidebar. */
register_sidebar(
array(
'id' => 'primary',
'name' => __( 'Primary Sidebar' ),
'description' => __( 'A short description of the sidebar.' ),
'before_widget' => '<div class="p-3 widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<h4 class="font-italic">',
'after_title' => '</h4>',
)
);
/* Repeat register_sidebar() code for additional sidebars. */
}
add_action( 'widgets_init', 'tt_register_sidebars' );
Ici, on a adapté les éléments before/after_widget et before/after_title de telle sorte que nous collions au plus près à la sidebar d'exemple !
Le fichier sidebar.php, auquel on enlève les faux widgets, va appeler la sidebar dynamique (nommée "primary" lors de la déclaration) :
<aside class="col-md-4 blog-sidebar">
<div class="p-3 mb-3 bg-light rounded">
<h4 class="font-italic">About</h4>
<p class="mb-0">Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus
sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
</div>
<?php if ( is_active_sidebar( 'primary' ) ) : ?>
<?php dynamic_sidebar( 'primary' ); ?>
<?php endif; ?>
</aside><!-- /.blog-sidebar -->Pour tester les widgets, on peut aller dans le back-office Wordpress et ajouter à la sidebar le widget "Archives". Néanmoins la liste des mois s'affichera dans une ul/li classique (liste à points + padding), on peut éditer le style de .widget-archive pour corriger cela dans style.css:
.widget_archive > ul {
padding: 0;
list-style-type: none;
}Documentation: Template Hierarchy
On va ajouter les liens dynamiques aux articles afin de rediriger vers une page d'articles.
Les pages d'articles retombent (fallback) vers la page single.php si elle existe, on va donc la créer afin d'afficher les articles.
Pour ajouter le lien d'un article quand on est dans une Loop, on peut utiliser the_shortlink(). Il va le nom du lien en paramètre à cette fonction car par défaut, elle affiche "This is the short link." , on peut faire par exemple dans main.php :
...
<h2 class="blog-post-title"><?php the_shortlink(get_the_title()); ?></a></h2>
...Pour ces deux fichiers, on va faire de même avec le lien "Lire plus" :
// featured-post.php
...
<p class="lead mb-0"><a href="#" class="text-white font-weight-bold"><?php the_shortlink('Lire plus...'); ?></a></p>
...// highlight-posts.php
...
<p class="card-text mb-auto"><?php echo strlen(get_the_excerpt()) > 50 ? substr(get_the_excerpt(), 0, 50) . '...' : get_the_excerpt(); ?></p>
<?php the_shortlink('Lire plus'); ?>
...Dans single.php, on va prendre le template de index.php qu'on adaptera (nous retirerons les parties featured-post et highlight-posts et la sidebar par exemple) :
<?php get_header(); ?>
<main role="main" class="container">
<div class="row">
<div class="col-md-12 blog-main">
<?php if ( have_posts() ) : /* S'il y a des articles */ ?>
<?php while ( have_posts() ) : the_post(); /* Tant qu'il y a des articles : j'instancie le pointeur d'articles (the_post()) sur le post en question */ ?>
<div class="blog-post">
<h2 class="blog-post-title"><?php the_shortlink(get_the_title()); ?></a></h2>
<p class="blog-post-meta">Le <?php the_date(); ?> par <a href="#"><?php the_author(); ?></a></p>
<p><?php echo get_the_content(); ?></p>
</div><!-- /.blog-post -->
<?php endwhile; ?>
<?php endif; ?>
</div><!-- /.row -->
</main><!-- /.container -->
<?php get_footer(); ?>Maintenant que vous avez un thème basique qui fonctionne, vous pouvez parcourir la documentation (et Google !) pour ajouter d'autres features propres à vos besoins.