[Tuto] Ajouter une présentation personnelle en tête de son blog WordPress

Naguère, enfin il y a quelque temps il faut bien le reconnaître, Julye avait posé cette question dans un autre sujet :

Julye a écrit:Elo et Nath vous avez fait comment pour écrire quelque chose à l'endroit où vous vous presentez, et où il y a votre logo ou photo ?

En effet, si l'on va admirer ce qui se passe ici ou ici, on peut avoir légitimement envie de la même chose ou de quelque chose de semblable.
Le problème, c'est que nos deux complices utilisent pour ce faire un thème qui s'appelle ProPhoto et qui à part le fait d'être zouli zouli présente un inconvénient majeur : son prix (179 ou 259$)...

Alors pour me faire pardonner d'avoir laissé Julye sans réponse pendant de longs jours, je vais expliquer comment faire la chose, mais sans rien débourser...

C'est parti !

Tout d'abord, rendez vous sur la page d'administration de votre blog.
Là, dans la rubrique "Utilisateurs" ouvrez "Votre profil".
Remplissez le champ "À propos de vous" -> "Renseignements biographiques".
Avant de cliquer sur "Mettre à jour le profil", sélectionnez à votre convenance le "Nom à afficher publiquement".

Maintenant choisissez votre plus belle photo de vous (ou de ce que vous voulez), et dans la rubrique "Médias", choisissez "Ajouter". Cliquez sur "Parcourir", sélectionnez votre photo et envoyez-la.
Elle se trouve maintenant dans "Bibliothèque". Ouvrez la "Bibliothèque" et cliquez sur la vignette de votre photo, pour l'éditer. Dans la page qui s'ouvre alors il y a un champ intitulé "Adresse web du fichier". Copiez et collez dans un coin (dans le bloc-note par exemple) cette adresse. Nous allons en avoir besoin très bientôt.

Voilà, maintenant il va vous falloir rapatrier chez vous un fichier qui se trouve sur le serveur de votre blog. Je suppose que vous savez faire, sinon mon tuto pourrait enfler démesurément...
Il s'agit, dans le dossier où se trouve votre blog, du fichier index.php du dossier wp-content\themes\votre_theme. Attention, choisissez bien le dossier du thème actif sur votre blog sinon rien ne se passera...
Éditez ce fichier dans votre éditeur de texte préféré (encore une fois le bloc-notes sous Windows fera très bien l'affaire).
Là, vers le haut, juste avant la ligne

Code:

<?php if (have_posts()) : ?>

vous allez coller le code suivant :

Code:

<div>
 <img src="..." alt="" style="float:left; margin-right:1em" />
 <p><?php the_author_meta('description',1); ?></p>
</div>
 <div style="clear:left; height:1px">&nbsp;</div>

... dans lequel vous allez bien sûr remplacer les points de suspension dans src="..." par le chemin de votre photo, celui que vous avez copié tout à l'heure dans un coin.

Et oualà !

Après, évidemment, tout cela est arrangeable, modifiable, augmentable, changeable, stylisable, etc. N'hésitez pas à me demander si vous butez sur quelque chose.

Ah oui, dernière chose : ce code n'est valable qu'à partir de la version 2.8 de WordPress. Mettez-vous à jour, si votre version est plus ancienne...

Prochain tuto... euh... À la demande !

merci beaucoup Jerfa
ca va m'aider enfait moi j'ai pas le meme theme mais j'ai un truc comme dis plus haut mais je crois pas que j'ai fait comme ca..... bref en totu cas merci de t'etre penché dessus

euh j'aurais ptetre un tuto a te demander mais je t'en reparlerai

elo25 a écrit:euh j'aurais ptetre un tuto a te demander mais je t'en reparlerai

Soyez assurée que votre demande sera traitée sur le dessus de la pile, hihi... Nan mais oui, explique et je te dirai si c'est long et compliqué ou pas...

ptr ok je t'explique ca des que j'ai posé mes petits a l'ecole

Super ce tuto !!

j'ai testé mais ca fonctionne pas....enfin ca me met ma photo en enorme et pas tout au dessus donc je dois pas faire un truc correctement mais j'ai testé lol

elo25 a écrit:j'ai testé mais ca fonctionne pas....enfin ca me met ma photo en enorme et pas tout au dessus donc je dois pas faire un truc correctement mais j'ai testé lol

Peut-être réduire la taille de ta photo.

elo25 a écrit:enfin ca me met ma photo en enorme et pas tout au dessus

En effet, comme le suggère AmyPunky, si ta photo est énorme, c'est peut-être parce qu'elle est... énorme !

Pour la taille, il est vrai que tel quel, mon code la laissera a priori à sa taille initiale. Donc vi, j'ai omis de dire qu'il fallait la mettre à la taille voulue avant de la télécharger (au passage précisons qu'il serait également bon de la nommer correctement, c'est-à-dire pas trop long, sans espaces ni accents, etc.). Si toutefois dans ton cas, Elodie, elle était déjà à la bonne taille au départ mais que c'est le navigateur qui la déforme à l'affichage, ce devrait être un problème de styles. Précise éventuellement la taille de ton image dans le code, à l'aide des attributs "height" (hauteur) et "width" (largeur) de la balise img, de la manière suivante :

Code:

<img src="..." height="150px" width="80px" alt="" style="float:left; margin-right:1em" />

... en remplaçant bien sûr 150 et 80 par les bonnes valeurs. Attention au fait que si ces valeurs ne sont pas celles de l'image, celle-ci sera déformée à l'affichage.

Maintenant, pour ce qui est de l'emplacement dans la page, il s'agit sans doute d'un problème lié à l'endroit où tu as collé le code dans la page "index.php". Peux-tu faire ici un copié/collé de ton code avec quelques lignes au-dessus et quelques lignes en-dessous (en utilisant le petit bouton "code" de l'éditeur - c'est le dernier, en forme de dièse) ? On va y arriver !

oui voila je voulais un code car elle est a la bonne taille a la base ptr

je vais refaire ca alors euh j'ai tout effacé jerfa... enfin j'ai laissé comme j'avais fait avant par contre faut que je change la mise en page car la c basique et ca me plait pas trop

et pour l'affichage je l'ai collé comme tu l'a mis
en tout cas merciJerfa )

voila j'ai recommencé et ca fonctionne merci beaucoup

C'est dommage quand même, je la vois floue ta photo!!!

Jerfa MERCIIIIIIIIIII, y a plus qu'a !!!

Effectivement la photo fait 1000px*400px, beaucoup trop grande vu la taille réelle affichée (Il faut mettre la même photo plus petite redimensionner avec photoshop par exemple et non la redimensionner via un code).

Sinon chez moi le header ne marche pas (fond blanc), une image est indisponible juste en dessous du menu, et le cadre ou tu te présentes et ou il y a ta photo dépasse sur le coté droit.

ah ben ici tout est nickel enfin mis a part la photo qui est flou c vrai pas assez redimensionner...

Et voilà, ProPhoto a encore frappé !
Mais alors, du coup, c'est l'animation du haut qui a l'air d'avoir un peu souffert de l'opération, hihi...

réussi Merci Jerfa
du coup, je comprends mieux à quoi sert 'médias et bibliothèques'

Super, Cunégonde ! Juste une toute petite chose : ton texte est dans ton image ; or il est toujours plus indiqué que le texte soit du "vrai" texte. Si tu le mets dans tes renseignements bibliographiques de ton profil, il s'affichera en texte.
Tes photos sont belles !

merci pour les photos Jerfa.
Oui j'ai un peu triché car j'avais pas d'idée de texte (enfin présentation de moi), du coup j'ai créé une image sous photoshop qui a la même largeur que le blog avec photo + texte. Je fais le '2 en 1' !
Je retiens que je dois mettre mes renseignements ds le profil.
En tous cas, merci encore

merci beaucoup Jerfa

puis-je te demander un coup de main ? j'ai bien ma photo qui s'affiche, mais pas mon texte bibliographique

comment ça se fait ?

De rien, patou !
Peux-tu m'indiquer l'adresse de ton blog, que je regarde ce qui se passe ?

déjà !!! mais c encore mieux que supermen ça !!!

voici : http://mp-photographie.fr/

Bah ouais, c'est un rigolo, superman : lui il est obligé de se changer avant d'agir, alors que moi, même pas... :p
Bon, ze vais regarder...

Alors... En fait, c'est rigolo parce que le texte est bel et bien là...
Mais comme il est en blanc sur fond blanc, évidemment, pour nos p'tits yeux d'humains non-bioniques, ça reste très discret...
Que veux-tu faire : le mettre en moins blanc sur ce fond, ou foncer un peu le fond et le garder en blanc ?