1 juillet 2013 - 10 comments

[Pense-bête] Design d’un thème WordPress : liste des pages à ne pas oublier

En tant que webdesigner, il n’est pas rare que j’aie à créer des thèmes pour WordPress. Je me suis donc fait une petite liste des templates à designer afin d’optimiser le processus de création, et éviter les oublis, et je me suis dit que ce serait bien de la partager !


Je passe rapidement sur les includes (header, footer, sidebar, searchform, comments, loop) vu que comme leur nom l’indique, ils sont inclus dans les différentes pages, dépendants des fonctionnalités souhaitées et de votre design.

Accueil

index.php / home.php
Si index.php est obligatoire dans un thème, ce n’est pas le cas de home.php.
Si un template n’existe pas, WordPress assigne index.php comme template par défaut, alors que home.php est le template spécifiquement dédié à la page d’accueil.
En tant que designer, créez simplement la page d’accueil, votre développeur préféré s’occupera du reste.

Header

header.php
Le header.php contient a minima :

  • Titre du site
  • Description
  • Menu et sous-menu

Page d’un article

single.php
Le template de base d’un article seul.
Il comprend :

  1. L’article avec tous ses niveaux de texte et types de contenus :
    1. Titre de l’article
    2. Microdatas (nom de l’auteur, date, nombre de commentaires, catégories, mots-clés)
    3. Image à la une
    4. Headings (h1, h2, h3, h4, h5, h6)
    5. Paragraphes (p)
    6. Listes à puces (li), ordonnées (ol) et non ordonnées (ul)
    7. Citation (blockquote)
    8. Liens (états inactif, survol et actif)
    9. Images (avec et sans légendes)
    10. Vidéos
    11. Code brut (pre) utile dans les cas de blogs orientés développement ou ayant besoin d’afficher du texte brut
    12. Bloc auteur :
    1. Avatar
    2. Nom
    3. Site web
    4. Description
    5. Lien vers “tous ses articles”
  2. D’autres éléments facultatifs mais qui peuvent se révéler indispensables pour certains projets (générés via des shortcodes) :
    1. “Toggles” ou accordéons
    2. “Tabs” ou onglets
    3. Tableaux
    4. Alerts
    5. Galerie d’images
    6. Boutons de différentes tailles et couleurs (états inactif, survol et actif)
  3. La sidebar et ses widgets selon les impératifs de votre projet
  4. Les commentaires :
    1. Champs pour laisser un commentaire
    2. A minima, 4 champs : nom, e-mail, site web, message
    3. Différencier les champs obligatoires des champs facultatifs
    4. Bouton “Envoyer” (états inactif, survol et actif)
    5. Feedback après le clic sur “Envoyer”
  5. Liste des commentaires
    1. Microdatas (nom de l’auteur, date, heure, site web)
    2. Avatar
    3. Commentaire
    4. Lien “Répondre”
    5. Commentaire imbriqué (réponse à un autre commentaire)
    6. Commentaire de l’auteur

Résultats de recherche

search.php
Liste de résultats de recherche
Résultat nul

Catégorie / Mot-clé / Archives.php

category.php / tag.php / archives.php
Liste des articles correspondant à une catégorie / un mot-clé / une date
Résultat nul

404

404.php
Pour ne plus l’oublier !

Plan du site

sitemap.php

Page(s) statique(s)

page.php
Exempte de la chronologie des articles de blog, les pages statiques servent en général à créer des pages du type “À propos”, “Contact”, “L’équipe”…
Page.php est le template par défaut de ces pages (dont les styles de texte définis dans le single.php sont applicables) et il est tout à fait possible de leur donner une mise en page propre (sans sidebar par exemple), et différente de l’une à l’autre.
Elles s’appelleront par exemple a-propos.php, contact.php, etc.

Les éléments à ne pas oublier

La pagination

Le screenshot du thème

Format 300px x 225px

Le favicon

Pour aller plus loin…

Page de connexion

wp-login.php

Custom Post Types

Selon votre projet, vous pouvez avoir besoin de créer des templates personnalisés.
Ils contiendront chacun :

  • Une page single
  • Une page archive

Formats d’articles

Les formats d’articles (post formats) sont des single.php qui ont un design différent selon leur nature de contenu. Voici les différents formats possibles :

  • Aside : contenu court, sans titre.
  • Gallery : galerie d’images.
  • Link : un lien externe, seul.
  • Image : une image, seule.
  • Quote : une citation, seule.
  • Status : une mise à jour de statut.
  • Video : une vidéo, seule.
  • Audio : un son audio, seul.
  • Chat : une retranscription de chat / dialogue en ligne.

En espérant avoir réussi à être suffisamment complète, je n’ai pas la prétention d’avoir été exhaustive, tant WordPress peut se révéler puissant pour tous types de sites.
N’hésitez pas à compléter en commentaire si vous pensez que j’ai oublié des éléments indispensables, je mettrai à jour l’article si nécessaire.

Pour aller plus loin, Marie m'a laissé un super commentaire qui complète admirablement le contenu de cet article, je vous invite à le lire. Merci à elle <3

Published by: Christelle Mozzati in Mes indispensables

Comments

Nbirckel
1 juillet 2013 at 9 h 14 min

Merci pour ce bon petit résumé Christelle !

Je complète ton article avec un lien vers le tuto de Jeremy Thomas (@bbx) qui rentre bien de la détails de l’architecture d’un theme et de sa création : http://wordpress.bbxdesign.com/

Thibault
1 juillet 2013 at 9 h 29 min

Merci pour ce récapitulatif très pratique ! Sympa de le partager ;)

Jean-Manu
30 juillet 2013 at 16 h 14 min

bonjour !

Je recherche un thème avec ces fonctions (je sens que je vais devoir le faire moi-même :/ …)
Template accueil : affichage de plusieurs bloc statiques avec en dessous l’extrait dernier post relatif à sa catégorie.
Template page : Page statique + affichage du ou des derniers post de la catégorie.

S’il quelqu’un peut me dire quel thème ressemble à ça, ce serait vraiment super !
merci d’avance

    Christelle Mozzati
    30 juillet 2013 at 22 h 44 min

    Hello Jean-Manu, je te conseille de passer du temps à fouiner dans les plateformes de vente de thèmes ;) (Theme Forest par exemple)

Marie
10 décembre 2013 at 14 h 39 min

Super ce petit récap’ !

Quelques compléments :

– Si un template affiche des extraits, veiller à ce que ces extraits soient toujours à peu près égaux en nombre de caractères, et ce sur tous les templates qui les affichent ;

– Dans les résultats de recherche, la page « aucun résultat » est généralement accompagné d’un champ de recherche et d’un bouton de soumission, ce qui permet de lancer une nouvelle recherche. On veillera à utiliser le même style que ceux des champs de formulaire designés dans la partie « Ajouter un commentaire » ;

– Pour les commentaires, tu dis : Feedback après le clic sur “Envoyer”, mais il n’est pas possible de personnaliser ce « feedback » car ce sont des messages (et des styles) par défaut de WordPress ;

– Les archives par date se subdivisent comme ceci : archive par année (url.com/2013 par exemple), archive par mois (url.com/2013/12) et archive par jour (url.com/2013/12/10/). C’est une simple précision car je ne pense pas que cela ait d’impact particulier en terme de design, mais on ne sait jamais !

– À noter que pour toutes les archives, on peut n’utiliser qu’un seul template commun, ce qui facilite grandement le travail de design et d’intégration. J’ai eu longtemps tendance à distinguer chaque archive, mais j’en suis revenue. Le problème, c’est que la multiplication des cas particuliers sur chaque type d’archive se marie rarement bien avec les charges – courtes – prévues en intégration ! Chaque cas particulier a un coût en terme de développement et d’intégration.

– Pour les galeries d’images, il faut préciser que par défaut, WordPress insère une galerie de 3 colonnes, avec des miniatures. Mais il est possible de configurer tout un tas de galeries différentes, de 1 à 9 colonnes si mes souvenirs sont bons, et avec des images de différentes tailles. Comme cela peut vite se transformer en usine à gaz en design et en inté, je conseille de ne designer que deux ou trois galeries différentes ;

– L’autre point important, qui doit se décider pendant le travail de design, c’est décider des trois tailles d’images de WordPress : miniature, moyenne, et grande. Il est très important que les templates designés respectent ces trois tailles d’images. Il est également possible de créer des tailles d’images supplémentaires, en plus de ces trois-là, en fonction des besoins du site. Quel que soit le nombre de tailles d’images prévues dans le thème, celles-ci doivent être fixes et ne plus bouger d’un template à l’autre ;

– Dernière chose à laquelle je pense : sur les pages d’archives, éviter de réunir les 10 billets de la page en groupes distincts (par ex. un premier groupe de 3 articles avec des miniatures et une typo de 16px, et un autre groupe de 7 articles sans miniature et pas d’extrait, par exemple). J’ai eu le cas sur un design WordPress récent que j’ai eu à intégrer, et cela a entraîné une complexité incompatible avec les charges très justes en intégration dont je disposais !

« Qui peut le plus peut le moins ». Je ne saurais que trop conseiller aux chefs de projet et aux web designers qui doivent concevoir un site WordPress mais ne connaissent pas très bien l’outil d’inclure dans la boucle un développeur WordPress dès le début, pour qu’il puisse confirmer la faisabilité technique des fonctionnalités demandées par le client.

WordPress n’est pas toujours l’outil adéquat sur les sites complexes, mais je m’égare… :-)

    Marie
    10 décembre 2013 at 14 h 42 min

    Ah, et dernier truc : les commentaires imbriqués c’est super, et il faut évidemment les prévoir en design, mais surtout il faut définir une limite d’imbrication.

    Car un design ne fonctionnera évidemment pas de la même façon selon qu’il y ait deux niveaux d’imbrication ou dix !

    Voilà, c’est tout :-P

      Christelle Mozzati
      10 décembre 2013 at 16 h 23 min

      Wow, merci Marie pour ces commentaires super complets ! o/ Je mettrai à jour l’article quand j’aurai un peu de temps, en attendant je mets un lien vers ton commentaire dans l’article. Merci merci :)

      Samuel
      30 avril 2014 at 19 h 27 min

      Prévoir une limite d’imbrication et réfléchir à un affichage adéquat sur mobile. Les ligne de 5 ou 6 caractères sont difficiles à lire :)

Leave a Reply