Création de themes WordPress

82
WordPress CRÉER UN THÈME WORDPRESS À PARTIR D’UNE TEMPLATE HTML La Semaine Du Web - 2013 WordPress Algérie

Transcript of Création de themes WordPress

Page 1: 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

Page 2: Création de themes WordPress

Ghilas BELHADJ DÉVELOPPEUR WORDPRESS

ETUDIANT EN INFORMATIQUE

BLOGUEUR

DORMEUR…

La Semaine Du Web - 2013 WordPress Algérie

rilessx @rilessx junksource.com

Page 3: Création de themes WordPress

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

Page 4: Création de themes WordPress

Avant de commencer

La Semaine Du Web - 2013 WordPress Algérie

LA DIFFÉRENCE ENTRE UNE TEMPLATE HTML ET UN THÈME WORDPRESS

Page 5: Création de themes WordPress

Template HTML

La Semaine Du Web - 2013 WordPress Algérie

STATIQUE

HTML

CSS

JavaScript

Images

Page 6: Création de themes WordPress

NOTRE OBJECTIF DYNAMISER LA TEMPLATE AVEC WORDPRESS

Page 7: Création de themes WordPress

Thème WordPress

La Semaine Du Web - 2013 WordPress Algérie

DYNAMIQUE

HTML

CSS

JavaScript

Images

PHP

BASE DE DONNEES

Page 8: Création de themes WordPress

Les bases

Page 9: Création de themes WordPress

LES OUTILS

Page 10: Création de themes WordPress

Un éditeur de code

La Semaine Du Web - 2013 WordPress Algérie

Notepad++ Sublime Text Coda Gedit

Page 11: Création de themes WordPress

On a dit « Editeur de CODE »!

La Semaine Du Web - 2013 WordPress Algérie

Page 12: Création de themes WordPress

Installation de WordPress

La Semaine Du Web - 2013 WordPress Algérie

Ça ne prend que 5 minutes

Page 13: Création de themes WordPress

Garder un onglet ouvert

La Semaine Du Web - 2013 WordPress Algérie

sur codex.wordpress.org

Page 14: Création de themes WordPress

ANATOMIE D’UN THÈME WORDPRESS

Page 15: Création de themes WordPress

BDD

Vue

Tableau de Bord

User

Admin

WordPress

Page 16: Création de themes WordPress

BDD

Tableau de Bord

User

Admin

WordPress

Vue

Page 17: Création de themes WordPress

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

Page 18: Création de themes WordPress

+ 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

Page 19: Création de themes WordPress

La Semaine Du Web - 2013 WordPress Algérie

À VOUS

index.php <h1> fichier index.php <h1>

Dans themes/SDW/

Page 20: Création de themes WordPress

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/

Page 21: Création de themes WordPress

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

Page 22: Création de themes WordPress

La Semaine Du Web - 2013 WordPress Algérie

Page 23: Création de themes WordPress

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

Page 24: Création de themes WordPress

La Semaine Du Web - 2013 WordPress Algérie

À VOUS Page

demandée Blog home.php index.php

home.php <h1> fichier home.php <h1>

Page 25: Création de themes WordPress

La Semaine Du Web - 2013 WordPress Algérie

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

Page 26: Création de themes WordPress

La Semaine Du Web - 2013 WordPress Algérie

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

Page 27: Création de themes WordPress

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

Page 28: Création de themes WordPress

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

Page 29: Création de themes WordPress

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

Page 30: Création de themes WordPress

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>

Page 31: Création de themes WordPress

Soyons plus Organisés

Page 32: Création de themes WordPress

La Semaine Du Web - 2013 WordPress Algérie

Structure générale d’une vue

Page 33: Création de themes WordPress

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

Page 34: Création de themes WordPress

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

Page 35: Création de themes WordPress

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

Page 36: Création de themes WordPress

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!

Page 37: Création de themes WordPress

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

Page 38: Création de themes WordPress

Dynamisation On va charger du contenu depuis la base de donnée à l’aide de WordPress

Page 39: Création de themes WordPress

La Semaine Du Web - 2013 WordPress Algérie

Bloginfo(‘name’)

Bloginfo(‘description’)

Page 40: Création de themes WordPress

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

Page 41: Création de themes WordPress

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

Page 42: Création de themes WordPress

Les Menus

Page 43: Création de themes WordPress

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

Page 44: Création de themes WordPress

La Semaine Du Web - 2013 WordPress Algérie

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

Page 45: Création de themes WordPress

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

Page 46: Création de themes WordPress

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

Page 47: Création de themes WordPress

La Boucle WordPress (the Loop)

Page 48: Création de themes WordPress

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

Page 49: Création de themes WordPress

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

Page 50: Création de themes WordPress

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

Page 51: Création de themes WordPress

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

Page 52: Création de themes WordPress

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

Page 53: Création de themes WordPress

Revenons à notre maquette

Page 54: Création de themes WordPress

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

Page 55: Création de themes WordPress

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

Page 56: Création de themes WordPress

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>

Page 57: Création de themes WordPress

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

Page 58: Création de themes WordPress

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

Page 59: Création de themes WordPress

Les Illustrations

Page 60: Création de themes WordPress

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

Page 61: Création de themes WordPress

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

Page 62: Création de themes WordPress

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

Page 63: Création de themes WordPress

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>

Page 64: Création de themes WordPress

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

Page 65: Création de themes WordPress

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

Page 66: Création de themes WordPress

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

Page 67: Création de themes WordPress

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

Page 68: Création de themes WordPress

Les Sidebar Dynamique ( Widgets )

Page 69: Création de themes WordPress

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

Page 70: Création de themes WordPress

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

Page 71: Création de themes WordPress

La Semaine Du Web - 2013 WordPress Algérie

Ajouter des Widgets à votre sidebar Dans le tableau de bord

Page 72: Création de themes WordPress

Les POST TYPES

Page 73: Création de themes WordPress

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

Page 74: Création de themes WordPress

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

Page 75: Création de themes WordPress

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)

Page 76: Création de themes WordPress

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>

Page 77: Création de themes WordPress

Les modèles de pages

Page 78: Création de themes WordPress

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.php page-$id.php URL demandée (page)

Page 79: Création de themes WordPress

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

Page 80: Création de themes WordPress

La Semaine Du Web - 2013 WordPress Algérie

Création de la page avec ce modèle

Page 81: Création de themes WordPress

Any Question ?

Rendez-vous sur http://wpdz.org/forum

Page 82: Création de themes WordPress

/END