Méthode de construction d'un nouveau thème

PierrePierre Member
septembre 2015 modifié dans Vos créations
Je me demandais comment vous débutez votre processus de création d'un tout nouveau thème. Le sujet me fascine car je n'ai pas la patience ni même assez confiance dans mes propres talents de designer pour me lancer dans l'aventure. Mes sites Pluxml sont visuellement magnifiques mais aucun crédit ne me revient pour cette partie du travail, je la laisse toujours à des spécialistes qui ont passé des mois à fignoler et déboguer, vous en savez quelque chose.

Je regarde avec attention les thèmes présentés dans cette rubrique, ils sont très beaux, très fonctionnels mais je remarque que leur structure affiche leur origine en respectant les emplacements de l'en-tête, du pied de page, de la sidebar, etc. Ne vous sentez pas insultés, vous avez trimé dur, votre travail est récompensé par un look vivant et fonctionnel mais j'ose vous offrir de rêver plus loin. Presque tous les sites au monde, même les plus beaux que vous avez vus, peuvent rouler sur Pluxml, souvent en quelques heures.

J'ai longtemps feuilleté les innombrables pages des catalogues de gabarits, qu'ils soient gratuits ou payants, rares sont ceux qui ont attiré mon attention dans cet océan de thèmes répétitifs. Je ne les consulte même plus, je coupe les frais, je vais droit au paradis, aux sites de lauréats des prix de design, bref les plus beaux sites au monde, tel que jugé par leurs pairs, par exemple awwwards.com qui n'en finit plus de m'émerveiller.

Dans mon esprit mal tourné, je me demandais surtout si j'étais le seul à utiliser ma méthode diabolique pour vampiriser un site et m'assurer qu'il fonctionnera bien avec Pluxml "avant de l'acheter". Que vous recherchiez de l'inspiration ou une méthode pour gagner du temps, la routine consiste à :

- copier et renommer le répertoire du thème par défault dans un nouveau juste à côté
- effacer sans broncher les répertoires d'images, des css et du javascript
- afficher (ou extraire) le code source de votre site préféré dans votre éditeur, à une page de contenu
- découper les partie de l'en-tête, du pied de page et de la sidebar
- sauvegarder les fichiers CSS et JS et les images propres au thème dans leurs répertoire respectif

J'espère vous avoir mis l'eau à la bouche et ne pas avoir détruit votre goût pour le design, au pire vous aurez une nouvelle source d'inspiration.

Continuez votre excellent travail!

Réponses

  • Je réveille un peu ce vieux post à la lumière des premiers commentaires des courageux qui installent l'un ou l'autre des thèmes que j'adapte pour PluXml.

    Le message est à la fois un mot d'encouragement et une mise en garde pour ceux qui s'imagineraient que la transition de leur site existant vers une installation d'un de mes thèmes se fera en criant lapin. Car, si vous avez déjà un site depuis un certain temps, il se peut fortement que vous ayiez commencé à le personnaliser, peut-être dans les pages de code elles-mêmes ou par l'écran d'administration. Un bon exemple sera des pages statiques ou des pages de catégorie qui ont du contenu dans le formulaire d'édition. Vous savez, ces grandes boîtes blanches dont on ne sait trop que faire? Si vous avez simplement assigné vos pages statiques au gabarit static.php et n'avez rien inscrit dans la mystérieuse boîte blanche, bravo, vous serez en territoire connu.

    Si le téléchargement et l'installation d'un thème est nouveau pour vous, tenez bon. Si votre installation est toute neuve et vide, c'est une occasion en or de commencer en suivant la philosophie d'un thème. En bonus, je vous annonce que j'utilise la même philosophie partout alors le passage de l'un à l'autre se fera en criant, disons "lapin braisé à la bière"...

    Je fais le choix de laisser le plus de choses en place si PluXml n'a pas une façon d'automatiser son paramétrage. Les logos, outils de recherche, sections spéciales de toutes sortes, je préfère les laisser que de tout enlever et dévisager le site à son ouverture. Vous comprendrez qu'il est de votre devoir de faire lesdites corrections, vous aurez toute l'aide qu'il vous faudra sur ce forum mais personne ne saura que vous êtes dans le pétrin si vous ne faites pas la demande.
  • Salut Pierre,

    plusieurs méthodes s'offrent à nous pour adapter au mieux notre PluXml adoré. On peut très bien partir du thème par défaut qui est très bien aussi bien sur l'ergonomie, la rapidité, que la modification ou alors partir de zéro. Même sans avoir de patience, la structure de PluXml est tellement bien faite que de créer un thème et adapter les différentes fonctions est relativement "simple et rapide".

    Bien sûr que tous les sites peuvent tourner sur PluXml en pensant que l'adaptation et intégration de certains scripts à PluXml est parfois fastidieux, mais cela est vite oublié après 4 ou 5 cafés, une caresse au chien ;)

    Pour ma part j'aime bien m'inspirer mais pas adapter, c'est un challenge personnel. Par exemple pour PluxPlanet , je suis partis du thème par défaut modifié légérement. Quelques réglages et optimisations sont prévus mais en ce moment je n'ai pas trop le temps.

    Voilà j'espère avoir répondu à ta question.

    Bonne soirée ;)

    Chad10
  • Comprenons-nous bien, les novices comme les expérimentés sont les bienvenus pour installer les thèmes que je convertis. Chacun y trouvera son compte, l'un verra combien ridiculement facile ça a été, un autre dira oh la la , dans quoi je m'embarque, quelle chance d'avoir de l'aide. Un dernier dira tant pis, vous êtes fous, je garde le thème par défaut. tout le monde a droit d'accepter ou de refuser en suivant son niveau de confort.

    Quand je regarde un gabarit, j'identifie ce qui ferait une bonne page de catégorie, quels éléments feront belle figure sur l'accueil, etc. Par la suite, j'automatise pratiquement tout le travail de gestion des éléments à afficher en me servant des fonctions de PluXml, dont certaines sont presque inconnues. Les novices pourront tout prendre tel quel et les experts s'y donneront à coeur joie. C'est la force de PluXml qui permet cette intégration sans se casse la tête.

    Le point de l'obligation de modifier des choses par-ci par-là, il est valide pour les dérivés du thème original aussi. On n'a pas le choix d'aller changer le logo, par exemple. La plupart des changements à faire sur mes thèmes sont de cet ordre. Une exception serait les formulaires comme pour une page de contact. Cette fonction est parfois incluse tout simplement dans le gabarit, script et tout. On inscrit notre email dans un php qui a un commentaire pour nous guider et on a terminé. Quand on doit le programmer avec le plugin, c'est humainement possible mais, soyons lucides, les novices vont demander un peu d'aide pour le CSS, ce que nous offriront avec joie.

    Le très petit reproche que je faisais à nos collègues c'est de rester trop timidement proche du thème original. Modifier un CSS prend des semaines et on finit avec une version très correcte mais tellement semblable au départ que ça nous ramène au début de Wordpress où tout le monde avait le même CSS mais de couleur différente. Ça n'enlève rien au talent de nos vaillants programmeurs, ils ont des connaissances poussées et inexploitées et personne ne le saura jamais, ça m'attriste.
  • Je suis tombé par hasard sur la section de développement du wiki et surtout sur la liste des sites "dans la nature" qui roulent sur PluXml:

    http://wiki.pluxml.org/index.php?page=Sites+r%C3%A9alis%C3%A9s+avec+PluXml

    Quel bonheur de voir de magnifiques exemples d'intégration de notre CMS chéri dans des gabarits visuels élaborés. Mais où sont leurs créateurs? Dommage de ne pas avoir rendu ces thèmes disponibles dans Ressources. Il y a une question de droits d'auteur bien évidente mais certains de ces designers n'y verraient sans doute aucun inconvénient.

    Je n'irai pas jusqu'à crocheter la serrure et le faire à leur insu, mais je me rassure que l'espoir persiste!
  • Un grand choix de thèmes convertis pour PluXml sont maintenant disponibles de notre page de Ressources. La liste comporte un peu de tout, on y voit pour certains la structure apaisante et rassurante du modèle par défaut avec une touche égayée, Pour d'autres, on profite de la force de PluXml combinée à l'audace des designers qui ont désiré pousser la note et montrer de quoi ils se chauffent.

    Je répète une fois de plus que ce mariage n'a pas demandé (de ma part) des connaissances très approfondies en programmation, loin de là! Quelques copier-coller pour démarrer, une utilisation pertinente des fonctions classiques de PluXml comme la très connue lastArtList et sa version "vignettisée" vignetteArtList. C'est simple pour nous parce que d'autres en ont bûché un coup, je ne l'oublierai pas.

    Le résultat est une vitrine de thèmes qui n'a rien à envier à Wordpress avec ses centaines de milliers de fichiers qui dorment.
  • Salut, pas mal en effet cette section ressources. Je vais voir pour intégrer mon thème en construction mais il nécessite un peu trop de code pour le moment pour le customiser.
    Utilises-tu des plugins type SpxShortcode parfois ?

    Pour répondre au post initial, voici mon processus :
    1. Clarifier le but du site
    2. Choisir un concept global en fonction : flat UI, onepage, ... Sidebar ou non, menu fixé ou non, ...
    3. Dessiner des gabarits sur papier jusqu'à parvenir à un gabarit satisfaisant
    4. Choisir un framework CSS approprié
    5. Dupliquer le dossier thème default pluxml
    6. Coder en commençant par header.php, footer.php et static.php avec une page statique vide
    7. Coder le reste
  • Merci d'avoir répondu à la question initiale, comme tu vois elle n'était pas très populaire. Je croyais avoir froissé mes collègues en demandant s'ils savaient combien c'est facile. La section Ressources a manqué un peu d'amour ces derniers temps, j'ai fait rajouter la dernière version de PluXml dans la liste et installé mes thèmes convertis pour rajeunir un peu la rubrique.

    Non, je n'utilise aucun plugin à part Vignette, la petite merveille de Rockyhorror qui devrait un jour faire partie de PluXml, ne serait-ce que pour ne plus m'en entendre parler!

    Bon sang, que c'est du travail faire un thème! Je veux dire le faire pour vrai, comme vous le décrivez si bien. J'en suis étourdi simplement à lire la liste. Je n'ai pas le mérite d'avoir ce courage et cette détermination, mais je confesse n'en avoir aucune intention non plus! Je suis depuis toujours fasciné par le talent des artistes qui font ce métier, c'est pourquoi j'évite de leur faire la démonstration des quelques minutes qu'il me faut pour cambrioler le fruit de plusieurs mois de travail. Ça les démotiverait, vous comprenez.

    La version la plus récente de ma méthode consiste plutôt à :
    1. dupliquer le thème par défaut sans inclure les CSS, les images et le JS.
    2. copier le code source de l'accueil de la victime et le coller tout rond dans header.php
    3. recréer les sous-répertoires de la victime pour ce qui est des CSS, les images et JS
    4. remplacer tous les chemins racine de la victime par la référence interne <?php $plxShow->template(); ?> autant dans le HEAD que pour les images
    5. couper et sauvegarder la partie qui fera office de footer.php
    6. couper et sauvegarder la partie qui fera office de home.php
    7. répéter l'étape 6 pour un modèle "avec sidebar", couper et sauvegarder au passage la partie qui fera office de sidebar.php
    8. adapter les listes répétitives (du slider au sidebar, et tout le reste) avec lastArtList ou vignetteArtList
    9. adapter les petites choses qui restent, selon le gabarit, parfois rien du tout
    10. admirer le travail (des autres!)

    Top chrono, D'une quinzaine de minutes à quelques heures dans les cas lourds. L'opération n'a jamais été pratiquée (tousser ici) sur un site commercial en opération, mais bien toujours sur des thèmes téléchargeables légalement.
Connectez-vous ou Inscrivez-vous pour répondre.