création de thème wordpress - ghilas belhadj - semaine du web 2013
DESCRIPTION
Création de Thèmes WordPress à partir d'un Template HTML pour la Semaine du Web 2013 par Ghilas BELHADJTRANSCRIPT
WordPressCRÉ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 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
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 OBJECTIFDYNAMISER 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èmewp-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
À VOUSPage
demandéeBlog 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/CollerCTRL+C/CTRL+V pour les intimes
La Semaine Du Web - 2013 WordPress Algérie
Les DossiersTout ce qui est JS, Images et CSS supplémentaires
La Semaine Du Web - 2013 WordPress Algérie
index.phpCopier 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 = [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
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 fichiersheader-$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
DynamisationOn 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 MenusDans 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éerDans le Tableau de Bord (/wp-admin)
La Semaine Du Web - 2013 WordPress Algérie
Enfin, 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
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é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; ?>
La Semaine Du Web - 2013 WordPress Algérie
La 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; ?>
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 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>
La Semaine Du Web - 2013 WordPress Algérie
Etape 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 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; ?>
La Semaine Du Web - 2013 WordPress Algérie
Etape 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 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();
Les Illustrations
La Semaine Du Web - 2013 WordPress Algérie
Activer 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_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é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
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 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
La Semaine Du Web - 2013 WordPress Algérie
Afficher 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
La Semaine Du Web - 2013 WordPress Algérie
Ajouter des Widgets à votre sidebarDans le tableau de bord
Les POST TYPES
La Semaine Du Web - 2013 WordPress Algérie
Post Types par défautpost, page, attachment, revision ...
Single.php
Single.phpattachment.php
$custom.phppage-$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.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>
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
/END