Concevoir un thème  pour wordpress       De A à Z
Avant de commencer…• <?php ;?>• DOM ? HTML ? PHP ?• ÎÍË|ë“‘{∑∆·flÎÍË
Plan• Introduction• Le processus  – CSS  – Entête  – Corps du template  – Structurer les fichiers  – Conclusion
A,B,C• Analyse• Besoin• Conception (d‘une maquette)
DàZ• Développer• …• Z : Livrer/Mettre en ligne le template
Objectif du jour• Concevoir un thème pour wordpress 3.4  – Liste des articles  – Sidebar  – wordpress• A,B,C - > Slick Gra...
• Pour gagner du temps, nous ferons abstraction de l’aspect graphique  – Transformation d’un layout en html/css/js     • h...
Kit graphique      Thème                  wordpressHtml, css(      Php,css (et  et js)           js)
Processus1.Le CSS   2.L’entête   3.Sidebar   4.Le corps
Etape 0• Créer un dossier contenant les fichiers du  thème• Dossier /wp-content/themes/• index.html > index.php
1. LE CSS
/*Theme Name: Le nom de votre themeTheme URI: votre site webDescription: une descriptionAuthor: vousAuthor URI: http://mon...
2. L’ENTÊTE
• <!DOCTYPE html>• <head>• <!—meta titre-->  <title><?php bloginfo(name); ?><?php  wp_title(); ?></title>• <!—charset-->  ...
•      <meta name="generator"    content="WordPress <?php bloginfo(version);    ?>" />•      <meta name="description" cont...
•      <!--rss-->    <link rel="alternate" type="application/rss+xml"    title="<?php bloginfo(name); ?> RSS Feed"    href...
• </head>
2.CORPS DU TEMPLATE
<body>     <div id=“container”>              <div id=“header”></div>              <div id=“menu”></div>              <div ...
Div id=« header »  <div id="header">      <h1> <!--nom du blog-->           <?php bloginfo(name); ?></h1>  </div>
<body>     <div id=“container”>              <div id=“header”></div>              <div id=“menu”></div>              <div ...
<div id="menu">   <ul>    <?php wp_list_categories(title_li=);?>   </ul> </div>
<body>     <div id=“container”>              <div id=“header”></div>              <div id=“menu”></div>              <div ...
• Sidebar  – Widgets  – Functions.php
Functions.php<?phpfunction arphabet_widgets_init() {    register_sidebar( array(      name => Home right sidebar,      id ...
<div id="leftmenu">   <div id="leftmenu_top"></div>                           <div id="leftmenu_main">      <ul id="sideba...
<body>     <div id=“container”>              <div id=“header”></div>              <div id=“menu”></div>              <div ...
<div id="content">     <div id="content_top"></div>     <div id="content_main">       <!-- boucle. -->           <?php if ...
<div class="post">            <!-- instruction affichant le titre en tant que permalink,ainsi que la date. -->            ...
<!-- afficher le contenu du post -->            <div class="entry">             <?php the_content(); ?>            </div> ...
<!-- si pas de posts -->            <?php endwhile; else: ?>            <p>Désol&eacute; .Pas de posts correspondant </p> ...
<body>     <div id=“container”>              <div id=“header”></div>              <div id=“menu”></div>              <div ...
<div id="footer"><h3><ahref="http://www.bryantsmith.com">florida webdesign</a></h3></div>  </div> </div></body></html>
4.STRUCTURER LES FICHIERS
• Code de l’entête - > header.php• Code du corps -> index.php  – Sidebar ->sidebar.php• Code du footer -> footer.php
Header    <?php_get header();?>Sidebar –    <?php_get sidebar();?>Footer    <?php get_footer()?>
Pour aller un peu plus loinCréer un carouselhttp://www.tutorialstag.com/wordpress-featured-posts-using-nivo-slider.htmlPs ...
Fin• Questions ?  – jeanluc@houedanou.com  – Twitter @jhouedanou
Concevoir un thème pour Wordpress
Concevoir un thème pour Wordpress
Concevoir un thème pour Wordpress
Concevoir un thème pour Wordpress
Concevoir un thème pour Wordpress
Concevoir un thème pour Wordpress
Concevoir un thème pour Wordpress
Concevoir un thème pour Wordpress
Concevoir un thème pour Wordpress
Upcoming SlideShare
Loading in …5
×

Concevoir un thème pour Wordpress

3,734 views

Published on

Presentation

Published in: Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,734
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
8
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Concevoir un thème pour Wordpress

  1. 1. Concevoir un thème pour wordpress De A à Z
  2. 2. Avant de commencer…• <?php ;?>• DOM ? HTML ? PHP ?• ÎÍË|ë“‘{∑∆·flÎÍË
  3. 3. Plan• Introduction• Le processus – CSS – Entête – Corps du template – Structurer les fichiers – Conclusion
  4. 4. A,B,C• Analyse• Besoin• Conception (d‘une maquette)
  5. 5. DàZ• Développer• …• Z : Livrer/Mettre en ligne le template
  6. 6. Objectif du jour• Concevoir un thème pour wordpress 3.4 – Liste des articles – Sidebar – wordpress• A,B,C - > Slick Gray , par Bryan Smith – http://www.quackit.com/html/templates/simple _website_templates.cfm
  7. 7. • Pour gagner du temps, nous ferons abstraction de l’aspect graphique – Transformation d’un layout en html/css/js • http://hv-designs.co.uk
  8. 8. Kit graphique Thème wordpressHtml, css( Php,css (et et js) js)
  9. 9. Processus1.Le CSS 2.L’entête 3.Sidebar 4.Le corps
  10. 10. Etape 0• Créer un dossier contenant les fichiers du thème• Dossier /wp-content/themes/• index.html > index.php
  11. 11. 1. LE CSS
  12. 12. /*Theme Name: Le nom de votre themeTheme URI: votre site webDescription: une descriptionAuthor: vousAuthor URI: http://monkeydo.bizVersion: 1*/
  13. 13. 2. L’ENTÊTE
  14. 14. • <!DOCTYPE html>• <head>• <!—meta titre--> <title><?php bloginfo(name); ?><?php wp_title(); ?></title>• <!—charset--> <meta http-equiv="Content-Type" content="text/html; charset=<?php bloginfo(charset); ?>" />
  15. 15. • <meta name="generator" content="WordPress <?php bloginfo(version); ?>" />• <meta name="description" content="<?php bloginfo(description); ?>" />• <link rel="stylesheet" type="text/css" media="screen" href="<?php bloginfo(stylesheet_url); ?>" />
  16. 16. • <!--rss--> <link rel="alternate" type="application/rss+xml" title="<?php bloginfo(name); ?> RSS Feed" href="<?php bloginfo(rss2_url); ?>" />• <!--url pour les pingback--><link rel="pingback" href="<?php bloginfo(pingback_url); ?>" />
  17. 17. • </head>
  18. 18. 2.CORPS DU TEMPLATE
  19. 19. <body> <div id=“container”> <div id=“header”></div> <div id=“menu”></div> <div id=“leftmenu”></div> <div id=“contenu”></div> <div id=“footer”></div> </div></body>
  20. 20. Div id=« header » <div id="header"> <h1> <!--nom du blog--> <?php bloginfo(name); ?></h1> </div>
  21. 21. <body> <div id=“container”> <div id=“header”></div> <div id=“menu”></div> <div id=“leftmenu”></div> <div id=“contenu”></div> <div id=“footer”></div> </div></body>
  22. 22. <div id="menu"> <ul> <?php wp_list_categories(title_li=);?> </ul> </div>
  23. 23. <body> <div id=“container”> <div id=“header”></div> <div id=“menu”></div> <div id=“leftmenu”></div> <div id=“contenu”></div> <div id=“footer”></div> </div></body>
  24. 24. • Sidebar – Widgets – Functions.php
  25. 25. Functions.php<?phpfunction arphabet_widgets_init() { register_sidebar( array( name => Home right sidebar, id => home_right_1, before_widget => <div>, after_widget => </div>, before_title => <h2 class="rounded">, after_title => </h2>, ) );}add_action( widgets_init, arphabet_widgets_init );?>
  26. 26. <div id="leftmenu"> <div id="leftmenu_top"></div> <div id="leftmenu_main"> <ul id="sidebar"> <?php if (function_exists(dynamic_sidebar) && dynamic_sidebar(home_right_1)) : else : ?> <?php endif; ?> </ul> </div> <div id="leftmenu_bottom"></div> </div>
  27. 27. <body> <div id=“container”> <div id=“header”></div> <div id=“menu”></div> <div id=“leftmenu”></div> <div id=“contenu”></div> <div id=“footer”></div> </div></body>
  28. 28. <div id="content"> <div id="content_top"></div> <div id="content_main"> <!-- boucle. --> <?php if ( have_posts() ) : while ( have_posts() ) :he_post(); ?> <!—boucle--><?php endif; ?>
  29. 29. <div class="post"> <!-- instruction affichant le titre en tant que permalink,ainsi que la date. --> <div id="maintextheader"> <h2 ><a class="style3" href="<?php the_permalink(); ?>"> <?php the_title(); ?> </a></h2> <!-- Display the Time. --> <div class="datedujour"> <small> <?php the_time(j F); ?> </small> </div> </div>
  30. 30. <!-- afficher le contenu du post --> <div class="entry"> <?php the_content(); ?> </div> <!-- categories --> <p class="postmetadata">Publi&eacute; dans <?php the_category(, ); ?> </p> </div>
  31. 31. <!-- si pas de posts --> <?php endwhile; else: ?> <p>Désol&eacute; .Pas de posts correspondant </p> <!-- fin de la boucle --> <?php endif; ?> </div> <div id="content_bottom"></div>
  32. 32. <body> <div id=“container”> <div id=“header”></div> <div id=“menu”></div> <div id=“leftmenu”></div> <div id=“contenu”></div> <div id=“footer”></div> </div></body>
  33. 33. <div id="footer"><h3><ahref="http://www.bryantsmith.com">florida webdesign</a></h3></div> </div> </div></body></html>
  34. 34. 4.STRUCTURER LES FICHIERS
  35. 35. • Code de l’entête - > header.php• Code du corps -> index.php – Sidebar ->sidebar.php• Code du footer -> footer.php
  36. 36. Header <?php_get header();?>Sidebar – <?php_get sidebar();?>Footer <?php get_footer()?>
  37. 37. Pour aller un peu plus loinCréer un carouselhttp://www.tutorialstag.com/wordpress-featured-posts-using-nivo-slider.htmlPs : u
  38. 38. Fin• Questions ? – jeanluc@houedanou.com – Twitter @jhouedanou

×