Pinwheel - Théme Tailwind CSS

Published : 18 February 2025 – updated on 14 March 2025 – by cam.lafit – 2 commentaires

1
2
3
4
5
2 Votes

Un thème générique avec Tailwind CSS développé par themefisher et adapté par Webelys.

Présentation

Pinwheel est un thème générique développé par themfisher sous licence MIT.
L’intégration pour SPIP a été réalisée initialement dans le cadre d’un projet interne par Webelys.

Pour des besoins propres nous avons intégré les gabarits pour SPIP. Un exemple d’utilisation peut être vu en ligne.

Développement et déploiement

Le thème est fourni en tant que plugin, il est installable comme n’importe plugin SPIP.
Il est synchronisé sur la forge git de la communauté SPIP, le plugin devrait être installable comme n’importe quel plugin à terme.

Note : Le développement du plugin prend comme référence le thème d’origine, les surcharges propres à SPIP en termes de balisage et style ne sont pas considérées. Par conséquent certaines fonctionnalités fournies par défaut ou par des plugins pourraient ne pas fonctionner.

Structure générique

Le thème fournit le support par défaut des articles et rubriques.
Le thème est structuré en 3 blocs principaux :

  • entête
  • corps de page
  • pied de page

Entête

Cette partie est composée de 2 parties :

  • les entêtes HTML, elle charge les JavaScript et CSS propres aux thème, aucun autres élément n’est chargé. Ce qui rend l’usage d’autres plugin potentiellement incompatible (comme par exemple le plugin crayon)
  • le bloc haut, avec l’affichage du logo, d’un menu et d’un lien d’action. Le lien d’action est défini en dur dans le thème.

Pied de page

Le pied de page affiche 4 sous blocs :

  • le logo du site et sa description
  • les liens sociaux
  • des liens rapides (gérés par le plugin menus)
  • la localisation et coordonnées de la structure (géré par le plugin

Spécificités du thème

  • Tailwind CSS
  • Menus
  • Encarts
  • Produits

Tailwind CSS

Le thème a été développé avec le Framework Tailwind CSS et sans le framework javascript jQuey.
Pour éviter tout conflit d’affichage et d’éviter la surcharge complexe de divers fichiers fournis par défaut par SPIP, #INSERT_HEAD n’est utilisé.
Comme effet de bord l’ajout de plugin supplémentaire demandera un développement spécifique pour une intégration optimum.

Le thème s’appuie sur le plugin menus.
Toutefois pour respecter la sémantique propre au thème, un patch doit être appliqué sur le plugin.
Cela évite de devoir déclarer manuellement des classe CSS pour un ensemble d’éléments géré depuis les squelettes.
Au moment de la rédaction de cet article, il est impossible de savoir si cette proposition sera intégrée ou non. Vous devrez appliquer vous même le correctif ou bien ajouter manuellement les classes dans le menu.

La sémantique HTML du thème diverge de celle proposée par le plugin menu. Le thème surcharge spécifiquement tous ces éléments. Il est possible que certaines options du menu ne soient pas prises en compte.

Le thème utilise 2 menus :

  • nav-menu
  • quicks-links

Nav-menu est utilisé pour le menu haut du site

quicks-links est utilisé comme bloc dans le pied de page.

Encarts

La page d’accueil s’appuie sur le plugin encarts pour composer son affichage.
Les 2 premiers encarts d’identifiant 1 et 2 sont utilisés sur la page sommaire.

Note : ce point peut évoluer dans les prochaines versions pour plus d’efficacité .

Les plugins

Le thème fait appel à un ensemble de plugin pour fonctionner certains sont requis et d’autres optionnels

Requis

Les plugins nécessaires au bon fonctionnement du thème sont

  • encarts
  • pages uniques
  • identité extra
  • Menus
  • favicon

Optionnels

Le thème prévoit l’intégration des plugins suivants. Ils ne sont pas nécessaire mais sont prévus pour fonctionner nativement.

  • Réseau social
  • Produits
  • Matomo / Piwik

Afficher des produits

L’activation de la fonctionnalité produit comme présenté sur https://demo.themefisher.com/pinwheel-tailwind/pricing.html# est explicité dans l’article dédié Pinwheel - Théme Tailwind CSS : Afficher des produits

Discussion

5 years 1 year 3 months Without limit
par date
Filter

One discussion

Add a comment

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

Merci d’avance pour les personnes qui vous aideront !

Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.

Who are you?
[Log in]

To show your avatar with your message, register it first on gravatar.com (free et painless) and don’t forget to indicate your Email addresse here.

Enter your comment here

This form accepts SPIP shortcuts {{bold}} {italic} -*list [text->url] <quote> <code> and HTML code <q> <del> <ins>. To create paragraphs, just leave empty lines.

Add a document

Follow the comments: RSS 2.0 | Atom