WordPress

Création de thème, règles et outils

Stéphane HULARD
Consultant / Formateur

https://chstudio.fr
@s_hulard
http://github.com/shulard
s.hulard@chstudio.fr
s.hulard@univ-lyon2.fr

Pendant ce cours...

  1. Comment structurer un thème
  2. Gestion des assets (JS, CSS)
  3. actions et filters
  4. Gestion des médias
  5. Sécurité
  6. Concepts avancés
  7. WP-CLI à la rescousse

1. Comment structurer un 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és 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

Pourquoi 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.

Attention à l'emplacement d'appel

Tout le code présent dans functions.php est exécuté dans le front-end et le back-end. Il faut utiliser les actions et filters pour s'assurer que les CSS et JS ne soient pas chargés au mauvais endroit !

Les méthodes

Exemple


  function montheme_scripts()
  {
    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');
  }
  add_action('wp_enqueue_scripts', 'montheme_scripts');
              

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" partout.

  • 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ètres 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);
              

Quelques-uns vraiment utiles

Pour les actions :

  • after_setup_theme : Généralement utilisé pour initialiser les paramètre et options du thème
  • plugins_loaded : Généralement utilisé pour initialiser les paramètre et options d'un plugin
  • template_redirect : Permet d'intervenir au moment du choix du template
  • wp_enqueue_scripts : Pour charger tous les styles et scripts sur le front

Quelques-uns vraiment utiles

Pour les filters :

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

Images à la une

Une fonctionalité cachée à activer dans votre functions.php. Elle permet d'associer une image à un article.

On ajoute dans le fichier functions.php:


  //Activation du "post-thumbnails"
  add_theme_support( 'post-thumbnails' );
              

Et on utilise ensuite:


  //Format 136x126 avec crop
  if( has_post_thumbnail() ) {
    the_post_thumbnail('full', $attrs);
  }
              

5. Sécurité

Affichage en front

Il ne faut jamais afficher en front une donnée saisie par l'utilisateur.

Les fonctions natives utilisent par défaut le mécanisme d'échappement.


  the_title();
  esc_js(...);
  esc_html(...);
  esc_attr(...);
  esc_textarea(...);
  esc_url(...);
              

Enregistrement en BDD

Il ne faut jamais enregistrer en BDD une donnée non "escapée".

Il ne faut jamais intégrer dans une requête SQL des données utilisateur non "escapée".


  mysql_real_escape_string(...);
  esc_like(...);
  esc_sql(...);
              

6. Concepts avancés

WP_Query

Requête sur les données

WP_Query est l'objet qui encapsule la logique de requête sur les données.

  • Il permet d'initialiser la boucle
  • Il est au coeur de la récupération et l'affichage de toutes les informations
  • La documentation Codex est complète à son sujet

Exemple général


  $query = new WP_Query( $args );
  // The Loop
  if ( $query->have_posts() ) {
    while ( $query->have_posts() ) {
      $query->the_post();
      the_title(); //Affichage du titre
    }
  } else {
    // no posts found
  }
  /* Restore original Post Data */
  wp_reset_postdata();
              

ATTENTION: L'utilisation de wp_reset_postdata est très importante, sinon le contexte d'exécution générale devient instable

Le contexte d'exécution

Grâce à la boucle, le contexte d'éxecution courant est complétement surchargé. Toutes les méthodes d'accès générique aux données sont "branchées" sur le post en cours d'itération, par exemple :

Les commentaires

Qu'est-ce que c'est ?

  • C'est un type de contenu particulier qui est toujours rattaché à un autre contenu.
  • Ils sont administrables dans le back office.
  • L'affichage des commentaires peut être fait de plusieurs façons :
    • comments_template dans le détail d'un article
    • Créer un fichier comments.php pour paramétrer l'affichage

  Il ne faut pas créer un formulaire et essayer de soumettre les commentaires sans passer par l'API WordPress, c'est un risque important pour la sécurité du site !

Les menus

Qu'est-ce que c'est ?

  • Les menus sont des listes de liens paramétrables dans le back office.
  • Il est possible d'en déclarer plusieurs dans le thème pour gérer l'affichage du footer, des liens sociaux...
  • Un comportement par défaut simple :
    • Activation de la fonction "cachée"
    • Déclaration d'un ou plusieurs menus dans le functions.php
    • Affichage dans le site

Exemple

Dans l'action after_setup_theme :


  add_theme_support( 'menus' );
  register_nav_menu( "main", "Menu principal");
              

Dans le thème :


  wp_nav_menu(array('theme_location' => 'main'));
              

Meta Box

Qu'est-ce que c'est ?

  • Les "Méta Box" sont des morceaux d'interface d'administration dans WordPress.
  • Il est possible d'en créer pour ajouter des champs dans un type de contenu particulier (URL du site pour un projet de portfolio par exemple).
  • Attention c'est assez complexe :
    • Construire l'interface, les champs et les boutons
    • Gérer l'enregistrement dans la base de données
    • Afficher la valeur sauvegardée lors de l'édition d'un contenu
    • Tout est à faire des le fichier functions.php

Ok...

Sidebar

Qu'est-ce que c'est ?

  • C'est simplement, une colonne verticale contenant des widgets et affichée en complément du contenu de la page.
  • La plupart des thèmes intègre une "sidebar".
  • Les widgets à utiliser sont personnalisables dans le configurateur de thème.

Comment les utiliser ?

  • Appeler la fonction get_sidebar dans la page au même titre que get_header ou get_footer
    • Permet de définir son emplacement
    • Tous les gabarits n'en utilisent pas forcément une !
  • L'affichage est contrôlé par le fichier sidebar.php à la racine de votre thème
  • Si pas de fichier sidebar.php, un template par défaut est utilisé

Exemple

Dans l'action after_setup_theme :


  register_sidebar(array('name' => 'Ma sidebar', 'id' => 'sidebar-1'));
              

Dans sidebar.php :


  if( is_active_sidebar( 'sidebar-1' )  ):
    dynamic_sidebar( 'sidebar-1' );
  endif;
              

Les widgets

  • Une fois les "sidebar" déclarées, vous pouvez ajouter des widgets à l'intérieur.
    • Une liste de widget est dispo par défaut
    • Liste de catégories, nuage de liens...
  • Sinon on peut en déclarer de nouveaux:

Quelques liens utiles

7. WP-CLI à la rescousse

Pourquoi ?

wp-cli est un outil en ligne de commande pour intéragir avec WordPress. Il facilite la gestion et la maintenance du site.


  curl -O https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar
  mv wp-cli.phar wp
  chmod +x wp
            

Pour générer du code

  • Pour un type personnalisé:
    • wp scaffold post-type mon-type
  • Pour un thème enfant:
    • wp scaffold child-theme mon-theme --parent_theme=twentysixteen
  • Pour un plugin:
    • wp scaffold plugin mon-plugin

Pour les médias

  • Regénérer toutes les miniatures:
    • wp medias regenerate --yes
  • Regénérer pour un media (ici id=10):
    • wp medias regenerate 10 --yes

Pour la BDD

  • Sauvegarder:
    • wp db export file.sql
  • Restaurer:
    • wp db import file.sql
  • Requêter:
    • wp db query "SELECT COUNT(*) FORM wp_posts"

Pour le coeur de WP

  • Installer:
    • wp core install
  • Mettre à jour:
    • wp core update
  • Autres manips:
    • wp core check-update
    • wp core is-installed
    • wp core language

Rendu

Objectif: Finaliser le thème HTML5UP.

  • Un thème opérationnel: indentation, sécurité, structure et traduction
  • Modifier le nom du thème pour qu'il s'appelle [Nom] [Prénom]
  • Template d'affichage de page et d'article basé sur generic.html
    • Affichage de l'image à la une
    • Affichage du titre
    • Affichage du contenu complet
  • Intégrer la pagination sur la page d'accueil.