Systèmes de gestion de contenu

Créer un thème à partir d'un template HTML

Session 3

Stéphane HULARD
Consultant technique web

  http://chstudio.fr

  @s_hulard

  http://github.com/shulard


  s.hulard@chstudio.fr

  s.hulard@univ-lyon2.fr

Pendant ce cours...

  1. Comment structurer le thème
  2. Gestion des assets (JS, CSS)
  3. actions et filters
  4. Gestion des médias
  5. Gestion des traductions

1. Comment structurer le thème

Comprendre les gabarits

Un template est un représentation complète des possibilités offertes pour afficher les contenus. Il faut bien prendre en compte toutes les contraintes.

  • Les header/footers contiennent le plus grand dénominateur commun de tous les gabarits
  • Que sera la page d'accueil, une page statique, une page fixe ?
  • Quel fichier créer pour répondre à mes besoins ?
  • Est-ce que je dois créer index.php ?

Des gabarits ?

  • Quand on parle de système de gestion de contenu on parle de gabarits.
  • Il représente les modèles de page
  • Ils contiennent toute la logique d'affichage

Identifier les blocs dupliqués

Il arrive qu'on retrouve dans différents gabarits le même bloc qui affiche les mêmes informations.
Même s'il est placé à un endroit différent ou avec un style un peu adapté, il est important de créer un fichier réutilisable

  • Optimiser la maintenance
  • Généraliser les règles de gestion
  • Faciliter l'intégration
  • Éviter la duplication (DRY)

2. Gestion des assets (JS, CSS)

Les assets ??

  • Les assets sont les fichiers JavaScript et CSS qui sont utilisés dans votre thème.
  • Ils sont généralement stockées dans le répertoire du thème
  • Ces fichiers ont un impact direct sur le ressenti des utilisateurs sur les performances du site
    • Optimisation, compression et performances
    • Ne pas tout charger tout le temps

Pour pas en dur ?

Pour charger ces fichiers, il faut ajouter dans le code html des balises <link> et <script>.

Selon le site qui utilise le thème, l'URL vers ces fichiers peut être différente. Wordpress propose des outils pour toujours disposer de la bonne URL.

Les méthodes

Exemple


  wp_register_style('mon-style', get_stylesheet_directory_uri().'/style.css');
  wp_enqueue_style('mon-style');

  wp_enqueue_script('script1', get_stylesheet_directory_uri().'/js/script1.js');
              

Ensuite on laisse la magie de Wordpress opérer avec wp_head et wp_footer

3. actions et filters

Un concept intéressant

Dans le coeur Wordpress, des actions sont "appliquées" partouts.

  • Elles permettent d'insérer du code pour manipuler le comportement de base
  • Elles sont utiles dans le template ou dans l'admin

Elles apportent une grande modularité dans la gestion du site.

Mais une complexité importante

Le code à écrire pour les utiliser n'est pas très simple et le comportement des actions n'est pas toujours très bien documenté

  • Création de fonction de callback
  • Liste de paramètre obscure
  • Modification à apporter pas toujours identiques

Exemple


  function ek_theme_setup()
  {
    //Load localisation
    load_theme_textdomain('ek', get_template_directory() . '/languages');

    //Enhance theme support
    add_theme_support( 'post-thumbnails' );
    add_theme_support( 'menus' );

    //Register specific image sizes
    add_image_size( 'blog-thumb', 136, 126, true );
  }
  add_action( 'after_setup_theme', 'ek_theme_setup' );
              

Pour une liste de toutes les actions, voir sur le Codex

Idem pour les filters

Les filters sont utilisés partout dans Wordpress. Contrairement aux actions, ils sont appliqués à chaque traitement sur les données pour permettre de les manipuler.


  function wpse_custom_order($clauses)
  {
    global $wp_query;

    // check for order by custom_order
    if (isset($clauses['where']) && strpos($clauses['where'], 'postmeta.meta_key') !== false ) {
      $clauses['join'] = str_replace('INNER JOIN', 'LEFT JOIN', $clauses['join']).$clauses['where'];
      $clauses['where'] = '';
    }
    return $clauses;
  }
  add_filter('get_meta_sql', 'wpse_custom_order', 10, 1);
              

4. Gestion des médias

Les utiliser dans les templates

Les médias renseignés dans la bibliothèque peuvent être utilisés dans les templates en affichage (bandeau de header par exemple)


  //Afficher l'image 1 en taille full
  wp_get_attachment_image(1, 'full');

  //Récupérer l'URL de l'image 18 en taille thumbnail
  wp_get_attachment_image_src(1, 'thumbnail');
              

Générer des formats spécifiques

Il peut être intéressant de définir des formats d'image spécifiques pour optimiser les chargement des page.

On ajoute dans le fichier functions.php:


  //Format 136x126 avec crop
  add_image_size( 'blog-thumb', 136, 126, true );
              

Et on utilise de la même façon:


  //Format 136x126 avec crop
  wp_get_attachment_image(1, 'blog-thumb');
              

5. Gestion des traductions

Gettext comme format de fichier

Wordpress utilise un sytème de traduction pour tous les libellés d'interface.
C'est ce système qui permet de voir l'interface d'administration en différente langue.

Les fichiers de langue sont au format gettext. J'utilise le logiciel "Poedit" pour les manipuler.

La documentation est assez complète sur cette partie: Codex, Wordpress community

Charger un dictionnaire

On peut charger un dictionnaire dépendant de la locale en cours:


  load_theme_textdomain( 'domain', get_template_directory() . '/languages' );
              

Ou alors charger un dictionnaire directement:


  load_textdomain( 'domain', dirname(__FILE__) . '/lang/fr.mo' );
              

Merci pour votre attention