Your SlideShare is downloading. ×

Création de themes WordPress

3,322

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
3,322
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
48
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. WordPressCRÉER UN THÈME WORDPRESS À PARTIR D’UNE TEMPLATE HTMLLa 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érierilessx @rilessx junksource.com
  • 3. Ce que l’on va voirLa 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 commencerLa Semaine Du Web - 2013 WordPress AlgérieLA DIFFÉRENCE ENTRE UNE TEMPLATEHTML ET UN THÈME WORDPRESS
  • 5. Template HTMLLa Semaine Du Web - 2013 WordPress AlgérieSTATIQUEHTMLCSSJavaScriptImages
  • 6. NOTRE OBJECTIFDYNAMISER LA TEMPLATE AVEC WORDPRESS
  • 7. Thème WordPressLa Semaine Du Web - 2013 WordPress AlgérieDYNAMIQUEHTMLCSSJavaScriptImagesPHPBASE DE DONNEES
  • 8. Les bases
  • 9. LES OUTILS
  • 10. Un éditeur de codeLa Semaine Du Web - 2013 WordPress AlgérieNotepad++ Sublime Text CodaGedit
  • 11. On a dit « Editeur de CODE »!La Semaine Du Web - 2013 WordPress Algérie
  • 12. Installation de WordPressLa Semaine Du Web - 2013 WordPress AlgérieÇa ne prend que 5 minutes
  • 13. Garder un onglet ouvertLa Semaine Du Web - 2013 WordPress Algériesur codex.wordpress.org
  • 14. ANATOMIE D’UNTHÈME WORDPRESS
  • 15. BDDVueTableau de BordUserAdminWordPress
  • 16. BDDTableau de BordUserAdminWordPressVue
  • 17. votre-site-wordpress/wp-content/themes/La Semaine Du Web - 2013 WordPress AlgérieEmplacementCréez votre dossier de thèmewp-content/themes/SDW
  • 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érieOrganisation
  • 19. La Semaine Du Web - 2013 WordPress AlgérieÀ VOUSindex.php <h1> fichier index.php <h1>Dans themes/SDW/
  • 20. La Semaine Du Web - 2013 WordPress AlgérieÀ VOUSstyle.css /*Theme Name: Semaine Du WebDescription: Atelier Création de thème WordPressAuthor: Ghilas BELHADJAuthor URI: http://junksource.comVersion: 1.0…*//* Ici sera placé votre CSS */Toujours dans themes/SDW/
  • 21. La Semaine Du Web - 2013 WordPress AlgérieÀ VOUSscreenshot.pngCréez un aperçu de votre thème (300 x 225)Nb: Le fichier peut être en PNG, JPG ou en GIF
  • 22. La Semaine Du Web - 2013 WordPress Algérie
  • 23. La Semaine Du Web - 2013 WordPress AlgérieHiérarchie des vuesPagedemandéeRecherche search.php index.phpArchivesCatégorie category-$id.php category.php archive.php index.phpDate date.php archive.php index.phpAuteur author.php archive.php index.phpArticleUniquesingle.php index.phpPage page-$slug.php page,php index.phpBlog home.php index.phpNonTrouvées404.php index.phphttp://codex.wordpress.org/File:Template_Hierarchy.png
  • 24. La Semaine Du Web - 2013 WordPress AlgérieÀ VOUSPagedemandéeBlog home.php index.phphome.php <h1> fichier home.php <h1>
  • 25. La Semaine Du Web - 2013 WordPress AlgérieC’est l’heure du Copier/CollerCTRL+C/CTRL+V pour les intimes
  • 26. La Semaine Du Web - 2013 WordPress AlgérieLes DossiersTout ce qui est JS, Images et CSS supplémentaires
  • 27. La Semaine Du Web - 2013 WordPress Algérieindex.phpCopier le contenu de index.html  index.phpindex.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. La Semaine Du Web - 2013 WordPress Algériestyle.cssstyle.css /*Theme Name: Semaine Du WebDescription: Atelier Création de thème WordPressAuthor: Ghilas BELHADJAuthor URI: http://junksource.comVersion: 1.0…*/ Collez ICI Copier le contenu de style.css  style.css
  • 29. La Semaine Du Web - 2013 WordPress AlgérieLa fonction bloginfo()<?php bloginfo( $param ) ?>name = Semaine Du Web 2013description = Un Autre Thème WordPressadmin_email = admin@exemple.comurl = http://exemple.com/stylesheet_url = http://exemple.com/wp/wp_content/themes/my-theme/style.csstemplate_url = http://exemple.com/wp/wp_content/themes/my-theme/rss_url = http://exemple.com/wp/feed/rsscharset = UTF-8…http://codex.wordpress.org/Function_Reference/bloginfo
  • 30. La Semaine Du Web - 2013 WordPress AlgérieCorriger 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. Soyons plus Organisés
  • 32. La Semaine Du Web - 2013 WordPress AlgérieStructure générale d’une vue
  • 33. La Semaine Du Web - 2013 WordPress AlgérieCOUPER la partie fixe du headerheader.php <!DOCTYPE html><!-- Consider specifying the language of your content byadding 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 NavigationRemplacer dans index.php par <?php get_header(); ?>
  • 34. La Semaine Du Web - 2013 WordPress AlgérieCOUPER la partie fixe du footerfooter.php <footer id="footer" role="contentinfo"><!-- Youre free to remove the credit link to Jayj.dk in the footer, butplease, please leave it there :) -->…<!-- Load custom scripts --><script src=“<?php bloginfo(‘template_url’); ?>js/script.js"></script></body></html>Informations sur le copyright + code JSRemplacer dans index.php par <?php get_footer(); ?>
  • 35. La Semaine Du Web - 2013 WordPress AlgérieCOUPER la partie de la sidebarsidebar.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 ofGrammar.</p></aside> <!-- .widget --></div> <!-- #sidebar -->Toute la <DIV> de la sidebarRemplacer dans index.php par <?php get_sidebar(); ?>
  • 36. La Semaine Du Web - 2013 WordPress Algérieget_header( $name );get_sidebar( $name );get_footer( $name );Plus D’infos:http://codex.wordpress.org/Function_Reference/get_headerhttp://codex.wordpress.org/Function_Reference/get_sidebarhttp://codex.wordpress.org/Function_Reference/get_footer$name: permet d’inclure respectivement les fichiersheader-$name.php, sidebar-$name.php et footer-$name.phpEX:get_sidebar(‘gauche’); permet d’inclure le fichier sidebar-gauche.phpPlus!
  • 37. La Semaine Du Web - 2013 WordPress Algériewp_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_headwp_footer : http://codex.wordpress.org/Function_Reference/wp_footer
  • 38. DynamisationOn va charger du contenu depuis labase de donnée à l’aide de WordPress
  • 39. La Semaine Du Web - 2013 WordPress Algérie Bloginfo(‘name’) Bloginfo(‘description’)
  • 40. La Semaine Du Web - 2013 WordPress AlgérieDans 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. 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. Les Menus
  • 43. La Semaine Du Web - 2013 WordPress AlgérieD’abord, Enregistrer nos MenusDans functions.php<?php register_nav_menu( $location, $description ); ?>$location  identifiant du menu$description  description du menuExemple: register_nav_menu(‘principal’, ‘Menu Principal’);Plus d’info http://codex.wordpress.org/Function_Reference/register_nav_menuPlusieurs menus à la fois  http://codex.wordpress.org/Function_Reference/register_nav_menus
  • 44. La Semaine Du Web - 2013 WordPress AlgérieEnsuite, les CréerDans le Tableau de Bord (/wp-admin)
  • 45. La Semaine Du Web - 2013 WordPress AlgérieEnfin, l’AfficherDans 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. La Semaine Du Web - 2013 WordPress AlgérieRemarque !!!.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:hoverstyle.css
  • 47. La Boucle WordPress(the Loop)
  • 48. La Semaine Du Web - 2013 WordPress AlgérieLa 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. La Semaine Du Web - 2013 WordPress AlgérieLa boucle par défautAvec 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. La Semaine Du Web - 2013 WordPress AlgérieLa boucle par défautAfficher 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. La Semaine Du Web - 2013 WordPress AlgérieQuelque Template TagsÀ utiliser dans la boucle WordPressthe_title()  affiche le titre du post en coursthe_permalink()  affiche l’url vers l’article en coursthe_excerpt()  affiche l’extrait de l’article en cours sinon 55 mots du contenuthe_content()  affiche le contenu complet du post en coursthe_category()  affiche la/les catégorie(s) de l’article en coursthe_tags()  affiche les tags de l’article en coursthe_time()  affiche la date et/ou l’heure de publication du postthe_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. La Semaine Du Web - 2013 WordPress AlgérieLa Boucle personnalisée$query_string: variable global qui détermine ce que la boucle vas afficherquery_posts(): permet de modifier la variable $query_stringEX:query_posts(‘posts_per_page=15&post_type=page&…param=value’);Plus d’infos  http://codex.wordpress.org/Function_Reference/query_posts
  • 53. Revenons à notre maquette
  • 54. La Semaine Du Web - 2013 WordPress AlgérieEtape 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. La Semaine Du Web - 2013 WordPress AlgérieEtape 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. La Semaine Du Web - 2013 WordPress AlgérieEtape 03: Texte statique  Fonctions WordPressTitre + 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. La Semaine Du Web - 2013 WordPress AlgérieEtape 03: Texte statique  Fonctions WordPressRé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 almostunorthographic 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. La Semaine Du Web - 2013 WordPress AlgérieEtape 03: Texte statique  Fonctions WordPressRé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 byAuthor" 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. Les Illustrations
  • 60. La Semaine Du Web - 2013 WordPress AlgérieActiver la prise en charge des IllustrationsDans functions.php<?php add_theme_support( post-thumbnails ); ?>Plus d’info http://codex.wordpress.org/Function_Reference/add_theme_supportPost thumbnails  http://codex.wordpress.org/Function_Reference/post_thumbnails
  • 61. La Semaine Du Web - 2013 WordPress AlgérieLa 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, titlePlus d’info http://codex.wordpress.org/Function_Reference/the_post_thumbnail
  • 62. La Semaine Du Web - 2013 WordPress AlgérieCréer notre dimension personnaliséeDans 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. La Semaine Du Web - 2013 WordPress AlgérieAffichage de notre miniaturea 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. 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. La Semaine Du Web - 2013 WordPress AlgérieFormulaire 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_formPlus d’info http://codex.wordpress.org/Function_Reference/home_url
  • 66. La Semaine Du Web - 2013 WordPress Algériewp_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. La Semaine Du Web - 2013 WordPress AlgérieAfficher 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. Les Sidebar Dynamique( Widgets )
  • 69. La Semaine Du Web - 2013 WordPress AlgérieEnregistrer la sidebar dynamiqueDans 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. La Semaine Du Web - 2013 WordPress AlgérieAfficher la sidebarDans 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. La Semaine Du Web - 2013 WordPress AlgérieAjouter des Widgets à votre sidebarDans le tableau de bord
  • 72. Les POST TYPES
  • 73. La Semaine Du Web - 2013 WordPress AlgériePost Types par défautpost, page, attachment, revision ...Single.phpSingle.phpattachment.php$custom.phppage-$slug.phppage.phppage-$id.phpModèlesde page
  • 74. La Semaine Du Web - 2013 WordPress AlgérieLes Custom Post Typeregister_post_type(): pour enregistrer le nouveau Custom Post Typeadd_action(): Pour lancer la function lors de l’initialisation de WordPressPlus D’info:add_action: http://codex.wordpress.org/Function_Reference/add_actionRegister_post_type: http://codex.wordpress.org/Function_Reference/register_post_type
  • 75. La Semaine Du Web - 2013 WordPress AlgérieCré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. La Semaine Du Web - 2013 WordPress AlgérieCréer la template page.phpDupliquez 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. Les modèles de pages
  • 78. La Semaine Du Web - 2013 WordPress AlgérieCré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. La Semaine Du Web - 2013 WordPress AlgérieOn 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. La Semaine Du Web - 2013 WordPress AlgérieCréation de la page avec ce modèle
  • 81. Any Question ?Rendez-vous sur http://wpdz.org/forum
  • 82. /END

×