Archives de catégorie : How to

Personnaliser la barre de menu de WordPress

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

CODES ASCII ET CODES CLAVIER

Mettre le clavier en mode Ver num. Le symbole s'obtient en tapant Alt + code*.

CodeSymbolecodesymbolecodesymbolecodesymbole
32Espace64@96`0128Ç  €
33!65A97a0129ü  
34"66B98b0130é  ‚
35#67C99c0131â  ƒ
36$68D100d0132ä  „
37%69E101e0133à  …
38&70F102f0134å  †
39'71G103g0135å  ‡
40(72H104h0136ç  ˆ
41)73I105i0137ê  ‰
42*74J106j0138ë  Š
43+75K107k0139è  ‹
44,76L108l0140ï  Œ
45-77M109m0141î  
46.78N110n0142ì  Ž
47/79O111o0143Ä  
48080P112p0144Å  
49181Q113q0145É  ‘
50282R114r0146æ  ’
51383S115s0147Æ  “
52484T116t0148ô  ”
53585U117u0149ö  •
54686V118v0150û  –
55787W119w 0151ù  —
56888X120x0152ÿ  ˜
57989Y121y0153Ö  ™
58:90Z122z0154Ü  š
59;91[123{0155ø  ›
60<92\124|0156£  œ
61=93]125}0157Ø  
6294^126~ 0158×  ž
63?95_1270159ƒ  Ÿ
(*) De 32 à 127 on obtient le même résultat en tapant Alt + code ou Alt + 0## (code en 3 chiffres) ou Alt + 00## (code en 4 chiffres). À partir de 128 et jusqu'à 255 les résultats sont différents. Dans ces colonnes, le signe de gauche est obtenu en tapant le code (3 chiffres) et le signe de droite en le faisant précéder d'un zéro (0### - code en 4 chiffres).
codesymbolecodesymbolecodesymbolecodesymbole
0160á  esp.ins0192└  À0224Ó  à0256Ā
0161í  ¡0193┴  Á0225ß  á0257ā
0162ó  ¢0194┬  Â0226Ô  â0258Ă
0163ú  £0195├  Ã0227Ò  ã0259ă
0164ñ  ¤0196─  Ä0228õ  ä0260Ą
0165Ñ  ¥0197┼  Å0229Õ  å0261ą
0166ª  ¦0198ã  Æ0230µ  æ0262Ć
0167º  §0199à Ç0231þ  ç0263ć
0168¿  ¨0200╚  È0232Þ  è0264Ĉ
0169®  ©0201╔  É0233Ú  é0265ĉ
0170¬  ª0202╩  Ê0234Û  ê0266Ċ
0171½  «0203╦  Ë0235Ù  ë0267ċ
0172¼  ¬0204╠  Ì0236ý  Ő0268Č
0173¡  ­0205═  Í0237Ý  í0269č
0174«  ®0206╬  Î0238¯  î0270Ď
0175»  ¯0207¤  Ï0239´  ï0271ď
0176░  °0208ð  Ð0240­  ð0272Đ
0177▒  ±0209Р Ñ0241±  ñ0273đ
0178▓  ²0210Ê  Ò0242‗  ò0274Ē
0179│  ³0211Ë  Ó0243¾  ó0275ē
0180┤  ´0212È  Ô0244¶  Ô0276Ĕ
0181Á  µ0213ı  Õ0245§  õ0277ĕ
0182  ¶0214Í  Ö0246÷  ö0278Ė
0183À  ·0215Π ×0247¸  ÷0279ė
0184©  ¸0216Ï  Ø0248°ø0280Ę
0185╣  ¹0217┘  Ù0249¨  Ù0281ę  ?
0186║  º0218┌  Ú0250·  ú0282Ě  ?
0187╗  »0219█  Û0251¹  û0283ě
0188╝  ¼0220▄  Ü0252³ 0284Ĝ
0189¢  ½0221¦  Ý0253²  ý0285Ĝ
0190¥  ¾0222Þ0254■  þ0286Ğ
0191┐  ¿0223ß0255sp.in ÿ0287Ğ

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

ZF3 – Changer le module par défaut

Dans Zendframework3, dans l'exemple fourni (Skeleton Application), le nom du module par défaut est `Application`. Comment en changer ?

  1. Dans le fichier `/composer.json` remplacer `Appliciation` par le nom de votre module dans les sections `autoload` et `autoload-dev`, puis lancer `composer update` pour mettre à jour les fichiers `/vendor/composer/autoload_...`
  2. Dans le fichier `/config/modules.config.php` remplacer `Application` par le nom de votre module. Ne pas oublier de laisser dans la liste des modules à charger, avant vos modules, le module `Zend\Router` qui sera nécessaire.
  3. Dans le dossier de votre module, écrire le fichier `config/module.config.php` sur le modèle de `application/config/module.config.php` en remplaçant `application` par le nom de votre module (en particulier dans le tableau `template_map`).
  4. Dans votre module par défaut, vous devez définir les dossiers `view/error` et `view/layout`. Ces dossiers doivent contenir respectivement les fichiers
    • `index.phtml` et `404.phtml`
    • `layout.phtml`

Windows 10 et la couleur sur la console de commande

console-couleur-texte-fondDans l'invite de commande de Windows 10, la documentation précise comment modifier la couleur du texte ou de l'arrière plan.

Mais comment interpréter la couleur adressée par séquences ANSI lors de l'exécution de certaines commandes comme par exemple :

 

php composer.phar self-update
console-couleur-exemple

Une solution consiste à utiliser l'utilitaire ansicon que l'on peut trouver avec sa documentation à l'adresse https://github.com/adoxa/ansicon

Un lien permet d'accéder au téléchargement du binaire (http://adoxa.altervista.org/ansicon/)