Achetez les meilleurs Thèmes WordPress du marché !

Vous connaissez sûrement l'effet Growl ...

En savoir plus

Publicité

En savoir plus
Créer facilement un portfolio avec WordPress

Créer facilement un portfolio avec WordPress

Ce tutoriel va vous aider à créer un portfolio très facilement grâce au moteur de blog WordPress. Je ne vais pas vous donner la recette secrète pour faire un thème WordPress tout beau tout chaud, mais je vais vous expliquer comment gérer remplacer vos articles par une galerie d’image et donc, votre portfolio.

Dans le cadre d’une mise à jour importante de mon portfolio, je me suis dit, WordPress c’est pas mal, mais il est plutôt destiné à la publication d’article.

Puis je me suis rappelé que l’option “Champs Personnalisés” vous permet d’entrer n’importe quoi, n’importe où dans votre blog.

PortFolio WordPress

Vous pouvez également découvrir notre sélection pour modifier photo.
Voici donc le code qui vous permettra en toute simplicité de créer un Photo Blog, il suffit de remplacer le contenu de la div “post” par celui-ci.

<div class="post" id="post-<?php the_ID(); ?>">

<?php $image = get_post_meta($post->ID, 'mini', true); ?>
<?php $url = get_post_meta($post->ID, 'url', true); ?>

<a href="<?php echo $url; ?>" title="<?php the_title(); ?>"><img src="<?php echo $image; ?/>" alt="<?php the_title(); ?>" /></a>

</div>

La fonction “mini” affichera la photo en miniature, il faudra donc prévoir une miniature… et la fonction “url” contiendra l’url de l’image en taille réelle. Vous pouvez utiliser le plugin “FancyZoom” pour ajouter un effet d’agrandissement.

Tout d’abord, lors de la création d’un “PhotoPost” il faut insérer un titre (logique) et cocher sa catégorie (ex: Logos), vous pouvez y insérer des tags et autre goodies. Les images doivent déjà être présent sur votre serveur où vous pouvez l’uploader directement et récupérez le lien de l’image.

Donc a chaque post, il vous suffit de créer/renseigner le champ “mini” et “url” dans les champs personnalisés de wordpress qui se trouve en bas de la page de rédaction.

Et voilà, vous avez une galerie/portfolio sous WordPress.

Modifier ses Photos : l'art de comprendre et utiliser des techniques et outils en ligne pour réaliser ses projets photographique.
Ajouter un commentaire

27 commentaires !

  1. Loulis says:

    sept 24, 2008

    Répondre

    Hello, serais t’il possible d’avoir un fichier d’exemple ?

  2. Valentin says:

    sept 24, 2008

    Répondre

    Bien sûr, disponible ici : http://www.nitrax.fr/portfolio-wordpress.txt ;)

  3. Loulis says:

    sept 24, 2008

    Répondre

    Re, bon bas merci mais je n’y arrive toujours pas.
    Je ne comprend rien du tout mdr, J’ai le wordpress par default.

    Je fais bien tout les fichier mais rien y fais :(

  4. Valentin says:

    sept 24, 2008

    Répondre

    J’ai mit à jour le fichier : ici
    Le code du portfolio commence à la ligne 11 et se termine à la ligne 15 inclus ;)

  5. Loulis says:

    sept 25, 2008

    Répondre

    Je n’y arrive toujours pas alal le code,

    Essaye de faire un new thème avec les fichier avec une images test pour voire comment tu organise tout sa, je trouverais sa vraiment gentil de ta part.
    Car je ne voie pas ce que je dois garder ou effacer.

    Cordialement.

  6. Valentin says:

    sept 25, 2008

    Répondre

    En fait… il faut créer un article une fois le script installé… Dans cet article tu y mettera un titre, en bas de page tu a un bloc “Champs personnalisé” tu dans l’id : mini – et dans l’autre tu met l’url ;)

    Comme je les dit dans l’article… Ce n’est pas compliqué ;)

  7. Loulis says:

    sept 25, 2008

    Répondre

    Oui sa je sais bien mais je te parle de mis en page et du code.
    Je veux faire pareil mais moi quand je clic sur mes image sa m’en voie dans l’article lui même et sa je comprend pas.

  8. Valentin says:

    sept 25, 2008

    Répondre

    Ah bah la mise en page, c’est une autre histoire :P
    Il faut que tu trouve un thème qui plaît :) puis tu y insère le code de cet article. Pour l’url tu a bien créer un champ personnalisés url ? avec l’url de l’image ?

  9. Loulis says:

    sept 26, 2008

    Répondre

    Hello, oui j’ai bien tout crée, le champ personnalisés avec l’url de l’image.
    Mais quand le fais la page index.php avec ton code et que je regard ce que sa donne bas quand je clic sur l’image et tout le design du thème par défaut arrive et sa me fais un truc vraiment space.

  10. Valentin says:

    sept 26, 2008

    Répondre

    Bah, le thème, c’est pas trop a moi de le faire ;)
    Je donne juste l’astuce pour créer la fonction d’un portfolio sous wordpress…

  11. Neo' says:

    nov 3, 2008

    Répondre

    Hello,
    Moyen d’avoir un exemple…?
    Thanks

  12. Valentin says:

    nov 3, 2008

    Répondre

    Bien sûr, “nitrax.fr” ;)

  13. Zoto says:

    nov 4, 2008

    Répondre

    Bonsoir,

    Je suis allé sur nitrax.fr et je le trouve nikel ton portfolio. c’est un wordpress? tu as créé le théme toi même? Comment? peut tu me donner plus d’info? voir même tes fichiers si tu me permet de les modifier à ma sauce.

    Cordialement.

  14. n0unours says:

    déc 4, 2008

    Répondre

    Merci d’avoir réalisé ce code, je vais voir comment pouvoir l’intégrer dans un wordpress modifié pour y refaire mon portfolio.

  15. Valentin says:

    déc 4, 2008

    Répondre

    @n0unours: De rien ! Tiens moi au courant ;)

  16. Oli says:

    fév 7, 2009

    Répondre

    Bonjour,

    j’ai inséré ton code dans mon template page.php, j’ai ensuite édité un de mes article, mis “mini” dans key et une url vers une image (venant d’un autre site) dans value, j’ai tout mis à jour mais sur mon blog, rien ne s’affiche erf!

    J’ai loupé quoi ?

    Merci

  17. franck says:

    mar 26, 2009

    Répondre

    Salut,

    saurais-tu m’aider à faire la même chose pour un portfolio vidéo ?

    merci !

    • Valentin says:

      mar 27, 2009

      Répondre

      Pour les vidéos, c’est très simple. Au lieu du code image en html, il faut le remplacer par le code de la vidéo. Tu insère le code suivant a la place de l’url de la vidéo.
      "< ? php echo $image; ?>

      Il te suffit alors de créer un article en mettant le lien de la vidéo pour qu’elle s’affiche comme une image. Simplement

  18. franck says:

    mar 27, 2009

    Répondre

    “le code suivant” ???
    je ne le vois pas ! du quel s’agit-il ?

    merci

    Cordialement,

    • Valentin says:

      mar 27, 2009

      Répondre

      Commentaire mis à jour, le code n’est pas passé lors de sa publication.
      En faite, c’est le même fonctionnement qu’avec une image. sauf qu’il faut remplacer le code html de l’image par celle de la vidéo flash.

  19. franck says:

    mar 29, 2009

    Répondre

    Ok, génial, est-il possible de prévoir un champs “order” pour organiser l’affichage ?

    merci

  20. franck says:

    mar 29, 2009

    Répondre

    De même, comment faire pour utiliser seulement des post qui sont dans une catégorie qui ne servirait qu’à faire cela ?

    je cherche sans succès !

    merci

  21. Joris de meetatalent says:

    avr 2, 2009

    Répondre

    Excellent c’est exactement ce qu’il me fallait!
    tu devrait créer ton theme ce serait pas mal
    moi je cherche a faire un site su style

    http://www.behance.net/ ou http://www.fashionserved.com/

    connais tu des theme wordpress similaire?

    encore merci

  22. Greg says:

    avr 10, 2009

    Répondre

    Hello,

    Joris j’ai un exemple à cette adresse, mais il coûte 75$.

    http://www.press75.com/demos/video-flick/

    Pour ma part je cherche à avoir une première page (home) du style blog (traditionnel) texte avec images qui seraient liées à des images dans des galleries du style voir le lien ci-dessus. :?

    Auriez-vous une idée? merci. :)

  23. Joris de meetatalent says:

    avr 21, 2009

    Répondre

    Tu n’a pas mit le lien !

  24. Luc says:

    sept 21, 2009

    Répondre

    héhé je connais 2 ou 3 blogs qui soit on eu la même idée soit se sont fortement inspirés de ce tuto :P

  25. zip says:

    jan 26, 2010

    Répondre

    dommage ne pas avoir de démo.

Qu'est-ce que vous en pensez ? :)

Nom obligatoire

Site

♥ Ici, on utilise KeywordLuv. Entrez YourName@YourKeywords dans le formulaire "Nom" pour bénéficier des avantages SEO d'un mot-clef ciblé. Devenez membre et connectez-vous pour partager des fichiers via les commentaires !

Notre Newsletter WordPress