Personnaliser la barre de menu de WordPress

Laisser un commentaire

Lorsqu'un utilisateur s'est identifié, une barre de menu apparait en haut de son écran, comme le montre la capture d'écran ci-dessous :

Barre menu de WordPress
Barre menu de WordPress pour un utilisateur identifié.

Comme on le voit, il y a un menu à 3 options :

  • TEST TEST (nom de l'utilisateur) donne accès à sa page de profil
  • Modifier le profil donne aussi accès à sa page de profil
  • Se déconnecter

L'accès à le page de profil de l'utilisateur est redondante. Mais ce n'est pas le seul inconvénient : la page de profil va permettre d'accéder au Tableau de bord.

Page de profil d'un utilisateur
Page de profil d'un utilisateur. Sur la gauche, un lien permet d'accéder au Tableau de bord.
Tableau de bord
Tableau de bord pour un utilisateur identifié.

Ces accès sont à la fois inutiles et déroutants. Il serait préférable de permettre la modification du profil en utilisant une page personnalisée, par exemple la page "Mettre à jour son profil" ayant pour adresse https://monsite.fr/profil .

La modification proposée va le permettre et on obtiendra la barre de menu ci-dessous :

Barre de menu modifiée
Barre de menu modifiée

Ceci est possible en personnalisant le thème utilisé.

On va, dans le thème customisé, ouvrir le fichier functions.php et on ajoute les lignes suivantes :

add_action( 'admin_bar_menu', 'modify_admin_bar' );

function modify_admin_bar( $wp_admin_bar ){
  $user_info = $wp_admin_bar->get_node('user-info');
  // supprime l'option TEST TEST inutile
  if ($user_info) {
    $wp_admin_bar->remove_node('user-info');
  }
  // récupère l'appel de la page Modifier le profil
  $edit_profile = $wp_admin_bar->get_node('edit-profile');
  if ($edit_profile) {
    // remplace cet appel par la nouvelle page
    $wp_admin_bar->remove_node('edit-profile');
    $wp_admin_bar->add_menu([
        'id' => $edit_profile->id, 
        'title' => $edit_profile->title, 
        'parent' => $edit_profile->parent, 
        'href' => 'https://monsite.fr/profil', 
        'group' => $edit_profile->group, 
        'meta' => $edit_profile->meta]);
  }
  // récupère l'élément "Bonjour TEST TEST"
  $my_account = $wp_admin_bar->get_node('my-account');
  if ($my_account) {
   // remplace cet élément par le même sans lien
    $wp_admin_bar->remove_node('my-account');
    $wp_admin_bar->add_menu([
        'id' => $my_account->id, 
        'title' => $my_account->title, 
        'parent' => $my_account->parent, 
        'href' => '',
        'group' => $my_account->group, 
        'meta' => $my_account->meta]);
  }
}

Photos en base de données

Type de champs à utiliser

On devra disposer au minimum du type de photo : JPEG, GIF, PNG, BMP ... et du champ contenant les données binaires de la photo.

Dans une base MySql, pour les données binaire, on dispose des types suivants :

  • tinyblob : 255 octets
  • blob : 64 Ko
  • mediumblob : 16 Mo
  • longblob : 4 Go

Création de la table

CREATE TABLE `photos` (
    `id` int NOT NULL,
    `phototype` varchar(25) NOT NULL DEFAULT 'JPEG',
    `photodata` blob NOT NULL
);
ALTER TABLE `photos`
  ADD PRIMARY KEY (`id`);

Afin de lier la photo à une fiche d'un individu, d'un objet ou d'un paysage ... contenue dans une table datas, on aura intérêt à déclarer une foreign key

ALTER TABLE `datas`
  ADD CONSTRAINT `photos_ibfk_1` FOREIGN KEY (`id`) REFERENCES `datas` (`id`) ON DELETE CASCADE ON UPDATE CASCADE;

Formulaire d'envoi d'une photo

Le formulaire doit être celui d'un envoi de fichier :

<form name="formphoto" enctype="multipart/form-data" method="post">
    <input name="id" type="hidden" value="">
    <label>Choisissez le fichier image (JPEG, GIF ou PNG)
    <input name="filephoto" type="file"></label>
    <input name="submit" type="submit" value="Envoyer la photo">
</form>

Réception coté serveur

Ne pas oublier que les variables se récupèreront dans la variable globale $__POST sauf le fichier photo qui sera dans la variable globale $__FILES.

$ret =is_uploaded_file($__FILES['filephoto']['tmp_name'];
if (!$ret) {
    throw new Exception('Problème de transfert.');
}
$filesize = $__FILES['filephoto']['size'];
if ($filesize > SIZE_MAX) {
    throw new Exception('Fichier photo trop gros');
}
$phototype = $__FILES['filephoto']['type'];
$photodata = file_get_contents($__FILES['filephoto']['tmp_name']);
$id = $__POST['id'];
// si on travaille en https, il faut ajouter le context dans file_get_contents()
$photodata = addslashes($photodata); // indispensable pour enregistrer dans MySql
// procédure classique d'enregistrement des données $id, $phototype, $photodata

Affichage de la photo dans une page

Comme il n'y a pas de fichier, on doit envoyer les données binaires de la photo, encodées base64. On pourra utiliser la fonction suivante :

function base64_encode_image($imgdata, $imgtype) {
    return 'data:image/' . $imgtype .';base64,' . stripslashes($imgdata);
}

et on affectera ce résultat à la propriété src de la balise <img> comme ceci :

<img src="<?= base64_encode_image($photodata, $phototype);?>">