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 ?

• 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

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)

• 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

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.

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 !

• Pour déclarer un style/script mais sans le charger directement.
• wp_register_style
• wp_register_script
• Pour déclarer un style/script à charger dans la page en cours.
• wp_enqueue_style
• wp_enqueue_script

  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

Il est possible d'adapter le style de l'éditeur de saisie de WordPress.
Pour cela il faut utiliser Editor Style :

  add_editor_style();

  add_editor_style( 'css/custom-editor-style.css' );
              

Par défaut le fichier editor-style.css est utilisé.

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.

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

  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

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

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

Pour les filters :

• previous_posts_link_attributes, next_posts_link_attributes, previous_comments_link_attributes, next_comments_link_attributes
• tiny_mce_before_init : Pour adapter TinyMCE
• image_size_names_choose : Pour définir les formats d'images autorisés dans le contenu

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

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

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

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(...);
              

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(...);
              

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

  $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

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 :

• the_title()
• the_date()
• the_content()
• Voir le Codex pour une liste exhaustive

• 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 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

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

• 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

• Un ensemble de fonction et d'action :
• add_meta_box pour la déclarer
• add_meta_boxes action pour l'activer
• update_post_meta pour enregistrer
• get_post_meta pour récupérer
• Un tuto très complet en français:
• https://wabeo.fr/jouons-avec-les-meta-boxes/

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

• 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é

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;
              

• 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:
• La documentation: https://codex.wordpress.org/Widgets_API
• Un développement un peu complexe (héritage de classe)

• https://generatewp.com
• https://codex.wordpress.org
• https://developer.wordpress.org
• https://wabeo.fr
• http://www.seomix.fr/

• 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

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

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

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

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]
• Intégrer la pagination sur la page d'accueil
• En plus des libellés ajouter des flèches (fa-arrow-left, fa-arrow-right)

Objectif: Finaliser le thème HTML5UP.

• Créer un nouveau type de contenu: project
• Créer un template de page pour afficher la liste des projets saisis (avec pagination)
• Créer un template pour afficher un projet (basés sur generic.html)
• Ajouter une méta box URL pour ce type de contenu
• Afficher dans la page de détail d'un projet l'URL saisie