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
19. La Semaine Du Web - 2013 WordPress Algérie
À VOUS
index.php <h1> fichier index.php <h1>
Dans themes/SDW/
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. 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
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. 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. La Semaine Du Web - 2013 WordPress Algérie
C’est l’heure du Copier/Coller
CTRL+C/CTRL+V pour les intimes
26. La Semaine Du Web - 2013 WordPress Algérie
Les Dossiers
Tout ce qui est JS, Images et CSS supplémentaires
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. 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. 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. 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>
32. La Semaine Du Web - 2013 WordPress Algérie
Structure générale d’une vue
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. 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. 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. 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. 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
39. La Semaine Du Web - 2013 WordPress Algérie
Bloginfo(‘name’)
Bloginfo(‘description’)
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. 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
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. La Semaine Du Web - 2013 WordPress Algérie
Ensuite, les Créer
Dans le Tableau de Bord (/wp-admin)
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. 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
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. 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. 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. 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. 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
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. 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. 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. 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">→</span></a></p>
</div> <!-- .entry-content -->
<?php the_excerpt(); ?>
<?php the_permalink; ?>
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 ✍</a></span>
</footer>
the_category(‘, ’); the_time('Y-m-d'); the_time('d F Y'); the_author(); get_edit_post_link();
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. 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. 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. 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. 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é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. 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. 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
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. 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. La Semaine Du Web - 2013 WordPress Algérie
Ajouter des Widgets à votre sidebar
Dans le tableau de bord
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. 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
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. 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. La Semaine Du Web - 2013 WordPress Algérie
Création de la page avec ce modèle