Warning: Declaration of action_plugin_popularity::register(&$controller) should be compatible with DokuWiki_Action_Plugin::register($controller) in /homepages/5/d372632784/htdocs/formation.applh.com/website/lib/plugins/popularity/action.php on line 11

Warning: Declaration of action_plugin_safefnrecode::register(Doku_Event_Handler &$controller) should be compatible with DokuWiki_Action_Plugin::register($controller) in /homepages/5/d372632784/htdocs/formation.applh.com/website/lib/plugins/safefnrecode/action.php on line 66

Warning: Cannot modify header information - headers already sent by (output started at /homepages/5/d372632784/htdocs/formation.applh.com/website/lib/plugins/popularity/action.php:11) in /homepages/5/d372632784/htdocs/formation.applh.com/website/inc/auth.php on line 377

Warning: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead in /homepages/5/d372632784/htdocs/formation.applh.com/website/inc/auth.php on line 656

Warning: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead in /homepages/5/d372632784/htdocs/formation.applh.com/website/inc/auth.php on line 656

Warning: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead in /homepages/5/d372632784/htdocs/formation.applh.com/website/inc/auth.php on line 656

Warning: Cannot modify header information - headers already sent by (output started at /homepages/5/d372632784/htdocs/formation.applh.com/website/lib/plugins/popularity/action.php:11) in /homepages/5/d372632784/htdocs/formation.applh.com/website/inc/actions.php on line 187
wordpress:creer-son-theme:start [Applh.com Formation]

Outils d'utilisateurs

Outils du Site


wordpress:creer-son-theme:start

DEV: Création Thème WordPress

  • Créer un Thème pour WordPress est assez simple.
  • Il faut des compétences en PHP, HTML, CSS et Javascript
  • WordPress propose une API pour gérer la BDD mySQL
  • ⇒ des connaissances SQL sont toujours un plus, mais pas obligatoires :-)

DEV: le minimum d'un thème WP

  • Dans le dossier wp-content/themes/, il faut créer un nouveau dossier pour votre thème.
  • Par exemple: mon-theme
/wp-content/themes/mon-theme/
  • Ensuite, dans ce dossier mon-theme il faut au minimum 2 fichiers:
  • style.css
  • index.php
/wp-content/themes/mon-theme/style.css
/wp-content/themes/mon-theme/index.php
  • Le fichier style.css doit commencer par une entête spéciale:
  • Theme Name
  • Author
  • Version
style.css
/*
Theme Name:  Mon Thème
Author:      LH
Version:     1.0
*/
  • Ce sont ces informations qui seront détectées par WordPress et qui constituent la déclaration d'un thème.
  • D'ailleurs, On retrouvera ces informations dans l'écran administration des thèmes.
  • Le fichier index.php est utilisé pour afficher le contenu HTML de la page.
  • Pour le moment, le fichier index.php est vide, donc si on active le thème, la partie publique affichera … une page vide :-P
index.php
 
  • Si on ajoute une ligne, on voit que toutes les pages vont afficher ce même contenu :-P
index.php
MON THEME
  • VOILA!
  • C'EST LE MINIMUM POUR AJOUTER UN THEME A WORDPRESS :-)
  • En allant sur la partie Admin > Apparence
  • ⇒ On voit notre thème dans la liste :-)

DEV: Template Tags et Affichage du contenu dynamique

  • Il n'y a pas grand intérêt à afficher le même contenu sur toutes les pages :-P
  • Il faut pouvoir maintenant afficher le contenu de la base de données (BDD).

API: The Loop

  • Grâce à l'API de WP,
  • il faut écrire seulement quelques lignes de code pour générer le contenu dynamique :-)
loop.php
<?php
if (have_posts()) :
   while (have_posts()) :
      the_post();
      the_content();
   endwhile;
endif;
?>
  • On mettra ce code dans le fichier loop.php
  • /wp-content/themes/mon-theme/loop.php
  • les fonctions WP ont des noms assez explicites
  • ⇒ affiche le contenu dynamique
  • the_title();
  • the_content();
  • the_permalink();
  • the_ID();
  • the_date();
  • the_author();
  • the_tags();
  • the_category();
  • Pour avoir les textes (sans faire de echo)
  • get_the_title();
  • get_the_content();
  • get_permalink();
  • get_the_ID();
index.php
<div>
<?php
// vérifie si l'url de la page est liée à du contenu
if (have_posts()) :
   // lit chaque contenu trouvé
   while (have_posts()) :
        // lit le contenu dans les variables
        the_post();
        // affiche le contenu trouvé
        echo '<h3><a href="'.get_permalink().'">';
            the_title();
        echo '</a></h3>';
        echo '<div>';
            the_content();
        echo '</div>';
   endwhile;
endif;
 
?>
</div>
  • Mais pour le moment, ce fichier loop.php n'est pas utilisé par le thème WP.
  • Il faut faire appel à une autre fonction de l'API WP:
  • get_template_part

API: get_template_part

  • La fonction get_template_part permet d'inclure d'autres fichiers du thème.
  • Cela permet de construire de manière modulaire le thème.
  • ⇒ même principe que la fonction include
  • On pourra donc définir une charte graphique
  • …et ré-utiliser les éléments communs sans avoir à ré-écrire le code plusieurs fois.
  • On utilise donc cette fonction dans le fichier index.php pour utiliser le fichier loop.php
  • Ce qui donne:
index.php
MON THEME
 
get_template_part('loop');
  • Maintenant, les pages publiques du site affichent le contenu dynamique, suivant chaque page ou article. :-)
  • Mais c'est encore un rendu trop simple et non conforme au format HTML.
  • Il reste du travail pour créer une vraie page HTML

API: get_header et get_footer

  • 2 fichiers sont standards pour un thème WP
  • header.php
  • footer.php
  • header.php doit produire le début du code HTML
  • ⇒ habituellement, inclut aussi la bannière
  • footer.php doit produire la fin du code HTML
  • ⇒ habituellement, inclut aussi le pied de page
header.php
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>MON SITE A MOI</title>
    </head>
    <body>
        <h1>MON THEME EN COURS</h1>
footer.php
        <div>&copy; 2012 - mon site à moi</div>
    </body>
</html>
  • Au lieu de faire appel à la fonction get_template_part
  • …Il existe 2 fonctions (historique WP)
  • get_header();
  • get_footer();
index.php
<?php get_header(); ?>
        <?php get_template_part("loop"); ?>
<?php get_footer(); ?>
  • NOTE:
  • Certains plugins pourront utiliser ces fonctions
  • get_header et get_footer
  • pour produire leurs propres pages

Codage: hiérarchie des fichiers d'un thème WP

  • style.css
  • index.php
  • Point d'entrée principal de WP pour créer les pages
  • index.php
    • get_template_part('loop') ⇒ loop.php
    • get_header() ⇒ header.php
    • get_footer() ⇒ footer.php
  • Autres points d'entrée:
  • 404.php
  • home.php
  • page.php
  • single.php
  • tag.php
  • etc…
  • Pour effectuer des traitements avant l'affichage
  • functions.php

DEV: 404.php

  • Si on a activé les permaliens
  • ( ⇒ par création de fichier .htaccess )
  • ⇒ Apache envoie à WP toutes les requêtes qu'il ne sait pas gérer
  • ⇒ Le fichier index.php est utilisé par défaut
  • ⇒ On peut créer un fichier 404.php
  • ⇒ WP va l'utiliser pour les URLs qui ne correspondent pas à du contenu connu
404.php
ERREUR 404 - PAGE NON TROUVEE
  • Bien sur, il est possible de créer une page plus complète :-P
404.php
<?php get_header(); ?>
<h2>ERREUR 404 - PAGE NON TROUVEE</h2>
<?php get_footer(); ?>

DEV: home.php

  • Pour créer la page d'accueil
  • home.php
  • exemple: ajouter un slider sur la page d'accueil
home.php
<?php get_header(); ?>
        <?php get_template_part("slider"); ?>
        <?php get_template_part("loop"); ?>
<?php get_footer(); ?>

DEV: Pages Templates

  • Si on veut une mise en page différente sur une page
  • ex: Page avec Formulaire de Contact
  • Simple à réaliser:
  • Créer un fichier .php
  • Au début du fichier…
  • Il faut ajouter un bloc de commentaire avec la ligne Template Name:
  • ⇒ Le nom donné apparait dans la partie admin pour éditer une Page
  • Modèle de Page
page-contact.php
<?php
/*
    Template Name: Ma Page Contact 
*/
?>
  • Le reste du code est semblable au fichier index.php ou home.php
page-contact.php
<?php
/*
    Template Name: Ma Page Contact 
*/
?>
<?php get_header(); ?>
        <?php get_template_part("form-contact"); ?>
<?php get_footer(); ?>
  • Ensuite, le Modèle de Page est disponible quand on édite une Page
  • ( ⇒ Boîte à droite du formulaire du contenu de la Page )

API: Plugins / wp_head et wp_footer

  • Une installation WP mélange un Thème et des Plugins
  • Pour permettre aux Plugins d'ajouter leur propre code HTML, CSS, Javascript
  • ⇒ il faut ajouter les appels aux fonctions wp_head() et wp_footer()
header.php
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>MON SITE A MOI</title>
        <?php wp_head(); ?>
    </head>
    <body>
        <h1>MON THEME EN COURS</h1>
footer.php
    <?php wp_footer(); ?>
    <div>&copy; 2012 - mon site à moi</div>
    </body>
</html>
  • NOTE:
  • Cela permet à WP d'ajouter la barre de menu sur la partie publique
  • (quand le webmaster est connecté)
  • NOTE:
  • WP ajoute aussi des balises meta
  • ex: gestion des robots d'indexation
<meta name='robots' content='noindex,nofollow' />
  • ex: gestion du XMLRPC
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://localhost/wordpress/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://localhost/wordpress/wp-includes/wlwmanifest.xml" /> 
  • ex: un peu de pub pour WP :-/
<meta name="generator" content="WordPress 3.3.2" />

API: CSS et body_class

  • Pour faciliter la création de règles CSS
  • WP propose une fonction qui crée des classes CSS
  • ⇒ suivant le contexte de la page affichée
  • body_class();
header.php
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>MON SITE A MOI</title>
        <?php wp_head(); ?>
    </head>
    <body <?php body_class(); ?>>
        <h1>MON THEME EN COURS</h1>

Thème: Toolbox

  • ⇒ Toolbox est un Thème Minimaliste
    • Structure simple
    • Pas d'habillage CSS
  • Toolbox est une bonne base pour démarrer le développement de son Thème
  • Toolbox peut aussi servir de modèle pour coder tout un Thème

Editeur de Thème WP

  • Editeur intégré de code PHP pour les administrateurs
  • Possibilité de modifier le code des thèmes et des plugins
  • WARNING
  • IL NE FAUT PLUS FAIRE DE MISES A JOUR AUTOMATIQUES!!!
  • LES MODIFS DE CODE SONT ECRASEES :-/
  • METHODE PROPRE
  • CREER UN “CHILD THEME”

Warning: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead in /homepages/5/d372632784/htdocs/formation.applh.com/website/inc/auth.php on line 656
wordpress/creer-son-theme/start.txt · Dernière modification: 2012/06/04 10:34 par webmaster