Editions ENI Livres | Vidéos | e-Formations
Le thème de démarrage JointsWP
L’objectif
Le Starter Theme JointsWP est basé sur le framework CSS Foundation 6 (http://foundation.zurb.com). Avec ce framework, vous allez bénéficier d’une mise en page et d’une mise en forme présentes dès l’installation de JointsWP. Vous ne partirez pas d’un affichage vierge. Une fois l’installation de JointsWP faite, vous pouvez personnaliser tout l’affichage de votre site à l’aide des propriétés CSS de Foundation.
L’installation de JointsWP
Dans un premier temps, allez sur le site de JointsWP : http://jointswp.com
Vous voyez que vous pouvez télécharger la version SASS ou CSS classique du thème. Dans cet exemple, nous allons partir de la version classique CSS.
Pour ce faire, cliquez sur le bouton Download CSS.
Vous téléchargez une archive nommée JointsWP-CSS-master.zip.
Dans l’administration de WordPress, faites une installation classique de ce thème, puis activez-le.
Les fichiers du thème
Dans le dossier /themes/, vous avez le dossier de votre thème, JointsWP-CSS-master. Voici la liste des fichiers et leur utilisation :
-
404.php est le template utilisé lors des erreurs d’URL.
-
archive.php est le template qui affiche les archives. Il fait appel aux templates /parts/loop-archive.php et /parts/content-missing.php.
-
Le dossier assets contient des sous-dossiers pour la personnalisation du thème.
-
comments.php est le template qui affiche la zone des commentaires.
-
le fichier favicon.png est utilisé pour afficher la favicon dans la barre d’adresse du navigateur.
-
footer.php est le template du pied de page.
-
le dossier foundation-sites contient des fichiers .css et .js nécessaires à la conception du thème avec des ressources de Foundation.
-
le dossier functions contient plusieurs fichiers .php qui contiennent des fonctions spécialisées dans la personnalisation du thème.
-
Dans ce dossier functions, vous trouverez le dossier translation contenant tous les fichiers .mo et .po de traduction du thème. Les fichiers pour le français sont fr_FR.mo et fr_FR.po.
-
functions.php contient les fonctions de personnalisation du thème.
-
header.php est le template qui affiche l’en-tête.
-
index.php est le fichier de construction pour afficher la page d’accueil du site. Il fait appel aux templates /parts/loop-archive.php...
La feuille de style CSS
Vous le savez, le fichier style.css est absolument obligatoire pour qu’un thème soit valide. Le fichier style.css de JointsWP est vide de toute règle CSS. Il ne contient qu’un commentaire où sont indiquées les nombreuses informations concernant le thème.
Voici ce fichier :
/*************************************************************
Theme Name: JointsWP - CSS
Theme URI: http://www.jointswp.com
Description:
Author: Your Name Here
Author URI: http://www.yoururlhere.com
Version: 5.0
License: GNU General Public License & MIT
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: Sass
**************************************************************/ Libre à vous de compléter et de modifier les informations qui s’y trouvent.
Le fichier de style CSS qui est utilisé pour la mise en page et la mise en forme se trouve dans /assets/styles/style.css.
C’est dans le fichier /functions/enqueue-scripts.php que nous trouvons l’indication des feuilles de styles CSS à charger.
Chargement de la feuille de styles de Foundation :
// Register Foundation styles
wp_enqueue_style( 'foundation-css', get_template_directory_uri()
. '/foundation-sites/dist/css/foundation.min.css', array(), "6.4.1", 'all' ); Chargement de la feuille de styles principale :
// Register main...Personnaliser l’interface
1. Personnaliser la connexion
Le Starter Theme JointsWP vous permet de personnaliser le logo affiché dans l’écran de connexion à l’administration de WordPress.
Voici l’écran standard de connexion :
Ouvrez le fichier functions.php.
À la ligne 44 se trouve la ligne qui fait appel à la feuille de styles CSS de personnalisation de la page de connexion :
// Customize the WordPress login menu
// require_once(get_template_directory().'/functions/
login.php'); Elle est actuellement sous forme de commentaire, elle est précédée de //.
Supprimer les caractères //, pour obtenir :
// Customize the WordPress login menu
require_once(get_template_directory().'/functions/login.php'); C’est le fichier functions/login.php qui est maintenant activé. Dans ce fichier nous avons notamment l’utilisation du fichier CSS /assets/styles/login.css :
// Calling your own login css so you can style it
function joints_login_css() {
wp_enqueue_style( 'joints_login_css',
get_template_directory_uri() . '/assets/styles/login.css', false );
} Voici l’URL de référence de la fonction wp_enqueue_style() : https://developer.wordpress.org/reference/functions/wp_enqueue_style/
C’est dans le fichier login.css qu’est déclarée la règle...
La traduction du thème
Le Starter Theme JointsWP propose dès son installation, les fichiers de traduction fr_FR.po et fr_FR.mo, dans le dossier /functions/translation/.
Utilisez le logiciel Poedit (https://poedit.net) pour modifier le fichier fr_FR.po.
La structure du thème
1. La structure des fichiers
Voici le schéma de la structure du thème qui est constitué à partir des fichiers index.php, header.php, sidebar.php et footer.php.
Comme toujours, c’est le fichier index.php qui est le fichier "maître" pour l’affichage de la page d’accueil, celui qui agence et qui appelle les autres fichiers avec les fonctions get_header(), get_sidebar() et get_footer().
2. La structure des éléments
Une fois les quatre précédents fichiers agencés, voici la structure simplifiée des différents éléments HTML constitutifs :
Nous avons l’élément <body> qui contient toute la page. Cet élément génère automatiquement les classes nécessaires au bon affichage du contenu demandé avec la fonction body_class().
Voici les classes générées pour la page d’accueil :
<body class="home blog logged-in admin-bar customize-support"> Voici les classes générées pour l’affichage d’un article en page seule :
<body class="post-template-default single single-post postid-62
single-format-standard logged-in admin-bar customize-support"> Voici les classes générées pour l’affichage d’une page :
<body class="page-template-default page page-id-21 logged-in
admin-bar customize-support"> Nous avons ensuite deux boîtes <div>, <div class="off-canvas-wrapper"> et <div class="off-canvas-content" data-off-canvas-content> qui englobent toutes les pages.
Ensuite, l’élément <header class="header" role="banner"> contient l’affichage de l’en-tête avec le titre, le slogan et la barre de navigation supérieure.
Le contenu des pages est placé dans deux boîtes <div> imbriquées...
Le fichier header.php
1. L’en-tête HTML
Le fichier header.php gère l’en-tête HTML de toutes les pages et l’en-tête affiché du site.
L’en-tête HTML contient tous les éléments de structure classiques : <!DOCTYPE html>, <html>, <head> et <body>. Les éléments <html> et <body> auront leur balise de fermeture dans le fichier footer.php. Notez dans le <head> la présence de la fonction wp_head().
Voici la structure de ce fichier :
Toute la structure des pages est contenue dans les boîtes <div class="off-canvas-wrapper"> et <div class="off-canvas-content" data-off-canvas-content>.
2. L’affichage de l’en-tête
L’en-tête du site est inséré dans l’élément <header class="header" role="banner">. Nous y trouverons le titre du site et le menu placé dans l’emplacement nommé The Main Menu (menu Apparence - Menus).
Dans l’élément <header>, le script appelle le template-part /parts/nav-offcanvas-topbar.php, avec la fonction get_template_part( ’parts/nav’, ’offcanvas-topbar’ ).
Voici la structure du template-part nav-offcanvas-topbar.php :
Tout l’en-tête est placé dans la boîte <div class="top-bar" id="top-bar-menu">.
3. L’affichage du titre du site
Dans la boîte <div class="top-bar-left...
Le fichier sidebar.php
Le fichier sidebar.php permet d’afficher les widgets dans les emplacements prévus par le thème. Les emplacements sont définis dans le fichier /functions/sidebar.php. JointsWP propose deux emplacements dans la sidebar : Sidebar 1 et Offcanvas.
Voilà l’affichage obtenu :
Voici la structure du fichier :
Toute la structure est insérée dans la boîte <div id="sidebar1" class="sidebar small-12 medium-4 large-4 cell" role="complementary">.
Le script teste si l’emplacement Sidebar 1 est utilisé : if ( is_active_sidebar( ’sidebar1’ ) ) :.
Si c’est le cas, l’emplacement et les widgets insérés sont affichés : dynamic_sidebar( ’sidebar1’ ).
Le deuxième emplacement de widget, nommé Offcanvas est affiché dans le template /parts/content-offcanvas.php. Ce template est exploité uniquement si l’emplacement du menu The Off-Canvas Menu est utilisé. C’est le template /parts/content-offcanvas.php qui est exploité. Dans ce template, nous avons bien l’appel à cet emplacement de widget : dynamic_sidebar( ’offcanvas’ ).
Avec l’utilisation de l’emplacement de menu The Off-Canvas Menu, dans l’en-tête, un bouton nommé Menu est affiché :
Quand le visiteur clique sur ce bouton, le menu s’affiche à...
Le fichier footer.php
1. La structure du pied de page
Le fichier footer.php gère l’affichage commun à toutes les pages du site du pied de page. Ce fichier est appelé, entre autres, dans le fichier index.php par la fonction get_footer().
Voici sa structure :
Tout le pied de page est inclus dans deux boîtes imbriquées : <footer class="footer" role="contentinfo"> et <div class="inner-footer grid-x grid-margin-x grid-padding-x">.
Dans ce fichier, se trouvent les balises de fermeture des éléments ouverts dans le fichier header.php et la fonction d’injection de code wp_footer().
2. L’affichage du menu
Dans la première boîte <div class="small-12 medium-12 large-12 cell">, dans l’élément <nav role="navigation">, le script affiche le menu placé dans l’emplacement Footer Links : joints_footer_links() s’il existe.
Voici l’affichage du pied de page obtenu :
3. L’affichage du texte
Dans la deuxième boîte <div class="small-12 medium-12 large-12 cell">, le script affiche le symbole du copyright, l’année en cours et le titre du site : <p class= "source-org copyright">© <?php echo date(’Y’); ?> <?php bloginfo(’name’); ?>.</p>.
L’affichage obtenu est similaire au précédent....
La page d’accueil
1. Les deux types de pages d’accueil
Vous le savez et nous l’avons déjà vu, dans la page d’accueil, vous pouvez afficher soit la liste des derniers articles publiés (c’est l’affichage par défaut), soit afficher une page statique pour la page d’accueil et une autre pour la page des articles en blog.
Ces types de pages d’accueil se gèrent dans le menu Réglages - Lecture - La page d’accueil affiche.
2. La page d’accueil en blog
C’est le fichier index.php qui contient la structure de la page d’accueil en blog. Voici cette structure :
Au tout début et en toute fin du fichier, nous avons les classiques appels à l’en-tête, get_header(), et au pied de page, get_footer().
Toute la structure est insérée dans deux boîtes <div id="content"> et <div id= "inner-content" class="row">. Avant la fermeture de cette dernière boîte, nous avons l’appel à la sidebar : get_sidebar().
C’est dans l’élément <main class="main small-12 medium-8 large-8 cell" role="main"> que se trouve la boucle WordPress : <?php if (have_posts()) : while (have_posts()) : the_post(); ?>. S’il y a des contenus à afficher, le script utilise le template-part loop-archive.php : get_template_part( ’parts/loop’...
Le fichier single.php
Le fichier single.php gère l’affichage des articles en page seule. Voici sa structure :
Nous retrouvons une structure classique pour le thème JointsWP. En début et en fin de fichier, nous avons les appels get_header() et get_footer().
Toute la structure est insérée dans les éléments <div id="content"> et <div class="inner-content grid-x grid-margin-x grid-padding-x">.
C’est dans l’élément <main class="main small-12 medium-8 large-8 cell" role="main"> que se trouve la boucle WordPress qui fait appel au template-part loop-single.php pour afficher le contenu de l’article : get_template_part( ’parts/loop’, ’single’ ). S’il n’y a pas de contenu à afficher, c’est le template-part content-missing.php pour afficher le contenu de l’article get_template_part( ’parts/content’, ’missing’ ) qui est utilisé.
Juste après la balise de fermeture de l’élément <main>, nous avons l’appel à la sidebar : get_sidebar().
Le fichier page.php
Quand une page, au sens type de contenu Page, est affichée, c’est le fichier page.php qui l’affiche. Nous avons déjà étudié sa structure dans le titre La page d’accueil - L’affichage en page statique : reportez-vous à ce titre pour revoir la structure de ce fichier.
Le fichier archive.php
Le fichier archive.php gère l’affichage des pages des archives. Ce sont les pages qui affichent la liste des articles par catégorie, par étiquette, par auteur et par mois.
Voici la structure de ce fichier :
Nous retrouvons la structure classique d’affichage du thème. Nous n’y reviendrons pas.
Dans l’en-tête de la page, <header>, dans un élément <h1>, le script affiche le titre de l’archive, the_archive_title(). Puis, le script affiche la description de l’archive dans une boîte <div> : <?php the_archive_description(’<div class="taxonomy-description">’, ’</div>’);?>.
Ensuite, nous avons la boucle WordPress : <?php if (have_posts()) : while (have_posts()) : the_post(); ?>. S’il y a des contenus à afficher, cela se fait avec le template-part loop-archive.php : get_template_part( ’parts/loop’, ’archive’ ).
Si les contenus à afficher sont plus nombreux que le seuil indiqué dans les réglages de lecture, le script affiche la pagination avec la fonction joints_page_navi().
S’il n’y a pas de contenu à afficher, c’est le template content-missing qui est utilisé : get_template_part( ’parts/content’, ’missing’ ).
Juste après la balise de fermeture de l’élément...
Le fichier search.php
Le fichier search.php est utilisé pour afficher le résultat d’une recherche.
Voici l’affichage obtenu avec comme recherche le mot lorem :
Voici la structure du fichier search.php :
Nous avons toujours la même structure.
Dans l’élément <header>, dans l’élément <h1 class="archive-title">, le script affiche la traduction du texte Search Results for: et affiche le mot recherché avec les fonctions imbriquées esc_attr(get_search_query()).
Ensuite, la boucle WordPress affiche la liste des articles répondants à la recherche avec le template-part loop-archive.php.
Les template-parts
1. L’utilisation des template-parts
Pour afficher les contenus des articles et des pages selon le contexte d’affichage des pages, les thèmes utilisent des templates dédiés. Tous les template-parts sont placés dans le dossier /parts à la racine du dossier du thème JointsWP.
2. Le fichier loop-archive.php
Le template-part loop-archive.php est utilisé dans le fichier index.php, pour afficher les articles de la page d’accueil en blog, dans le fichier archive.php pour afficher la liste des articles de l’archive demandée et dans search.php, pour afficher la liste des articles répondant à une recherche.
Voici la structure de ce template-part :
Toute la structure est insérée dans l’élément <article id="post-<?php the_ID(); ?>" <?php post_class(’’); ?> role="article">.
Dans un premier temps, nous avons l’affichage de l’en-tête des articles dans l’élément <header class="article-header">. Le script affiche le titre de l’article, the_title(), dans un lien permettant de l’afficher en page seule, <a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>">, le tout est placé dans un élément <h2>.
Puis nous avons l’affichage des métadonnées avec l’utilisation du template-part content-byline.php : get_template_part( ’parts/content’, ’byline’ ). Ce template-part affiche la date de publication, the_time(’F j, Y’), le nom de l’auteur avec un lien vers tous ses articles, the_author_posts_link() et la catégorie de l’article, the_category(’, ’). Toutes ces données sont insérées dans un élément <p class="byline">.
Voici l’affichage...
Le fichier 404.php
Le fichier 404.php est le template qui est utilisé lorsqu’une page demandée n’est pas disponible. Cela peut être dû à une page supprimée du site, une erreur d’URL...
Voici l’affichage de la page d’erreur 404 :
Voici la structure de ce template-part :
Nous avons toute une série d’éléments HTML imbriqués qui structurent cette page. Reportez-vous au schéma pour appréhender les détails.
Le script affiche d’abord la traduction du texte Epic 404 - Article Not Found, _e( ’Epic 404 - Article Not Found’, ’jointswp’ ), puis celle de The article you were looking for was not found, but maybe try looking again!, _e( ’The article you were looking for was not found, but maybe try looking again!’, ’jointswp’ ).
Enfin, le script affiche le formulaire de recherche, get_search_form().
