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

The following two tabs change content below.
Graphiste & webdesigner, hyperactive sur Twitter, je travaille à Lyon, et réside dans une petite ville de la campagne iséroise. Pour voir mon travail graphique, consultez mon portfolio.