Annonce

Faites la différence entre le service WordPress.com et l'application libre WordPress.

Mettez-vous à jour ! WordPress 4.0 est disponible en français.

Annonce 1 : Le Codex en français a besoin de vous pour avancer !
Annonce 2 : Avant de poster, n'oubliez pas de faire une petite recherche et de lire les règles de ce forum.
Annonce 3 : Lisez notre blog, il regorge de bonnes informations.
Annonce 4 : Rejoignez-nous sur Facebook, Google + et sur Twitter
  • Index
  •  » Thèmes
  •  » Tutoriel WordPress pour créer son thème de A à Z

#1 24-11-2011 19:58:05

boomy bx
Habitué WP
Lieu: Paris
Date d'inscription: 05-04-2007
Messages: 73
Site web

Tutoriel WordPress pour créer son thème de A à Z

Bonjour,

je viens de créer un tutoriel complet pour créer son thème complet, en partant de rien. Il est gratuit bien sûr.

http://wordpress.bbxdesign.com/

En espérant que ça aidera certains d'entre vous.

bbx


boomy vous salue bien
http://img482.imageshack.us/img482/3429/bbxadvertss1.gif

Hors ligne

 

#2 24-11-2011 20:36:09

le révérend
Passionné WP
Lieu: l'ile où les rois se reposent
Date d'inscription: 17-01-2010
Messages: 516
Site web

Re: Tutoriel WordPress pour créer son thème de A à Z

Bonjour,

J'ai donc l'occasion de vous remercier : depuis ce matin je suis dessus en commençant par votre dossier "css : l'art et la science" smile

Hors ligne

 

#3 24-11-2011 23:33:45

Li-An
Blogueur Fou
Lieu: Orléans
Date d'inscription: 28-02-2008
Messages: 9673
Site web

Re: Tutoriel WordPress pour créer son thème de A à Z

Usine à gaz innommable (avec deux "m").
Tu n'abordes pas les notions de custom post et custom taxonomy. C'est sûr que c'est un peu ardu pour un néophyte mais très intéressant pour qui veut personnaliser son thème. De nombreux portfolios passent par les custom posts pour différencier travaux et blog par exemple. Idem pour les solutions à la Tumblr. Enfin, je dis ça comme ça :-).

Dernière modification par Li-An (24-11-2011 23:39:58)


Bonjour.
Mon blog consacré à l'actualité des plugins Wordpress: L'Écho des plugins WP
mon blog tout court: http://www.li-an.fr/blog/

En ligne

 

#4 25-11-2011 01:17:11

booba
Bavard WP
Date d'inscription: 20-06-2010
Messages: 317
Site web

Re: Tutoriel WordPress pour créer son thème de A à Z

voui, ben en ce qui me concerne et étant une sombre brèle en anglais, je me suis "formé" avec la méthode du -gratage-démontage-kéjégratékatoupété?- et je dois bien avouer que si j'avais lu ca avant, je me serais surement pas mal économisé les nerfs pour un résultat -niveau "compétences"- beaucoup plus probant..déjà appris des trucs ce soir...

Merci pour les tutos, et pour le déterrage de topic smile


Je suis un noob mais je me soigne..du moins j'essaye...

Hors ligne

 

#5 25-11-2011 09:40:08

Li-An
Blogueur Fou
Lieu: Orléans
Date d'inscription: 28-02-2008
Messages: 9673
Site web

Re: Tutoriel WordPress pour créer son thème de A à Z

Je n'ai plus qu'à me carpetter par terre en présentant mes plus humbles excuses, je n'était pas arrivé aussi loin dans ma lecture et ne l'avait pas vu dans les rubriques... Ça mérite en tous les cas un lien sur mon blog plugins.


Bonjour.
Mon blog consacré à l'actualité des plugins Wordpress: L'Écho des plugins WP
mon blog tout court: http://www.li-an.fr/blog/

En ligne

 

#6 25-11-2011 11:05:10

Li-An
Blogueur Fou
Lieu: Orléans
Date d'inscription: 28-02-2008
Messages: 9673
Site web

Re: Tutoriel WordPress pour créer son thème de A à Z

Bon, j'ai tout lu et j'ai des questions d'ordre général parce que j'ai appris plein de trucs.
@:Boomy Bx - tu utilise dans son thème wp_reset_postdata pour réinitialiser sa boucle alors que je passe par wp_reset_query(). C'est grave ?

J'ai trouvé un peu dommage que tu ne traites pas de la personnalisation de la fonction d'appel aux commentaires.

J'ai découvert avec effarement qu'on ne referme pas <?php dans le fichier functions.php. C'est bien le cas dans les thèmes par défaut mais pas dans les thèmes que j'utilise. Y'a de l'info là-dessus (je n'ai pas trouvé en cherchant rapidement) ?

Et enfin je regrette que tu parles de Sidebar comme d'une barre de côté alors que c'est plus souple que ça. Et j'ai été un peu interloqué que tu affiches une administration en anglais alors qu'on peut supposer que tes lecteurs auront un WP francophone. Ou alors ce billet est aussi traduit en anglais ?

Bon, ce sont juste des questions d'ordre général, je trouve que c'est un super cours et en plus, ça permet aux néophytes de comprendre la philosophie d'un moteurs comme WP (j'ai trouvé assez méchant la pique sur Dotclear qui semble avoir quand même bien évolué même si personne là-bas ne semble au courant de l'existence de thèmes magazine).


Bonjour.
Mon blog consacré à l'actualité des plugins Wordpress: L'Écho des plugins WP
mon blog tout court: http://www.li-an.fr/blog/

En ligne

 

#7 25-11-2011 11:34:17

boomy bx
Habitué WP
Lieu: Paris
Date d'inscription: 05-04-2007
Messages: 73
Site web

Re: Tutoriel WordPress pour créer son thème de A à Z

Alors, pour le wp_reset_query ou wp_reset_postdata, j'ai moi-même utilisé les deux. J'ai pas vu de différence. Mais la doc utilise surtout le second, du coup, c'est celui là que j'ai mis dans le tuto.

Pour la personnalisation aux commentaires, oui j'aurais pû en parler. Mais je considère ça comme un détail. Le template de base généré par WP est très correct et suffit généralement.

Pour le <?php qu'on ne ferme pas dans functions.php, j'ai déjà eu pleins de soucis en le fermant. Du coup...

Pour la sidebar, le tuto est pour les néophytes, du coup je préfère la considérer comme une simple barre de côté. Après, on peut en créer plusieurs, en mettre dans le footer etc. Mais je fais rarement ça et j'aurais eu du mal à l'expliquer.

J'affiche une admin en anglais, parce que mon WP est en anglais, et même si la communauté FR est grande, les aides et astuces que je trouve en parcourant le web sont à 95% en anglais. Du coup, c'est plus simple de s'y retrouver dans une admin anglaise.


boomy vous salue bien
http://img482.imageshack.us/img482/3429/bbxadvertss1.gif

Hors ligne

 

#8 25-11-2011 11:55:25

Li-An
Blogueur Fou
Lieu: Orléans
Date d'inscription: 28-02-2008
Messages: 9673
Site web

Re: Tutoriel WordPress pour créer son thème de A à Z

Merci pour toutes ces précisions. Il n'y a que pour l'admin anglaise que j'aurai tendance à tiquer parce qu'évidemment, pour un néophyte, ça peut être un peu stressant mais bon, on s'y fait :-)


Bonjour.
Mon blog consacré à l'actualité des plugins Wordpress: L'Écho des plugins WP
mon blog tout court: http://www.li-an.fr/blog/

En ligne

 

#9 30-12-2011 22:36:05

zamp
Membre WP
Date d'inscription: 30-12-2011
Messages: 1

Re: Tutoriel WordPress pour créer son thème de A à Z

Super tuto, très complet et très clair. Je cherchais ça depuis un petit moment.

Avec une telle qualité tu peux te permettre d'ajouter une page dons wink

Hors ligne

 

#10 18-01-2012 12:51:02

Guy
Blogueur
Date d'inscription: 07-04-2011
Messages: 15029

Re: Tutoriel WordPress pour créer son thème de A à Z

Pour ce qui est de wp_reset_query et wp_reset_postdata, il est plus ou moins "normal" de ne pas voir de différence, wp_reset_query appelant wp_reset_postdata.
Le reset_query, comme son nom l'indique efface la requête courante en restaurant la précédente, ensuite il restaure les valeurs de la variable globale $post.

Une petite erreur sur le chapitre des post formats et le theme twenty eleven, ce n'est plus des loop-xxx.php comme dans twenty ten mais des content-xxx.php

Hors ligne

 

#11 23-01-2012 02:43:05

theyoubot
Connaisseur WP
Date d'inscription: 22-01-2012
Messages: 17

Re: Tutoriel WordPress pour créer son thème de A à Z

Je viens de découvrir WordPress et de l'installer. J'entame la lecture de ce tuto. Je trouve que pour quelqu'un comme moi qui ne sait rien de WP, le tuto est clair et logique. Merci pour ce travail impressionnant.

Hors ligne

 

#12 26-01-2012 22:31:01

Olivier C
Bavard WP
Date d'inscription: 05-03-2010
Messages: 371
Site web

Re: Tutoriel WordPress pour créer son thème de A à Z

Je trouve le tuto très bien fait. Si j'étais tombé sur un tel truc à mes débuts je pense que j'aurais gagné énormément de temps...hmmhmmhmm

Pour les "truc et astuces", un "truc" en plus : à propos de la fonction body_class il y a un script que l'on peut rajouter pour cibler un navigateur (et même la version, mais là j'ai malheureusement perdu le code...). Très intéressant je trouve. À ajouter dans functions.php :

Code: html

/*body_class*/
add_filter('body_class','browser_body_class');
function browser_body_class($classes) {
global $is_lynx, $is_gecko, $is_IE, $is_opera, $is_NS4, $is_safari, $is_chrome, $is_iphone;
if($is_lynx) $classes[] = 'lynx';
elseif($is_gecko) $classes[] = 'gecko';
elseif($is_opera) $classes[] = 'opera';
elseif($is_NS4) $classes[] = 'ns4';
elseif($is_safari) $classes[] = 'safari';
elseif($is_chrome) $classes[] = 'chrome';
elseif($is_IE) $classes[] = 'ie';
else $classes[] = 'inconnu';
if($is_iphone) $classes[] = 'iphone';
return $classes;
}

Hors ligne

 

#13 25-02-2012 19:41:05

kevindesousa
Habitué WP
Lieu: Paris
Date d'inscription: 30-10-2011
Messages: 61
Site web

Re: Tutoriel WordPress pour créer son thème de A à Z

bonjour je voudrai crée un theme avec un design que je vien de faire sous photoshop. http://lamiax.free.fr/screenshot.png

Est ce que ce tuto pourrai m'aider à faire ce que je veux ?

Dernière modification par kevindesousa (25-02-2012 19:41:25)

Hors ligne

 

#14 26-02-2012 07:34:13

Olivier C
Bavard WP
Date d'inscription: 05-03-2010
Messages: 371
Site web

Re: Tutoriel WordPress pour créer son thème de A à Z

@kevindesousa :

WordPress est tout à fait capable d'afficher les données telles que vous souhaitez les appeler sur votre home. Ce tutoriel pourra sans doute vous aider à comprendre les loops, ces boucles en php permettant d'afficher ce que l'on veut dans une page en faisant appel à la base de données. Par contre, si votre question concerne plutôt le positionnement des différents blocs, il vous faudra bosser le language CSS. Personnellement je ne vois aucune difficulté particulière à cette réalisation. Allez voir sur un site comme alsacreations.com.

PS : pour la maquette du thème, je trouve dommage de décaler la div des tweets du reste de la grille à seule fin de laisser de la place pour la dénomination "tweets". Je trouve que ce décalage nuirait à un aspect "pro".

Dernière modification par Olivier C (26-02-2012 07:37:09)

Hors ligne

 

#15 26-02-2012 15:31:07

kevindesousa
Habitué WP
Lieu: Paris
Date d'inscription: 30-10-2011
Messages: 61
Site web

Re: Tutoriel WordPress pour créer son thème de A à Z

Merci de ta réponse, je lis attentivement ce tuto mais je bloque au moment d'insérez la photo d'image a la une de l'article.

je lis en parallèle avec intérêt les tutos du site que tu ma conseillée.

Ps: Mon template sous photoshop n'était pas encore fini. Il me reste encore le footer.
Mais voila ou j'en suis, plus une dédicace pour toi dans les tweets =)
http://lamiax.free.fr/wordpresslamiax.jpg

Hors ligne

 

#16 26-02-2012 18:46:09

Olivier C
Bavard WP
Date d'inscription: 05-03-2010
Messages: 371
Site web

Re: Tutoriel WordPress pour créer son thème de A à Z

kevindesousa a écrit:

Merci de ta réponse, je lis attentivement ce tuto mais je bloque au moment d'insérez la photo d'image a la une de l'article.

Un exemple issu du code de la home.php de mon site. Dans une balise <section> (je code en HTML5) s'insère ce code :

Code: html

<section class="mag">

<?php $popular = new WP_Query('order=ASCs&showposts=2'); ?>
	<?php while ($popular->have_posts()) : $popular->the_post(); ?>
	<a href="<?php the_permalink(); ?>">
	<article class="news">
	<figure>
	<?php if ( has_post_thumbnail() ) { ?>
	<?php the_post_thumbnail('miniature-home'); ?>
	<?php } else { ?>
	<img width="213" height="128" src="<?php echo get_template_directory_uri() ?>/img/thematiques/defaut.jpg" alt="un article de untel"/>
	<?php } ?>
	<figcaption>
	<h1><?php the_title(); ?></h1>
	<p><?php the_excerpt(); ?></p>
	</figcaption>
	</figure>
	</article>
	</a>
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>

<section>

Explication :
- Le code has_post_thumbnail() fait appel aux images des articles en miniature (appelée ici "miniature-home"). Si l'article n'est pas lié à une image, une image est proposée par défaut : defaut.jpg. Pour afficher des miniatures il faut que le thème les supporte ***
- showposts=2 indique que je n'appelle que deux articles de cette manière, et donc comme les balises <article> sont à l'interrieur de ce code, il se présentera sur ma page seulement deux balises <article>, j'aurais très bien pu en appeler 100...
- le code propose aussi le tire de l'article affiché dans des balises h1 à l'aide de la fonction the_title()
- ... et un extrait de l'article à l'aide de the_excerpt()

Voilà pour un début. Pour les spécifications ne pas hésiter à fouiller dans le codex WP. Je sais c'est tout en anglais, mais heureusement google translate et notre ami pour l'aide à la traduction (ou mieux encore : le navigateur chrome pour une traduction directement sur la page consultée).


*** exemple de configuration à ajouter dans functions.php pour supporter les images  en miniature :

Code: html

//gestion des images
add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 1000, 320, true );
add_image_size( 'miniature-home', 213, 128, true );

On vois que mes images par défaut (que j'appelle dans mes en-tête de pages et articles) sont recoupées en 1000X320, et mes images "miniature-home" sont "resizées" et recoupée en 213X128.

Dernière modification par Olivier C (26-02-2012 18:51:26)

Hors ligne

 

#17 27-02-2012 12:27:23

Osara
Invité

Re: Tutoriel WordPress pour créer son thème de A à Z

@kevindesousa

Merci pour la démonstration de ta maquette ça me donne vraiment envie de créer aussi mon visuel, et d'en apprendre +.

Bonne chance pour ton projet!

Dernière modification par Osara (27-02-2012 12:29:34)

 

#18 27-02-2012 12:27:23

Osara
Invité

Re: Tutoriel WordPress pour créer son thème de A à Z

@kevindesousa

Merci pour la démonstration de ta maquette ça me donne vraiment envie de créer aussi mon visuel, et d'en apprendre +.

Bonne chance pour ton projet!

Dernière modification par Osara (27-02-2012 12:29:34)

 

#19 27-02-2012 12:27:23

Osara
Invité

Re: Tutoriel WordPress pour créer son thème de A à Z

@kevindesousa

Merci pour la démonstration de ta maquette ça me donne vraiment envie de créer aussi mon visuel, et d'en apprendre +.

Bonne chance pour ton projet!

Dernière modification par Osara (27-02-2012 12:29:34)

 

#20 27-02-2012 12:27:23

Osara
Invité

Re: Tutoriel WordPress pour créer son thème de A à Z

@kevindesousa

Merci pour la démonstration de ta maquette ça me donne vraiment envie de créer aussi mon visuel, et d'en apprendre +.

Bonne chance pour ton projet!

Dernière modification par Osara (27-02-2012 12:29:34)

 

#21 27-02-2012 12:27:23

Osara
Invité

Re: Tutoriel WordPress pour créer son thème de A à Z

@kevindesousa

Merci pour la démonstration de ta maquette ça me donne vraiment envie de créer aussi mon visuel, et d'en apprendre +.

Bonne chance pour ton projet!

Dernière modification par Osara (27-02-2012 12:29:34)

 

#22 27-02-2012 12:27:23

Osara
Invité

Re: Tutoriel WordPress pour créer son thème de A à Z

@kevindesousa

Merci pour la démonstration de ta maquette ça me donne vraiment envie de créer aussi mon visuel, et d'en apprendre +.

Bonne chance pour ton projet!

Dernière modification par Osara (27-02-2012 12:29:34)

 

#23 27-02-2012 12:27:23

Osara
Invité

Re: Tutoriel WordPress pour créer son thème de A à Z

@kevindesousa

Merci pour la démonstration de ta maquette ça me donne vraiment envie de créer aussi mon visuel, et d'en apprendre +.

Bonne chance pour ton projet!

Dernière modification par Osara (27-02-2012 12:29:34)

 

#24 27-02-2012 12:27:23

Osara
Invité

Re: Tutoriel WordPress pour créer son thème de A à Z

@kevindesousa

Merci pour la démonstration de ta maquette ça me donne vraiment envie de créer aussi mon visuel, et d'en apprendre +.

Bonne chance pour ton projet!

Dernière modification par Osara (27-02-2012 12:29:34)

 

#25 27-02-2012 12:27:23

Osara
Invité

Re: Tutoriel WordPress pour créer son thème de A à Z

@kevindesousa

Merci pour la démonstration de ta maquette ça me donne vraiment envie de créer aussi mon visuel, et d'en apprendre +.

Bonne chance pour ton projet!

Dernière modification par Osara (27-02-2012 12:29:34)

 
  • Index
  •  » Thèmes
  •  » Tutoriel WordPress pour créer son thème de A à Z

Pied de page des forums

Propulsé par PunBB 1.2.23
© Copyright 2005-2006 WordPress France

[ Generated in 0.888 seconds, 34 queries executed ]