Concevoir un th¨¨me pour Wordpress
?Download as PPTX, PDF?
1 like?3,567 views
Presentation
Concevoir un th¨¨me pour Wordpress
- 1. Concevoir un th¨¨me pour wordpress De A ¨¤ Z
- 2. Avant de commencer¡ ? <?php ;?> ? DOM ? HTML ? PHP ? ? ???|?¡°¡®{¡Æ?¡¤????
- 4. Plan ? Introduction ? Le processus ¨C CSS ¨C Ent¨ºte ¨C Corps du template ¨C Structurer les fichiers ¨C Conclusion
- 5. A,B,C ? Analyse ? Besoin ? Conception (d¡®une maquette)
- 6. D¨¤Z ? D¨¦velopper ? ¡ ? Z : Livrer/Mettre en ligne le template
- 7. Objectif du jour ? Concevoir un th¨¨me pour wordpress 3.4 ¨C Liste des articles ¨C Sidebar ¨C wordpress ? A,B,C - > Slick Gray , par Bryan Smith ¨C http://www.quackit.com/html/templates/simple _website_templates.cfm
- 8. ? Pour gagner du temps, nous ferons abstraction de l¡¯aspect graphique ¨C Transformation d¡¯un layout en html/css/js ? http://hv-designs.co.uk
- 10. Kit graphique Th¨¨me wordpress Html, css( Php,css (et et js) js)
- 12. Processus 1.Le CSS 2.L¡¯ent¨ºte 3.Sidebar 4.Le corps
- 13. Etape 0 ? Cr¨¦er un dossier contenant les fichiers du th¨¨me ? Dossier /wp-content/themes/ ? index.html > index.php
- 14. 1. LE CSS
- 15. /* Theme Name: Le nom de votre theme Theme URI: votre site web Description: une description Author: vous Author URI: http://monkeydo.biz Version: 1 */
- 16. 2. L¡¯ENT?TE
- 17. ? <!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'); ?>" />
- 18. ? <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'); ?>" />
- 19. ? <!--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'); ?>" />
- 20. ? </head>
- 22. <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>
- 23. Div id=? header ? <div id="header"> <h1> <!--nom du blog--> <?php bloginfo('name'); ?></h1> </div>
- 25. <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>
- 26. <div id="menu"> <ul> <?php wp_list_categories('title_li=');?> </ul> </div>
- 28. <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>
- 29. ? Sidebar ¨C Widgets ¨C Functions.php
- 30. Functions.php <?php function 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' ); ?>
- 31. <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>
- 33. <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>
- 34. <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; ?>
- 35. <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>
- 36. <!-- afficher le contenu du post --> <div class="entry"> <?php the_content(); ?> </div> <!-- categories --> <p class="postmetadata">Publié dans <?php the_category(', '); ?> </p> </div>
- 37. <!-- si pas de posts --> <?php endwhile; else: ?> <p>D¨¦solé .Pas de posts correspondant </p> <!-- fin de la boucle --> <?php endif; ?> </div> <div id="content_bottom"></div>
- 40. <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>
- 41. <div id="footer"><h3><a href="http://www.bryantsmith.com">florida web design</a></h3></div> </div> </div> </body> </html>
- 44. ? Code de l¡¯ent¨ºte - > header.php ? Code du corps -> index.php ¨C Sidebar ->sidebar.php ? Code du footer -> footer.php
- 45. Header <?php_get header();?> Sidebar ¨C <?php_get sidebar();?> Footer <?php get_footer()?>
- 46. Pour aller un peu plus loin Cr¨¦er un carousel http://www.tutorialstag.com/wordpress- featured-posts-using-nivo-slider.html Ps : u
- 47. Fin ? Questions ? ¨C jeanluc@houedanou.com ¨C Twitter @jhouedanou