Concevoir un thème pour Wordpress
•Descargar como PPTX, PDF•
1 recomendación•3,565 vistas
Presentation
Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (19)
Más de Jean-Luc Houedanou
Más de Jean-Luc Houedanou (6)
Concevoir un thème pour Wordpress
- 1. Concevoir un thème pour wordpress De A à Z
- 2. Avant de commencer… • <?php ;?> • DOM ? HTML ? PHP ? • ÎÍË|ë“‘{∑∆·flÎÍË
- 4. Plan • Introduction • Le processus – CSS – Entête – Corps du template – Structurer les fichiers – 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 – Liste des articles – Sidebar – wordpress • A,B,C - > Slick Gray , par Bryan Smith – http://www.quackit.com/html/templates/simple _website_templates.cfm
- 8. • Pour gagner du temps, nous ferons abstraction de l’aspect graphique – 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 – Widgets – 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 – Sidebar ->sidebar.php • Code du footer -> footer.php
- 45. Header <?php_get header();?> Sidebar – <?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 ? – jeanluc@houedanou.com – Twitter @jhouedanou