Digital Swing

# Intégration

Pour un nouveau site, suis ces étapes dans l'ordre.

# Configuration

# Permaliens

# Désindexation

# Titre et slogan

# Formulaires

# Adresse e-mail d'emission

# Message automatique de remerciement

# Optin

# Double optin
# Liste de diffusion e-mail
# Autre service tiers

# Messages

# Captcha

# Plugins

# SEO

# Sécurité

# Optimisation

# Mise en cache

Comet cache

# Compression des images

EWWWW image optimizer

# AMP

Aller dans Apparence > Personnaliser > Logo pour définir le logo et ses dimensions.

Utilise ici une version du logo sans marges ou espaces négatifs, pour qu'il soit immédiatemment bien aligné.

# Arborescence

Créer l'ensemble des pages. Les commandes wp cli peuvent faciliter la tâches lorsqu'il y a un grand nombre de pages à créer.

Créer les menus de navigation et à ajouter les pages.

# Widgets

# Pages

L'intégration des pages, se fait via :

  • l'éditeur de pages Elementor (plugin)
  • l'éditeur natif de Wordpress Gutenberg dans lequel on créé des blocs ou utilise du code html et les classes CSS fournies par la dernière version de Bootstrap

Le choix est pris en début de projet par le directeur technique.

# Polices

Les polices web sont importées au formats .woff et .woff2. Il y a deux façons de les importer. Dans les deux cas on prendra soin de ne charger que les familles et les subset que l'on souhaite effectivement utiliser.

# Google fonts

On utilise la fonction PHP de Wordpress wp_enqueue_script, pour charger le script externe de Google Fonts qui s'occupera de importer la police donnée en paramètres.

Par exemple :

wp_enqueue_style('google-fonts', '//fonts.googleapis.com/css?family=Poppins:400,400i,600,600i,800,800i&subset=latin', false)

Cette fonction est à placer selon les cas :

  • dans setup.php si on travaille avec Roots/Sage
  • dans le fichier functions.php si on est dans un thème classique

# Polices externes

On utilise la propriété CSS @font-face lorsque l'on veut que l'utilisateur télécharge les polices depuis le serveur du site (lorsqu'elle ne sont pas accessibles directement en ligne par exemple).

Il faut d'abord convertir une police (que l'on récupère généralement au format .ttf ou .otf) dans les format adéquats pour le web (.woff, .woff2), à l'aide d'un outil tel que Transfonter, puis on l'importe de la manière qui suit, dans le fichier fonts.scss :

@font-face {
  font-family: "Gotham";
  src: local("Gotham Black"), local("Gotham-Black"),
    url("../fonts/subset-Gotham-Black.woff2") format("woff2"), url("../fonts/subset-Gotham-Black.woff")
      format("woff");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

Si plusieurs polices de la même famille sont importées, on leur donnera le même nom avec la propriété font-family.

# Images

Les images doivent avoir une taille égale ou légèrement supérieure à leur conteneur. Une image surdimensionnée sera beaucoup trop lourde et consommera de la bande passane inutilement.

Les balises alt des images doivent être renseignées de manière à décrire ce qui est vu dans l'image (par exemple : "chien sautant derrière une balle"), et en intégrant un mot clé SEO.

Les images doivent être compressée, bien qu'une compression automatiquement sera appliquée.

Les images vectorielles telles que les logos ou les icônes doivent être au format svg.

# Traduction

# RGPD

plugin complianz

# Codes de suivi

Plugin CAOS + création de compte google analytics et search console

# Tests

← Optimisation →