Choisir un thème word press, plus qu'une question de goût
•
2 j'aime•17,945 vues
Présentation d'Élise Desaulniers et Alexandre Simard WordCamp Montréal 2012
Recommandé
Contenu connexe
Similaire à Choisir un thème word press, plus qu'une question de goût
Similaire à Choisir un thème word press, plus qu'une question de goût (11)
Choisir un thème word press, plus qu'une question de goût
- 1. Élise Desaulniers Alexandre Simard @edesaulniers @qbert72
- 3. Choisir un thème WordPress Plus qu'une question de goût
- 4. Plan 1. Quand et pourquoi changer de thème 2. Quelles questions poser quand on magasine 3. Comment tester un thème 4. Comment améliorer son thème 5. Nos thèmes favoris
- 5. Choisir, c'est faire des compromis
- 7. Trop de choix, c'est comme pas assez.
- 14. Il n'y a rien de mal à rester en famille
- 16. Payer ou pas?
- 17. Il n'y a pas que l'apparence qui compte
- 22. Il n'y a pas que la page d'accueil. Il faut regarder l'intérieur aussi.
- 24. Comment tester un thème
- 25. Pas sur ton vrai site WP.com WP.org
- 26. Avec du vrai contenu
- 27. Avec du vrai contenu
- 28. Avec du vrai contenu
- 29. Avec du vrai contenu
- 30. En testant le tableau de bord aussi
- 31. Widgets
- 32. Widgets
- 33. Menus
- 34. Image à la une, extrait
- 37. Modèles de page
- 39. Modèles de page
- 41. Page d'accueil
- 43. Page d'accueil
- 44. Page d'accueil
- 46. Page d'accueil
- 47. Page d'accueil
- 48. Un tour de carrousel?
- 50. Carrousel
- 51. Carrousel
- 52. Carrousel
- 53. Carrousel
- 54. Carrousel
- 55. Carrousel
- 58. Un thème qui parle français
- 59. Le test de la traduction
- 60. Le test de la traduction
- 61. Le test de la traduction
- 62. Le test de la traduction
- 66. Mise en page
- 67. Typographie
- 68. Pimper son thème
- 69. Afficher l'extrait plutôt que le billet au complet
- 70. Afficher l'extrait plutôt que le billet au complet
- 72. Wordpress.com
- 73. Wordpress.com
- 74. Wordpress.org
- 75. Wordpress.org
- 77. .date-comments { display:none; }
- 78. #header-about h1 { color:#f30004; }
- 80. Quelques uns de nos thèmes préférés
Notes de l'éditeur
- Savez-vous ce qu'on entend par "thème WordPress"? À qui on s'adresse: Quelqu'un qui ne sait pas, ne veut pas ou ne veut pas coder ou même voir du code. Quelqu'un qui veut un site WordPress quand même un peu à son image
- On choisit le mieux... Ou le moins pire. Le premier compromis : quand on prend un thème tout fait, on ne pas faire développer un thème personnalisé. Thème personnalisé Contrôle total sur design et fonctionnalités Un thème unique: pas de danger que quelqu'un d'autre ait le même Beaucoup plus d'argent! Kirk Wight sur son site: 4000$ pour design/intégration/installation et soutien. Moins cher en Inde, mais en bas de 1000$, difficile. Choisir un thème existant = compromis au niveau du design, des fonctions et de l'exclusivité, en échange de pas mal moins cher.
- Quand : le moins souvent possible 1. Tu commences ton site. Tu ne sais pas ce qu’il va y avoir dedans. Fais un inventaire de contenu -> si brochure avec 2 photos, t’auras pas plus. 2. Tu as ton site depuis 1 ans et t’as envie de changer. Tu sais déjà ce qu’il y a dedans. Parce que tes besoins ont changé ou parce que tu les comprends mieux. Si t'es tanné, patiente. Ce qui compte pour les autres, c'est le contenu.
- Par où commencer ? Quand on cherche "WordPress themes" sug Google, on a 163 millions de résultats 1575 thèmes dans le répertoire wordpress.org 60 studios commerciaux sur wordpress.org 2000 thèmes commerciaux sur Theme Forest Q: différence entre WP.com et .org? 200 thèmes dans wordpress.com Chercher d'abord dans WordPress.com = une bonne approche pour tous
- Dans un monde idéal, on identifie ses besoins, on sélectionne des thèmes et on teste avant de choisir. La première étape, comme dans n'importe quoi, c'est de planifier et d'identifier ses besoins. C'est plate, mais faut passer par là. Quels sont tes besoins ? Pour présenter quel genre de contenu ?
- WuWei blog classique. Thème gratuit. Jeff Ngan 2 colonnes, assez épuré.
- Pour un journal ou un magazine: Editorial de Woo Theme Un peu plus complexe, avec plusieurs zones de texte et un gros caroussel. Différents types de navigation
- On a aussi des thèmes qui sont faits pour présenter des vidéos. Tous les thèmes supportent les vidéos, mais ici, on peut les intégrer au carossel et on a plusieurs zones dans la home-page pour les montrer. Video: On demand de Press 75
- On a vu un thème de blog avec des articles à la une. Ici, c'est un thème plus corporatif. Les informations à la une sont des pages, pas datées. Media Consult par GoldenWorks
- On peut aussi choisir WordPress pour présenter son portefolio d'artiste On choisira alors un thème qui va présenter les images en pleine page par exemple, avec un minimum d'information Photography : theme factory
- Avant de partir à la recherche d'un thème, on peut peut-être commencer par regarder ce qu'on a déjà. Y a-t-il des mises à jour du thème qu'on a déjà ? Peut-on le pimper ? Nos trucs de la fin peuvent vous aider à donner une nouvelle vie à votre thème. Si on connait bien un thème, ce sera plus facile d'apprivoiser des thèmes faits du même studio. Ou pourquoi pas simplement garder le même thème et l'améliorer? On va donner des conseils à la fin de la présentation.
- Le filtre de WordPress.com aide à se faire une première idée. Que 200 thèmes de listés. Ils ont été testés. Sans nécessairement chosir un thème là (à moins d'être sur WP.com), on peut regarder quel studio a fait les thèmes qu'on aime. Aller voir les portfolios de ces studios. Aller voir des sites qui sont réalisés avec ces thèmes (Wordpress.com): Who's using this theme?
- Gros tabou de l'industrie. Est-ce qu'il faut payer ? Délicat. Comme dans autre chose, on peut pas essayer avant de payer. Politiques de remboursement varient selon studio. À certains endroit, on a un environnmeent de testing? Exception : sauf sur sur WordPress.com : remboursement de 30 jours pour tous les upgrades. Quand on achète, on achète du soutien, des mises à jour ou des features où quelque chose qui répond pas mal à ce qu'on cherche en terme de layout. Les studios vont faire des mises à jour plus fréquentes de leurs thèmes payants pour éviter les tonnes de questions. Pas nécessairement un meilleur thème ou un thème plus exclusif. 40, 50, 70$, c'est pas grand chose quand on compare au temps qu'on a passer sur un site pour l'adapter à nos besoins. Inclure ça dans nos coûts de développement. Surtout que souvent, les studios nous offrent plusieurs thèmes pour le prix d'un Le thème avant le prix ?
- Il faut aussi faire son choix en fonction du contenu qu'on a. Les thèmes paraissent toujours bien quand ils sont présentés par les studios: c'est comme un défilé de mode Toujours mieux en démo qu'une fois installé
- Ça, c'est Whitelight sur un site qui n'a aucun contenu
- Même en intégrant tout le contenu qu'on a, on est loin du démo. Dans ce cas-ci, le client a réalisé qu'il n'avait pas d'images assez larges pour le slider de 1600 pixels de large (note du geek: y a une option pour limiter la largeur du slideshow)
- C'est quelque chose de primordial, mais aussi quelque chose à tester. On peut aller voir les questions et les réponses qui sont données dans le forum de support de WordPress.com ou .org (les autres forums sur les sites de développeurs sont généralement fermés) Ça permet de voir à quel vitesse les développeurs ou la communauté répondent aux questions Les développeurs ont aussi des forums mais il faut avoir acheté un thème pour pouvoir y accéder. On peut vouloir poser des questions avant d'acheter. SI le pre-sale est pas bon... on peut par exemple se questionner sur les traductions françaises disponibles. On parlait plus tôt du support qui venait avec les thèmes payants.
- Home page = façade. Attention à la fixation sur la "home page" : il faut regarder derrière aussi. La façon dont le contenu s'affiche sur les autres pages est aussi importante. C'est là que l'ergonomie est importante
- Dur de trouver un bon thème. On en a pris un mauvais.
- WP.com: crée un nouveau site, c'est gratuit! WP.org: installes-en un nouveau, ça prend 5 minutes Si tu peux, sers-toi donc de WP.com même si ton site final sera sur .org. Ben moins de trouble.
- Un site à part, c'est bien. Mais s'il est vide, on teste pas grand chose
- Exporter ton contenu Si tu n'en a pas, downloader contenu exemple ( Theme Unit Test )
- Importer ce que t'as exporté/downloader
- Ta da! Déjà un bug: le menu sur 2 lignes
- Dans le tableau de bord, on va pouvoir tester: Comment le thème fonctionne S'il parle ou peut parler plusieurs langues Comment il nous permet de changer son apparence
- Show of hands Widgets Thème définit les zones à widgets Utiliser widget texte pour les identifier dans le site
- Certains thèmes ajoutent des widgets. À tester. Ici: Genesis par StudioPress.
- Créer un menu Vérifier les emplacements du thème Y assigner des menus Regarder l'effet côté public
- Dans un article: Image à la une Extrait
- Résultats: Menu: sur une ligne Image à la une dans l'entête L'extrait?
- Résultats: L'extrait seulement dans les résultats de recherche...
- Dans TwentyEleven, un modèle spécial, utile pour page d'accueil.
- Whitelight, WooThemes
- Si page d'accueil différente du modèle blog standard, faut vérifier comment elle fonctionne.
- News, StudioPress Plusieurs zones de contenu, des onglets.
- Thème qui crée des widgets
- Pour les utiliser dans les zones spécifiques à la page d'accueil
- Whitelight, WooThemes
- Panneau d'options pour la page d'accueil
- Types de contenu pour les items
- "Diapositives" qui changent avec des effets.
- Feature extrêmement populaire pour pages d'accueil. Offert par presque tous les thèmes
- Whitelight, WooThemes: réglages
- Ajout de contenu
- Whitelight, WooThemes: ajout de contenu, suite
- StudioPress: dans section de réglages Choisir parmi types de contenu existants Différents critères + Réglages d'affichage
- Autres possibilités de choix de contenu: articles "mis en avant". Par exemple: Linen, The Theme Foundry
- Un tag ou une catégorie d'articles. Exemple: Editorial, WooThemes Dans tous ces derniers, l'image qui se retrouvera dans le carrousel est l'image à la une, qu'on a vue plus tôt.
- Thème "Premium" Isabelle voulait présenter son portefolio de comédienne et de journaliste. Gros slider, plusieurs sortes de contenu différents, du vidéo, du texte, des photos. Après 5 minutes sur WP.com, coup de foudre pour Currents Les menus sont à la bonne place. Pas de barre latérale. On peut changer l'image de fond, le header, parfait. Le problème avec Currents ? C'est un thème de nouvelles. Le contenu qui apparait dans son slider, c'est des articles. Isabelle, elle veut présenter un portefolio. Pas des nouvelles
- Ce qu'on a dû faire, c'est modifier le thème en custom CSS pour enlever les noms d'auteurs et la date sur chaque article. On gère des articles, pas des pages. Du coup, il faut aussi jouer dans les dates pour déterminer l'ordre d'apparition du contenu. On aurait pu s'éviter ça si on avait bien magasiné. Les leçons: Carrousel: pas standard, donc enquêter sur le fonctionnement: Type de contenu (post, page, etc.) accepté? Sélection du contenu? Liens internes seulement? Image à la une ou contrôle plus précis?
- On veut pas nécessairement un thème en français ou une version française d'un thème. On veut un thème qui peut se traduire. Sur WP.com: tous traduisibles. tous plus ou moins bien traduits. On peut contribuer, mais c'est chaotique. Sur WP.org: pas tous traduisibles. C'est un bon test pour savoir s'il a été bien développé.
- Installer extension "Code Styling Localization" Aller dans Outils->Localisation Choisir son thème Ajouter une langue
- Ajouter une langue Choisir fr-FR Scanner
- Scanner Modifier
- Y a-t-il plus que 0 dans Total et Not translated? Même outil pour traduire le thème quand on sera rendu là. Si vous êtes chanceux, un fichier de traduction existe déjà quelque part sur le web (wptrad.fr). Si oui, commencez avec lui.
- Compromis de base: thème non exclusif Solutions: réglages d'apparence
- Vérifier ce qui est actif sous "Apparence". Possibilités: En-tête Arrière-plan Jeter un oeil aussi ici: Personnaliser
- Deux exemples: TwentyEleven WooThemes
- TwentyTen WooThemes
- Ici: WooThemes. Contrôle plus spécifique: Couleur Police Taille À l'étape du test Noter ce qu'on peut changer
- Le plus souvent, on veut enlever des éléments, changer les couleurs ou grossir la typo. Un peu de CSS de base permettent de faire ça assez simplement. Même que sur Wordpress.com, y'a des raccourcis qui nous permettent de faire des changements sans programmer.
- Nettoyer la page d'accueil en publiant des extraits
- Nettoyer la page d'accueil en publiant des extraits
- Nettoyer la page d'accueil en publiant des extraits
- Sur WordPress.com, extension de design à 30$ vraiment utile que j'adore. Ça permet très facilement de qui permet de modifier les caractères, les couleurs et le CSS. Les 2 premières parties - caractères et couleurs ne demandent aucune programmation et sont super intuitives. On le trouve dans Apparences / Extension design
- Sur WordPress.com, extension de design à 30$ vraiment utile que j'adore. Ça permet très facilement de qui permet de modifier les caractères, les couleurs et le CSS. Les 2 premières parties - caractères et couleurs ne demandent aucune programmation et sont super intuitives. On le trouve dans Apparences / Extension design
- Sur WordPress.org, c'est un tout petit peu plus compliqué. il faut ajouter l'extension WordPress.com Custom CSS Ensuite, dans Apparences, on trouvera l'éditeur de CSS
- Sur WordPress.org, c'est un tout petit peu plus compliqué. il faut ajouter l'extension WordPress.com Custom CSS Ensuite, dans Apparences, on trouvera l'éditeur de CSS
- Vous trouverez plein d'intro au CSS sur Internet, mais j'ai décidé de vous présenter Afficher - option pour développeurs. Existe dans à peu près tous les navigateurs. Loupe en bas, aller sélectionner l'élément problématique. Ici, si je veux enlever la ligne "publié le..." je vois que c'est .date-comments Je pourrais aller écrire directement le display:none et voir ce que ça fait avant d'aller copier dans mon éditeur de CSS
- Pour la couleur, c'est le même principe
- Ou pour la grosseur de la typo
- Oxygen. Gratuit. 3 menus 5 fontes, possibilité de changer les couleurs sans acheter l'upgrade Design "responsive"
- Simplycity de Woo : Super slider dans lequel on peut mettre plein de sortes de contenu. Plein de zones de contenu différentes, plein d'options pour personnaliser. Child Theme e-commerce.