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

<html> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"> </script> <script type="text/javascript"> /* <[!CDATA[ */ AppLH={}; AppLH.nbh1=0; AppLH.html_show='<a class="show_start" href="#"><img src="http://formation.applh.com/_media/arrow_curved_blue.png?w=50" /><span>START SLIDESHOW!</span></a>'; AppLH.html_banner2='<div class="show_banner2" style="position:fixed;bottom:0;left:0;width:100%;height:0%;opacity:0.8;background-color:#123456;"><img id="arrow" class="dragok" src="http://formation.applh.com/_media/arrow_curved_blue.png?w=50" style="resize:both;" draggable="true"/><span class="dragok" style="font-size:2em;">1</span><span class="dragok" style="font-size:2em;">2</span><span class="dragok" style="font-size:2em;">3</span></div>'; AppLH.jinit=function(){ jQuery(".page h1") .each(AppLH.count_h1) ; AppLH.nbh1=0; jQuery(".toc li.level1 a.toc") .each(AppLH.count_h1) ; jQuery(".page").prepend(AppLH.html_show); jQuery(".show_start").click(AppLH.show_start); jQuery("dl.code dt").prepend('<span class="on-off"><img src="/_media/12-hardware-keyboard.png"/></span>'); jQuery("dl.code dt span.on-off").click(function(){jQuery(this).parents("dl.code").find("dd pre.code").slideToggle();}); jQuery("dl.code dd pre.code").hide(); }; AppLH.show_start=function(){ jQuery(".show_start, .footerinc, .stylehead, .toc, .stylefoot, .license, .secedit").hide(); jQuery("body").animate({"font-size": "150%"}); jQuery(".page h1") .animate({"margin-top": '+240'}) ; jQuery(".page").append(AppLH.html_banner2); jQuery(".show_banner2").animate({height: '10%'}); jQuery(".dragok").draggable(); }; AppLH.count_h1=function(){ AppLH.nbh1++; var html1=jQuery(this).html(); html1=AppLH.nbh1+'. '+html1; jQuery(this).html(html1); }; if (jQuery) { jQuery(AppLH.jinit); } /* ]]> */ </script> </html> ====== 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** <code> /wp-content/themes/mon-theme/ </code> * Ensuite, dans ce dossier **mon-theme** il faut au minimum 2 fichiers: * **style.css** * **index.php** <code> /wp-content/themes/mon-theme/style.css /wp-content/themes/mon-theme/index.php </code> * Le fichier **style.css** doit commencer par une entête spéciale: * **Theme Name** * **Author** * **Version** <code css style.css> /* Theme Name: Mon Thème Author: LH Version: 1.0 */ </code> * 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 <code php index.php> </code> * Si on ajoute une ligne, on voit que toutes les pages vont afficher ce même contenu :-P <code php index.php> MON THEME </code> * 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). * WordPress fournit un ensemble de fonctions PHP * => Pour réaliser simplement la génération dynamique de la page HTML. * **Template Tags** * => http://codex.wordpress.org/Template_Tags ====== API: The Loop ====== * Grâce à l'API de WP, * il faut écrire seulement quelques lignes de code pour générer le contenu dynamique :-) <code php loop.php> <?php if (have_posts()) : while (have_posts()) : the_post(); the_content(); endwhile; endif; ?> </code> * 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();** * ... <code php 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> </code> * (cf. http://codex.wordpress.org/The_Loop_in_Action) * 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: <code php index.php> MON THEME get_template_part('loop'); </code> * Maintenant, les pages publiques du site affichent le contenu dynamique, suivant chaque page ou article. :-) * (cf. http://codex.wordpress.org/Function_Reference/get_template_part) * 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** <code php header.php> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>MON SITE A MOI</title> </head> <body> <h1>MON THEME EN COURS</h1> </code> <code php footer.php> <div>&copy; 2012 - mon site à moi</div> </body> </html> </code> * Au lieu de faire appel à la fonction **get_template_part** * ...Il existe 2 fonctions (historique WP) * **get_header();** * **get_footer();** <code php index.php> <?php get_header(); ?> <?php get_template_part("loop"); ?> <?php get_footer(); ?> </code> * 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 ====== * http://codex.wordpress.org/Template_Hierarchy * 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** {{:wordpress:wp-template-hierarchy.png?direct&400|}} ====== 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 <code php 404.php> ERREUR 404 - PAGE NON TROUVEE </code> * Bien sur, il est possible de créer une page plus complète :-P <code php 404.php> <?php get_header(); ?> <h2>ERREUR 404 - PAGE NON TROUVEE</h2> <?php get_footer(); ?> </code> ====== DEV: home.php ====== * Pour créer la **page d'accueil** * => **home.php** * exemple: ajouter un slider sur la page d'accueil <code php home.php> <?php get_header(); ?> <?php get_template_part("slider"); ?> <?php get_template_part("loop"); ?> <?php get_footer(); ?> </code> ====== DEV: Pages Templates ====== * Si on veut une **mise en page différente sur une page** * ex: Page avec **Formulaire de Contact** * => Créer un **Template** spécial pour une **Page** * => **Pages Templates** * http://codex.wordpress.org/Pages#Creating_Your_Own_Page_Templates * 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** <code php page-contact.php> <?php /* Template Name: Ma Page Contact */ ?> </code> * Le reste du code est semblable au fichier **index.php** ou **home.php** <code php page-contact.php> <?php /* Template Name: Ma Page Contact */ ?> <?php get_header(); ?> <?php get_template_part("form-contact"); ?> <?php get_footer(); ?> </code> * 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()** <code php 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> </code> <code php footer.php> <?php wp_footer(); ?> <div>&copy; 2012 - mon site à moi</div> </body> </html> </code> * 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 <code html> <meta name='robots' content='noindex,nofollow' /> </code> * ex: gestion du XMLRPC <code html> <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" /> </code> * ex: un peu de pub pour WP :-/ <code html> <meta name="generator" content="WordPress 3.3.2" /> </code> ====== 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();** * http://codex.wordpress.org/Function_Reference/body_class <code php 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> </code> ====== Thème: Toolbox ====== * Les développeurs de WordPress ont créé le **Thème Toolbox** * => Pour référence au développement d'un Thème avec WP * http://wordpress.org/extend/themes/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 :-/ * http://codex.wordpress.org/Theme_Development * **METHODE PROPRE** * CREER UN "CHILD THEME" * http://codex.wordpress.org/Child_Themes


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