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

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…


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 DIFFÉRENCE ENTRE UNE TEMPLATE HTML ET UN THÈME WORDPRESS

Template HTML


STATIQUE

HTML

CSS

JavaScript

Images

NOTRE OBJECTIFDYNAMISER LA TEMPLATE AVEC WORDPRESS

Thème WordPress


DYNAMIQUE

HTML

CSS

JavaScript

Images

PHP

BASE DE DONNEES

Les bases

LES OUTILS

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

…


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/

http://junksource.com/


À 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


À VOUSPage

demandéeBlog home.php index.php

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


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


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


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

…


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

http://junksource.com/


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

mailto:[email protected]

http://exemple.com/

http://exemple.com/wp/wp_content/themes/my-theme/style.css



http://exemple/wp/wp_content/themes/my-theme/



http://exemple.com/wp/feed/rss


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


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 fichiersheader-$name.php, sidebar-$name.php et footer-$name.php

EX:get_sidebar(‘gauche’); permet d’inclure le fichier sidebar-gauche.php

Plus!

http://codex.wordpress.org/Function_Reference/get_header










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

http://codex.wordpress.org/Function_Reference/wp_head

http://codex.wordpress.org/Function_Reference/wp_head

http://codex.wordpress.org/Function_Reference/wp_footer



DynamisationOn 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

Les Menus


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

http://codex.wordpress.org/Function_Reference/register_nav_menu

http://codex.wordpress.org/Function_Reference/register_nav_menus


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


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

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


La boucle par défautAvec une Template Tag: Afficher le titre de l’article


<h2><?php the_title(); ?><h2>



La boucle par défautAfficher 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

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

http://codex.wordpress.org/Function_Reference/query_posts

http://codex.wordpress.org/Function_Reference/query_posts

Revenons à notre maquette

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

<div id="content" role="main" class="span7">

<?php if ( have_posts() ): while ( have_posts() ): the_post(); ?>

<article class="post hentry">


…

</footer>

</article> 


</div>


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>


<a href=“<?php the_permalink(); ?>" title=“<?php the_title(); ?>"

rel="bookmark"><?php the_title(); ?></a>

</h1>

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> 

<?php the_excerpt(); ?>

<?php the_permalink; ?>


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


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

http://codex.wordpress.org/Function_Reference/add_theme_support

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

http://codex.wordpress.org/Function_Reference/the_post_thumbnail


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

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

http://codex.wordpress.org/Function_Reference/get_search_form

http://codex.wordpress.org/Function_Reference/home_url

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

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>

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


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

http://codex.wordpress.org/Function_Reference/register_sidebar

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> 

<aside class="widget">

<?php dynamic_sidebar('ma-sidebar'); ?></aside> 

Plus d’info http://codex.wordpress.org/Function_Reference/dynamic_sidebar

http://codex.wordpress.org/Function_Reference/dynamic_sidebar


Ajouter des Widgets à votre sidebarDans le tableau de bord

Les POST TYPES


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


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

http://codex.wordpress.org/Function_Reference/add_action







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



<?php the_title(); ?>

</h1></header> 

…

<footer class="entry-meta"> … </footer>

Les modèles de pages


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

http://wpdz.org/forum

http://wpdz.org/forum

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

Documents

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