SlideShare une entreprise Scribd logo
WordPress
CRÉER UN THÈME WORDPRESS À PARTIR D’UNE TEMPLATE HTML
La Semaine Du Web - 2013 WordPress Algérie
Ghilas BELHADJ
 DÉVELOPPEUR WORDPRESS
 ETUDIANT EN INFORMATIQUE
 BLOGUEUR
 DORMEUR…
La Semaine Du Web - 2013 WordPress Algérie
rilessx @rilessx junksource.com
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
Avant de commencer
La Semaine Du Web - 2013 WordPress Algérie
LA DIFFÉRENCE ENTRE UNE TEMPLATE
HTML ET UN THÈME WORDPRESS
Template HTML
La Semaine Du Web - 2013 WordPress Algérie
STATIQUE
HTML
CSS
JavaScript
Images
NOTRE OBJECTIF
DYNAMISER LA TEMPLATE AVEC WORDPRESS
Thème WordPress
La Semaine Du Web - 2013 WordPress Algérie
DYNAMIQUE
HTML
CSS
JavaScript
Images
PHP
BASE DE DONNEES
Les bases
LES OUTILS
Un éditeur de code
La Semaine Du Web - 2013 WordPress Algérie
Notepad++ Sublime Text CodaGedit
On a dit « Editeur de CODE »!
La Semaine Du Web - 2013 WordPress Algérie
Installation de WordPress
La Semaine Du Web - 2013 WordPress Algérie
Ça ne prend que 5 minutes
Garder un onglet ouvert
La Semaine Du Web - 2013 WordPress Algérie
sur codex.wordpress.org
ANATOMIE D’UN
THÈME WORDPRESS
BDD
Vue
Tableau de Bord
User
Admin
WordPress
BDD
Tableau de Bord
User
Admin
WordPress
Vue
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
+ 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
La Semaine Du Web - 2013 WordPress Algérie
À VOUS
index.php <h1> fichier index.php <h1>
Dans themes/SDW/
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/
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
La Semaine Du Web - 2013 WordPress Algérie
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
La Semaine Du Web - 2013 WordPress Algérie
À VOUS
Page
demandée
Blog home.php index.php
home.php <h1> fichier home.php <h1>
La Semaine Du Web - 2013 WordPress Algérie
C’est l’heure du Copier/Coller
CTRL+C/CTRL+V pour les intimes
La Semaine Du Web - 2013 WordPress Algérie
Les Dossiers
Tout ce qui est JS, Images et CSS supplémentaires
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">
…
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
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
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>
Soyons plus Organisés
La Semaine Du Web - 2013 WordPress Algérie
Structure générale d’une vue
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(); ?>
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(); ?>
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(); ?>
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!
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
Dynamisation
On va charger du contenu depuis la
base de donnée à l’aide de WordPress
La Semaine Du Web - 2013 WordPress Algérie
 Bloginfo(„name‟)
 Bloginfo(„description‟)
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‟); ?>
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
Les Menus
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
La Semaine Du Web - 2013 WordPress Algérie
Ensuite, les Créer
Dans le Tableau de Bord (/wp-admin)
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
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
La Boucle WordPress
(the Loop)
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; ?>
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; ?>
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; ?>
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
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
Revenons à notre maquette
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 -->
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 -->
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>
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; ?>
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();
Les Illustrations
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
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
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
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>
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
• …
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
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
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
Les Sidebar Dynamique
( Widgets )
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
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
La Semaine Du Web - 2013 WordPress Algérie
Ajouter des Widgets à votre sidebar
Dans le tableau de bord
Les POST TYPES
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
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
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)
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>
Les modèles de pages
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)
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
La Semaine Du Web - 2013 WordPress Algérie
Création de la page avec ce modèle
Any Question ?
Rendez-vous sur http://wpdz.org/forum
/END

Contenu connexe

Tendances

Introduction à Wordpress
Introduction à WordpressIntroduction à Wordpress
Introduction à Wordpress
Chris Gaillard
 
Enrichir vos contenus Wordpress avec les API - WPTech 2015
Enrichir vos contenus Wordpress avec les API - WPTech 2015Enrichir vos contenus Wordpress avec les API - WPTech 2015
Enrichir vos contenus Wordpress avec les API - WPTech 2015
PXNetwork
 
WordPress en tant que CMS
WordPress en tant que CMSWordPress en tant que CMS
WordPress en tant que CMS
Aurélien Denis
 
Html 5
Html 5Html 5
Html 5
Thomas Bodin
 
Beautiful CSS : Structurer, documenter, maintenir
Beautiful CSS : Structurer, documenter, maintenirBeautiful CSS : Structurer, documenter, maintenir
Beautiful CSS : Structurer, documenter, maintenir
Yves Van Goethem
 
Comment se charge WordPress ? Le loading du core.
Comment se charge WordPress ? Le loading du core.Comment se charge WordPress ? Le loading du core.
Comment se charge WordPress ? Le loading du core.
Boiteaweb
 
CSS 3
CSS 3CSS 3
Optimiser les performances dans Wordpress
Optimiser les performances dans WordpressOptimiser les performances dans Wordpress
Optimiser les performances dans Wordpress
Nicolas Juen
 
Comment créer des hooks dans vos développements WordPress - WP Tech 2015
Comment créer des hooks dans vos développements WordPress - WP Tech 2015Comment créer des hooks dans vos développements WordPress - WP Tech 2015
Comment créer des hooks dans vos développements WordPress - WP Tech 2015
Boiteaweb
 
Bootstrap 3
Bootstrap 3Bootstrap 3
Bootstrap 3
Thomas Bodin
 
Formation php pdo
Formation php pdoFormation php pdo
Formation php pdo
Souhaibou Salla
 
Démarrer son site WordPress : LA "to-do" list
Démarrer son site WordPress : LA "to-do" listDémarrer son site WordPress : LA "to-do" list
Démarrer son site WordPress : LA "to-do" list
Kaylynne Johnson
 
Pensez Web-Performances avec WordPress - Une conférence de Julien Oger et Pie...
Pensez Web-Performances avec WordPress - Une conférence de Julien Oger et Pie...Pensez Web-Performances avec WordPress - Une conférence de Julien Oger et Pie...
Pensez Web-Performances avec WordPress - Une conférence de Julien Oger et Pie...
pierredargham
 
Outils front-end
Outils front-endOutils front-end
Outils front-end
Thomas Bodin
 
Les 10 Erreurs des Debutants avec WordPress
Les 10 Erreurs des Debutants avec WordPressLes 10 Erreurs des Debutants avec WordPress
Les 10 Erreurs des Debutants avec WordPress
Nicolas Richer
 
Application web php5 html5 css3 bootstrap
Application web php5 html5 css3 bootstrapApplication web php5 html5 css3 bootstrap
Application web php5 html5 css3 bootstrap
Bassem ABCHA
 
Manuel wordpress ad avenue
Manuel wordpress   ad avenueManuel wordpress   ad avenue
Manuel wordpress ad avenue
François Huynh
 

Tendances (19)

Introduction à Wordpress
Introduction à WordpressIntroduction à Wordpress
Introduction à Wordpress
 
Enrichir vos contenus Wordpress avec les API - WPTech 2015
Enrichir vos contenus Wordpress avec les API - WPTech 2015Enrichir vos contenus Wordpress avec les API - WPTech 2015
Enrichir vos contenus Wordpress avec les API - WPTech 2015
 
WordPress en tant que CMS
WordPress en tant que CMSWordPress en tant que CMS
WordPress en tant que CMS
 
Html 5
Html 5Html 5
Html 5
 
Beautiful CSS : Structurer, documenter, maintenir
Beautiful CSS : Structurer, documenter, maintenirBeautiful CSS : Structurer, documenter, maintenir
Beautiful CSS : Structurer, documenter, maintenir
 
Comment se charge WordPress ? Le loading du core.
Comment se charge WordPress ? Le loading du core.Comment se charge WordPress ? Le loading du core.
Comment se charge WordPress ? Le loading du core.
 
CSS 3
CSS 3CSS 3
CSS 3
 
Optimiser les performances dans Wordpress
Optimiser les performances dans WordpressOptimiser les performances dans Wordpress
Optimiser les performances dans Wordpress
 
Comment créer des hooks dans vos développements WordPress - WP Tech 2015
Comment créer des hooks dans vos développements WordPress - WP Tech 2015Comment créer des hooks dans vos développements WordPress - WP Tech 2015
Comment créer des hooks dans vos développements WordPress - WP Tech 2015
 
Bootstrap 3
Bootstrap 3Bootstrap 3
Bootstrap 3
 
Formation php pdo
Formation php pdoFormation php pdo
Formation php pdo
 
Pdo
PdoPdo
Pdo
 
SAPIENS2009 - Module 4B
SAPIENS2009 - Module 4BSAPIENS2009 - Module 4B
SAPIENS2009 - Module 4B
 
Démarrer son site WordPress : LA "to-do" list
Démarrer son site WordPress : LA "to-do" listDémarrer son site WordPress : LA "to-do" list
Démarrer son site WordPress : LA "to-do" list
 
Pensez Web-Performances avec WordPress - Une conférence de Julien Oger et Pie...
Pensez Web-Performances avec WordPress - Une conférence de Julien Oger et Pie...Pensez Web-Performances avec WordPress - Une conférence de Julien Oger et Pie...
Pensez Web-Performances avec WordPress - Une conférence de Julien Oger et Pie...
 
Outils front-end
Outils front-endOutils front-end
Outils front-end
 
Les 10 Erreurs des Debutants avec WordPress
Les 10 Erreurs des Debutants avec WordPressLes 10 Erreurs des Debutants avec WordPress
Les 10 Erreurs des Debutants avec WordPress
 
Application web php5 html5 css3 bootstrap
Application web php5 html5 css3 bootstrapApplication web php5 html5 css3 bootstrap
Application web php5 html5 css3 bootstrap
 
Manuel wordpress ad avenue
Manuel wordpress   ad avenueManuel wordpress   ad avenue
Manuel wordpress ad avenue
 

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

Quoi de neuf dans Zend Framework 1.10 ?
Quoi de neuf dans Zend Framework 1.10 ?Quoi de neuf dans Zend Framework 1.10 ?
Quoi de neuf dans Zend Framework 1.10 ?
Mickael Perraud
 
Vue, j’avais pas vu !
Vue, j’avais pas vu !Vue, j’avais pas vu !
Vue, j’avais pas vu !
Bruno Bonnin
 
vue j'avais pas vu !!
vue j'avais pas vu !!vue j'avais pas vu !!
vue j'avais pas vu !!
Manuel Adele
 
Atelier WordPress: Création d&rsquo;extension WordPress
Atelier WordPress: Création d&rsquo;extension WordPressAtelier WordPress: Création d&rsquo;extension WordPress
Atelier WordPress: Création d&rsquo;extension WordPress
IZZA Samir
 
WP CLI : le couteau suisse du développeur
WP CLI : le couteau suisse du développeurWP CLI : le couteau suisse du développeur
WP CLI : le couteau suisse du développeur
benjamingossetpro
 
HTML5, le nouveau buzzword
HTML5, le nouveau buzzwordHTML5, le nouveau buzzword
HTML5, le nouveau buzzword
Frédéric Harper
 
Wordpress pour les entreprises
Wordpress pour les entreprisesWordpress pour les entreprises
Wordpress pour les entreprises
monsieurpixel
 
Wordpress et la sécurité des plugins
Wordpress et la sécurité des pluginsWordpress et la sécurité des plugins
Wordpress et la sécurité des plugins
Boiteaweb
 
Atelier autour de UWA à ParisWeb 2007
Atelier autour de UWA à ParisWeb 2007Atelier autour de UWA à ParisWeb 2007
Atelier autour de UWA à ParisWeb 2007Netvibes
 
démonstration code source site web ecole.docx
démonstration code source site web ecole.docxdémonstration code source site web ecole.docx
démonstration code source site web ecole.docx
VincentBweka
 
Sécuriser un site Wordpress
Sécuriser un site WordpressSécuriser un site Wordpress
Sécuriser un site Wordpressbestyuna
 
HTML5 et le SEO : quelles opportunités ?
HTML5 et le SEO : quelles opportunités ?HTML5 et le SEO : quelles opportunités ?
HTML5 et le SEO : quelles opportunités ?
Eroan Boyer
 
Sécurité WordPress
Sécurité WordPressSécurité WordPress
Sécurité WordPress
Chi Nacim
 
Les défauts de WordPress pour le SEO
Les défauts de WordPress pour le SEOLes défauts de WordPress pour le SEO
Les défauts de WordPress pour le SEO
Daniel Roch - SeoMix
 
WP day Algérie : Concevoir un plugin WordPress
WP day Algérie : Concevoir un plugin WordPressWP day Algérie : Concevoir un plugin WordPress
WP day Algérie : Concevoir un plugin WordPress
imath
 
SEO WordPress : Optimiser le référencement naturel
SEO WordPress : Optimiser le référencement naturelSEO WordPress : Optimiser le référencement naturel
SEO WordPress : Optimiser le référencement naturel
Thierry Pigot
 
Simple présentation de Wordpress
Simple présentation de WordpressSimple présentation de Wordpress
Simple présentation de Wordpress
Olympe Tchibozo
 
Javascript et JQuery
Javascript et JQueryJavascript et JQuery
Javascript et JQuery
Jean-Marie Renouard
 
ZendFramework2 - Présentation
ZendFramework2 - PrésentationZendFramework2 - Présentation
ZendFramework2 - Présentation
julien pauli
 

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

Quoi de neuf dans Zend Framework 1.10 ?
Quoi de neuf dans Zend Framework 1.10 ?Quoi de neuf dans Zend Framework 1.10 ?
Quoi de neuf dans Zend Framework 1.10 ?
 
Vue, j’avais pas vu !
Vue, j’avais pas vu !Vue, j’avais pas vu !
Vue, j’avais pas vu !
 
vue j'avais pas vu !!
vue j'avais pas vu !!vue j'avais pas vu !!
vue j'avais pas vu !!
 
Atelier WordPress: Création d&rsquo;extension WordPress
Atelier WordPress: Création d&rsquo;extension WordPressAtelier WordPress: Création d&rsquo;extension WordPress
Atelier WordPress: Création d&rsquo;extension WordPress
 
WP CLI : le couteau suisse du développeur
WP CLI : le couteau suisse du développeurWP CLI : le couteau suisse du développeur
WP CLI : le couteau suisse du développeur
 
HTML5, le nouveau buzzword
HTML5, le nouveau buzzwordHTML5, le nouveau buzzword
HTML5, le nouveau buzzword
 
Wordpress pour les entreprises
Wordpress pour les entreprisesWordpress pour les entreprises
Wordpress pour les entreprises
 
Wordpress et la sécurité des plugins
Wordpress et la sécurité des pluginsWordpress et la sécurité des plugins
Wordpress et la sécurité des plugins
 
Atelier autour de UWA à ParisWeb 2007
Atelier autour de UWA à ParisWeb 2007Atelier autour de UWA à ParisWeb 2007
Atelier autour de UWA à ParisWeb 2007
 
démonstration code source site web ecole.docx
démonstration code source site web ecole.docxdémonstration code source site web ecole.docx
démonstration code source site web ecole.docx
 
Sécuriser un site Wordpress
Sécuriser un site WordpressSécuriser un site Wordpress
Sécuriser un site Wordpress
 
HTML5 et le SEO : quelles opportunités ?
HTML5 et le SEO : quelles opportunités ?HTML5 et le SEO : quelles opportunités ?
HTML5 et le SEO : quelles opportunités ?
 
Sécurité WordPress
Sécurité WordPressSécurité WordPress
Sécurité WordPress
 
Les défauts de WordPress pour le SEO
Les défauts de WordPress pour le SEOLes défauts de WordPress pour le SEO
Les défauts de WordPress pour le SEO
 
WP day Algérie : Concevoir un plugin WordPress
WP day Algérie : Concevoir un plugin WordPressWP day Algérie : Concevoir un plugin WordPress
WP day Algérie : Concevoir un plugin WordPress
 
SEO WordPress : Optimiser le référencement naturel
SEO WordPress : Optimiser le référencement naturelSEO WordPress : Optimiser le référencement naturel
SEO WordPress : Optimiser le référencement naturel
 
Sécuriser un site Wordpress
Sécuriser un site WordpressSécuriser un site Wordpress
Sécuriser un site Wordpress
 
Simple présentation de Wordpress
Simple présentation de WordpressSimple présentation de Wordpress
Simple présentation de Wordpress
 
Javascript et JQuery
Javascript et JQueryJavascript et JQuery
Javascript et JQuery
 
ZendFramework2 - Présentation
ZendFramework2 - PrésentationZendFramework2 - Présentation
ZendFramework2 - Présentation
 

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

  • 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. NOTRE OBJECTIF DYNAMISER LA TEMPLATE AVEC WORDPRESS
  • 7. Thème WordPress La Semaine Du Web - 2013 WordPress Algérie DYNAMIQUE HTML CSS JavaScript Images PHP BASE DE DONNEES
  • 10. Un éditeur de code La Semaine Du Web - 2013 WordPress Algérie Notepad++ Sublime Text CodaGedit
  • 11. On a dit « Editeur de CODE »! La Semaine Du Web - 2013 WordPress Algérie
  • 12. Installation de WordPress La Semaine Du Web - 2013 WordPress Algérie Ça ne prend que 5 minutes
  • 13. Garder un onglet ouvert La Semaine Du Web - 2013 WordPress Algérie sur codex.wordpress.org
  • 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. + 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. 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
  • 22. La Semaine Du Web - 2013 WordPress Algérie
  • 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
  • 38. Dynamisation On va charger du contenu depuis la base 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é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
  • 53. Revenons à notre maquette
  • 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">&rarr;</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 &#9997;</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
  • 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. 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>
  • 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
  • 81. Any Question ? Rendez-vous sur http://wpdz.org/forum
  • 82. /END