Bien débuter la conception 

d’un thème WordPress
Aurélien Denis - WordCamp Paris 2014
@wpchannel
Un thème, c’est quoi ?
1 CSS
Des templates PHP
1 PNG (pour le screenshot)
#1 - Organisé tu seras !
Réfléchir à l’architecture du site
Structurer les données en répertoires
Connaitre la hiérarchie ...
#2 - Un
enfant tu
feras !
Les enfants héritent des
parents pour le meilleur et
pour le pire
#3 - Speak English, you will
Créer des chaînes de
traductions en anglais du
type <?php _e(‘string’,
‘textdomain’); ?>
Prop...



add_action('after_setup_theme', ‘cat_translator');

function cat_translator() {

load_theme_textdomain(‘catwoman',
get_...
#4 - Les CSS et les JavaScript
JAMAIS directement dans
header.php ou footer.php
Utiliser les hooks dans
functions.php ou /...
function cat_css_js() {
wp_register_style( 'bootstrap', get_template_directory_uri() . '/inc/css/bootstrap.min.css',
array...
Ressource indispensable
http:/
/generatewp.com/
#5 - Le duplicate coding,
tu éviteras !
Évite d’obtenir un fichier à rallonge
Permet la duplication des boucles
Segmente v...
#5 - Le duplicate coding, tu éviteras !
Créer des fonctions
personnelles dans
functions.php (ou
équivalent)
Pratique pour ...
#6 - wp_head / wp_footer

Présence indispensable dans header.php et footer.php
Permet d’injecter les scripts et CSS via le...
#7 - Du bon usage des requêtes
WP_query pour vos requêtes
personnalisées
get_posts pour retourner
des contenus uniquement
...
#8 - La sécurité, tu
renforceras !
<?php
/ Blackhat
/
if ( !defined('ABSPATH') ) die('Attention aux chats !
Meeeaaaw !');
...
#8 - La sécurité, tu renforceras !
Options All -Indexes
!

A coller dans .htaccess
pour bloquer l’accès aux
répertoires
#9 - CIYF
Wtf?
Codex Is Your Friend et
GIYF aussi !
Re Wtf ?
Google aussi est ton ami
rhoo ! ;)
Rétrocompatiblité IE8
Modèles de pages

Favicon multi-devices

Et puis…
HTML5/CSS3

Images retina
Page 404
Twitter BootStr...
« 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"
. »

...
@wpchannel
http:/
/wpchannel.com/
Bien débuter dans la conception d'un thème WordPress
Prochain SlideShare
Chargement dans…5
×

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

2 602 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
0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
2 602
Sur SlideShare
0
Issues des intégrations
0
Intégrations
1 273
Actions
Partages
0
Téléchargements
47
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

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/

×