• créer un nouveau post:
  • –> ne pas oublier de mettre comme template le “elementor full width” sinon il y aura une marge non voulue
  • –> ne pas oublier de convertir le reusable block une fois importé pour ne pas le modifier (pour pouvoir modifier seulement le nouveau block)
  • –> mettre les photos en format 4/3 (1000px largeur sur 750 hauteur) car les posts sont scrollables et donc une photo en format 16/9 sera plus haute que le format de l’ordi ou du tel, la mettre en 4/3 permet de mieux visualiser et avoir un meilleur scroll
  • —> (featured image sur la page d’accueil)Pour faire le dessin du hover: convertir l’image à la bonne taille (1300/1300 pixels 300pp permet d’avoir tout le temps approximativement la meme taille de traits pour le dessin) : les traits se font a 8 px en noir et les ombres ont ce gris :a5a5a5
  • le hover effect est celui rond (car contrairement au square effect, le rond n’a pas d’effet déguelasse), puisque la taille du dessin est un carré (1300×1300) il faut dessiner un cercle à l’intérieur du canvas pour pouvoir situer le dessin sans qu’il ne dépasse du rond créé par l’hover
  • aussi, il ne faut pas que le dessin déborde de l’image car elles seront superposée. Ainsi quand je dessine, il faut selectionner les pixels de l’image cropée (crtl click sur le calque) pour restreindre la zone de selection à celle de l’image ce qui m’empechera de déborder
  • créer un nouveau produit :
  • –> taille de l’image pour qu’elle s’affiche aux bonnes dimensions sur la page d’acceuil du shop (=”product image”): 491px 656px (affiché à 262px x 350px sur ordi)
  • !attention! cette photo de page d’acceuil sera la premiere affichée sur la page produit dans la galerie photo de l’article, ce qui veut dire que si c’est une photo d’un autre format il vaut mieux essayer d’en mettre une autre/de la redimensionner/ de laisser son format tel quel mais de la centrer pour quelle soit bien positionnée lorsqu’elle va etre redimensionnée automatiquement sur la page d’acceuil du shop (elle gardera sa taille normale sur la page produit sur telephone)
  • essayer de garder un format similaire de photo pour pas que la lecture soit desagreable sur telephone, sur ordi on peut les redimensionner par la suite sur la page produit meme pour avoir des photos aux formats differents et donc une lecture plus dynamique
  • –> il faut poster les photos en deux fois: une premiere fois dans le “product short description” (= photos sur la version ordi) et une seconde fois dans “product gallery” (= photos de la version tel, rappel: la premiere photo de la galerie est la “product image” celle affichée en page d’acceuil)
  • typo:
  • body font: source code pro regular, 16px – sert pour texte des posts
  • H1: source code pro bold, 110 PX – sert pour les titres de post en gros sur la version ordi
  • H2: source code pro regular, 13px – sert pour textes page accueil (17px sur , et pour sous titres en italique inversé des posts (voir additional css pour l’italique inversé)
  • H3: source code pro semi bold, 20 px – sert pour les titres du dropdown button des posts sur la version telephone
  • plugins et modifs:
  • “editorskit” pour avoir plus d’option dans le bloc text sur l’editeur de wordpress (gutenberg) permet d’aligner le texte notamment
  • “file manager“: permet de naviguer dans les fichiers du site, permet notamment la case de dessin (détaillée en dessous”
  • “hover effect pro” (13euros) utilisé pour le portfolio afin de changer les petits dessins en des images, fonction hover très pratique
  • site du plugin : https://wordpress.org/plugins/image-hover-effects/
  • tuto: https://vimeo.com/134468076

“conditional menus“ très bien pour les sous menus (catégories) compatible avec tout car autres plugins ou solutions ne sont pas compatible avec astra, non block themes, necessitent elementor pro…

“elementor” et “elementor pro” avec ce crack https://www.youtube.com/watch?v=ImBD9_xYVkQ https://github.com/shineadshelp/elementor-pro-free-download-github

“custom fonts“ pratique car possible d’upload n’importe quelle typo (et pas seulement google fonts comparés aux autres plugins) mais compatible avec peu de choses donc contraignant(elementor, beavor theme builder, astra theme,…)

“woocommerce“

“shop lentor” permet de créer la page shop, regarder ce tuto pour comprendre https://www.youtube.com/watch?v=HgZ__E5qrEo&list=LL&index=1&t=95s

“variation swatches for woocommerce“ permet d’avoir des variations sur les pages produits ex: diff couleurs

“add code snippet” changer du php (me sert a cacher le msg “have been added to your cart”)

“funnelKit” permet d’avoir une cart page qui slide sur le coté

additional CSS

  • theme:

“astra pro cracked“, permet de custom l’archive/blog page (=sous catégories dans les menus, ex d’archive page: projects -> design) avec plusieurs colonnes (pas possible sans la version pro)

case de dessin :

–>faire un child theme (pour préserver le thème intact au cas ou) et annexer les modifs (enqueue les modifs dans un index.php) au theme parent, ceci est possible grace à un plugin file manager qui permet d’annexer et ajouter des fichiers à notre thème

–> ajouter un toggle bouton (dans le dossier astra-child puis dans le dossier js puis dans un fichier toggle-button.js), dans le fichier js définir la toggledrawingArea (et son css), la drawing fuctionality, les tool options (draw, erase, text) et le boutton send drawing(voir plus loin)

–> rajouter ces outils dans un functions.php et les enqueue si nécessaire

–> le send drawing va capturer la drawingArea (canvas) en traitant l’image via le fichier process_image.php. Ce dernier va écrire l’image sur un fichier temp_images (à créer et donner à l’hébergeur la permissino d’écrire le fichier). Pour le code du process_image.php, il faut aller au plus simple car ca devient vite très compliqué (ne pas utiliser phpmailer, …), voici le code fonctionnel:

<?php

if (isset($_POST['image'])) {
    $data = $_POST['image'];
    $filename = 'drawing.png';
    $imagePath = dirname(__FILE__) . '/temp_images/' . $filename;

    file_put_contents($imagePath, base64_decode($data));

    $to = 'homatis2@gmail.com';
    $subject = 'New Drawing';
    $message = 'Find attached the drawing.';

    $boundary = md5(uniqid(time()));
    $headers = "From: webmaster@example.com\r\n";
    $headers .= "MIME-Version: 1.0\r\n";
    $headers .= "Content-Type: multipart/mixed; boundary=\"$boundary\"\r\n";
    $headers .= "This is a multi-part message in MIME format.\r\n";

    $message .= "--$boundary\r\n";
    $message .= "Content-Type: text/plain; charset=ISO-8859-1\r\n";
    $message .= "Content-Transfer-Encoding: 7bit\r\n\r\n";
    $message .= "Find attached the drawing.\r\n";

    $file = file_get_contents($imagePath);
    $message .= "--$boundary\r\n";
    $message .= "Content-Type: image/png; name=\"$filename\"\r\n";
    $message .= "Content-Transfer-Encoding: base64\r\n";
    $message .= "Content-Disposition: attachment; filename=\"$filename\"\r\n\r\n";
    $message .= chunk_split(base64_encode($file));

    mail($to, $subject, $message, $headers);

    // Supprimez l'image après l'envoi
    unlink($imagePath);

    echo "Email sent successfully!";
} else {
    echo "No image data received!";
}

?>
Scroll to Top