Ce diaporama a bien été signalé.
Le téléchargement de votre SlideShare est en cours. ×

Création de Thème WordPress - Ghilas BELHADJ - Semaine du Web 2013

Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Chargement dans…3
×

Consultez-les par la suite

1 sur 82 Publicité

Plus De Contenu Connexe

Diaporamas pour vous (20)

Similaire à Création de Thème WordPress - Ghilas BELHADJ - Semaine du Web 2013 (20)

Publicité

Création de Thème WordPress - Ghilas BELHADJ - Semaine du Web 2013

  1. 1. WordPress CRÉER UN THÈME WORDPRESS À PARTIR D’UNE TEMPLATE HTML La Semaine Du Web - 2013 WordPress Algérie
  2. 2. Ghilas BELHADJ  DÉVELOPPEUR WORDPRESS  ETUDIANT EN INFORMATIQUE  BLOGUEUR  DORMEUR… La Semaine Du Web - 2013 WordPress Algérie rilessx @rilessx junksource.com
  3. 3. Ce que l’on va voir La Semaine Du Web - 2013 WordPress Algérie  Quelques Définitions  Structure d’un thème WordPress  Les fonctions WordPress  Les menus  Les miniatures & illustrations  Les Widgets  La boucle WordPress (the Loop)  Les recherches  Les modèles de pages
  4. 4. Avant de commencer La Semaine Du Web - 2013 WordPress Algérie LA DIFFÉRENCE ENTRE UNE TEMPLATE HTML ET UN THÈME WORDPRESS
  5. 5. Template HTML La Semaine Du Web - 2013 WordPress Algérie STATIQUE HTML CSS JavaScript Images
  6. 6. NOTRE OBJECTIF DYNAMISER LA TEMPLATE AVEC WORDPRESS
  7. 7. Thème WordPress La Semaine Du Web - 2013 WordPress Algérie DYNAMIQUE HTML CSS JavaScript Images PHP BASE DE DONNEES
  8. 8. Les bases
  9. 9. LES OUTILS
  10. 10. Un éditeur de code La Semaine Du Web - 2013 WordPress Algérie Notepad++ Sublime Text CodaGedit
  11. 11. On a dit « Editeur de CODE »! La Semaine Du Web - 2013 WordPress Algérie
  12. 12. Installation de WordPress La Semaine Du Web - 2013 WordPress Algérie Ça ne prend que 5 minutes
  13. 13. Garder un onglet ouvert La Semaine Du Web - 2013 WordPress Algérie sur codex.wordpress.org
  14. 14. ANATOMIE D’UN THÈME WORDPRESS
  15. 15. BDD Vue Tableau de Bord User Admin WordPress
  16. 16. BDD Tableau de Bord User Admin WordPress Vue
  17. 17. votre-site-wordpress/wp-content/themes/ La Semaine Du Web - 2013 WordPress Algérie Emplacement Créez votre dossier de thème wp-content/themes/SDW
  18. 18. + votre thème + js + images - index.php - style.css - screenshot.png - header.php - sidebar.php - footer.php - page.php - single.php - 404.php … La Semaine Du Web - 2013 WordPress Algérie Organisation
  19. 19. La Semaine Du Web - 2013 WordPress Algérie À VOUS index.php <h1> fichier index.php <h1> Dans themes/SDW/
  20. 20. La Semaine Du Web - 2013 WordPress Algérie À VOUS style.css /* Theme Name: Semaine Du Web Description: Atelier Création de thème WordPress Author: Ghilas BELHADJ Author URI: http://junksource.com Version: 1.0 … */ /* Ici sera placé votre CSS */ Toujours dans themes/SDW/
  21. 21. La Semaine Du Web - 2013 WordPress Algérie À VOUS screenshot.png Créez un aperçu de votre thème (300 x 225) Nb: Le fichier peut être en PNG, JPG ou en GIF
  22. 22. La Semaine Du Web - 2013 WordPress Algérie
  23. 23. La Semaine Du Web - 2013 WordPress Algérie Hiérarchie des vues Page demandée Recherche search.php index.php Archives Catégorie category-$id.php category.php archive.php index.php Date date.php archive.php index.php Auteur author.php archive.php index.php Article Unique single.php index.php Page page-$slug.php page,php index.php Blog home.php index.php Non Trouvées 404.php index.php http://codex.wordpress.org/File:Template_Hierarchy.png
  24. 24. La Semaine Du Web - 2013 WordPress Algérie À VOUS Page demandée Blog home.php index.php home.php <h1> fichier home.php <h1>
  25. 25. La Semaine Du Web - 2013 WordPress Algérie C’est l’heure du Copier/Coller CTRL+C/CTRL+V pour les intimes
  26. 26. La Semaine Du Web - 2013 WordPress Algérie Les Dossiers Tout ce qui est JS, Images et CSS supplémentaires
  27. 27. La Semaine Du Web - 2013 WordPress Algérie index.php Copier le contenu de index.html  index.php index.php <!DOCTYPE html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Semaine du Web</title> <meta name="description" content="Un autre site WordPress"> <meta name="viewport" content="width=device-width"> <link href="style.css" rel="stylesheet"> …
  28. 28. La Semaine Du Web - 2013 WordPress Algérie style.css style.css /* Theme Name: Semaine Du Web Description: Atelier Création de thème WordPress Author: Ghilas BELHADJ Author URI: http://junksource.com Version: 1.0 … */  Collez ICI  Copier le contenu de style.css  style.css
  29. 29. La Semaine Du Web - 2013 WordPress Algérie La fonction bloginfo() <?php bloginfo( $param ) ?> name = Semaine Du Web 2013 description = Un Autre Thème WordPress admin_email = admin@exemple.com url = http://exemple.com/ stylesheet_url = http://exemple.com/wp/wp_content/themes/my-theme/style.css template_url = http://exemple.com/wp/wp_content/themes/my-theme/ rss_url = http://exemple.com/wp/feed/rss charset = UTF-8 … http://codex.wordpress.org/Function_Reference/bloginfo
  30. 30. La Semaine Du Web - 2013 WordPress Algérie Corriger les liens <!– Remplacer --> <link href="style.css" rel="stylesheet"> <script src="js/modernizr-2.6.1.min.js"></script> … <script src="js/script.js"></script> <!– Par --> <link href=“<?php bloginfo(“stylesheet_url”); ?>" rel="stylesheet"> <script src=“<?php bloginfo(“template_url”); ?>/js/modernizr-2.6.1.min.js"></script> … <script src=“<?php bloginfo(„template_url‟); ?>/js/script.js"></script>
  31. 31. Soyons plus Organisés
  32. 32. La Semaine Du Web - 2013 WordPress Algérie Structure générale d’une vue
  33. 33. La Semaine Du Web - 2013 WordPress Algérie COUPER la partie fixe du header header.php <!DOCTYPE html> <!-- Consider specifying the language of your content by adding the `lang` attribute to <html> --> <!--[if lt IE 7]> <html class="no-js ie6"> <![endif]--> … <li><a href="contact.html">Contact</a></li> </ul> </nav> <!-- #main-navigation --> <head> + Logo + Menu de Navigation Remplacer dans index.php par <?php get_header(); ?>
  34. 34. La Semaine Du Web - 2013 WordPress Algérie COUPER la partie fixe du footer footer.php <footer id="footer" role="contentinfo"> <!-- You're free to remove the credit link to Jayj.dk in the footer, but please, please leave it there :) --> … <!-- Load custom scripts --> <script src=“<?php bloginfo(‘template_url’); ?>js/script.js"></script> </body> </html> Informations sur le copyright + code JS Remplacer dans index.php par <?php get_footer(); ?>
  35. 35. La Semaine Du Web - 2013 WordPress Algérie COUPER la partie de la sidebar sidebar.php <div id="sidebar" role="complementary" class="span4"> <!-- Non-working search form --> <form role="search" action="#" class="searchform"> … Lorem Ipsum decided to leave for the far World of Grammar.</p> </aside> <!-- .widget --> </div> <!-- #sidebar --> Toute la <DIV> de la sidebar Remplacer dans index.php par <?php get_sidebar(); ?>
  36. 36. La Semaine Du Web - 2013 WordPress Algérie get_header( $name ); get_sidebar( $name ); get_footer( $name ); Plus D’infos: http://codex.wordpress.org/Function_Reference/get_header http://codex.wordpress.org/Function_Reference/get_sidebar http://codex.wordpress.org/Function_Reference/get_footer $name: permet d’inclure respectivement les fichiers header-$name.php, sidebar-$name.php et footer-$name.php EX: get_sidebar(‘gauche’); permet d’inclure le fichier sidebar-gauche.php Plus!
  37. 37. La Semaine Du Web - 2013 WordPress Algérie wp_head(); wp_footer(); Et Encore plus! // Dans header.php <?php wp_head(); ?> </head> <body> // Dans footer.php <?php wp_footer(); ?> </body> </html> os: wp_head : http://codex.wordpress.org/Function_Reference/wp_head wp_footer : http://codex.wordpress.org/Function_Reference/wp_footer
  38. 38. Dynamisation On va charger du contenu depuis la base de donnée à l’aide de WordPress
  39. 39. La Semaine Du Web - 2013 WordPress Algérie  Bloginfo(„name‟)  Bloginfo(„description‟)
  40. 40. La Semaine Du Web - 2013 WordPress Algérie Dans header.php <hgroup> <h1 id="site-title"><a href="index.html" title="Your Site Name">Jayj HTML5 Theme</a></h1> <h2 id="site-description">This is an awesome description of the site!</h2> </hgroup> index.html  <?php bloginfo(„url‟); ?> Your Site Name  <?php bloginfo(„name‟); ?> Jayj HTML5 Theme  <?php bloginfo(„name‟); ?> This is an awesome description of the site  <?php bloginfo(„description‟); ?>
  41. 41. functions.php • Ajouter vos propres fonctions PHP • Activer des fonctionnalités WordPress • Changer certains comportements par défaut • Ajouter des menu d’Admin Personnalisés
  42. 42. Les Menus
  43. 43. La Semaine Du Web - 2013 WordPress Algérie D’abord, Enregistrer nos Menus Dans functions.php <?php register_nav_menu( $location, $description ); ?> $location  identifiant du menu $description  description du menu Exemple: register_nav_menu(‘principal’, ‘Menu Principal’); Plus d’info http://codex.wordpress.org/Function_Reference/register_nav_menu Plusieurs menus à la fois  http://codex.wordpress.org/Function_Reference/register_nav_menus
  44. 44. La Semaine Du Web - 2013 WordPress Algérie Ensuite, les Créer Dans le Tableau de Bord (/wp-admin)
  45. 45. La Semaine Du Web - 2013 WordPress Algérie Enfin, l’Afficher Dans header.php <?php wp_nav_menu( $args ); ?> $args array( 'theme_location' => '', 'container' => 'div', 'container_class' => '', 'container_id' => '', 'menu_class' => 'menu' … ); Plus d’infos  http://codex.wordpress.org/Function_Reference/wp_nav_menu
  46. 46. La Semaine Du Web - 2013 WordPress Algérie Remarque !!! .current  .current-menu-item .main-navigation .current > a  .main-navigation .current-menu-item > a .main-navigation .current > a:hover  .main-navigation .current-menu-item > a:hover style.css
  47. 47. La Boucle WordPress (the Loop)
  48. 48. La Semaine Du Web - 2013 WordPress Algérie La boucle par défaut <?php if ( have_posts() ): while( have_posts() ): the_post(); ?> <!-- Chaque code PHP ou HTML placé ici, sera répété pour chaque post --> <?php endwhile; endif; ?>
  49. 49. La Semaine Du Web - 2013 WordPress Algérie La boucle par défaut Avec une Template Tag: Afficher le titre de l’article <?php if ( have_posts() ): while( have_posts() ): the_post(); ?> <h2><?php the_title(); ?><h2> <?php endwhile; endif; ?>
  50. 50. La Semaine Du Web - 2013 WordPress Algérie La boucle par défaut Afficher le Titre + Contenu de l’article <?php if ( have_posts() ): while( have_posts() ): the_post(); ?> <h2><?php the_title(); ?><h2> <p><?php the_content(); ?></p> <?php endwhile; endif; ?>
  51. 51. La Semaine Du Web - 2013 WordPress Algérie Quelque Template Tags À utiliser dans la boucle WordPress the_title()  affiche le titre du post en cours the_permalink()  affiche l’url vers l’article en cours the_excerpt()  affiche l’extrait de l’article en cours sinon 55 mots du contenu the_content()  affiche le contenu complet du post en cours the_category()  affiche la/les catégorie(s) de l’article en cours the_tags()  affiche les tags de l’article en cours the_time()  affiche la date et/ou l’heure de publication du post the_author()  affiche le nom de l’auteur du post (comme configuré) the_post_thumbnail()  affiche la miniature du post en cours … Plus d’info: http://codex.wordpress.org/Template_Tags
  52. 52. La Semaine Du Web - 2013 WordPress Algérie La Boucle personnalisée $query_string: variable global qui détermine ce que la boucle vas afficher query_posts(): permet de modifier la variable $query_string EX: query_posts(‘posts_per_page=15&post_type=page&…param=value’); Plus d’infos  http://codex.wordpress.org/Function_Reference/query_posts
  53. 53. Revenons à notre maquette
  54. 54. La Semaine Du Web - 2013 WordPress Algérie Etape 01: On ne garde qu’un seul model d’article <div id="content" role="main" class="span7"> <article class="post hentry"> <header class="entry-header"> … </footer> </article> <!-- .post.hentry --> </div> <!-- #content -->
  55. 55. La Semaine Du Web - 2013 WordPress Algérie Etape 02: Entourer le model avec la boucle WordPress <div id="content" role="main" class="span7"> <?php if ( have_posts() ): while ( have_posts() ): the_post(); ?> <article class="post hentry"> <header class="entry-header"> … </footer> </article> <!-- .post.hentry --> <?php endwhile; endif; ?> </div> <!-- #content -->
  56. 56. La Semaine Du Web - 2013 WordPress Algérie Etape 03: Texte statique  Fonctions WordPress Titre + Lien vers l’article <h1 class="entry-title"> <a href="#" title="Post Heading“ rel="bookmark">Post Heading</a> </h1> <h1 class="entry-title"> <a href=“<?php the_permalink(); ?>" title=“<?php the_title(); ?>" rel="bookmark"><?php the_title(); ?></a> </h1>
  57. 57. La Semaine Du Web - 2013 WordPress Algérie Etape 03: Texte statique  Fonctions WordPress Résumé + Lien vers l’article <div class="entry-content"> <p>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life.</p> <p><a href="#" class="more-link">Continue reading<span class="meta- nav">&rarr;</span></a></p> </div> <!-- .entry-content --> <?php the_excerpt(); ?> <?php the_permalink; ?>
  58. 58. La Semaine Du Web - 2013 WordPress Algérie Etape 03: Texte statique  Fonctions WordPress Résumé + Lien vers l’article <footer class="entry-meta"> Posted in <a href="#" rel="category">Category Name</a> on <time class="entry-date" datetime="2012-06-25" pubdate>June 25 2012</time> by <span class="author vcard"><a class="url fn n" href="#" title="View all posts by Author" rel="author">Author Name</a></span> <span class="edit-link"><a href="#" title="Edit entry">Edit &#9997;</a></span> </footer> the_category(„, ‟); the_time('Y-m-d'); the_time('d F Y'); the_author(); get_edit_post_link();
  59. 59. Les Illustrations
  60. 60. La Semaine Du Web - 2013 WordPress Algérie Activer la prise en charge des Illustrations Dans functions.php <?php add_theme_support( 'post-thumbnails' ); ?> Plus d’info http://codex.wordpress.org/Function_Reference/add_theme_support Post thumbnails  http://codex.wordpress.org/Function_Reference/post_thumbnails
  61. 61. La Semaine Du Web - 2013 WordPress Algérie La fonction the_post_thumbnail() <?php the_post_thumbnail ( $size, $attr ); ?> $size = thumbnail (150 x 150) medium (300 x 300) large (640 x 640) full Originale $attr = src, class, alt, title Plus d’info http://codex.wordpress.org/Function_Reference/the_post_thumbnail
  62. 62. La Semaine Du Web - 2013 WordPress Algérie Créer notre dimension personnalisée Dans functions.php <?php add_image_size( $name, $width, $height, $crop ); ?> // création d’une nouvelle taille d’image de 200x200 <?php add_image_size( „miniature‟, 200, 200 ); ?> Plus d’info http://codex.wordpress.org/Function_Reference/add_image_size
  63. 63. La Semaine Du Web - 2013 WordPress Algérie Affichage de notre miniature a href="#" title="Post Heading"> <img src="images/200x200.gif" alt="Post thumbnail" class="thumbnail" /> </a> a href="#" title="Post Heading"> <?php the_post_thumbnail ( ‟miniature‟, „class=thumbnail‟); ?> </a>
  64. 64. La sidebar • Liste des catégories • Liste des pages • Derniers commentaires • Liste des auteurs • Articles les plus commentés • De la pub • Les liens partenaires • Un formulaire de recherche • …
  65. 65. La Semaine Du Web - 2013 WordPress Algérie Formulaire de recherche <form role="search" action="<?php home_url('/'); ?>" class="searchform"> <label class="assistive-text" for="s">Search for:</label> <input type="search" name="s" id="s" results="10" placeholder="Search..." > <input type="submit" value="Search"> </form> Plus d’info http://codex.wordpress.org/Function_Reference/get_search_form Plus d’info http://codex.wordpress.org/Function_Reference/home_url
  66. 66. La Semaine Du Web - 2013 WordPress Algérie wp_list_categories() <?php wp_list_categories( $args ); ?> $args = array( 'orderby' => 'name', 'order' => 'ASC', 'title_li' => 'Categories' … ); Plus d’info http://codex.wordpress.org/Function_Reference/wp_list_categories
  67. 67. La Semaine Du Web - 2013 WordPress Algérie Afficher les catégories <ul> <li><a href="#">Li element</a></li> <li><a href="#">Li element</a></li> <li><a href="#">Li element</a></li> <li>Li element</li> <li><a href="#">Li element</a></li> </ul> // Remplacer par: <ul> <?php wp_list_categories(„title_li=‟); ?> </ul> Dans sidebar.php
  68. 68. Les Sidebar Dynamique ( Widgets )
  69. 69. La Semaine Du Web - 2013 WordPress Algérie Enregistrer la sidebar dynamique Dans functions.php <?php register_sidebar( $args ); ?> $args = array( 'name' => 'Ma sidebar', 'id' => 'ma-sidebar', 'description' => 'Barre latérale gauche' … ); Plus d’info http://codex.wordpress.org/Function_Reference/register_sidebar
  70. 70. La Semaine Du Web - 2013 WordPress Algérie Afficher la sidebar Dans sidebar.php <aside class="widget"> <h3 class="widget-title">Widget</h3> <p>Even the all-powerful Pointing has …p> <p>One day however a small line of blind …p> </aside> <!-- .widget --> <aside class="widget"> <?php dynamic_sidebar('ma-sidebar'); ?> </aside> <!-- .widget --> Plus d’info http://codex.wordpress.org/Function_Reference/dynamic_sidebar
  71. 71. La Semaine Du Web - 2013 WordPress Algérie Ajouter des Widgets à votre sidebar Dans le tableau de bord
  72. 72. Les POST TYPES
  73. 73. La Semaine Du Web - 2013 WordPress Algérie Post Types par défaut post, page, attachment, revision ... Single.php Single.php attachment.php $custom.php page-$slug.php page.php page-$id.php Modèles de page
  74. 74. La Semaine Du Web - 2013 WordPress Algérie Les Custom Post Type register_post_type(): pour enregistrer le nouveau Custom Post Type add_action(): Pour lancer la function lors de l’initialisation de WordPress Plus D’info: add_action: http://codex.wordpress.org/Function_Reference/add_action Register_post_type: http://codex.wordpress.org/Function_Reference/register_post_type
  75. 75. La Semaine Du Web - 2013 WordPress Algérie Créer la template single.php <header class="entry-header"> <h1 class="entry-title"> <?php the_title(); ?> </h1> <?php the_post_thumbnail( 'medium' ); ?> </header> <!-- .entry-header --> <div class="entry-content"> <p> <?php the_content(); ?> </p> </div> <!-- .entry-content --> Dupliquez index.php (single.php)
  76. 76. La Semaine Du Web - 2013 WordPress Algérie Créer la template page.php Dupliquez single.php (page.php) <div id="content" role="main" class="span12"> <?php if (have_posts()): while(have_posts()): the_post(); ?> <article class="page hentry"> <header class="entry-header"> <h1 class="entry-title"> <?php the_title(); ?> </h1> </header> <!-- .entry-header --> … <footer class="entry-meta"> … </footer>
  77. 77. Les modèles de pages
  78. 78. La Semaine Du Web - 2013 WordPress Algérie Créer un model de page <?php /* Template Name: nom du modèle */ ?> <!– Reprendre la structure de page.php --> $custom.php page-$slug.php page.phppage-$id.phpURL demandée (page)
  79. 79. La Semaine Du Web - 2013 WordPress Algérie On va créer la page contact <?php /* Template Name: Ma Page Contact */ ?> … <form action=“<?php bloginfo(„template_url‟); ?>/sendmail.php" method="post" id="contactform"> <fieldset class="row"> <legend>Contact me :)</legend> … Créer un fichier avec un nom_quelconque.php
  80. 80. La Semaine Du Web - 2013 WordPress Algérie Création de la page avec ce modèle
  81. 81. Any Question ? Rendez-vous sur http://wpdz.org/forum
  82. 82. /END

×