Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Création de themes WordPress

Création de themes WordPress

Semaine du web 2013 Algérie: création de themes WordPress

WordPress Algérie

May 13, 2013
Tweet

More Decks by WordPress Algérie

Other Decks in Technology

Transcript

  1. WordPress CRÉER UN THÈME WORDPRESS À PARTIR D’UNE TEMPLATE HTML

    La Semaine Du Web - 2013 WordPress Algérie
  2. Ghilas BELHADJ  DÉVELOPPEUR WORDPRESS  ETUDIANT EN INFORMATIQUE 

    BLOGUEUR  DORMEUR… La Semaine Du Web - 2013 WordPress Algérie rilessx @rilessx junksource.com
  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. Avant de commencer La Semaine Du Web - 2013 WordPress

    Algérie LA DIFFÉRENCE ENTRE UNE TEMPLATE HTML ET UN THÈME WORDPRESS
  5. Template HTML La Semaine Du Web - 2013 WordPress Algérie

    STATIQUE HTML CSS JavaScript Images
  6. Thème WordPress La Semaine Du Web - 2013 WordPress Algérie

    DYNAMIQUE HTML CSS JavaScript Images PHP BASE DE DONNEES
  7. Un éditeur de code La Semaine Du Web - 2013

    WordPress Algérie Notepad++ Sublime Text Coda Gedit
  8. On a dit « Editeur de CODE »! La Semaine

    Du Web - 2013 WordPress Algérie
  9. Garder un onglet ouvert La Semaine Du Web - 2013

    WordPress Algérie sur codex.wordpress.org
  10. + 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
  11. La Semaine Du Web - 2013 WordPress Algérie À VOUS

    index.php <h1> fichier index.php <h1> Dans themes/SDW/
  12. 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/
  13. 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
  14. 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
  15. La Semaine Du Web - 2013 WordPress Algérie À VOUS

    Page demandée Blog home.php index.php home.php <h1> fichier home.php <h1>
  16. La Semaine Du Web - 2013 WordPress Algérie C’est l’heure

    du Copier/Coller CTRL+C/CTRL+V pour les intimes
  17. La Semaine Du Web - 2013 WordPress Algérie Les Dossiers

    Tout ce qui est JS, Images et CSS supplémentaires
  18. 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"> …
  19. 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
  20. 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 = [email protected] 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
  21. 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>
  22. 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(); ?>
  23. 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(); ?>
  24. 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(); ?>
  25. 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!
  26. 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
  27. 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’); ?>
  28. 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
  29. 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
  30. La Semaine Du Web - 2013 WordPress Algérie Ensuite, les

    Créer Dans le Tableau de Bord (/wp-admin)
  31. 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
  32. 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
  33. 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; ?>
  34. 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; ?>
  35. 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; ?>
  36. 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
  37. 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
  38. 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 -->
  39. 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 -->
  40. 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>
  41. 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; ?>
  42. 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();
  43. 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
  44. 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
  45. 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
  46. 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>
  47. 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 • … هرخآ ىلإ
  48. 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
  49. 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
  50. 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
  51. 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
  52. 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
  53. La Semaine Du Web - 2013 WordPress Algérie Ajouter des

    Widgets à votre sidebar Dans le tableau de bord
  54. 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
  55. 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
  56. 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)
  57. 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>
  58. 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.php page-$id.php URL demandée (page)
  59. 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