• Les fichiers de base
  • Les "include"
  • Les fichiers CSS et JavaScript
• Les Templates
  • Trouver les fichiers de template a utiliser
• Les types personnalises
• Les taxonomies personnalisees
• Les champs de saisie personnalises
  • Declarer les champs de formulaire
  • Afficher les valeurs personnalisees
  • Fonctions de "meta box" pour lire les valeurs personnalisees
• Les menus
  • Menu defini par l'editeur du site
  • Menu integre au template
    • Genere par wordpress
    • Par le code
    • Liens propres a un "post"
    • Par une seconde "boucle"
• Modifier la requete de WordPress
• Page listant une taxonomie
• Liste de contenus (liens) triee par taxonomie
• Les images
  • L'image a la une (vignette/thumbnail)
  • Les tailles d'images
  • Les images des champs personnalises

style.css : Donnez un nom à votre thème index.php : Template par défaut, une place pour commencer.

Ne pas utiliser include de PHP. WordPress à des fonctions spécialisées pour cela

Regrouper le code commun à vos pages avec :

• header.php : sera inclus dans votre template par get_header()
• footer.php : sera inclus dans votre template par get_footer()

Le code HTML généré est celui retourné par votre fichier de template qui lui même inclut d'autres fichiers. Il n'est donc pas étonnant de débuter une balise dans header.php est de la finir dans footer.php.

Ne pas les placer dans vos templates. Laisser WordPress le faire pour vous.

• Déclarer vos fichiers CSS dans le fichier functions.php
  • WordPress les placera dans vos pages par le biais de la fonction wp_head() placée à la fin de HEAD.
• Il existe la même fonctionnalité pour JavaScript (WP codex).
  • Simplement lui indiqué le chemin comme pour les feuilles de style, bonus vous pouvez dire que votre script à besoin de jQuery : WordPress le chargera pour vous.
  • On peut optimiser le chargement des scripts en les plaçant à la fin de BODY (wp_footer()) ou en les chargeant de façon asynchrone.

Rq : La fonction utilisée pour le lien du fichier CSS : get_stylesheet_directory_uri, peut être utile pour intégrer des liens vers des éléments statiques dans vos templates. Mais je vous décourage de faire cela. Mettez les en place par les CSS, il suffit alors de faire un lien relatif depuis le code du fichier CSS.

Ce sont eux qui affichent le contenu par le biais de la 'boucle' WordPress.

• index.php : Template par défaut
• single.php : Template pour afficher un seul Article (affichage complet).

index.php n'est pas l'endroit où vous devez placer en premier le code de vos pages. Préférez un template plus approprié :

• archive.php pour les listes d’Articles
• home.php ou front-page.php pour une page ou une liste suivant les réglages http://codex.wordpress.org/Template_Hierarchy

• La variable globale $template contient le template actuellement utilisé.
• La fonction body_class que l'on utilise dans la balise BODY, donne de bonnes indications sur le nom de template que l'on pourrait utiliser.

Ajoutez le code suivant à functions.php pour afficher ces informations de template

WordPress possède deux types (Post et Page). Mais vous pouvez ajouter vos propres types de contenu :

• Le définir dans functions.php
• Faire un template single-$nomDuType.php qui l'affiche (Eg complètement)
• Faire un template archive-$nomDuType.php qui affiche la liste (Eg liens)

Quand vous faites un type personnalisé, vous devez réfléchir à :

• Son identifiant dans le code
• Le nom affiché à l'utilisateur
• Les fonctionnalités de WordPress qui vous sont utiles http://codex.wordpress.org/Function_Reference/register_post_type

Lire la documentation et penser à l'option supports qui sert à dire quelles fonctionnalités de WordPress sont utiles à votre nouveau contenu.

WordPress possède deux taxonomies (Tag et Category). Mais vous pouvez ajouter vos propres classements (taxonomies) :

• La définir dans functions.php
• Faire un template taxonomy-$nomDeLaTaxonomie.php qui l'affiche la liste des contenus correspondants
  • Mais aussi, on peut faire un template taxonomy-$nomDeLaTaxonomie-$etiquette.php qui affiche la liste pour une certaine "étiquette".

Quand vous faites une taxonomie personnalisée, vous devez réfléchir à :

• Son identifiant dans le code
• Le nom affiché à l'utilisateur
• Quels contenus va-t-elle classer (un ou plusieurs) ? http://codex.wordpress.org/Function_Reference/register_taxonomy

Lire la documentation et penser à l'option hierarchical qui sert à dire si la nouvelle taxonomie doit se comporter comme des Tag ou comme une Category.

Vous pouvez associer une description à chaque terme (sur la page d'administration de la taxonomie). Utiliser la fonction term_description pour l'afficher.

Quand vous ajoutez un type de contenu personnalisé, WordPress vous laisse choisir les champs de formulaire standard présenté à l'éditeur du site (option supports de register_post_type).

Mais vous pouvez ajouter vos propres champs de formulaire.

Dans l'interface d'administration, demander l'installation du plug-in "Meta Box".

Avec, vous pourrez :

• Déclarer les champs de formulaire (dans functions.php).
• Afficher les valeurs saisies dans les templates.

Les champs de formulaires ajoutés par "Meta Box" sont regroupés par Boîte.

Pour chaque Boîte vous devez penser :

• Le titre de la boîte
• Sur quels types de contenu elle sera affichée
• Sa liste de champs de formulaire et pour chaque champ :
  • Son nom affiché
  • Son identifiant (unique)
  • Son type

https://github.com/rilwis/meta-box/blob/master/demo/demo.php

Lire la documentation et penser à regarder les options des différents types de champs.

_{autocomplete button checkbox checkbox_list color date datetime divider file file_advanced file_input heading hidden image image_advanced image_select map number oembed password plupload_image post radio range select select_advanced slider taxonomy taxonomy_advanced text textarea thickbox_image time url user wysiwyg}

(version longue indépendante du plugin, lire titre suivant pour version courte).

Pour afficher dans le template les champs personnalisés :

• Récupérez les "custom_fields" : C'est un tableau associatif.
• Utilisez l'identifiant d'un champ personnalisé pour lire ses valeurs : C'est un tableau.
  • Si la valeur est unique, prendre l'indice [0].

Ensuite, utiliser ce code à l'endroit où vous voulez afficher la valeur.

Rq. les print_r sont juste pour les explications. Ne pas les inclure dans vos pages !

Utilise un "helper" fourni par le plug-in. Mais comprenez que les métadonnées sont gérées par WordPress, tout plug-in ne fait qu'ajouter des facilités de saisie. Rien d'autre.

rwmb_meta est une fonction fournie par "meta box" pour afficher plus simplement les valeurs :

• Si c'est une valeur unique:
  • Elle retourne simplement cette valeur
• Si c'est un type complexe (l'indiquer en argument à l'appel)
  • Elle retourne un tableau avec des clefs pour les valeurs
• Si vous avez utilisé la propriété 'clone' => true
  • Elle retourne un tableau, vous devez obligatoirement passer par elle dans ce cas.

Ce sont les menus qui peuvent être personnalisés dans l'interface d'administration.

• Dire que votre thème supporte cette fonctionnalité.
• Définir pour chaque menu son identifiant et le nom affiché à l'utilisateur.
• Ajouter au template le code pour ajouter le menu correspondant à un identifiant.

Si vous avez défini des taxonomies personnalisées, vous voulez sans doute permettre au visiteur du site d'utiliser ces "classements" pour naviguer sur le site.

Simplement, demandez à WordPress de faire un menu (liste) avec les termes de votre taxonomie.

Il existe des fonctions donnant l'URL :

• Lien vers la liste des éléments pour un terme d'une taxonomie get_term_link
• Lien vers l'archive d'un type personnalisé get_post_type_archive_link
• Lien vers une page statique get_permalink et get_page_by_title

the_permalink donne le lien vers la page d'un "post" (ou contenu personnalisé). Mais vous pouvez aussi :

• Afficher les "tags" : the_tags
• Afficher la ou les "category" : the_category
• Mais aussi les taxonomies personnalisées : the_terms
  • Rq: contrairement aux autres elle demande l'ID du "post" en paramètre ($post->ID).

Pour chaque il existe des variantes suivant que vous vouliez gérez vous même l'affichage (boucle en PHP) ou laisser WordPress le faire pour vous.

Si vous voulez afficher deux contenus sans rapport sur la même page, vous devez faire une seconde boucle :

• La classe WP_Query retourne un objet qui pilote cette boucle.
• La boucle se fait comme d'habitude, simplement en utilisant l'objet.

Lire la documentation de WP_Query ! Pour connaître ses paramètres.

Vous ne devez pas utiliser WP_Query pour changer le contenu affiché par défaut (sauf pour les pages statiques). Il faut modifier la requête faite par WordPress.

Vous devez :

• Mettre en place un filtre pour changer la requête
• Déterminer si c'est la page dont vous voulez modifier la requête
• Modifier les paramètres de la requête

Si vous voulez faire une page qui liste tous les termes de la taxonomie :

• Dans l'interface d'administration, faire une page statique "Liste Taxonomie" (elle sera affichée à l’URL /liste-taxonomie)
• Placer un code affichera votre taxonomie, dans le template spécifique à la page (page-liste-taxonomie.php)

Quand l'on utilise une taxonomie, il existe une page pour chaque terme (/competences/HTML, /competences/CSS...).

Si vous voulez faire une page qui liste tous les contenus triés suivant les termes de la taxonomie :

• Dans l'interface d'administration, faire une page statique du même nom que la taxonomie (elle sera affichée à l’URL /competences)
• Placer un code affichera vos contenus triés, dans le template spécifique à la page (page-competences.php)
  • Rq: le code fourni fait plusieurs requêtes, ce qui n'est pas une bonne pratique. Mais bon... c'est pour rester simple.

Si vous n'avez qu'une image ou qu'une de vos images "symbolise" le contenu : utilisez cette fonction.

• Ajoutez la fonction add_theme_support('post-thumbnails'); à votre functions.php
• Et dans le paramètre 'support' de la déclaration de votre type personnalisé, ajouter 'thumbnail'.
  • Dans l'interface d'administration, vous devez pouvoir ajouter une "image à la une"
• Pour l'affichage, simplement utiliser le "tag" : the_post_thumbnail('portrait'); dans votre tamplate : single-projet.php
  • Le paramètre (facultatif) sert à indiquer la taille de l'image.

Les utilisateurs de votre site n'auront qu'à télécharger les images associées au contenu. WordPress prend en charge leurs redimensionnements.

• Simplement, indiquez dans le functions.php les tailles utilisées dans votre graphisme avec la fonction add_image_size qui associe des dimensions à un "identifiant".
  • Les fonctions destinées à une balise image (ou l'URL), toutes prennent en paramètre un "identifiant" pour indiquer la taille.

WordPress stocke simplement un identifiant pour les images (attachement) que vous avez associé à votre poste.

• Simplement, récupérez la ou les valeurs (tableau) d'ID.
  • On peut aussi récupérer des renseignements plus complets (en spécifiant le type). Mais ce n'est pas utile sauf si l'on désire renseigner soit même tous les paramètres des balises IMG.
• Avec la valeur de l'ID, utilisez une fonction qui retourne une balise IMG avec une certaine taille : wp_get_attachment_image.
  • Voir aussi :
    • wp_get_attachment_image_src
    • get_image_tag
    • wp_get_attachment_metadata