Création de themes WordPress

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…
rilessx @rilessx junksource.com

Ce que l’on va voir
 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 DIFFÉRENCE ENTRE UNE TEMPLATE
HTML ET UN THÈME WORDPRESS

Template HTML
STATIQUE
HTML
CSS
JavaScript
Images

NOTRE OBJECTIF
DYNAMISER LA TEMPLATE AVEC WORDPRESS

Thème WordPress
DYNAMIQUE
HTML
CSS
JavaScript
Images
PHP
BASE DE DONNEES

Un éditeur de code
Notepad++ Sublime Text CodaGedit

On a dit « Editeur de CODE »!

Installation de WordPress
Ça ne prend que 5 minutes

Garder un onglet ouvert
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/
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
…
Organisation

À VOUS
index.php <h1> fichier index.php <h1>
Dans themes/SDW/

À 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/

À 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

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

À VOUS
Page
demandée
Blog home.php index.php
home.php <h1> fichier home.php <h1>

C’est l’heure du Copier/Coller
CTRL+C/CTRL+V pour les intimes

Les Dossiers
Tout ce qui est JS, Images et CSS supplémentaires

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">
…

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 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

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>

Structure générale d’une vue

COUPER la partie fixe du header
header.php <!DOCTYPE html>


…
<li><a href="contact.html">Contact</a></li>
</ul>
</nav> 
<head> + Logo + Menu de Navigation
Remplacer dans index.php par <?php get_header(); ?>

COUPER la partie fixe du footer
footer.php <footer id="footer" role="contentinfo">

…

<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(); ?>

COUPER la partie de la sidebar
sidebar.php <div id="sidebar" role="complementary" class="span4">

<form role="search" action="#" class="searchform">
…
Lorem Ipsum decided to leave for the far World of
Grammar.</p>
</aside> 
</div> 
Toute la <DIV> de la sidebar
Remplacer dans index.php par <?php get_sidebar(); ?>

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!

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

 Bloginfo(‘name’)
 Bloginfo(‘description’)

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

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

Ensuite, les Créer
Dans le Tableau de Bord (/wp-admin)

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

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 boucle par défaut
<?php if ( have_posts() ): while( have_posts() ): the_post(); ?>

<?php endwhile; endif; ?>

Avec une Template Tag: Afficher le titre de l’article
<h2><?php the_title(); ?><h2>

Afficher le Titre + Contenu de l’article
<h2><?php the_title(); ?><h2>
<p><?php the_content(); ?></p>

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 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

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> 
</div>

Etape 02:
Entourer le model avec la boucle WordPress
<?php if ( have_posts() ): while ( have_posts() ): the_post(); ?>
<article class="post hentry">
…
</footer>
</article> 
</div>

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>
<a href=“<?php the_permalink(); ?>" title=“<?php the_title(); ?>"
rel="bookmark"><?php the_title(); ?></a>
</h1>

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> 
<?php the_excerpt(); ?>
<?php the_permalink; ?>

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();

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 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

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

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
• … ‫آخره‬ ‫إلى‬

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

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

Afficher les catégories
<ul>
<li><a href="#">Li element</a></li>
<li>Li element</li>
</ul>
// Remplacer par:
<ul>
<?php wp_list_categories(‘title_li=’); ?>
</ul>
Dans sidebar.php

Les Sidebar Dynamique
( Widgets )

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

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 class="widget">
<?php dynamic_sidebar('ma-sidebar'); ?>
Plus d’info http://codex.wordpress.org/Function_Reference/dynamic_sidebar

Ajouter des Widgets à votre sidebar
Dans le tableau de bord

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

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

Créer la template single.php
<?php the_title(); ?>
</h1>
<?php the_post_thumbnail( 'medium' ); ?>
</header> 
<div class="entry-content">
<p>
<?php the_content(); ?>
</p>
</div> 
Dupliquez index.php (single.php)

Créer la template page.php
Dupliquez single.php (page.php)
<?php if (have_posts()): while(have_posts()): the_post(); ?>
<article class="page hentry">
<?php the_title(); ?>
</h1>
</header> 
…
<footer class="entry-meta"> … </footer>

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)

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

Création de la page avec ce modèle

Any Question ?
Rendez-vous sur http://wpdz.org/forum

Création de themes WordPress

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (19)

Semelhante a Création de themes WordPress

Semelhante a Création de themes WordPress (20)

Création de themes WordPress