bien débuter dans la conception d'un thème wordpress
DESCRIPTION
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.TRANSCRIPT
Bien débuter la conception d’un thème WordPressAuré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 des templates sous WordPress
#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’); ?>
Proposer un fichier POT
add_action('after_setup_theme', ‘cat_translator');function cat_translator() {load_theme_textdomain(‘catwoman', get_template_directory() . '/languages');}
#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 !
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');
#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() ); ?>
#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.)
#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
#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)
#8 - La sécurité, tu renforceras !
<?php
// Blackhat
if ( !defined('ABSPATH') ) die('Attention aux chats ! Meeeaaaw !');
?>
Merci @woothemes et @thierrypigot !
#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 ! ;)
Et puis…
Modèles de pages
<body <?php body_class(); ?>>
Favicon multi-devices
Page 404
Twitter BootStrap
HTML5/CSS3Images retina
Rétrocompatiblité IE8
« 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
