bien débuter dans la conception d'un thème wordpress

Post on 22-Jun-2015

1.786 Views

Category:

Technology

0 Downloads

Preview:

Click to see full reader

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

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/

top related