Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

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

2 951 vues

Publié le

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.

Publié dans : Technologie
  • Soyez le premier à commenter

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/

×