QUICK
SWING

Présentation du thème

Quick Swing est un thème WordPress Full Site Editing à l’esthétique cyberpunk : du néon cyan sur du noir profond. Tout se pilote directement dans Gutenberg, sans ligne de code et sans outil de développement.

Quick Swing a du caractère. Chaque choix visuel est net et assumé : le vide fait partie du propos, l’asymétrie aussi. Si une page finit par ressembler à un thème WordPress lambda, c’est qu’il s’est passé quelque chose.

Installation & configuration

Le thème se met en place en quelques étapes, sans ligne de code ni terminal.

1. 1
   Téléverser le thème

   Aller dans Apparence → Thèmes → Ajouter → Téléverser un thème. Sélectionner le fichier quick-swing.zip et cliquer sur Installer.

2. 2
   Activer le thème

   Une fois l’installation terminée, cliquer sur Activer. Le site bascule aussitôt sur le design Quick Swing.

3. 3
   Activer le plugin QS Core Pour les Projets

   Si vous comptez utiliser le portfolio Projets, installez et activez le plugin QS Core (Extensions → Ajouter → Téléverser). Il déclare le type de contenu Projets, la taxonomie Technologies et les champs meta. Sans lui, les templates single-projet et archive-projet restent simplement en sommeil.

4. 4
   Personnaliser l’éditeur de site

   Rendez-vous dans Apparence → Éditeur pour retoucher les templates, le header, le footer et les parties de template. Rien n’est définitif : tout se remet à zéro via « Effacer les personnalisations ».

5. 5
   Configurer les options

   Direction Apparence → Options Quick Swing pour régler l’accent néon, la police des titres, le menu burger, les textures, les animations, le mode clair/sombre et bien d’autres choses (section 10).

6. 6
   Rafraîchir les permaliens

   Si les URL /projets/ renvoient une erreur 404, ouvrez Réglages → Permaliens et cliquez sur Enregistrer. QS Core rafraîchit d’ailleurs ces règles tout seul dès qu’un slug change.

Système de couleurs & typographie

La palette repose sur des slugs sémantiques, jamais sur un nom de couleur figé. Chaque style du site (section 03b) se contente de réattribuer ces slugs, et c’est toute l’interface qui bascule d’un coup. Les valeurs ci-dessous sont celles du style par défaut.

Styles du site

Quick Swing embarque 10 variations visuelles globales. Choisir un style redéfinit d’un coup toutes les couleurs du site (fond, accent néon, texte) sans toucher au moindre contenu.

En plus des 10 styles complets, les onglets Styles → Couleurs et Styles → Typographie proposent des variations partielles que vous pouvez mélanger librement :

Block Styles, les styles visuels

Les Block Styles se choisissent dans le panneau de droite de l’éditeur, section Styles. Ils changent l’allure d’un bloc sans jamais toucher à son contenu.

Classes utilitaires

Elles se saisissent dans le champ « Classe(s) CSS additionnelle(s) » de n’importe quel bloc (panneau de droite, onglet Avancé). Pour en combiner plusieurs, séparez-les par un espace.

Animations & effets de scroll

Toutes les animations se déclenchent seules au scroll. Elles respectent le réglage système « Réduire les animations » : les personnes sensibles au mouvement voient directement l’état final, sans transition.

Pour faire entrer les enfants d’un conteneur en cascade, ajoutez l’attribut data-qs-stagger sur le bloc parent, via le champ HTML avancé de l’éditeur.

<!-- Délai par défaut : 80ms entre chaque enfant -->
<div class="wp-block-group" data-qs-stagger>

<!-- Délai personnalisé : 120ms -->
<div class="wp-block-group" data-qs-stagger="120">

La navigation utilise un routeur même-document (SPA) : au clic sur un lien interne, seul #main est remplacé, la page ne se recharge pas. Le contexte audio et le fond WebGL survivent donc à la navigation, et le son reste continu. Si le routeur ne peut pas s’appliquer (erreur réseau, lien hors périmètre, navigateur sans View Transitions), on retombe sur une navigation classique. Cinq effets visuels sont proposés dans Options Quick Swing → Animations → Transition de pages :

Optionnelle (Options Quick Swing → Animations → Identité sonore), désactivée d’un simple choix. Une fois active, chaque clic (lien, bascule jour/nuit, flèches du carrousel) joue la note suivante d’une gamme pentatonique mineure : parcourir le site compose une petite musique d’ambiance. Aucun son n’est jamais tenu ou bouclé, chaque note s’éteint d’elle-même. Le son ne démarre qu’après la première interaction du visiteur (contrainte navigateur) et un bouton mute, mémorisé, reste en bas à gauche.

15 timbres au choix, en 4 familles :

Templates disponibles

Les templates fixent la structure d’ensemble d’une page. Ils se choisissent dans le panneau de droite de l’éditeur de page, rubrique Template.

Accessibles via Éditeur de site → Parties de template.

Contenu Projets, plugin QS Core

Le portfolio est géré par un plugin compagnon, QS Core, séparé du thème. Il apporte le type de contenu Projets, la taxonomie Technologies et des champs meta dédiés (client, URL live). Le thème, lui, se contente des templates archive-projet et single-projet et des styles. Le type Projets est réservé aux réalisations sur mesure — logiciels, sites clients ; les expériences web interactives sont des articles (voir la section 08b).

1. 1
   Installer & activer QS Core

   Extensions → Ajouter → Téléverser une extension → qs-core.zip → Activer. Le menu Projets apparaît dans la barre latérale (icône portfolio).

2. 2
   Rafraîchir les permaliens

   Si /projets/ renvoie une 404, ouvrez Réglages → Permaliens et cliquez sur Enregistrer. QS Core rafraîchit aussi ces règles tout seul à chaque changement de slug.

La clé technique du type de contenu (projet) et de la taxonomie (qs_technologie) ne bouge jamais : c’est elle qui rattache le contenu en base. En revanche, tous les libellés affichés et les slugs d’URL se règlent dans Projets → Réglages :

Le contenu déjà en place est conservé, et les permaliens se rafraîchissent tout seuls quand un slug change.

1. 1
   Projets → Ajouter

   Saisir le titre et le contenu éditorial dans l’éditeur de blocs comme pour une page.

2. 2
   Remplir la metabox « Détails : Projet »

   Juste sous l’éditeur : le champ Client et le champ URL live (le lien vers le projet en ligne, s’il existe).

3. 3
   Ajouter une image mise en avant

   Elle sert de hero plein écran en haut de la fiche et de vignette dans la grille d’archive.

4. 4
   Assigner des Technologies

   Dans le panneau de droite, section Technologies : des tags libres (React, WordPress, MediaPipe, Webcam…) qui s’affichent en pills néon sur la fiche et dans la grille.

Les meta sont des clés non protégées, donc lisibles par la source native core/post-meta de la Block Bindings API. Les templates y branchent directement un paragraphe (le client) et un bouton (l’URL live). Quand la meta est vide, QS Core retire le bloc du rendu : ni paragraphe vide, ni lien mort.

Expériences du site : des articles

Les expériences web interactives (webcam, MIDI, audio temps réel, WebGL…) ne sont pas des Projets : ce sont des articles WordPress rangés dans la catégorie Expériences du site. Toute la logique dédiée — URL /experiences/, gabarits, filtres, compteur, champ « URL live » sur l’article — vit dans QS Core (section 10 du plugin).

Une catégorie parente Expériences du site (slug experiences) et 6 sous-catégories « univers ». Les slugs doivent être exactement ceux-ci : ils pilotent la couleur des cartes et les boutons de filtre.

1. 1
   Articles → Ajouter

   Saisir le titre, coller le contenu éditorial (menu ⋮ → Éditeur de code pour un collage HTML, puis retour à l’éditeur visuel).

2. 2
   Cocher une seule sous-catégorie

   Panneau de droite → Catégories : l’un des 6 univers. Inutile de cocher aussi « Expériences du site », la hiérarchie suffit.

3. 3
   Étiquettes & image mise en avant

   Les technos (Webcam, WebGL, Web MIDI…) en étiquettes. L’image mise en avant sert de hero et de vignette de carte — et, tant qu’aucune vraie capture n’est dans le corps, elle remplace automatiquement l’image « à venir » du contenu.

4. 4
   Encart « Détails : Expérience » → URL live

   Colonne de droite : le lien de l’application. C’est la cible du bouton « Lancer l’expérience » de la fiche (le bouton disparaît si le champ est vide).

5. 5
   Publier

   Le modèle « Expérience » s’applique tout seul (grâce à la catégorie). L’URL publique est /experiences/<slug>.

Patterns, Options & Shortcodes

Ce sont des blocs déjà assemblés et réutilisables. Ils s’insèrent avec le bouton + de l’éditeur, onglet Patterns. Les patterns de sections sont appelés par référence dans les patterns de pages : si vous modifiez une section, toutes les maquettes qui s’en servent se mettent à jour.

Tout se passe dans Apparence → Options Quick Swing, réparti sur 5 onglets. Les réglages s’exportent et se réimportent en JSON.

Quick Swing gère trois niveaux d’alignement. Le groupe parent doit toujours être en layout Contraint : jamais « Pleine largeur » sur un groupe parent.