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

Post on 22-Jun-2015

1.786 views 0 download

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 of Bien débuter dans la conception d'un thème WordPress

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');

Ressource indispensablehttp://generatewp.com/

#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

@wpchannelhttp://wpchannel.com/