Créateur de thèmes WordPress :: Formateur :: Web Designer

Genesis :: Utiliser les Widgets Pages et Articles à la Une

Publié le : 

Modifié le : 

Par : 

Dans ce tutoriel, je me concentrerai sur les deux widgets majeurs de Genesis.

Les thèmes enfants StudioPress ou reposant sur Genesis

La plupart des thèmes enfants de StudioPress utilisent pour leur page d’accueil deux widgets principaux: Genesis – Page caractéristique et Genesis – Article caractéristique. Ces noms risquent de changer dans la nouvelle traduction. Ils deviendront Genesis – Page à la Une et Genesis – Articles à la Une. Ces widgets ne sont pas liés au thème enfant, mais au framework Genesis lui-même.

Par défaut, pour que ça fonctionne correctement, votre site doit avoir le réglage par défaut suivant. Dans votre back-office, ouvrez Réglages > Lecture et choisissez La page d’accueil affiche : Les derniers articles.

Analyse d’un thème

Le thème Magazine Pro (lien vers la démonstration en ligne), sorti fin octobre 2013 propose sur la page d’accueil plusieurs zones de widget. En voici le détail avec la capture qui suit.

Dancs ce thème, chaque bloc avec un entête noir correspond à une zone de Widget. Celles-ci s’activent dès que vous placez un widget dans une des zones. Pour cette démonstration, à chaque fois que vous avez une image, c’est le widget Genesis – Article caractéristique qui est utilisé.

Capture: Widget Genesis du thème WordPress Magazine de StudioPress

Emplacement dans le back-office

Pour installer ces widgets vous vous rendez dans votre back-office Apparence > Widgets et vous avez à votre disposition les deux widgets principaux de Genesis.

Capture: Widget Genesis pour les page et articles

Ensuite, il s’agit d’identifier la zone de widget ajoutée par le thème enfant dans laquelle vous allez glisser votre widget.

Capture: Widget Genesis et zone de widget du thème

Autres thèmes enfant

Tous les thèmes enfants qui reposent sur Genesis ont des zones spécifiques qui peuvent varier d’un thème à l’autre. Bien sûr, ces zones sont optionnelles et nous ne sommes pas obligés d’utiliser ces widgets. Nous verrons ça dans un autre tutoriel.

Le plus facile est de se reposer sur la démonstration en ligne en testant les différentes zones de widget proposées par le thème.

Utilisation des Widget Genesis

Widget Page Caractéristique

Ce Widget comme son nom l’indique affiche une page. À chaque fois plusieurs options sont possibles et il est possible dans une même zone de widget d’empiler plusieurs fois le même widget avec des réglages différents.

Affichage du Widget en ligne

Ici, j’ai placé deux widgets Page caractéristiques dans deux zones de widget différentes. Dans chaque zone, le widget appelle une page différente.

Capture: Widget Genesis Page à la Une côté Front

Réglage du widget

Capture: Widget Genesis Page à la Une côté Back office

En plus de la capture d’écran, il faut retenir:

  • le titre du Widget est optionnel
  • une seule page peut être choisie, mais il est possible d’empiler plusieurs fois le même widget
  • les autres éléments, Image à la Une, titre et contenu sont optionnels et ils ont à chaque fois des options spécifiques

Widget Articles Caractéristique

Ce widget fonctionne globalement comme le Widget Page Caractéristique. La différence réside surtout dans le fait qui permet d’afficher un flux d’article avec un nombre, des classements sur mesure. Le widget qui concerne les pages ne le permet pas.

Affichage du Widget en ligne

Capture: Widget Article à la Une de Genesis dans le front

Réglage du widget

Capture: Widget Genesis Articles à Une dans le back-office

En plus de la capture d’écran, il faut retenir:

  • le titre de la zone de widget est optionnel
  • si le nombre d’articles est réglé sur -1, cela affiche tout (oui, je sais)
  • il est possible de passer un N nombre d’article ou d’omettre un article déjà affiché (Exclude Previously Displayed Posts) pour éviter les doublons
  • les informations de l’article sont éditables avec les shortcodes
  • il est possible d’afficher un lien direct vers une archive de la catégorie sélectionnée

La suite

Nous verrons ultérieurement pour les utilisateurs un peu plus avancés comment créer ses propres zones de Widget dans Genesis.

Formation personnaliser son thème WordPress avec le Framework Genesis

17 réponses

  1. toi quand tu fais des tutos, c’est pas des petits ^^ !

    J’ai pas encore jeter un oeil à ces Widgets, va falloir que je m’y mette un coup !

    1. Merci Jérémy.
      Oui ces widgets sont vraiment puissants. Je suis étonné d’ailleurs de ne pas trouver ce type d’outils en dehors de Genesis.

  2. Bonjour,
    Merci pour partager vos tuto et je désolée si mes questions sont idiotes, mais je ne suis (vraiment) pas experte en php, et très moyennement douée en CSS. Par contre je comprend qu’il yaura un investissement en tps pour comprendre l’utilisation de l’outil. (mais je souhaite développer des blogs individuels pour mes élèves, donc avec des themes différents). Fin du blabla …
    Faut-il être orienté développeur pour utiliser genesis ? Et peut-on continuer à utiliser d’autres widgets que ceux qui sont dans genesis ? Du style, placer un slider sous le header en restant dans genesis ?
    Voilà, désolé si je suis un peu HS …

    1. Bonjour
      Vos questions sont légitimes. J’ai animé plusieurs modules avec des thèmes Genesis. Les élèves étaient débutant en css et connaissaient très peu de PHP.
      Une fois que l’on a compris comment fonctionnent ces widgets les possibilités sont nombreuses et la plupart des thèmes qui reposent sur Genesis utilisent la même logique. Du coup, une fois acquise, on peut mieux se concentrer sur les multiples options proposées.
      Pour le slider, vous utilisez la zone de widget que vous voulez. Je recommande Genesis Reponsive Slider qui est gratuit et qui ne fonctionne qu’avec Genesis. Mais vous pouvez bien entendu utiliser d’autres slider.

  3. […] Dans ce tutoriel nous nous concentrerons sur les Widgets essentiels de Genesis (StudioPress): Articles et Pages à la Une ou caractéristiques.  […]

  4. Bonjour Grégoire,
    J’ai acheté ton tutoriel fait avec Elephorm, il est excellent. Je n’ai pas acheté Outraech pro (entre l’achat du tutoriel et celui de Genesis, ça commençait à faire beaucoup pour une première), mais je travaille avec le Genesis theme Sample qui est gratuit.
    Question:
    1 – Je n’ai pas encore tout vu, mais dans la dernière partie du tutoriel, (Personnalisation avancées d’un thème Genesis), dans la première vidéo de cette partie vous parlez de Fiche et de ACF qui apparaissent dans le tableau de bord. D’où viennent-ils et comment ont ils été créés? Je n’ai rien dans la vidéo précédente.

    2 – Sur le Genesis Theme Sample, il n’y a pas les Home bottom, home top etc. comme dans le tuto. Il faut donc les créer. Quelle est la meilleur méthode, le faire avec page Builder ou avec les modifications dans le code comme vous l’avez montré? Quelle est la différence entre ces deux méthodes?

    D’avance merci

    1. Merci Guillaume

      Le sample thème n’a pas de page d’accueil personnalisée avec les widgets. Mais tu peux les créer manuellement. Je compte faire un tutoriel sur ce site pour ça. Tu peux t’abonner au site juste sous le bouton Laisser un commentaire.
      Si tu veux aller plus vite, je recommande ce plugin Page Builder. Il suffira de créer une page dédiée et de la choisir comme accueil dans tes options Général > Lecture.

      Pour le contenu fiche, c’est dans les tutoriels précédents avec le plugin Custom Post Type UI.

      1. Bonjour Grégoire,

        Merci pour tes réponses très rapide. Je suis déjà abonné à ton site (enfin depuis hier). Je réitère mes félicitations pour la qualité de ton tuto sur Genesis d’Elphorm. Il faut continuer à travailler, maintenant.
        J’attends avec impatience le tutoriel sur la création de zone de widgets sur ce site.

        Mais, je pense qu’il y a eu erreur de classement de tutoriel sur le dernier chapitre « Personnalisation avancées d’un thème Genesis ». En effet, le tuto sur le plugin Custom Post Type UI est à la 15eme place. J’ai laissé un commentaire sur la page du tutoriel.
        Encore merci et à bientôt.

        1. @Guillaume.

          J’ai bien avancé sur le tutoriel. Cela faisait un moment que je voulais l’écrire et j’ai oublié.
          Sinon, j’ai revu le plan. Tu as raison, c’est une erreur. Je vais aussi leur écrire. Merci de l’avoir fait remarquer 🙂

          1. Guillaume KOUKA

            Bonsoir Grégoire,

            J’ai finalement acheté un theme pro de studiopress (métro). Comme je démarre sur wordpress et sur Genesis, je pense que c’est la meilleure solution. Il faut d’abord que je commence par maitriser la première partie avant de m’engager dans une personnalisation avancée de Genesis.
            En tout, je suis très emballé par la formation et j’espère progresser vite. Je n’hésiterais pas à revenir vers toi si j’ai des questions.

            Merci d’avance pour tes réponses.
            Cordialement

          2. Guillaume. Bonne nouvelle.
            Le tutoriel est fini. Il sera publié demain matin.

          3. Bonjour Grégoire,

            Après deux jours de travail, voici mes questions si tu le permets:
            – j’ai remarqué que les zones de widget ne sont pas les mêmes sur le thème Outreach pro et Métro pro. Nous avons Home – Middle Right et Home Middle Left en plus, par exemple. Et les articles à la une n’apparaissent pas de la même façon. La zone Home Bottom sur Outreach, on peut mettre comme sur ton exemple plusieurs articles en colonne, alors que sur metro sur cette zone il n’y a qu’une colonne. Comment peut paramétrer le nombre de colonne sur les zones de widgets? Est ce dans ton tuto?

            j’ai installé Genesis responsive slider, comme indiquer sur le tuto. J’ai suivi toutes tes instructions, mais je n’arrive pas à avoir des images qui correspondent à la taille de ma zone de slide. Mes images n’ont pas la même largeur que la zone de Slide et ce même après avoir regeneré mes images avec regenerate thumbnails. Comment avoir des images qui collent parfaitement à sa zone de slide, même quand ça change. Idem, pour les flèches. Je n’ai des flèches que du côté gauche.
            comment insérer des images dans le corps des articles? Sur le site du monde, dans les photos des articles on a un petit bandeau noir sur lequel une légende apparait en blanc. Ce bandeau est dynamique (http://www.lemonde.fr/sport/article/2015/01/04/coupe-de-france-bordeaux-et-lyon-qualifies-pour-les-16es-de-finale_4548993_3242.html). Comment avoir ce bandeau?
            dernière question, quel est la meilleur façon d’afficher les logos et les liens des réseaux sociaux sur mes pages et mes articles?

            D’avance merci

          4. Bonjour Guillaume
            Un peu de patience, le tutoriel arrive dans quelques heures. J’ai passé pas mal de temps pour le rédiger. Il devrait repondre à la plupart de tes questions. Pour le reste, cela dépasse le cadre des commentaires.

            Si ça t’intéresse, je vais lancer des tutoriels Genesis premium en vidéo sur ce site. Tu peux t’inscrire en haut à droite. Les prix seront très modérés. Sinon, je donne des cours avancés sur Genesis en février à Paris.

  5. Emmanuelle

    Bonjour Grégoire,
    J’ai installé un site avec genesis.
    Ma page d’accueil fonctionne avec genesis slider qui reprend 3 pages.

    J’ai un problème de compatibilité avec polylang : dès que je l’active mon slider de Home page disparait. J’ai essayé différents réglages mais rien n’y fait. C’est un pb que tu connais? une solution existe?

    A+
    Emmanuelle

    1. Emmanuelle

      Autant pour moi, il fallait donner une langue par défaut aux articles/pages … 😉

      Désolée,
      Bonne journée
      Emmanuelle

  6. Bonjour Gregoire !

    Je viens d’acheter un joli thème sous Genesis qui utilise le widgets « Articles à la une ». Il est sur la page principale et également dans la colonne latérale quand on ouvre un article.

    Sur la page principale, j’ai mes 6 derniers articles qui s’affichent, jusque là, c’est parfait ! Seulement, une lectrice m’a fait remarqué qu’elle ne pouvait pas remonter vers des articles plus anciens. Je cherche donc un moyen d’ajouter « Page suivante » / « Page précédente » en dessous de mon blog de 6 articles…

    Je suis en train de m’arracher les cheveux alors je me suis dis que je pourrais peut-être demander de l’aide ^^

    Saurais-tu m’aider ?

    Merci !

    Nastasia

    1. Hello Nastasia !
      Dans le widget Articles à la une, en bas, tu peux ajouter un lien vers la catégories des même articles. Tu n’auras pas de de pagination directement au niveau des widget. Cela demanderai trop de ressource à chaque affichage. Mais à priori, si cela concerne ton site, tu l’as déjà mis.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.