Bienvenue dans Créer un thème Repo-Ready ! Dans l’article précédent, on a mis en place notre environnement de travail. Ce qu’on va faire maintenant, c’est passer en revue le template que je vous propose.

Dans le navigateur

D’abord, téléchargez les fichiers associés à cet article :  1-5 – Passage en revue du prototype.zip

Le template est assez simple. On a un grand header, avec une zone de logo et un menu caché par défaut, quel que soit la taille de l’écran. On a le titre du site ou de la page, avec une description au-dessus.

Créer un thème Repo Ready - Screenshot - Header

En-dessous on a une zone de contenu à gauche, avec une sidebar à droite, tout ce qu’il y a de plus classique.

Pour chaque entrée, on a un header avec le titre et des métas, le edit-post-link, et le contenu en-dessous.

Pour vous donner un exemple, le edit-post-link fait partie des éléments recommandés. Les utilisateurs de thème s’attendent à ce qu’un utilisateur connecté puisse aller éditer le post rapidement. On peut mettre ce lien en footer du post, juste après le contenu, ….. Peu importe. Mais il est recommandé de le mettre. C’est un élément d’UX attendu, simplement.

Créer un thème Repo Ready - Screenshot - Content

 

Ensuite, on a un footer, avec les tags et les commentaires.

Ensuite, on a les liens pour naviguer entre les posts. Deux gros boutons, simplement. Encore une fois, c’est un élément d’UX attendu.

Créer un thème Repo Ready - Screenshot - Post Footer

En footer principal, on va avoir une zone de widget, et un footer plus simple en-dessous, avec les crédits du thème et quelques liens sociaux.

Le menu apparaît en cliquant sur le bouton. Il apparaît en glissant de la droite.

Dans la colonne de menu, on a un champ de recherche, et le menu qui est présenté simplement dans une bête liste, puis on a aussi une zone de widget. Du coup, cela permet aux utilisateurs d’utiliser soit la sidebar principale du blog, soit de cacher les widgets dans le menu et de laisser la partie contenu en une seule colonne, ou d’utiliser les deux.

Créer un thème Repo Ready - Screenshot - Menu

 

L’HTML

On a une structure HTML assez simple.

<!DOCTYPE html>
<html lang="fr" class="no-js">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="profile" href="http://gmpg.org/xfn/11">
    <link href="https://fonts.googleapis.com/css?family=Audiowide|Exo+2:300,300i,400,400i,700,700i&subset=latin-ext" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Space+Mono" rel="stylesheet">
    <link href="style.css" rel="stylesheet">
    <script src="js/detection.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/evil-icons/1.9.0/evil-icons.min.css">
    <script src="https://cdn.jsdelivr.net/evil-icons/1.9.0/evil-icons.min.js"></script>
</head>
Balise <head>

Dans la balise <head> on va charger les scripts et styles. On utilise une seule feuille de styles et des icônes venant de http://evil-icons.io.

En ce qui concerne les polices de caractères, on va utiliser de simples Google Fonts. On utilise Exo 2 (https://fonts.google.com/specimen/Exo+2) comme police principale et Audiowide (https://fonts.google.com/specimen/Audiowide) pour les titres h1, h2, h3. Pour le code, on utilise Space Mono (https://fonts.google.com/specimen/Space+Mono).

Pour ces icônes, il faut simplement inclure un petit script js qui va remplacer nos <span> vides avec les svg qui vont bien.

<body class="medium-content-area sidebar-right medium-body-text large-headings large-icons">
<div id="page" class="site">
    
    <a class="skip-link screen-reader-text" href="#content">
        <span>Skip to content</span>
        <span data-icon="ei-arrow-right"></span>
    </a>

	<header id="masthead" class="site-header" role="banner">
	
Balise <body>

Dans le <body> il y a quelques classes avec des réglages par défaut. On en parlera bien plus tard, quand on parlera du customizer.

Tout de suite en-dessous, on a un skip link, qui va permettre de passer direct au contenu. C’est une bonne pratique d’accessibilité qui permet aux utilisateurs utilisant un screen reader de ne pas se retaper la lecture de tout le header et toute la navigation.

<header id="masthead" class="site-header" role="banner">
		
        <div class="header-info">
			<h1 class="header-title">Carbon</h1>
			<p class="header-meta">A bold theme for bold bloggers</p>
		</div>

		<nav id="site-navigation" class="main-navigation" role="navigation">

            <a href="index.html" class="custom-logo-link">
                <!-- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="50px" height="50px"><rect x="0" fill="none" width="20" height="20"/><g stroke="white" fill="transparent"><path d="M14.48 11.06L7.41 3.99l1.5-1.5c.5-.56 2.3-.47 3.51.32 1.21.8 1.43 1.28 2.91 2.1 1.18.64 2.45 1.26 4.45.85zm-.71.71L6.7 4.7 4.93 6.47c-.39.39-.39 1.02 0 1.41l1.06 1.06c.39.39.39 1.03 0 1.42-.6.6-1.43 1.11-2.21 1.69-.35.26-.7.53-1.01.84C1.43 14.23.4 16.08 1.4 17.07c.99 1 2.84-.03 4.18-1.36.31-.31.58-.66.85-1.02.57-.78 1.08-1.61 1.69-2.21.39-.39 1.02-.39 1.41 0l1.06 1.06c.39.39 1.02.39 1.41 0z"/></g></svg> -->
                <img src="img/logo.svg" />
            </a>
          
			<button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false">
                <span data-icon="ei-navicon"></span>
                <span>Menu</span>
            </button>
            
            <div class="menu-wrapper">
                
                <header class="menu-header">
                    <h2 class="menu-title">Menu</h2>
                    <button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false">
                        <span data-icon="ei-close"></span>
                        <span class="screen-reader-text">Close Menu</span>
                    </button>
                </header>

                <form action="" method="GET" name="s" class="search-form" role="search">
                    <label>
                        <span class="screen-reader-text">Search for:</span>
                        <input type="search" class="search-field" placeholder="Search …" value="" name="s">
                    </label>
                    <span data-icon="ei-search"></span>
                </form>

                <ul class="primary-menu">
                    <li><a href="">Menu Item 1</a>
                        <ul class="sub-menu">
                            <li><a href="#">Sub menu item 1</a></li>
                            <li><a href="#">Sub menu item 2</a>
                                <ul class="sub-menu">
                                    <li><a href="#">Sub sub menu item 1</a></li>
                                    <li><a href="#">Sub sub menu item 2</a></li>
                                    <li><a href="#">Sub sub menu item 3</a></li>
                                    <li><a href="#">Sub sub menu item 4</a></li>
                                </ul>
                            </li>
                            <li><a href="#">Sub menu item 3</a></li>
                            <li><a href="#">Sub menu item 4</a></li>
                        </ul>
                    </li>
                    <li><a href="">Menu Item 2</a></li>
                    <li><a href="">Menu Item 3</a></li>
                    <li><a href="">Menu Item 4</a></li>
                </ul>

                <ul class="social-icons">
                    <li>
                        <a href="#">
                            <span class="screen-reader-text">Facebook</span>
                            <span data-icon="ei-sc-facebook"><noscript>Facebook</noscript></span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span class="screen-reader-text">Twitter</span>
                            <span data-icon="ei-sc-twitter"><noscript>Twitter</noscript></span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span class="screen-reader-text">Google Plus</span>
                            <span data-icon="ei-sc-google-plus"><noscript>Google Plus</noscript></span>
                        </a>
                    </li>
                </ul>

                <aside id="menu-widget-area" class="menu-widget-area">
                    
                    <section class="widget menu-widget">
                        <h2 class="widget-title h5">Text Widget</h2>
                            Houston, Tranquillity Base here. The Eagle has landed. 
                            Curious that we spend more time congratulating people who have succeeded than encouraging people who have not.
        The sky is the limit only for those who aren't afraid to fly!
                    </section>

                    <section class="widget menu-widget">
                        <h2 class="widget-title h5">List Widget</h2>
                        <ul>
                            <li>List item 1</li>
                            <li>List item 2</li>
                            <li>List item 3</li>
                        </ul>
                    </section>

                    <section class="widget menu-widget">
                        <h2 class="widget-title h5">Image Widget</h2>
                        <img src="img/coffee.jpg" />    
                    </section>

                </aside>

            </div>

		</nav><!-- #site-navigation -->

	</header><!-- #masthead -->
Balise</p> <header>

Dans le <header>, on a deux éléments :

  • Une <div> avec le titre et description du titre.
  • un élément <nav> qui va contenir notre navbar (Logo plus bouton Menu) et toute la colonne menu.

Sémantiquement, c’est mieux de placer le titre du site avant la navigation, donc j’ai opté pour ce markup et j’ai manipulé la position des éléments avec Flexbox.

Dans la navigation (<nav class="main-navigation">), on a le logo, le bouton de navigation, et la zone de menu qui est positionnée avec position: absolute, donc qui sort du flow du document, ce qui est bien pratique ici.

Dans notre zone de menu, on a un header, avec un titre et le bouton pour fermer le menu, le formulaire de recherche, et une <ul class="primary-menu"> pour le menu. On a aussi une autre <ul> pour les liens de réseau sociaux. La zone de widget est un <aside> et chaque widget une <section>.

On peut fermer le menu en cliquant sur la croix, à l’extérieur du menu ou alors en appuyant sur echap.

<div id="content" class="site-content">

        <main id="primary" class="content-area" role="main">

            <article class="post hentry">
                
                <header class="entry-header">
                    <h2 class="entry-title"><a title="Basic text elements" href="" rel="bookmark">Basic Text elements</a></h2>
                    <p class="entry-meta">
                        <span class="byline">Posted in <a href="">WordPress</a>, on <a href="">August 9th, 2017</a></span>
                        <a title="Edit this post" href="" class="post-edit-link">
                            <span>Edit this post</span>
                            <span data-icon="ei-pencil"></span>
                        </a>
                    </p><!-- .entry-meta -->
                </header><!-- .entry-header -->

                <div class="entry-content">

                    <p>This is a standard paragraph created using the* WordPress TinyMCE text editor. It has* a <strong>strong tag</strong>, an <em>em tag</em> and a <del>strikethrough</del> which is actually just the del element. There are a few more inline elements which are not in the WordPress admin but we should check for incase your users get busy with the copy and paste. These include <cite>citations</cite>, <abbr title="abbreviation">abbr</abbr>, bits of <code>code</code> and <var>variables</var>, <q>inline quotations</q>, <ins datetime="2011-12-08T20:19:53+00:00">inserted text</ins>, text that is <s>no longer accurate</s> or something <mark>so important</mark> you might want to mark it. We can also style subscript and superscript characters like C0<sub>2</sub>, here is our 2<sup>nd</sup> example. If they are feeling non-semantic they might even use <b>bold</b>, <i>italic</i>, <big>big</big> or <small>small</small> elements too. Incidentally, these HTML4.01 tags have been given new life and semantic meaning in HTML5, you may be interested in reading this 
                    <a title="HTML5 Semantics" href="http://csswizardry.com/2011/01/html5-and-text-level-semantics">article by Harry Roberts</a> which gives a nice excuse to test a link.  It is also worth noting in the "kitchen sink" view you can also add <span style="text-decoration: underline;">underline</span> styling and set <span style="color: #ff0000;">text color</span> with pesky inline CSS.</p>
                    <p style="text-align: left;">Additionally, WordPress also sets text alignment with inline styles, like this left aligned paragraph. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.</p>
                    <p style="text-align: right;">This is a right aligned paragraph. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.</p>
                    <p style="text-align: justify;">This is a justified paragraph. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.</p>
                    <p style="padding-left: 30px;">Finally, you also have the option of an indented paragraph. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.</p> <p>And last, and by no means least, users can also apply the <code>Address</code> tag to text like this:</p> <address>123 Example Street,
                    Testville,
                    West Madeupsburg,
                    CSSland,
                    1234</address> <p>...so there you have it, all our text elements</p>
        
                </div><!-- .entry-content -->

                <footer class="entry-footer">  
                    <span class="tags-links">
                        <span class="screen-reader-text">Tags</span>
                        <span data-icon="ei-tag"></span>
                        <a title="Basic Text Tag archive link" href="">Basic Text</a>, 
                        <a title="Basic Text Tag archive link" href="">Test</a>, 
                        <a title="Basic Text Tag archive link" href="">WordPress</a>
                    </span>
                
                    <span class="comments-link">
                        <a href="" title="Go to comments">3 Comments</a>
                        <span data-icon="ei-comment"></span>
                    </span>
                </footer><!-- .entry-footer -->

            </article>

            <article class="post hentry">
                
                <header class="entry-header">
                    <h2 class="entry-title"><a title="Headings" href="" rel="bookmark">Headings</a></h2>
                    <div class="entry-meta">
                        <span class="byline">Posted in <a href="">WordPress</a>, on <a href="">August 9th, 2017</a></span>
                        <a title="Edit this post" href="" class="post-edit-link">
                            <span>Edit this post</span>
                            <span data-icon="ei-pencil"></span>
                        </a>
                    </div><!-- .entry-meta -->
                </header><!-- .entry-header -->

                <div class="entry-content">

                    <h1>Level One Heading</h1>
                    <h2>Level Two Heading</h2>
                    <h3>Level Three Heading</h3>
                    <h4>Level Four Heading</h4>
                    <h5>Level Five Heading</h5>
                    <h6>Level Six Heading</h6>
        
                </div><!-- .entry-content -->

                <footer class="entry-footer">  
                    <span class="tags-links">
                        <span class="screen-reader-text">Tags</span>
                        <span data-icon="ei-tag"></span>
                        <a title="Basic Text Tag archive link" href="">Headings</a>
                    </span>
                
                    <span class="comments-link">
                        <a href="" title="Go to comments">No Comments</a>
                        <span data-icon="ei-comment"></span>
                    </span>
                </footer><!-- .entry-footer -->

            </article>

            <article class="post hentry">
                
                <header class="entry-header">
                    <h2 class="entry-title"><a title="Lists" href="" rel="bookmark">Lists</a></h2>
                    <div class="entry-meta">
                        <span class="byline">Posted in <a href="">WordPress</a>, on <a href="">August 9th, 2017</a></span>
                        <a title="Edit this post" href="" class="post-edit-link">
                            <span>Edit this post</span>
                            <span data-icon="ei-pencil"></span>
                        </a>
                    </div><!-- .entry-meta -->
                </header><!-- .entry-header -->

                <div class="entry-content">

                    <ul>
                        <li>Unordered list item one.</li>
                        <li>Unordered list item two.</li>
                        <li>Unordered list item three.</li>
                        <li>Unordered list item four.</li>
                        <li>By the way, Wordpress does not let you create nested lists through the visual editor.</li>
                    </ul>

                    <ol>
                        <li>Ordered list item one.</li>
                        <li>Ordered list item two.</li>
                        <li>Ordered list item three.</li>
                        <li>Ordered list item four.</li>
                        <li>By the way, Wordpress does not let you create nested lists through the visual editor.</li>
                    </ol>
        
                </div><!-- .entry-content -->

                <footer class="entry-footer">  
                    <span class="tags-links">
                        <span class="screen-reader-text">Tags</span>
                        <span data-icon="ei-tag"></span>
                        <a title="Basic Text Tag archive link" href="">Lists</a>
                    </span>
                
                    <span class="comments-link">
                        <a href="" title="Go to comments">No Comments</a>
                        <span data-icon="ei-comment"></span>
                    </span>
                </footer><!-- .entry-footer -->

            </article>
            
            <nav class="navigation posts-navigation" role="navigation">
                <h2 class="screen-reader-text">Posts navigation</h2>
                <div class="nav-links">
                     <div class="nav-previous">
                        <a href="index-older.html" class="next-posts-link button" rel="prev">
                            <span data-icon="ei-arrow-left"></span>
                            <span>Older post</span>
                        </a>
                    </div> 
                    <!-- <div class="nav-next">
                        <a href="#" class="previous-posts-link button" rel="next">
                            <span>Newer post</span>
                            <span data-icon="ei-arrow-right"></span>
                        </a>
                    </div> -->
                </div>  
            </nav>

        </main><!-- #main -->

        <aside id="secondary" class="widget-area" role="complementary">

            <section class="widget">
                <h2 class="widget-title h5">Text Widget</h2>
                <p>Houston, Tranquillity Base here. The Eagle has landed.</p>
                <p>Curious that we spend more time congratulating people who have succeeded than encouraging people who have not.The sky is the limit only for those who aren't afraid to fly!</p> 
            </section>

            <section class="widget">
                <h2 class="widget-title h5">List Widget</h2>
                <ul>
                    <li>List item 1</li>
                    <li>List item 2</li>
                    <li>List item 3</li>
                </ul>
            </section>

            <section class="widget">
                <h2 class="widget-title h5">Image Widget</h2>
                <img src="img/coffee.jpg" />    
            </section>

        </aside><!-- #secondary -->
    
    </div><!-- #content -->
Balise <main>

Dans la zone de contenu, on a un <main> avec nos articles et un <aside> avec les widgets, simplement. Chaque article est un <article> avec un <header>, <div class="entry-content">, <footer>.

Sous les articles on a un élément <nav> avec les liens de navigation. Le markup ici est un peu particulier, mais en fait je triche un peu. C’est le markup utilisé par WordPress et les fonctions qui affiche la navigation entre les posts. Je savais que j’allais utiliser cette fonction, donc j’ai repris le markup, et j’ai fait mes styles en fonction de ce markup.

Si j’avais fait mon propre balisage, ça aurait été plus difficile de l’intégrer dans WordPress plus tard. Ce balisage donne un titre pour les screen readers, ce qui est bien pour l’accessibilité.

<footer id="colophon" class="site-footer" >

        <aside id="footer-widget-area" class="footer-widget-area" role="complementary">
            <div class="footer-widgets">
                
                <section class="widget footer-widget">
                    <h2 class="widget-title h5">Text Widget</h2>
                    <div class="text-widget">
                        Houston, Tranquillity Base here. The Eagle has landed. 
                        Curious that we spend more time congratulating people who have succeeded than encouraging people who have not.The sky is the limit only for those who aren't afraid to fly!
                    </div>
                </section>

                <section class="widget footer-widget">
                    <h2 class="widget-title h5">List Widget</h2>
                    <ul>
                        <li>List item 1</li>
                        <li>List item 2</li>
                        <li>List item 3</li>
                    </ul>
                </section>

                <section class="widget footer-widget">
                    <h2 class="widget-title h5">Image Widget</h2>
                    <img src="img/coffee.jpg" />    
                </section>

            </div>
        </aside>

        <div class="footer-wrapper" role="contentinfo">
            
            <div class="site-info">
                <a href="https://wordpress.org">Proudly Powered by WordPress</a>
                <span class="sep"> | </span>
                Theme: Carbon by <a href="" rel="designer">Vincent Dubroeucq</a>
            </div><!-- .site-info -->

            <ul class="social-icons">
                <li>
                    <a href="#">
                        <span class="screen-reader-text">Facebook</span>
                        <span data-icon="ei-sc-facebook"><noscript>Facebook</noscript></span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span class="screen-reader-text">Twitter</span>
                        <span data-icon="ei-sc-twitter"><noscript>Twitter</noscript></span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span class="screen-reader-text">Google Plus</span>
                        <span data-icon="ei-sc-google-plus"><noscript>Google Plus</noscript></span>
                    </a>
                </li>
            </ul>

        </div><!-- .footer-wrapper -->
	</footer><!-- #colophon -->
</div><!-- #page -->

<script src="js/navigation.js"></script>
<script src="js/skip-link-focus-fix.js"></script>
</body>
Balise</p> <footer>

Le <footer> contient un <aside> avec les widgets et une <div> avec les petites infos et les liens sociaux.

Rien de vraiment étonnant. J’ai essayé de garder le balisage assez propre, simple et sémantique.

Et c’est tout !

 

LE CSS

Au niveau de la feuille de style, tout est dans la même feuille.

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Normalize
# Typography
# Elements
# Forms
# Accessibility
# Alignments
# Clearings
# Infinite scroll
# Media
	## Captions
	## Galleries
# Content
	## Header
	## Main navigation and menu area
	## Posts and pages
	## Comments
	## Posts Navigation
	## Footer
# Widgets
	## Widget areas styles and basic widgets styles
	## WordPress default widgets styles
--------------------------------------------------------------*/
Table of Contents

Elle est organisée assez simplement. J’ai repris l’organisation d’Underscores. Underscores, c’est le thème starter de chez Automattic. C’est celui utilisé pour les Twenty. C’est une bonne base pour la création de thème et même si dans notre cas on va pas démarrer avec Underscores mais un prototype, je garde toujours une copie sous le coude, car il y a pas mal de bonnes idées.

On commence par normaliser les styles. Qu’est-ce que veut dire « normaliser » ?

Simplement, les navigateurs peuvent avoir différents affichages par défaut pour les éléments. Par exemple, pour une simple <ul>, les marges et padding peuvent être différents selon les navigateurs.

Normaliser va permettre de redéfinir la base sur laquelle vient se greffer notre CSS personnalisé, et donc d’utiliser la même base pour tous les navigateurs.

Cela permet de lisser les différences d’affichage sur les différents navigateurs et donc d’avoir un thème plus cohérent de navigateur en navigateur.

Vous pouvez trouver une copie de cette section soit dans la feuille de style d’Underscores ou alors sur https://necolas.github.io/normalize.css/. Vous aurez une petite feuille de style à inclure.

Ensuite on définit les éléments de typographie, les éléments HTML simples ainsi que les formulaires.

Les sections Accessibility, Alignments, Clearings sont très importantes. Ce sont des helpers qui vont définir des classes super utiles à utiliser dans le thème.

/*--------------------------------------------------------------
# Accessibility
--------------------------------------------------------------*/
/* Text meant only for screen readers. */
.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
}

.screen-reader-text:focus {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #fff;
  clip: auto !important;
  color: #444;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: auto;
  left: 3em;
  padding: 1em 2em;
  top: 3em;
  width: auto;
  z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#content[tabindex="-1"]:focus {
  outline: 0;
}

/*--------------------------------------------------------------
# Alignments
--------------------------------------------------------------*/
.alignleft {
  display: inline;
  float: left;
  margin: 1.5em 1.5em 1.5em 0;
}

.alignright {
  display: inline;
  float: right;
  margin: 1.5em 0 1.5em 1.5em;
}

.aligncenter {
  clear: both;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1.5em;
}

.alignnone {
  margin: 1.5em 0;
}

/*--------------------------------------------------------------
# Clearings
--------------------------------------------------------------*/
.clear:before,
.clear:after,
.entry-content:before,
.entry-content:after,
.comment-content:before,
.comment-content:after,
.site-header:before,
.site-header:after,
.site-content:before,
.site-content:after {
  content: "";
  display: table;
  table-layout: fixed;
}

.clear:after,
.entry-content:after,
.comment-content:after,
.site-header:after,
.site-content:after {
  clear: both;
}
Accessibility, Alignments, Clearings

Par exemple, dans la section Accessibility, on a la classe .screen-reader-text. Cette classe va permettre de cacher visuellement un élément, mais pas pour les screen readers. C’est très important pour l’accessibilité.

La section Alignments est très importante aussi car WordPress utilise ces classes pour styler les images. Si ces classes sont manquantes, l’alignement de images proposés dans l’éditeur ne fonctionnera pas. Et votre thème ne passera pas sur le repo !

Il y a d’autres classes CSS nécessaires au fonctionnement de WordPress, on va en parler un peu après.

La section Clearings défini des classes utiles pour gérer les floats. Ce sont les classes de clearfix, en fait.

Dans la section Media, on va définir quelques règles pour les smileys et pour les embed.

/*--------------------------------------------------------------
# Media
--------------------------------------------------------------*/
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
  border: none;
  margin-bottom: 0;
  margin-top: 0;
  padding: 0;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
  max-width: 100%;
}

/*--------------------------------------------------------------
## Captions
--------------------------------------------------------------*/
.wp-caption {
  margin-bottom: 1.5em;
  max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.wp-caption .wp-caption-text {
  margin: 1em 0;
}

.wp-caption-text {
  font-size: .8em;
  font-style: italic;
  text-align: center;
}

/*--------------------------------------------------------------
## Galleries
--------------------------------------------------------------*/
.gallery {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin-bottom: 1.5em;
}

.gallery-item {
  text-align: center;
}

.gallery-columns-2 .gallery-item {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 50%;
  flex: 1 1 50%;
}

.gallery-columns-3 .gallery-item {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 33%;
  flex: 1 1 33%;
}

.gallery-columns-4 .gallery-item {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 25%;
  flex: 1 1 25%;
}

.gallery-columns-5 .gallery-item {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 20%;
  flex: 1 1 20%;
}

.gallery-columns-6 .gallery-item {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 16.66%;
  flex: 1 1 16.66%;
}

.gallery-columns-7 .gallery-item {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 14.28%;
  flex: 1 1 14.28%;
}

.gallery-columns-8 .gallery-item {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 12.5%;
  flex: 1 1 12.5%;
}

.gallery-columns-9 .gallery-item {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 11.11%;
  flex: 1 1 11.11%;
}

.gallery-caption {
  display: block;
}
Media, Captions, Galleries

La section Caption définit des classes requises par WordPress pour gérer les légendes des images. Comme pour les classes d’alignements, WordPress génère de l’HTML en utilisant ces classes quand vous ajoutez une légende aux images.

Donc il faut absolument définir ces classes dans votre feuille de style.

Idem pour Gallery. Ce sont des classes indispensables, utilisées quand vous créez une galerie avec la fonction native de WordPress.

Ensuite, dans la section Content, on a tous les styles du site: le header, les menus, les zones de contenu, le footer, les widgets, etc… Je ne vais pas vous la coller ici, car elle est plutôt grosse. Vous pourrez télécharger les fichiers sources en bas de cet article, pas de soucis.

La section Content contient aussi des classes nécessaires, car utilisée par WordPress : comme .sticky, .bypostauthor.sticky est utilisée pour les articles mis en avant, et .bypostauthor par les commentaires de l’auteur de l’article.

La section Comments contient les styles du formulaire et de la liste des commentaires. Idem, les classes sont générée par WordPress. On peut les changer, mais autant utiliser les classes par défaut.

Ensuite on a les styles pour la navigation entre les posts, le footer et les zones de widgets.

A la fin, on a quelques styles pour les widgets par défaut de WordPress. WordPress est livré avec quelques widgets sympas disponibles. Ces classes permettent de s’assurer qu’ils sont tous affichés correctement.

Et voilà pour la feuille de styles !

 

Juste assez de vues

Pour le prototype, pas besoin de faire des dizaines de pages différentes, sauf si votre thème est complexe et qu’il y a des vues particulières, comme portfolio, ou un e-commerce. Ici, c’est un simple thème de blog, donc une page d’archive comme celle-ci et une vue simple suffisent.

Le but est de faire le minimum possible pour pouvoir mettre en place la plus grande partie de la feuille de style et du JS. Avec ces deux vues, j’ai 80% de ce dont j’ai besoin en termes de CSS et JS. Donc c’est bon.

Prenez un peu de temps pour analyser le template, et quand vous êtes prêts, on parlera dans l’article suivant de la documentation de WordPress et ensuite, on pourra attaquer.

Si vous ne l’avez pas encore téléchargé, vous pouvez le faire maintenant : 1-5 – Passage en revue du prototype.zip

Mais avant d’attaquer, partagez !

Partagez !

WordPress:

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *


706cb6c08732e407182f976f4f0c0501yyyyyy
%d blogueurs aiment cette page :