Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Bien débuter dans la conception d'un thème WordPress

4,543 views

Published on

10 conseils pour apprendre à concevoir votre thème WordPress de A à Z en partant sur de bonnes bases.

Présentation du 18 janvier 2014 lors du WordCamp Paris.

Published in: Technology
  • Login to see the comments

Bien débuter dans la conception d'un thème WordPress

  1. 1. Bien débuter la conception 
 d’un thème WordPress Aurélien Denis - WordCamp Paris 2014 @wpchannel
  2. 2. Un thème, c’est quoi ? 1 CSS Des templates PHP 1 PNG (pour le screenshot)
  3. 3. #1 - Organisé tu seras ! Réfléchir à l’architecture du site Structurer les données en répertoires Connaitre la hiérarchie des templates sous WordPress
  4. 4. #2 - Un enfant tu feras ! Les enfants héritent des parents pour le meilleur et pour le pire
  5. 5. #3 - Speak English, you will Créer des chaînes de traductions en anglais du type <?php _e(‘string’, ‘textdomain’); ?> Proposer un fichier POT
  6. 6. 
 add_action('after_setup_theme', ‘cat_translator');
 function cat_translator() {
 load_theme_textdomain(‘catwoman', get_template_directory() . '/languages');
 }
  7. 7. #4 - Les CSS et les JavaScript JAMAIS directement dans header.php ou footer.php Utiliser les hooks dans functions.php ou /inc/ theme-scripts.php WordPress intègre une liste incroyable de scripts de base !
  8. 8. function cat_css_js() { wp_register_style( 'bootstrap', get_template_directory_uri() . '/inc/css/bootstrap.min.css', array(), '3.0', 'all' ); wp_enqueue_style( 'bootstrap' ); wp_enqueue_style( 'ntp-style', get_stylesheet_uri(), array('bootstrap'), '2.1', 'all' ); ! wp_register_script( 'bootstrap', get_template_directory_uri().'/inc/js/bootstrap.min.js' ); wp_register_script( 'custom', get_template_directory_uri().'/inc/js/custom-js.js', 'jQuery', '1.0', true ); wp_enqueue_script( 'jquery' ); wp_enqueue_script( 'bootstrap', array('jQuery'), '1.0', true ); wp_enqueue_script( 'custom' ); } add_action('wp_enqueue_scripts', 'cat_css_js');
  9. 9. Ressource indispensable http:/ /generatewp.com/
  10. 10. #5 - Le duplicate coding, tu éviteras ! Évite d’obtenir un fichier à rallonge Permet la duplication des boucles Segmente votre code Exemple : <?php get_template_part( 'content', get_post_format() ); ?>
  11. 11. #5 - Le duplicate coding, tu éviteras ! Créer des fonctions personnelles dans functions.php (ou équivalent) Pratique pour coder plus rapidement Exemple : les zones de métadonnées (date, auteur, catégorie, etc.)
  12. 12. #6 - wp_head / wp_footer Présence indispensable dans header.php et footer.php Permet d’injecter les scripts et CSS via les hooks appropriés
  13. 13. #7 - Du bon usage des requêtes WP_query pour vos requêtes personnalisées get_posts pour retourner des contenus uniquement pre_get_posts pour filtrer avant l’exécution de la boucle query_posts pour modifier une requête existante (à proscrire dans 90% des cas)
  14. 14. #8 - La sécurité, tu renforceras ! <?php / Blackhat / if ( !defined('ABSPATH') ) die('Attention aux chats ! Meeeaaaw !'); ?> Merci @woothemes et @thierrypigot !
  15. 15. #8 - La sécurité, tu renforceras ! Options All -Indexes ! A coller dans .htaccess pour bloquer l’accès aux répertoires
  16. 16. #9 - CIYF Wtf? Codex Is Your Friend et GIYF aussi ! Re Wtf ? Google aussi est ton ami rhoo ! ;)
  17. 17. Rétrocompatiblité IE8 Modèles de pages Favicon multi-devices Et puis… HTML5/CSS3 Images retina Page 404 Twitter BootStrap <body <?php body_class(); ?>>
  18. 18. « Ce que nous voyons n'est pas le monde réel en fin de compte mais un modèle du monde créé par notre propre cerveau" . » –Déborah Donnier @ddesign_web
  19. 19. @wpchannel http:/ /wpchannel.com/

×