Créer un portfolio avec le thème WordPress Acoustic
Attention, cette section a maintenant quelques années, je la considère comme obsolète.
Je vous conseille plutôt de choisir un thème plus récent équipé d’un outil de création complètement visuel.
Voyez ma sélection de thèmes premium.
Partagez cette page si vous la trouvez utile !
Commet créer des portfolios WordPress avec le thème Acoustic
Le Showcase présente les items sous forme d’une colonne de miniatures à gauche, et fait apparaître les infos de l’item à droite. Plusieurs colonnes sont possibles, l’internaute passant de l’une à l’autre en cliquant sur les points situés sous la colonne.
La Gallery forme une gallerie d’images ordonnées (le nombre de colonnes se paramètre, comme le fait d’afficher des sous-titres, descriptions,…). En cliquant sur une image, le visiteur est mené vers la page de l’item, ou voit s’afficher en surimpression l’image, vidéo, etc.
Egalement, il est possible de choisir quelle(s) catégorie(s) de portfolios on veut afficher sur une page (showcase ou gallery) donnée, ce qui permet d’avoir un pool global d’items de portfolios, et de les classer par genre. Regardez encore sur le site de démo du thème, vous pouvez cliquer sur des catégories (on peut aussi choisir de ne pas les afficher) en face de « show me », et restreindre l’affichage à la catégorie choisie. Dans ce cas, toutes les catégories sont affichées par défaut dans la gallery, et le visiteur peut filtrer ce qu’il voit. Nous verrons qu’on peut aussi limiter l’affichage à une ou des catégories lors de la configuration de la page, ce qui permet par exemple de créer plusieurs portfolios pour des thématiques différentes!
Voyons la procédure générale pour créer des portfolios avec le thème Acoustic.
Procédure générale de création de portfolios
L’organisation des items au sein d’un portfolio va dépendre de la gestion des catégories. Imaginons que vous souhaitiez créer deux porfolios, l’un de photos et l’autre de vidéos. Pour chaque portfolio, il faudra créer une arborescence de catégories correspondant à ce que vous désirez montrer. Par exemple, la catégorie « photos » pourrait avoir les sous-catégories « paysages », « portraits » et « autres ».
Puis nous créerons les items les uns après les autres en les assignant à leur(s) sous-catégorie(s)!
Enfin nous créerons une page WordPress pour chaque portfolio, en lui faisant correspondre la catégorie principale voulue (donc dans notre exemple nous créerons deux pages, une pour « photos » et l’autre pour « vidéos »). Cette page pourra être paramétrée de différentes manières, et afficher les items en mode « Gallery » ou « Showcase ».
Réglages généraux des portfolios dans le pexeto panel
- Page Layout permet de choisir si vous désirez afficher une sidebar sur les pages dédiées des items, et de quel côté vous la voulez (gauche ou droite).
- Show Comments active les commentaires des visiteurs sur les pages d’items.
- Content Sidebar sert à choisir quelle sidebar afficher (si vous avez choisi d’en afficher une!). Voir la section dédiée aux sidebars.
- Portfolio carousel max item number définit le nombre d’items à montrer dans l’éventuel caroussel portfolio affichable au bas des pages.
- Two column image width modifie la largeur type des images affichées dans les pages du type portfolio gallery en 2 colonnes.
- Two column image height modifie la hauteur type des images affichées dans les pages du type portfolio gallery en 2 colonnes.
- Three column image width modifie la largeur type des images affichées dans les pages du type portfolio gallery en 3 colonnes.
- Three column image height modifie la hauteur type des images affichées dans les pages du type portfolio gallery en 3 colonnes.
- Etc.
Création de l’arborescence des catégories de portfolios
Allons, dans le back-office, dans la section « Portfolio Categories« .
Pour ajouter une catégorie:
- Saisir son nom dans le champ « Name«
- Saisir le nom qui sera utilisé dans l’URL de cette catégorie (donc sans accent!)
- Cliquer sur « Add new category«
Pour ajouter une sous-catégorie:
- Saisir son nom dans le champ « Name«
- Saisir le nom qui sera utilisé dans l’URL de cette sous-catégorie
- Choisir la catégorie parente avec le menu déroulant « Parent » (ici: « Photo »)
- Cliquer sur « Add new category«
Le champ description n’est pas utile ici, nul besoin de le remplir.
Voici le résultat de mon exemple de création d’arborescence :
Création d’items de portfolios
Allez, dans le back office, dans la section « portfolio« => »Add New Item« . Nous retrouvons là un éditeur assez proche de celui des pages et posts, mais avec des fonctions dédiées aux items de portfolio. Voyez les détails dans les deux onglets ci-dessous:
- En haut de page, on retrouve une zone pour nommer l’item (comme pour les pages et posts une URL dédiée sera automatiquement créée), non loin de celle pour publier/mettre à jour celui-ci.
- En dessous, le même éditeur de contenus en WYSIWYG que pour les pages/posts traditionnels. Dans cette zone vous pourrez saisir et mettre en forme ce que l’internaute trouvera dans la zone « content » de la page dédiée à cet item.
- La section « Portfolio Categories » sera très utile pour grouper vos items par thèmes. Vous retrouverez là les catégories et sous-catégories créées auparavant.
- Juste en dessous, vous pourrez donner un rang (« order« ) dans la section « Attributes« . L’intérêt est de pouvoir classer les items au sein d’une page Showcase ou Gallery.
Vient ensuite la section « ITEM SETTINGS« , qui comporte diverses options pour votre item:
- When clicked on the image open » définit ce qui se passera lorsque l’internaute cliquera sur l’image dite de « Preview » de l’item dans une page du type « Portfolio Gallery » . Les choix sont variés; il sera possible d’afficher l’image preview en grand et en surimpression, mais aussi d’aller vers la page de l’item, ou bien même d’aller vers une autre page au choix (« Custom Link »), ou encore de jouer une vidéo Youtube ou Viméo! Et vous aurez ce choix pour chaque item! Vous pouvez d’ailleurs tester les diverses options sur la page de démo de ces Portfolios Gallery.
- « Thumbnail URL » n’est utile que si vous affichez les items dans un portfolio du type Showcase. Il permet de charger (bouton « Upload« ) une image miniature qui sera affichée dans la colonne de gauche du portfolio showcase. Je vous conseille de laisser cette option de côté, le thème étant capable de créer automatiquement la miniature à partir de l’image « Preview ».
- « Preview image URL« : il s’agit de charger (bouton »upload« ) ou d’indiquer l’URL de l’image qui servira de « Preview » dans les pages Portfolios (Showcase et/ou Gallery) qui afficheront cet item. Si vous n’avez pas chargé de « Thumbnail », le thème génèrera également automatiquement une miniature pour les pages Showcase.
- Item Description: description courte de l’item, que l’on pourra choisir d’afficher sur les pages de portfolio Gallery.
Une fois l’item terminé, cliquez sur « Publish/Update » (ou sur « Preview » pour pré-visualiser l’item). Une fois l’item publié, vous pourrez recommencer la boucle pour attaquer le suivant en cliquant sur « Add New« !
Création de pages de portfolios
Dans le Back-Office, rendons nous dans la section « Pages » => « Add New« . Nous retrouvons l’éditeur de pages et son éditeur Wysiwyg classiques de WordPress. Si vous ne connaissez pas encore cette section, allez voir la page sur la création de pages WordPress pour un peu de lumière…
Je crée ici d’abord la page qui affichera le portfolio « Photo ».
- Je nomme donc cette page « Photo » dans le champs « Title« . WordPress me propose automatiquement une URL incluant le mot « photo » (voyez la section « Permalinks » sur cette page si ce n’est pas le cas sur votre site), avec une arborescence qui dépendra du fait que j’ai choisi ou non une page parente (section « Page Attributes » => « Parent« ).
- Justement, dans cette section « Page Attributes« , nous allons pouvoir choisir le type d’affichage global que nous désirons voir pour cette page de portfolio: cliquez sur le bouton sous le mot « Template« ; vous y trouverez, entre autres, les templates « Portfolio Gallery » et « Portfolio Showcase« .
- La zone Wysiwyg permettra d’ajouter tous contenus qui précèderont la l’affichage des miniatures d’items sur la page.
- Il est aussi possible d’afficher ou non un slider en haut de page.
- Vous pourrez choisir d’afficher ou non le titre de la page sur la page.
- Enfin, une option pour insérer un carrousel d’items de portfolios en plus en bas de page (en choisissant la catégorie que vous souhaitez voir défiler).
La zone Portfolio Settings est importante. Nous y trouverons diverses options d’affichage des miniatures d’items :
- Choix de la catégorie d’items à afficher sur la page. Logiquement, j’ai choisi « Photo« .
- Nombre de colonnes d’images preview d’items à afficher. Ne concerne que le template « Portfolio Gallery« .
- Ordre d’affichage des items. Soit par date de création, soit en suivant les rangs (order) que vous aurez attribué à chaque item.
- Show Categories: afficher ou non les choix catégories/sous-catégories sur la page.
- Show Item Descriptions: afficher ou non la description courte de chaque item (pour template Portfolio Gallery).
- Show Item Title: idem pour le titre de l’item.
- Number of Post per Page: nombre de miniatures à montrer dans la colonne de gauche de la page si vous utilisez le template Portfolio Showcase.
