Catégorie : Uncategorized

Plugin pour ajouter Google tag manager

<?php
/**
 * Plugin Name: NG1 Google Tag Manager
 * Plugin URI: https://www.example.com/
 * Description: Un plugin pour insérer Google Tag Manager dans votre site WordPress.
 * Version: 1.0
 * Author: GEHIN Nicolas
 * Author URI: https://www.example.com/
 */

class Ng1GoogleTagManager {
    // Identifiant Google Tag Manager
    private $gtm_id;

    // Constructeur de la classe
    public function __construct($gtm_id) {
        $this->gtm_id = $gtm_id;

        // Action pour ajouter le code dans le header
        add_action('wp_head', array($this, 'insert_google_tag_manager'));

        // Action pour ajouter le code après la balise d'ouverture du body
        add_action('wp_body_open', array($this, 'insert_google_tag_manager_body'));
    }

    // Fonction pour ajouter le code Google Tag Manager dans le header
    public function insert_google_tag_manager() {
        ?>
        <!-- Début du code Google Tag Manager -->
        <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
        new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
        j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
        'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
        })(window,document,'script','dataLayer','<?php echo $this->gtm_id; ?>');</script>
        <!-- Fin du code Google Tag Manager -->
        <?php
    }

    // Fonction pour ajouter le code Google Tag Manager après la balise d'ouverture du body
    public function insert_google_tag_manager_body() {
        ?>
        <!-- Google Tag Manager (noscript) -->
        <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=<?php echo $this->gtm_id; ?>"
        height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
        <!-- End Google Tag Manager (noscript) -->
        <?php
    }
}

// Identifiant Google Tag Manager
$gtm_id = 'VOTRE_ID_GTM';

// Instanciation de la classe Ng1GoogleTagManager avec l'identifiant Google Tag Manager
new Ng1GoogleTagManager($gtm_id);

5 juin 2023

Renommer les images d’un dossier avec ses données exifs

Voici un AppleScript qui peut être utilisé dans Automator pour renommer tous les fichiers d’un dossier de photos en utilisant les données EXIF sélectionnées à partir d’une liste déroulante:

-- Set the property to the chosen EXIF data
set theProperty to choose from list {"Date Time Original", "Make", "Model"} with prompt "Choose the EXIF data to use for renaming:"

-- Check if a property was chosen
if theProperty is not false then
    -- Set the property to the first item in the list (since choose from list returns a list)
    set theProperty to item 1 of theProperty
    
    -- Set the folder path
    set folderPath to (choose folder with prompt "Choose the folder containing the photos:") as text
    
    -- Get the list of files in the folder
    tell application "Finder"
        set fileList to every file of folder folderPath
    end tell
    
    -- Loop through each file in the list
    repeat with aFile in fileList
        -- Get the file path
        set filePath to aFile as text
        
        -- Get the EXIF data for the chosen property
        set exifData to do shell script "mdls -raw -name kMDItem" & theProperty & " " & quoted form of POSIX path of filePath
        
        -- Check if EXIF data was found
        if exifData is not "" then
            -- Rename the file using the EXIF data
            tell application "Finder"
                set name of aFile to exifData & "." & name extension of aFile
            end tell
        end if
    end repeat
end if

Ce script vous permet de choisir les données EXIF à utiliser pour renommer les fichiers à partir d’une liste déroulante. Vous pouvez ajouter ou supprimer des options de la liste en modifiant la première ligne du script. Est-ce que cela répond à vos besoins?

10 mai 2023

Automator Ouvrir dans le Terminal
Script utilisant le finder pour obtenir le chemin d’accès POSIX du dossier actuellement ouvert dans la fenêtre active. Il utilise ensuite l’application Terminal pour ouvrir une nouvelle fenêtre de terminal et exécuter la commande cd pour se déplacer vers ce chemin d’accès.
```
tell application "Finder"
	set currentPath to quoted form of (POSIX path of (target of front window as alias))
end tell

tell application "Terminal"
	do script "cd " & currentPath
	activate
end tell
```
10 mai 2023

Automator Suppression de fichier

on run {input, parameters}
    repeat with theItem in input
        try
            tell application "Finder" to delete theItem
        end try
    end repeat
    return input
end run

25 avril 2023

AUTOMATOR nouveau fichier

on run {input, parameters}
    tell application "Finder"
        set currentFolder to container of item 1 of input as alias
        set newFileName to text returned of (display dialog "Nom du nouveau fichier :" default answer "" buttons {"Annuler", "Créer"} default button 2)
        if length of newFileName > 0 then
            set newFile to make new file at currentFolder with properties {name:newFileName}
        end if
    end tell
    return input
end run

24 avril 2023

JQuery Sticky

          $(document).ready(function() {
            // Sélectionne l'élément avec la classe "sticky-element" 
            var stickyElement = $('.sticky-element');
            // Récupère la distance entre l'élément sélectionné et le haut de la page
            var stickyTop = stickyElement.parent().offset().top;
            console.log('espace par rapport au haut de la page : '+stickyTop);
            console.log('height :' +stickyElement.outerHeight());
            console.log('parent: ' +stickyElement.parent().attr('class')+ 'height :'+stickyElement.parent().height());
        
            // Calcule la distance entre le bas de l'élément sélectionné et le bas de son parent, en soustrayant 100 pixels 
            var stickyBottom = stickyElement.parent().height() - stickyTop - stickyElement.outerHeight() - 100;
            // Ajoute un événement de défilement à l'objet "window"
            $(window).scroll(function() {
              var scrollTop = $(this).scrollTop();
                // Si la position de défilement est comprise entre la distance au haut de la page de l'élément sélectionné 
                // et la distance au bas de la page de l'élément sélectionné, 
                // ajoute la classe "sticky" à l'élément
                if (scrollTop > stickyTop ) {
                  stickyElement.addClass('sticky');
                }
                // Si la position de défilement est supérieure à la distance au bas de la page de l'élément sélectionné, ajoute la classe "stickybottom" et retire la classe "sticky" de l'élément
                // else if (scrollTop > stickyBottom) {
                //   stickyElement.addClass('stickybottom');
                //   stickyElement.removeClass('sticky');
                // }
    
                // Si la position de défilement est inférieure à la distance au haut de la page de l'élément sélectionné, retire les classes "sticky" et "stickybottom" de l'élément
                else {
                  stickyElement.removeClass('sticky');
                  stickyElement.removeClass('stickybottom');
                }
            });
          });

20 avril 2023

jQuery Toggle Element

Ce code définit une fonction jQuery qui ajoute ou retire la classe ‘active’ d ‘éléments cliqués et ajoute ou retire la classe active d’autres éléments en fonction des valeurs de l ‘attribut data-tag des deux types d’éléments.

(function($){
  $(document).ready(function() {
    $('body').on('click','.selectTagJs', function() {
      $(this).toggleClass('active');
      var activeTags = $('.selectTagJs.active').map(function() {
        return $(this).data('tag');
      }).get();
      if(activeTags.length > 0) {
        $('.tagItemJs').each(function() {
          var tags = $(this).data('tag').split(',');
          if(tags.some(function(tag) { return activeTags.includes(tag); })) {
            $(this).addClass('active');
          } else {
            $(this).removeClass('active');
          }
        });
      } else {
        $('.tagItemJs').addClass('active');
      }
    });
  });
})(jQuery);

19 avril 2023

Theme.json

A quoi sert le fichier theme .json dans WordPress

Le fichier theme.json de WordPress permet de définir un certain nombre de paramètres pour personnaliser un thème WordPress. Voici quelques exemples :

Nom et description : vous pouvez définir le nom et la description de votre thème.

{ "name": "Nom de votre thème", "description": "Description de votre thème" }

Version : vous pouvez définir la version de votre thème.

jsonCopy code<code>{ "version": "1.0.0" }</code>

Auteur : vous pouvez définir le nom et l’URL de l’auteur de votre thème.

jsonCopy code<code>{ "author": { "name": "Votre nom", "url": "URL de votre site web"} }</code>

Couleurs : vous pouvez définir les couleurs de votre thème, y compris la couleur d’arrière-plan, la couleur du texte et la couleur des liens.

jsonCopy code<code>{ "color": { "background": "#ffffff", "text": "#333333", "link":"#0073aa" } }</code>

Options de blocs : vous pouvez définir les paramètres de blocs pour l’éditeur de blocs de WordPress. Par exemple, vous pouvez définir les styles de blocs par défaut, les polices, les tailles de texte et les couleurs.

jsonCopy code<code>{ "blocks": { "defaultStyles": { "color": "#333333","backgroundColor": "#f3f3f3", "fontSize": "16px", "padding":"20px" }, "defaultFont": { "size": "16px", "family": "Arial, sans-serif" } } }</code>

Options de personnalisation : vous pouvez définir les options de personnalisation pour le panneau de personnalisation de votre thème, par exemple, les options de logo, de bannière, de mise en page, etc.

jsonCopy code<code>{ "customizations": { "logo": { "default": "", "type": "image","label": "Logo", "description": "Ajoutez un logo personnalisé pour votre site web." }, "banner": { "default": "", "type": "image","label": "Bannière", "description": "Ajoutez une bannière personnalisée pour votre site web." }, "layout": { "default":"content-sidebar", "type": "radio", "label": "Mise en page","description": "Choisissez une mise en page pour votre site web.","choices": { "content-sidebar": "Contenu avec barre latérale","full-width": "Plein écran" } } } }</code>

Police de caractères : vous pouvez définir les polices de caractères pour les différents éléments de votre thème, tels que le corps du texte, les titres, les sous-titres, etc.

jsonCopy code<code>{ "typography": { "body": { "family": "Open Sans", "size": "16px","weight": 400 }, "heading": { "family": "Montserrat", "size":"36px", "weight": 700 }, "subheading": { "family": "Montserrat","size": "24px", "weight": 600 } } }</code>

Options de navigation : vous pouvez définir les options de navigation pour votre thème, telles que le menu principal et le menu mobile.

jsonCopy code<code>{ "navigation": { "mainMenu": { "label": "Menu principal","items": [ { "title": "Accueil", "url": "/" }, { "title": "À propos", "url": "/about" }, { "title": "Blog", "url": the  "/blog" }, {"title": "Contact", "url": "/contact" } ] }, "mobileMenu": {"label": "Menu mobile", "items": [ { "title": "Accueil", "url":"/" }, { "title": "À propos", "url": "/about" }, { "title":"Blog", "url": "/blog" }, { "title": "Contact", "url": "/contact"} ] } } }</code>

Fonctions supplémentaires : vous pouvez ajouter des fonctions supplémentaires à votre thème, telles que la prise en charge des miniatures, des commentaires, des formulaires de contact, etc.

jsonCopy code<code>{ "supports": { "post-thumbnails": true, "custom-logo": true,"comments": true, "contact-form-7": true } }</code>

Options d’affichage : vous pouvez définir les options d’affichage pour votre thème, telles que le nombre d’articles affichés sur une page, la pagination, etc.

jsonCopy code<code>{ "display": { "postsPerPage": 10, "pagination": { "prev":"Précédent", "next": "Suivant" } } }</code>

Ce ne sont que quelques exemples de paramètres que vous pouvez définir dans le fichier theme.json. En général, les possibilités de personnalisation de votre thème WordPress sont presque illimitées en utilisant ce fichier.

Utiliser plusieurs fichiers de configuration pour votre thème WordPress pour rendre la configuration plus lisible et exportable dans d’autres projets

Il est possible d’utiliser plusieurs fichiers pour rendre la configuration de votre thème WordPress plus lisible. Vous pouvez organiser les différents paramètres dans différents fichiers selon leur type ou leur fonction.

Par exemple, vous pouvez créer un fichier colors.json pour définir les couleurs de votre thème, un fichier typography.json pour définir les polices de caractères, un fichier navigation.json pour définir les options de navigation, etc. Vous pouvez ensuite inclure ces fichiers dans votre fichier theme.json à l’aide de la propriété "extends" :

jsonCopy code<code>{ "extends": [ "colors.json", "typography.json", "navigation.json"] }</code>

Ainsi, lorsque vous modifiez un paramètre dans l’un des fichiers inclus, cela se répercutera automatiquement sur votre fichier theme.json principal.

Cette méthode d’inclusion de fichiers vous permet de diviser votre fichier de configuration en parties plus petites et plus gérables, ce qui facilite

la lecture, la compréhension et la maintenance de votre thème WordPress.

Créer un block cover full height avec un titre

{
  "version": 1,
  "settings": {
    "cover": {
      "allowedBlocks": ["core/cover"],
      "defaultBlockName": "core/cover",
      "styles": [
        {
          "name": "full-width",
          "label": "Full Width",
          "isDefault": true
        }
      ]
    }
  },
  "blockStyles": {
    "core/cover": {
      "full-width": {
        "name": "full-width",
        "label": "Full Width",
        "isDefault": true
      }
    }
  },
  "blockSupports": {
    "core/cover": {
      "align": true,
      "anchor": true,
      "className": true,
      "customClassName": true,
      "html": false,
      "inserter": true,
      "layout": true,
      "mode": true,
      "multiple": true,
      "reusable": true,
      "typography": true
    }
  },
  "blocks": {
    "core/cover": {
      "attributes": {
        "url": {
          "type": "string",
          "source": "attribute",
          "selector": "img",
          "attribute": "src"
        },
        "id": {
          "type": "number",
          "source": "attribute",
          "selector": "img",
          "attribute": "data-id"
        },
        "height": {
          "type": "string",
          "default": "100vh"
        },
        "align": {
          "type": "string"
        },
        "className": {
          "type": "string"
        }
      },
      "supports": {
        "align": ["full"],
        "anchor": true,
        "html": false
      },
      "usesContext": ["cover"],
      "title": "Cover",
      "description": "Create a full-width cover with a title.",
      "category": "common",
      "icon": "cover-image",
      "keywords": ["image", "cover"],
      "styles": [
        {
          "name": "default",
          "label": "Default",
          "isDefault": true
        }
      ],
      "example": {
        "attributes": {
          "url": "https://example.com/wp-content/uploads/2023/04/cover-image.jpg"
        },
        "innerBlocks": [
          {
            "name": "core/heading",
            "attributes": {
              "content": "Post Title"
            }
          }
        ]
      }
    }
  }
}

13 avril 2023

Modifier la valeur d’une ligne d’un tableau si l’une de ses valeurs match avec la regex choisie

/**
 * Met à jour la valeur et l'URL d'un élément dans un tableau multidimensionnel
 * en utilisant une expression régulière pour la recherche.
 * 
 * @param array $array Le tableau multidimensionnel à parcourir
 * @param string $searchTerm L'expression régulière à utiliser pour la recherche
 * @param string $newValue La nouvelle valeur à assigner à l'index 0
 * @param string $newUrl La nouvelle URL à assigner à l'index 1
 * @param int $index L'index de l'élément à vérifier dans les sous-tableaux
 * @return array Le tableau mis à jour
 */
function ng1UpdateArrayValueRegex($array, $searchRegex, $newValue, $newUrl, $index = 0) {

    foreach ($array as $key => $subarray) {
        // Vérifie si le sous-tableau actuel contient des sous-tableaux
        if (is_array($subarray)) {
            // Parcours tous les éléments du sous-tableau actuel pour trouver une correspondance avec l'expression régulière
            $matched = false;
            foreach ($subarray as $subkey => $value) {
                // Vérifie si l'élément à l'index $index correspond à l'expression régulière $searchRegex
                if ($subkey == $index && preg_match($searchRegex, $value)) {
                    $matched = true;
                    break;
                }
            }
            // Si une correspondance est trouvée, met à jour les valeurs pour l'index 0 et l'index 1
            if ($matched) {
                $array[$key][0] = $newValue;
                $array[$key][1] = $newUrl;
                // Sort de la boucle pour éviter de mettre à jour plusieurs occurrences
                break;
            } else {
                // Si le sous-tableau actuel ne contient pas la valeur correspondant à l'expression régulière, appelle la fonction récursivement
                $array[$key] = ng1UpdateArrayValueRegex($subarray, $searchRegex, $newValue, $newUrl, $index);
            }
        }
    }
    // Retourne le tableau mis à jour
    return $array;
}

12 avril 2023

Modifier une ligne de tableau en fonction de l’une de ses valeurs

Mettre à jour la première occurrence d’un sous-tableau contenant le terme de recherche spécifié.

<?php 
/**
 * Cette fonction parcourt récursivement un tableau multidimensionnel et met à jour
 * la première occurrence d'un sous-tableau contenant le terme de recherche spécifié.
 *
 * @param array $array     Le tableau à parcourir
 * @param string $newValue La nouvelle valeur pour l'index 0 du sous-tableau
 * @param string $newUrl   La nouvelle valeur pour l'index 1 du sous-tableau
 * @param string $searchTerm Le terme à rechercher dans le tableau
 *
 * @return array           Le tableau mis à jour
 */
function ng1UpdateArrayValue($array, $searchTerm, $newValue, $newUrl,$index =0) {
    foreach ($array as $key => $subarray) {
        // Vérifie si le sous-tableau actuel contient le terme de recherche spécifié
        if ($subarray[$index] === $searchTerm) {
            // Si c'est le cas, met à jour les valeurs pour l'index 0 et l'index 1
            $array[$key][0] = $newValue;
            $array[$key][1] = $newUrl;
            // Sort de la boucle pour éviter de mettre à jour plusieurs occurrences
            break;
        } elseif (is_array($subarray)) {
            // Si le sous-tableau actuel n'est pas une feuille, appelle la fonction récursivement
            $array[$key] = ng1UpdateArrayValue($subarray, $newValue, $newUrl, $searchTerm,$index);
        }
    }
    // Retourne le tableau mis à jour
    return $array;
}

12 avril 2023