Tutoriel vidéo Wordpress : Créer un thème wordpress

Pendant près de 3h de vidéo, vous apprendrez comment développer un thème pour Wordpress à partir d'une maquette réalisée sur Photoshop.

  • Découper une maquette sur Photoshop
  • Installer Wordpress
  • Créer un thème
  • La structure de fichier d'un thème Wordpress
  • Les fonctions PHP principales de Wordpress

La maquette utilisé dans ce tutoriel est disponible ici a des fins pédagogique uniquement. Il est strictement interdit d'utiliser tout ou partie de ce design.

Démonstration

Tags : MaquetteTemplateThèmeWordpressDesign

Tutoriel Wordpress posté Jeudi 22 Octobre 2009
 147 Commentaires
Ils l'ont utilisé
Vos commentaires

saliminds (Jeudi 15 Octobre 2009 à 19:38):

cool merci

Baptiste (Jeudi 15 Octobre 2009 à 20:00):

Salut Graf!
il a vraiment l'air sympa ce tuto! en plus c'est vraiment utile, ce CMS est super! et expliqué par toi ça va être encore mieux!

@+

Jaya (Jeudi 15 Octobre 2009 à 20:37):

Merci vivement qu'on puis payer par Allopass

par exemple 2€ pour 31 jours sa serait cool ^^

XnEoZ (Jeudi 15 Octobre 2009 à 21:26):

Magnifique tutoriel, super bien expliqué.

Eski (Jeudi 15 Octobre 2009 à 23:43):

wow !! le design est vraiment magnifique !!

leknoppix (Vendredi 16 Octobre 2009 à 08:52):

Peut on payer par sms?

walken.ca (Vendredi 16 Octobre 2009 à 15:02):

J'ai payer, et bizarrement je ne suis pas encore Prenium ?

walken.ca (Vendredi 16 Octobre 2009 à 15:07):

Fausse alerte! Merci pour tutoriel.

mixnico (Samedi 17 Octobre 2009 à 18:25):

super tuto!

quent1du58 (Dimanche 18 Octobre 2009 à 13:16):

Je viens d'installer wordpress, vivement qu'il soit en ligne :D

Harry (Dimanche 18 Octobre 2009 à 16:42):

J'ai remarquer une erreur sur Deezyne.fr et dans le tuto :
Tu as mis display:bock; pour

#col21 #commentform input[type=text]

C'est donc pour ça que tu disais que ça voulais pas se mettre tout seul et au passage que tu as du mettre width:100%;

Grafikart (Lundi 19 Octobre 2009 à 00:02):

Bien vue

Boudda (Lundi 19 Octobre 2009 à 21:48):

Un grand merci pour se tuto que j'attend depuis si longtemps...Merci pour le tuto ..Merci pour la qualité ....bigup grafikart.
Peace...

ZiPo (Mardi 20 Octobre 2009 à 20:36):

Excellent tuto !! je le cherchais partout celui là, très bien réalisé, Merci !

Antho (Jeudi 22 Octobre 2009 à 01:07):

Un très grand et très très intéressant tutoriel ! Franchement c'est que du bon boulot, où j'ai appris quelques astuces bien sympathique ^_^

Merci beaucoup

Dechuck (Jeudi 22 Octobre 2009 à 05:11):

Ton tuto est super!!
Merci!!

Je voulais savoir quelle est la dimension de ton design sous photoshop? Je me demandais quelle dimension, je devrais choisir pour mon site?!

Merci

tchitcho (Jeudi 22 Octobre 2009 à 06:45):

Franchement respect ! c'est pas banal de voir de si gros tuto en France, c'est grâce aux gens comme toi que des autodidactes (comme moi ^^) ont pus évoluer au fil du temps !

encore une fois respect, 3h c'est pas rien OO

et merci, hô grand merci pour ce tuto en particulier, je déboule tout juste sur Wordpress et l'idée de taffer sur des thèmes préexistants ne m'emballe pas vraiment, je vais pouvoir attaquer ce que j'ai à faire ...

Harry (Jeudi 22 Octobre 2009 à 08:18):

Je pensais que 3h de vidéo sur DailyMotion c'était impossible, INTOX
Tchou

MyKiwi (Jeudi 22 Octobre 2009 à 11:01):

Plus de 20 minutes c'est possible lorsque l'on a un compte MotionMaker
Excelent tuto, je pense passer premium pour pouvoir le voir en true HD :D

pobourger (Jeudi 22 Octobre 2009 à 12:44):

Merci vivement qu'on puis payer par Allopass

par exemple 2€ pour 31 jours sa serait cool ^^

Baptiste (Jeudi 22 Octobre 2009 à 12:48):

Ah on aura plus la version HD de dailymotion?

Grafikart (Jeudi 22 Octobre 2009 à 12:56):

Pour les longs tuto non, je dois baisser la résolution et la qualité pour obtenir une vidéo qui soit uploadable

DevAddict (Jeudi 22 Octobre 2009 à 20:37):

Et c'est la vrai merde xD

Baptiste (Jeudi 22 Octobre 2009 à 13:00):

ok! bon bin j'attends le paiement téléphonique pour l'avoir en HD!
à 15 ans j'ai pas encore de CB! lol

bravo et merci!
@+

PS: je ne peux toujours pas envoyer de commentaire avec mon compte, je dois être déconnecté...

Baptiste (Jeudi 22 Octobre 2009 à 13:03):

surtout que la vidéo dailymotion je peux pas dépasser les 20 secondes... !ça coupe après ta première phrase!! lol

leknoppix (Jeudi 22 Octobre 2009 à 14:22):

Je le regarderais dès ce soir

Grreg (Jeudi 22 Octobre 2009 à 15:24):

Très bon tuto ! C'est exactement ce que je recherchais pour refaire mon site !

Par contre, j'ai payé 3€ sur Weecast pour me rendre compte qu'il était en ligne gratuitement ici... Un peu dèg' quand même (même si c'est juste 3€).

Mais bon, c'est mérité quand même

Krome (Jeudi 22 Octobre 2009 à 17:46):

Excellent tuto comme d'habitude !

Petite question à Graf : Pourquoi ne pas avoir utiliser les tranches dans photoshop pour les différents éléments graphiques plutôt que de tout rogner un par un ?

Je ne suis pas un expert mais il me semble que les tranches permettent d'exporter d'un coup toutes les images utiles au design.

En utilisant l'option "Calque->Nouvelle tranche d'après un calque" les tranches créées sont liées à leur calque respectif et se redimensionnent si l'on vient à changer le contenu du calque (largeur ou hauteur bien sur)

Et encore bravo !




Baptiste (Jeudi 22 Octobre 2009 à 18:38):

re salut,
vers 1000minutes, qu'est ce qui se passe? il y a décalage son et tout, le son beug, ça saute...

@+

Baptiste (Jeudi 22 Octobre 2009 à 18:42):

heu 100 minutes je veux dire!!
bon en plus je peux pas avancer la vidéo avec dailymotion, j'ai voulu recharger la page et je dois recommencer du début -_-

BlackWashington (Jeudi 22 Octobre 2009 à 19:57):

Merci pour ce super TUTO !!!!
Mais sinon j'ai le même problème que Baptiste sa fonctionne nickel puis vers les 100 minute sa déconne tous est décaler jusque la fin de la vidéo.
Mais a part sa un très bon Tuto.

Xty (Jeudi 22 Octobre 2009 à 20:53):

Tout d'abord bravo pour ce tutoriel (et tous les autres, par la même occasion).
Mais je rencontre le même problème que les gens ci-dessus, à savoir le décalage son/image vers la moitié du tutoriel (qu'il devient donc très difficile de suivre).
Ceci est-il dû à Dailymotion, ou est-ce un problème de montage?

Grafikart (Vendredi 23 Octobre 2009 à 13:54):

Je ne peux pas voir la vidéo vu que je n'ai pas un bon débit mais la vidéo uploadée n'avait pas de problème de son. Le décalage est conséquent ?

greg (Jeudi 22 Octobre 2009 à 23:37):

C'est vrai que comme cms wordpress et terrible..

codekiller (Vendredi 23 Octobre 2009 à 02:53):

Bonjour,
Merci pour ce tuto, et pour tous les autres.
J’écume le net depuis un moment déjà à la recherche de tutos, et aucun site ne t’arrive a la cheville, explications claires, sujets hyper intéressants, bref que du bonheur.
Par contre comme les derniers posts je rencontre également un décalage du son vers la 100iéme minutes, mais bon cela ne ma pas empêcher de le suivre jusqu’au bout.
Encore merci.

Zod (Vendredi 23 Octobre 2009 à 03:16):

Correction : En local avec Wamp(/Mamp/Lamp) on peut envoyer des emails, si l'on a bien configuré Wamp(/Mamp/Lamp) lors de son installation (à un moment donné il demande l'adresse mail, et pour ceux qui sont chez Free par exemple il faut mettre smtp.free.fr (de tête, si je ne me trompe pas) ! ;]

Zod (Vendredi 23 Octobre 2009 à 03:23):

Désolé du double post, mais t'es sous Seven ou Vista ? Je pencherais pour Seven (même si je ne l'ai encore pas testé) mais j'aimerais bien avoir une confirmation/correction.

Grafikart (Vendredi 23 Octobre 2009 à 13:52):

Je suis sur Seven Release Candidate effectivement.

Baptiste (Vendredi 23 Octobre 2009 à 11:36):

au fait pourquoi t'as quitté mac?? je préférais!! :D

Grafikart (Vendredi 23 Octobre 2009 à 13:53):

Les tutoriels sont fait sur mon PC fixe qui est équipé de windows. Mac c'est lorsque je fait les tutos ailleurs que chez moi

Dr Rodney Mckay (Vendredi 23 Octobre 2009 à 14:36):

oui Graph le son est tr§s dégradé à partir du milieu de la vidéo.


Merci quand même pour ce big tuto

Baptiste (Vendredi 23 Octobre 2009 à 17:23):

salut Graf'
oui à partir de 95 minutes à peu près ça fais un son saccadé, puis inaudible: ça change complètement ta voix! ça fais star-wars mais bon! lol
Il n'y a pas de possibilité de couper le tuto en 2 ou 3? car j'arrive pas à retourner à 100minutes pour réssayer, je dois tout revoir...

@+ !

Krome (Vendredi 23 Octobre 2009 à 17:33):

Salut,

Je confirme que le son se dégrade façon R2D2 vers la 100e minute et est décalé jusqu'à la fin que ce soit en streaming ou avec la vidéo téléchargée sur mon pc.

A l'occasion Graf si je peux avoir ton avis sur ma remarque postée un peu plus haut http://grafikart.fr/tutoriels/video/creer-theme-wordpress-79 #c3263

Merci

Grafikart (Vendredi 23 Octobre 2009 à 19:31):

La vidéo télécharger depuis Grafikart ne fait pas du tout ce son normalement
Je retenterais un upload sur dailymotion d'ici quelques jours pour voir si ça marche mieux.

Nouipoz (Vendredi 23 Octobre 2009 à 18:12):

Ha !! je l'attendait ! merci beaucoup c 'est génial ! merci grafikart ! :D

Nouipoz (Vendredi 23 Octobre 2009 à 18:29):

Re , mais petit problème regarder : http://dreamlike.toile-libre.org , je n'arrive pas a modifier les onglet sur le coté comme "My latest twitts" comment faire?


merci beaucoup

Grafikart (Vendredi 23 Octobre 2009 à 19:42):

Si le thème utilise la sidebar dynamique tu gère ça depuis l'onglet widgets de l'administration Wordpress. Sinon il faut que tu édite le fichier qui gère la sidebar (souvent sidebar.php).

Analyse le code pour trouver ce qui gère cet affichage

Ravi (Vendredi 23 Octobre 2009 à 19:22):

merci beaucoup :D

Nouipoz (Vendredi 23 Octobre 2009 à 19:51):

Merci beaucoup , tu aide super bien les gens comme d'habitude , je suis compte premieum :D , euh par conte sur file zilla comment on peut editer direct le fichier avec komodo ? merci

spookdealer (Samedi 24 Octobre 2009 à 11:22):

Merci beaucoup pour ce tutoriel, je vais pouvoir me faire un thème sur wordpress grasse a toi trop cool.

Woa (Samedi 24 Octobre 2009 à 13:49):

Nouipoz, en étant premium tu peut voir la vidéo du carousel flash complète?

Harry (Samedi 24 Octobre 2009 à 14:18):

Waip

zedat (Samedi 24 Octobre 2009 à 21:48):

stp grafikart fait un tour pour voir tes mails stp j'ai posté dans contacte mais ça fait quelque jour déjà je n'es pas de réponse ^^'

shorty26 (Dimanche 25 Octobre 2009 à 00:22):

Bon tuto comme toujours ^^.
Merci pour ton travail !

Martino (Dimanche 25 Octobre 2009 à 11:21):

Excellent tuto et on ne peut plus pédagogique pour les novices (comme moi).
Cependant, une petite question, je voudrai intégrer un caractère pipe "|" entre mes menus. Comment puis-je le faire??
D'avance merci et encore chapeau pour ton travail.

shorty26 (Dimanche 25 Octobre 2009 à 11:57):

Salut tous le monde,

Je vais peut-être passer pour un inculte mais bon, je me lance :P

Dans la vidéo, on voit que quand il écrit, il y a une petite box sur le coté qui lui évite de taper les mots en entier !
Est-ce intégré avec les logiciels type C++ etc...?
Est-ce un logiciel spécial ?

Merci d'avance et encore bravo pour ton travail ^^

Grafikart (Dimanche 25 Octobre 2009 à 12:07):

C'est intégré dans les logiciels que j'utilise. Dans le tutoriel j'utilise Komodo mais d'autre le font comme notepad++ par exemple.

shorty26 (Dimanche 25 Octobre 2009 à 12:09):

Merci encore :D

Fataliste (Dimanche 25 Octobre 2009 à 17:56):

Merci

Woa (Dimanche 25 Octobre 2009 à 20:50):

Ok, mais comment installer MyPhpAdmin..?

Ravi (Lundi 26 Octobre 2009 à 00:41):

ben Myphpadmin s'installe automatique quand tu installes wamp, xamp, easyphp sur windows et sur Mac Mamp...

j'espère avoir répondu à ta question

Woa (Lundi 26 Octobre 2009 à 10:18):

Oui merci,

Harry (Lundi 26 Octobre 2009 à 11:07):

A un moment du tuto, tu sors ta calculette, qui fait aussi recherche, c'est quoi ce petit logiciel ?

Woa (Lundi 26 Octobre 2009 à 11:20):

je savais ce que c'été, je ne savais pas quel logiciel prendre pour l'avoir via localhost.
Woa,

WoaWorld (Lundi 26 Octobre 2009 à 12:17):

Re-bonjour,
J'ai un problème pour l'affichage des images pour le header, le voici.
Pour le style.css j'ai :
#head{ background:url(images/head.jpg);
Et pour le header.php j'ai :
<div id="head">
</div>
Le dossier "images" et bien dans le dossier du thème avec les images dedans.
Comment faire pour quel s'affiche?

WoaWorld (Lundi 26 Octobre 2009 à 12:19):

Pardon pour le head j'ai :
#head{ background:url(images/head.jpg); }

Grafikart (Lundi 26 Octobre 2009 à 13:29):

Il faut préciser une hauteur et largeur à l'élément head

WoaWorld (Lundi 26 Octobre 2009 à 13:43):

Merci,
Maintenant j'ai un problème avec la couleur du texte, j'ai sa pour le css:
body{ text-align:center;}
#head{ background: url(images/bg.png) repeat-x #e0d6bb; height:160px;}
#head #paysage{ position:relative; width:1000px; margin:0 auto; background: url(images/head.jpg) top left no-repeat; height:160px;}
#head #paysage #menu{ position:absolute; top:95px; left:270px;}
#head #paysage #menu ul{}
#head #paysage #menu ul li{ float:left; width:115px; list-style:none; }
#head #paysage #menu ul li{float:left; width:115px; font-size:20px; font-family:Myriad Pro; color:#FFFFF; text-transform:uppercase;}
#head #paysage #menu ul li span{ display:block; font-size:11px; font-family:Myriad Pro; color:#FFFFF; text-transform:lowercase; }

megacouick (Lundi 26 Octobre 2009 à 15:46):

Salut, Bravo pour ce tuto.
Le Problème, c'est que moi je ne peux pas avoir accès aux fichiers sources car je ne peux pas me connecter.
J'ai créé un compte -> entré les informations dans le "login" mais pas moyen
J'ai mis "mot de passe perdu" pour en avoir un nouveau mais ça marche toujours pas :'( .
Si tu as une solution...
Merci

Grafikart (Lundi 26 Octobre 2009 à 16:35):

Contacte moi, et donne moi ton login, tu ne reçois pas le mail avec le mot de passe c'est ça ?

megacouick (Lundi 26 Octobre 2009 à 17:41):

non c'est pas ça, je n'arrive pas à me connecter au site.
j'ai reçu les mails mais je n'arrive pas à me connecter :S
il me met toujours la fenêtre de login avec un mot de passe tres long ...
et quand je mets le mien il me remet la meme page...

Nouipoz (Lundi 26 Octobre 2009 à 19:22):

Grafikart j'ai posté un commentaire problème dans les ressource pour komodo merci :p

WoaWorld (Mardi 27 Octobre 2009 à 00:39):

Re,
Problème résolue,
Mais un problème résolue, un autre arrive...
Les catégorie/widget ne veule pas se mettre à côté des articles (droite).
#col21{ width:552px; float:left; }
#col22{ float:right; width:400px; }
Je ne comprend pas...
Merci d'avance, Woa.

WoaWorld (Mardi 27 Octobre 2009 à 09:57):

Voici un screen pour mieux aider à comprendre;
http://img197.imageshack.us/img197/4750/screenzr.jpg
merci,

Zelvac (Mardi 27 Octobre 2009 à 11:40):

Bravo ! Très bon tutoriel !

WoaWorld (Mardi 27 Octobre 2009 à 15:51):

Grafikart, voit-tu ou est le problème? :/

talandria (Mardi 27 Octobre 2009 à 18:25):

merci , Graph

Super tuto comme d'hab , justement je refond mon site en ce moment avec wordpress ...
Donc super agréable surprise en tombant sur ton tuto ..qui est toujours nickel .

le bon boulot ça se récompense.
A +
jm

multras (Jeudi 29 Octobre 2009 à 10:27):

Y a pas une autre moyen pour regarder la vidéo !!??
Dailymotion ne fonctionne pas dans mon pays

Merci

WoaWorld (Mercredi 04 Novembre 2009 à 11:01):

Devient premnium, tu peut tous les télécharger et accéder à des ressources inédite en étant premium.

Tony (Mercredi 04 Novembre 2009 à 17:36):

Bonjours , je voulais savoir si il est possible de vous contacter pour une aide ?

Tonyg (Mercredi 04 Novembre 2009 à 17:45):

Je peu rémunéré aussi rémunéré pour l'aide fourni .

valentin45000 (Jeudi 05 Novembre 2009 à 19:19):

Ouah c'est génial, le seul truc c'est que pour installé le CSS sur wordpress faut payer lol, et sa c'est moins cool

Flipsyde92 (Vendredi 06 Novembre 2009 à 11:22):

Tu parles bien du 'Cascading Style Sheet' ? Il ne faut rien payer ! Ou as-tu entendu cela ?

valentin45000 (Vendredi 06 Novembre 2009 à 21:24):

Bien comment créer tu ton CSS, parce que moi je vais dans apparence > Modifier le CSS.
C'est bien ici ?

valentin45000 (Vendredi 06 Novembre 2009 à 21:28):

En faite je comprend pas ou on met se code ^^

valentin45000 (Vendredi 06 Novembre 2009 à 21:30):

A non j'avais pas compris. Je croyais que c'était pas a installer sur un site.

Grafikart (Vendredi 06 Novembre 2009 à 23:27):

Regarde le tutoriel je pense que ça ira mieux

WoaWorld (Mercredi 11 Novembre 2009 à 12:44):

Bonjour Grafikart, j'ai une question sur le design de la page index.
Je voudrais affiché les post d'une manière vignette comme sur ce site:http://www.jonathan-menet.fr/blog/ ou encore comme on peut le voir sur cette image: http://wpinspiration.com/wp-content/uploads/starcatcher-555x330.png et pour finir: http://www.designbombs.com/.
Quelqu'un aurait une idée de la manière de procéder?
Merci d'avance, Woa.

Grafikart (Mercredi 11 Novembre 2009 à 15:09):

Tu veux utiliser wordpress avec une disposition ressemblant à un portfolio, je n'ai encore jamais fait ça mais je te conseille de lire cet article qui donne de très bon conseils : http://www.smashingmagazine.com/2009/04/29/ultimate-guide-to-using-wordpress-for-a-portfolio/

WoaWorld (Mercredi 11 Novembre 2009 à 15:46):

Merci pour le lien, je vais chercher des tutos car je ne suis pas in pro en codage, je préfére le design. ^^
Je vous tient au courant, Woa

WoaWorld (Mercredi 11 Novembre 2009 à 15:55):

Re-bonjour,
Certain post mon interloquer, http://www.jankoatwarpspeed.com/post/2009/07/07/Adaptable-view.aspx explique comme dans votre tutorial la fonction du positionnement et je me demandai si l'on ne pourrait pas via le css modifier l'affichage du des "bloc" de l'articles.
Woa

tibeoh (Dimanche 15 Novembre 2009 à 19:38):

C'est bien ! Mais si tu dois faire une modification légère sur ton design c'est pas évident de retrouver exactement les mêmes dimensions que l'image présente sur ton site...
Alors qu'avec un découpage avec l'outil approprié, tu as une trace dans ton photoshop et la découpe, même après modification de style de ton design se fait en quelques secondes !
Mis à part ça c'est sympa !
Petite question : Qu'est ce qui distingue Wordpress et Joomla ? J'attends avec impatience ta réponse !

Krome (Dimanche 15 Novembre 2009 à 22:03):

J'ai fait quasiment la même remarque un peu plus haut, à savoir qu'il est ptètre plus pratique d'utiliser les tranches dans photoshop d'après moi mais nous avons tous des habitudes différentes

Rechart (Lundi 16 Novembre 2009 à 16:17):

bonjour,

c'est quoi le bout de code en début du css body,div,dl,dt,dd,ul.....

darkn1ko (Lundi 16 Novembre 2009 à 18:37):

@ rechart

ca sert a réinitialiser les attributs css puisque suivant les navigateurs, ils sont différents par défaut

Baptiste (Mardi 17 Novembre 2009 à 17:05):

Salut à tous,
je profite de ce tuto sur le découpage d'un site pour exposer mon problème avec photoshop.
Lorsque je découpe mes parties et que je passe par enregistrer pour le web ça m'éclaircit tout, et si je mets cette image en header par exemple et que je pipette la couleur de fond et bien ce ne sera pas exactement la même couleur!
Il y a pas un problème de couche RGB et sRGB ou un truc du genre?

merci de votre aide! car je ne peux plus passer par enregistrer par le web donc...
++

greg (Mercredi 18 Novembre 2009 à 16:30):

Je crois que l'on peut faire des arrondis
moz-border-radius

Andy (Mercredi 18 Novembre 2009 à 19:14):

Tout juste greg ! Moi je fais -moz-border-radius:20px

Grafikart (Mercredi 18 Novembre 2009 à 20:37):

Il faut utiliser -webkit-border-radius:20px; aussi comme ça ça marchera aussi sur safari

greg (Jeudi 19 Novembre 2009 à 00:08):

Terrible ton tuto, je me demandai si tu ulilser pas joomla par hasard ?
On sait jamais
Félicitation encore pour ton tuto, je crois que tu es "hors concours"

Grafikart (Jeudi 19 Novembre 2009 à 05:16):

Non je n'utilise pas Joomla, l'administration me fait peur

ben (Vendredi 27 Novembre 2009 à 12:07):

jolie le thème,
mais il n y a pas de lien pour télécharger la vidéo?

kosaidpo (Lundi 30 Novembre 2009 à 11:49):

bonjour merci pour ce super tuto mais y'a pas de tuto de Gimp c'est vraiment dommage

sinon merci bonne continuation ;]

Sweet (Mardi 01 Décembre 2009 à 14:31):

Excellent ! Merci merci merci merci

Ben8 (Mardi 01 Décembre 2009 à 18:04):

Génial !!! merci beacoup

maronette (Dimanche 06 Décembre 2009 à 01:08):

trooo bien j'aiime bien

IgiX (Dimanche 20 Décembre 2009 à 14:54):

Sympa le rendu! mais pourquoi ne pas faire avec l'outil tranche qui est bien plus pratique et permet d'optimiser tes image pour les web assez rapidement

Cordialement,
IgiX

Grafikart (Dimanche 20 Décembre 2009 à 16:15):

J'ai pas pris l'habitude d'utiliser les selections (surtout la sélection de 1px) faudrait que je me penche sur l'outil tranche. L'autre souci c'est que suivant les éléments à découper je dois afficher/masquer des calques.

OoimedoO (Vendredi 01 Janvier 2010 à 17:06):

Sa fessait un bout de temps que j'ai pas coder de design et je peux te dire que te design ma vraiment rafraîchi la mémoire très très bon tuto

dbzes (Jeudi 14 Janvier 2010 à 19:53):

Je comprend pas, au moment où tu t'occupe de la cascade et tu met un "fixed", moi je reproduit en parallèle ce que tu fait donc j'ai ça :

#main { width:1000px; margin:0 auto; text-align:left; background:url(images/cascade.png) 647px 75px repeat-y fixed;}

A part quelque pixel qui change mais le resulat est pareille, donc je disait quand je met pas le fixed, c'est bon la cascade est parfaitement alignée mais quand je met fixed elle est se décale carrément sur la gauche d'au moins 300px et jai pas trouvé pourquoi??

guiguilemalin (Samedi 16 Janvier 2010 à 08:09):

super tuto franchement merci beaucoup tout y es j'ai énormement apris grace a ce dernier .
un grand merci a Grafikart et une bonne continuation ...

dreadstock (Dimanche 17 Janvier 2010 à 11:51):

Peut-on avoir les fichiers sources pour les abonnés ? MERCI

Grafikart (Dimanche 17 Janvier 2010 à 13:48):

N'étant pas l'auteur du design je ne peux pas fournir les sources. A la limite je peux te donner le code mais sans les images.

ibrahem (Mardi 19 Janvier 2010 à 01:41):

Is it possible to add links Free Lesson

bast_65 (Vendredi 22 Janvier 2010 à 22:34):

Super tuto, vraiment bravo, mais je vais quand même faire mon relou (qui a dit encore ?).
Le site comporte des catégories ou la c'est parfaitement expliquer encore bravo, mais il y a aussi des pages "portefolio" et "espace pro". Tu a l'air d'avoir mis un menu en dur pour faire cela, mais si on veut utiliser le système de page de wordpress pour faire des page dynamique, comment si prend t-on et a tu des site intéressant qui traite de ce sujet (j'ai vu passé 'model de page' ou encore template avec un num de catégorie mais sa resté très vague)
merci d'avance et encore bravo pour ce tuto

doudouzeb (Lundi 25 Janvier 2010 à 23:35):

Bonjour à tous, je confirme toutes les critiques positives, membre Premium depuis deux jours et très satisfaits des tutos sur ce super site que je cherchais depuis toujours...

il vaut largement les 10€ pour ce qui aimes ce former seul et rapidement...

silence (Dimanche 31 Janvier 2010 à 12:19):

Salut merci pour ce tutopourrais tu me dire qu'est le code pour faire un reset css ? Moi j'ai juste mis un padding et marge a 0. Et est-ce que cette technique est bonne car j'ai un peu regardé sur le net et on dit que ce n'est pas recommandé d'utiliser cette methode .

Merci

silence (Dimanche 31 Janvier 2010 à 14:59):

Ps: Peux tu aussi me dire qu'est ce que tu utilises pour modifier les variables en ayant l'aperçu net ? Comme lorsque tu règles la disposition du titre ou du menu ?

Jutix (Lundi 01 Février 2010 à 15:10):

Arf... J'hésite entre Wordpress et Joomla pour la refonte de mon site...
Mais j'avoue, j'ai une petite préférence pour Wordpress après ce super tutoriel =)

mediacoda (Mardi 02 Février 2010 à 22:16):

Vraiment sympa, le tuto: je vais squatter cette page quelques nuits...

Dark (Jeudi 11 Février 2010 à 14:05):

salut j'ai fini le tuto... est franchement tu viens de me faire découvrir un nouveau système pour créer un site.

J'ai des question:

-t'aurai pas un ptit système pour un petit espace membre? pour que quand il laisse un com's avec un pseudo, personne d'autre peux l'utilisé(sinon beaucoup de confusion et d'embrouille avec les membre sa risque xD)?

-J'ai les emplacements pour les avatars, mais rien pour enregistré l'images du visiteur ?

Dark (Jeudi 11 Février 2010 à 14:44):

J'ai une dernière question:

-j'ai créer une autre page qui s'appelle blog, comment fait on pour rajouter un news article sur cette page ?

kev (Mercredi 03 Mars 2010 à 00:08):

Franchement tu es doué !!! Pédagogue comme j'ai rarement entendu sur des videos de tuto, tu es à la porter du plus naze en informatique pour faire des choses qui sont quand même du domaine avancé...

Chapeau j'ai enfin tout compris avec toi, je suis doué sur flash mais avec ta video je vais enfin pouvoir passer ce cape que beaucoup de graphise ne passe pas parce le dev buerk quoi !

Merci encore

Grafikart (Mercredi 03 Mars 2010 à 01:17):

Merci ça fait plaisir

kev (Mercredi 03 Mars 2010 à 00:09):

ah oui et bien sur pret a donner de l'argent si tu refais du tuto de cette qualité =)

sitewaide (Mardi 09 Mars 2010 à 23:27):

Bonjour, ayant suivi le tutoriel, je suis confronté a un problème, lors de l'utillisation de la fonction the_content('Lire la suite...');, je n'ai pas le lien lire la suite, malgré une recherche dans le codex, je n'ai pas trouvé, merci d'avance

jeje39 (Mardi 16 Mars 2010 à 13:35):

Bonjour,
En fait pour voir le "Lire la suite", il te faut ajouter la balise "More" au moment ou tu tape ton article sur Wordpress. (c'est un petit icône en haut du formulaire de l'article)
J'espere t'avoir aidé.

jeje39 (Mardi 16 Mars 2010 à 13:46):

J'ai un petit souci au moment de la personnalisation du bloc texte.
J'ai beau rentrer les paramètres dans mon css, rien n'est pris en compte. Et avec l'outil debug de firefox, il n'y a rien qui apparait dans les div: bloc-top, bloc-bot et bloc.
Pouvez vous m'aider ?

fanzing (Jeudi 18 Mars 2010 à 16:59):

bonjour, merci pour ton tuto,
je suis novice de chez novice,
et je cherche un tuto pour comprendre les bases
du logiciel que tu utilise komodo edit 5.1 (en français)

Merci par avance

starsky (Lundi 22 Mars 2010 à 02:12):

Balaies, oui, un très bon tuto. Pour moi ce sera le début de beaucoup de themssssss avenir, chic alors.... et pour le prix, c'est vraiment donnée. car il y a du travail tout même..

ZiOu333 (Lundi 12 Avril 2010 à 17:16):

Bonjour, est-ce que quelqu'un peu m'indiquer un tuto pour créer une maquette wordpress sur photoshop. J'en ai trouvé un sur "weecast" mais il est payant et je suis encore mineur donc je ne peu pas l'acheté.
Merci de votre aide par avance et à bientôt,

Zoliobi (Jeudi 22 Avril 2010 à 14:51):

Bonjour,
J'ai une question au niveau de la font utilisé pour le menu "Myriad Pro", j'ai tenté également de l'inclure dans mon design, ça fonctionne bien. Sauf que lorsque je test mon site chez des personnes qui ne possède pas cette police sur leur PC forcément cela affiche une autre police. Après des recherches je suis tombé sur le fameux @font-face de CSS3 qui permet d'importer une police que l'utilisateur n'a pas forcement. Cela marche très bien sur les différents navigateurs sauf bien sûr IE qui l'importe bien mais qui a l'air de grossir la police ce qui fait buguer mon design.
As-tu une méthode différente pour utiliser une police que les utilisateurs n'ont pas ou y'a t'il un moyen pour qu'IE ne foire pas l'importation (je précise que j'ai importé la police au format eot et otf pour que ça fonctionne sur tous les navigateurs). En gros ça donne ça :
@font-face {
font-family: 'Myriad Pro';
src: url('fonts/MyriadPro-Bold.eot');
src: local('Myriad Pro Bold'), local('Myriad Pro'),
url('fonts/MyriadPro-Bold.otf') format('opentype');
}
Encore merci pour ce tutoriel et bonne continuation.

karmalo (Lundi 10 Mai 2010 à 20:08):

Bonjour,
Excellent tuto, félicitation pour ton travail.
J'ai une question. J'ai vu que tu avais créé dans le header des pages, tu as mis <a href="#"></a>.
J'ai fait la même chose dans le footer, car je veux avoir un lien vers "Les Lens" qui est links.php.
J'ai fait ceci: <li><a href="links.php">Liens</a></li>
Mais ca ne marche pas. Cette fonctionnalité est par défaut dans la sidebar mais moi je ne la veux pas, je veux ca dans le footer et que ca redirige vers la page de tous les liens.
J'espère que je me suis bien exprimée et je te remercie d'avance pour l'aide que tu pourras m'apporter.
Bonne soirée
Karine

karmalo (Lundi 10 Mai 2010 à 21:01):

on, j'ai fini par trouver une astuce
donc dans mon menu, j'ai mis ceci:
<div id="menu"> <ul><li><a href="<?php bloginfo('url'); ?>">accueil</a></li><?php wp_list_categories("depth=1&title_li="); ?></ul></div>
Comme ca j'ai seulement la page accueil qui s'affiche et les catégories ensuite.
Puis j'ai crée une page liens dont j'ai précisé modèle de page"liens". Ainsi, je connais le permalien de ma page que j'ai copié/collé dans mon footer.
<div id="footer">
<ul>
<li><a href="http://localhost/nom/?page_id=33 " rel="bookmark">Liens</a></li>
<li><a href="#">une autre page</a></li>
</ul>
</div>
Et la tout fonctionne sur des roulettes, je n'aurais plus qu'à faire la même chose pour la page "une autre page"

moustache (Vendredi 14 Mai 2010 à 13:49):

Salut,

Je suis entrain d'essayer de le faire cependant quand j'arrive a la partie code css ect meme quand je veux mettre le bg.png ou
le header ca ne saffiche pas.

Je ne comprends pas.

de l'aide ?

Moran34Claudia (Vendredi 28 Mai 2010 à 19:01):

Cars and houses are quite expensive and not everyone is able to buy it. Nevertheless, <a href="http://lowest-rate-loans.com/topics/business-loans ">business loans</a> was created to support people in such kind of situations.

film juicio (Jeudi 03 Juin 2010 à 11:49):

ouais j'ai le meme souci

d40x (Vendredi 18 Juin 2010 à 12:56):

Il y a eu une mise à jour de wordpress. Après voir fait la mise à jour, il s'avère que la fonction the_content(); qui écrivait le contenu de la page ne fonctionne plus. dans une catégorie en revanche aucun changement.

remu38 (Dimanche 20 Juin 2010 à 19:29):

bonjour,

bravo pour votre travail .

quest : à 7:00 comment faites vous pour masquer les titres (ici HOT CHIP) avec une forme transparente par dessus ?
(l'interet est de mettre une forme transparente ou de meme couleur que le fond mais comment faire ?)

merci bcp

cdt
rc

Galithiel (Mercredi 23 Juin 2010 à 16:18):

Il serait judicieux de spécifier que les pingbacks et compagnie ont une classe différente des commentaires, ça m'a fait perdre vachement de temps quand j'ai cherché pourquoi le design buguait ^^

Jbay (Dimanche 11 Juillet 2010 à 14:34):

Il y a quelque chose que je n'arrive pas à comprendre.. Sur le fichier comments.php, il y a une ligne <?php comment_text() ?> sans le point-virgule. Pourquoi ça ne plante pas ? ( Peut être que c'est parceque je n'ai pas de compte prenium et que la qualité m'empêche de voir ? )

Nico (Mardi 13 Juillet 2010 à 14:16):

Quelqu'un sait-il comment modifier le formulaire de "post" de commentaires dans Wordpress 3 (je précise que je ne parle pas du CSS, mais bien de la structure <form>, <label> etc...)?

Alexis (Vendredi 06 Août 2010 à 01:11):

Avec la nouvelle mise à jour de Wordpress (version française 3.0.1), j'ai perdu mes repères ! Il n'est plus possible de bidouiller le theme par défaut...
Il faudrait faire une mise à jour de ce tuto aussi !
Avec la même clareté, bien entendue. Sans vouloir vous obliger...
Je tenais à vous remercier pour l'accessibilité de votre pédagogie.

Tchupa (Mardi 10 Août 2010 à 17:24):

Bonjour, mon wordpress ne détecte pas mon thème je suis bien embêter

groscoeur (Mercredi 11 Août 2010 à 08:20):

Bonjour, serait il possible d'avoir le code complet reset css
body,div,dl,dt,dd,ul...

Merci d'avance

la chose (Mercredi 11 Août 2010 à 14:57):

http://meyerweb.com/eric/tools/css/reset/

groscoeur (Mercredi 11 Août 2010 à 15:02):

un grand grand merci à des gens généreux comme vous

 

Ajouter un commentaire

Si vous rencontrez un problème avec votre code et que vous avez une question spécifique utilisez plutôt les questions pour avoir une réponses rapide.

Vous devez activer javascript.
 

 

Suivre les commentaires de ce tutoriel