Images, commentaires et champs personnalisés

Mise à jour le 21-10-2017 à 18:53

Pour aller un peu plus loin, cette partie présente :

Ajout d’images d’arrière plan, en-tête…

Image d’arrière plan

Il suffit d’ajouter dans « fonctions.php » la ligne :

add_theme_support( 'custom-background' );

Cela ajoutera au tableau de bord de l’administrateur dans « Apparence », l’entrée « Arrière-plan ». Celle-ci conduit à la personnalisation de l’arrière plan où il sea possible de gérer l’image.

Si une image est placée ainsi, la classe « custom-background » est ajoutée à et le style correspondant est placé en fin de l’élément.

Sur le codex WordPress :
https://codex.wordpress.org/Custom_Backgrounds

Image d’en-tête

Pour que l’administrateur du site puisse modifier l’image d’en-tête, on va ajouter cette possibilité au fichier « fonctions.php ».

$args = array(
 'flex-width' => true,
 'flex-height' => true,
 'default-image' => get_template_directory_uri() . '/images/header.jpg',
);
add_theme_support( 'custom-header', $args );

La fonction « add_theme_support » ajoute une fonctionnalité, passée en premier paramètre, au thème. Le second paramètre (facultatif) décrit la mise en œuvre de cette fonctionnalité.

https://developer.wordpress.org/reference/functions/add_theme_support/

En l’occurrence on ajoute la fonctionnalité « custom-header ». Désormais la page « Apparence » / « Personnaliser » propose le menu « Image d’en-tête ».

Il suffit ensuite d’introduire cette image dans les pages du site, par exemple dans le « header » :

 <img src="<?php header_image(); ?>" alt="" />

En savoir plus (en français) :
https://codex.wordpress.org/fr:Custom_Headers

Logo

Généralement le logo est une propriété de l’identité du site, donc on ajoute cette fonctionnalité comme l’image d’en-tête par « add_theme_support », par exemple :

 add_theme_support( 'custom-logo', array(
     'flex-width' => true,
     'flex-height' => true,
   )
);

L’administrateur, dans « Apparence » / « Personnaliser » dans « Identité du site », trouvera la partie « Logo » où il pourra placer son image.

La mise en place effective du logo dans un élément de page se fait tout simplement par :

<?php the_custom_logo(); ?>

Cette fonction crée un élément <div>, supportant un lien vers la racine du site, dans lequel est inséré l’image du logo. En examinant le source de la page, on trouvera les classes correspondantes afin de finaliser la mise en page.

Sur le codex WordPress :
https://codex.wordpress.org/Theme_Logo

Regroupement

Si l’on utilise les fonctionnalités décrites précédemment, il est utile de les regrouper dans « fonction.php », comme :

function initialise_theme() {
   add_theme_support( 'automatic-feed-links' );
   add_theme_support( 'custom-background' );
   add_theme_support( 'custom-header', array(
     'flex-width' => true,
     'flex-height' => true,
   ) );
   add_theme_support( 'custom-logo', array(
     'flex-width' => true,
     'flex-height' => true,
   ) );
}
add_action( 'after_setup_theme', 'initialise_theme' );

Commentaires

Là on peut faire simple ou compliqué, au choix.

Il s’agit de permettre l’envoi de commentaires et de les afficher.

Pour un article ou une page

La méthode simple consiste à insérer à l’endroit voulu la fonction PHP « comments_template() ». Celle-ci affichera les commentaires associés à cet article ou page, s’il y en a et proposera le formulaire pour l’envoi de commentaire si cela est permis pour cet élément.

Dans la méthode plus compliquée mais plus personnalisable, on crée une page PHP nommée « comments.php » et on y écrit le code pour l’affichage et l’envoi. Dans ce cas il est judicieux de consulter les pages de ce nom dans des thèmes existants.

L’ensemble des commentaires ou les derniers

Il peut être intéressant de faire apparaitre les derniers commentaires envoyés quel que soit l’article ou la page auquel il se rapporte.

Si le thème à prévu les blocs dynamiques, on trouvera dans « Apparence » / « Widgets », le widget « Commentaires récents » et il sera simple de l’insérer dans une barre latérale ou le footer.

Sinon la fonction « get_comments() » donne une liste de commentaire que l’on peut définir par son paramètre. Par exemple: 

 foreach(get_comments(['number'=>'10']) as $comment) : ?>
  <div class="commentaire">
    <p>
      De : "<i><?=$comment->comment_author ?></i>"
      le : <?=$comment->comment_date ?>
    </p>
    <cite><?=$comment->comment_content ?></cite>
  </div>
 <?php endforeach;?>

Plus de détails sur cette fonction :
https://codex.wordpress.org/Function_Reference/get_comments

Utilisation des champs personnalisés

Lors de la rédaction d’articles ou de pages, on trouve sous la zone d’édition une partie « Champs personnalisés ». Ils sont formés d’un nom (index) associé à une valeur, certains noms existent déjà, il est possible d’en ajouter par le lien « Saisissez-en un nouveau ».

Leur utilisation dans le thème se fait :

  • par la fonction « the_meta() » qui affiche directement la liste de ceux qui ne commencent pas par un souligné et qui appartiennent à la page en cours ;
  • par la fonction « get_post_meta($id) » qui renvoie un tableau associatif des champs liés à la page d’ID « $id », un second paramètre optionnel indique le nom du champ à récupérer, en son absence tous les champs correspondants à l’ID seront renvoyés.
    Cette dernière est plus utile si l’on veut utiliser ces champs pour personnaliser la page.

En savoir plus :

« the_meta() » https://codex.wordpress.org/Function_Reference/the_meta

« get_post_meta() » (en français) https://codex.wordpress.org/fr:Fonction_get_post_meta