Intégration WordPress

WordPress offre plusieurs façons d'intégrer des minuteurs, depuis des approches simples basées sur des blocs jusqu'à l'insertion HTML personnalisée. Ce guide couvre toutes les méthodes pour les installations WordPress modernes et classiques.

Méthode 1 : Éditeur de blocs WordPress (Gutenberg)

Le WordPress moderne utilise l'éditeur de blocs (Gutenberg), qui fournit une interface visuelle pour construire des pages et des articles.

Guide étape par étape

Étape 1 : Créer votre minuteur

1. Allez sur l'éditeur
2. Concevez et configurez votre minuteur
3. Copiez l'URL du minuteur depuis la section Renderer
4. Gardez-la à portée de main pour les prochaines étapes

Étape 2 : Créer le code iFrame

Construisez votre code d'intégration iFrame en utilisant votre URL de minuteur :

<iframe
  src="https://gettickr.app/r/#VOTRE-ID-MINUTEUR"
  width="100%"
  height="400"
  style="border: none; max-width: 1200px; margin: 0 auto; display: block;"
  title="Minuteur compte à rebours"
>
</iframe>

Étape 3 : Ajouter un bloc HTML personnalisé

1. Ouvrez la page ou l'article où vous voulez le minuteur
2. Cliquez sur le bouton "+" pour ajouter un nouveau bloc
3. Recherchez "HTML personnalisé"
4. Sélectionnez le bloc "HTML personnalisé"

Étape 4 : Coller votre code

1. Cliquez à l'intérieur du bloc HTML personnalisé
2. Collez votre code iFrame complet
3. Le bloc affiche "HTML personnalisé" pendant l'édition
4. Cliquez sur "Aperçu" pour voir le minuteur en action

Étape 5 : Publier

1. Cliquez sur "Mettre à jour" ou "Publier" en haut à droite
2. Visualisez votre page pour vérifier que le minuteur apparaît correctement
3. Testez sur des appareils mobiles ou en utilisant l'aperçu responsive

Conseils pour l'éditeur de blocs

Méthode 2 : Éditeur classique

Si votre site WordPress utilise l'éditeur classique, vous pouvez ajouter des minuteurs via l'éditeur HTML.

Guide étape par étape

1. Ouvrir votre page/article dans l'éditeur classique
2. Cliquer sur l'onglet "Texte" (bascule du mode Visuel au mode HTML)
3. Trouver l'emplacement où vous voulez le minuteur dans votre HTML
4. Coller votre code iFrame à cet emplacement
5. Basculer vers l'onglet "Visuel" pour prévisualiser (optionnel)
6. Mettre à jour/publier votre page

Exemple de code pour éditeur classique

<h2>Compte à rebours d'événement</h2>

<iframe
  src="https://gettickr.app/r/#VOTRE-ID-MINUTEUR"
  width="800"
  height="400"
  frameborder="0"
  style="border: none; display: block; margin: 20px auto;"
>
</iframe>

<p>Rejoignez-nous pour l'événement de l'année !</p>

Méthode 3 : Plugins de constructeur de pages

De nombreux sites WordPress utilisent des constructeurs de pages pour la conception visuelle. Voici comment ajouter des minuteurs aux constructeurs de pages populaires :

Elementor

Astuce Elementor Pro :

Utilisez le "Positionnement personnalisé" d'Elementor pour superposer des minuteurs sur des images ou des sections
pour des conceptions hero créatives !

Constructeur Divi

Constructeur de pages WPBakery

Beaver Builder

Comparaison des constructeurs de pages

Méthode 4 : Zones de widgets (barre latérale/pied de page)

Pour les minuteurs qui apparaissent sur plusieurs pages (barres latérales, pieds de page, en-têtes) :

Guide étape par étape

1. Aller sur Tableau de bord → Apparence → Widgets
2. Trouver la zone de widget cible (ex. "Barre latérale", "Pied de page")
3. Cliquer sur "+" pour ajouter un bloc ou "Ajouter un widget"
4. Rechercher "HTML personnalisé"
5. Ajouter le widget HTML personnalisé
6. Coller votre code iFrame
7. Ajouter un titre (optionnel, ex. "Compte à rebours d'événement")
8. Cliquer sur "Mettre à jour" ou "Enregistrer"

Recommandations de dimensionnement des widgets

Méthode 5 : Shortcodes pour la réutilisabilité

Créez un shortcode personnalisé pour utiliser facilement le même minuteur sur plusieurs pages.

Création d'un shortcode

Ajouter au functions.php de votre thème ou créer un plugin personnalisé :

// Ajouter à functions.php
function tickr_countdown_shortcode($atts) {
    $atts = shortcode_atts(array(
        'id' => '',
        'width' => '100%',
        'height' => '400',
    ), $atts);

    if (empty($atts['id'])) {
        return '<p>Veuillez fournir un ID de minuteur</p>';
    }

    $output = '<iframe ';
    $output .= 'src="https://gettickr.app/r/#' . esc_attr($atts['id']) . '" ';
    $output .= 'width="' . esc_attr($atts['width']) . '" ';
    $output .= 'height="' . esc_attr($atts['height']) . '" ';
    $output .= 'style="border: none; max-width: 100%;" ';
    $output .= 'title="Minuteur compte à rebours">';
    $output .= '</iframe>';

    return $output;
}
add_shortcode('tickr', 'tickr_countdown_shortcode');

Utilisation de votre shortcode

Une fois ajouté, utilisez le shortcode dans n'importe quelle page, article ou widget :

Utilisation de base :

[tickr id="VOTRE-ID-MINUTEUR"]

Avec dimensions personnalisées :

[tickr id="VOTRE-ID-MINUTEUR" width="800" height="500"]

Minuteurs multiples :

<h3>Événement 1</h3>
[tickr id="minuteur-1"]

<h3>Événement 2</h3>
[tickr id="minuteur-2"]

Avantages des shortcodes

Compatibilité des plugins

Problèmes courants de plugins

Autoriser les iFrames dans les plugins de sécurité

Wordfence :

1. Aller sur Wordfence → Pare-feu → Toutes les options du pare-feu
2. Ajouter gettickr.app aux domaines en liste blanche
3. Enregistrer les paramètres

iThemes Security :

1. Aller sur Security → Paramètres → Avancé
2. Désactiver "Filtrer les chaînes de requête suspectes dans l'URL" pour des pages spécifiques
3. Ou mettre en liste blanche gettickr.app

Dépannage de l'intégration WordPress

Le minuteur n'apparaît pas

Problèmes d'affichage

Problèmes mobiles

WordPress Multisite

Pour les installations WordPress Multisite :

Étapes pour l'administrateur réseau :

1. Admin réseau → Paramètres
2. Activer "HTML non filtré" pour les administrateurs de site (si nécessaire)
3. Les sites individuels peuvent alors ajouter des iFrames de minuteur normalement

Étapes suivantes

• Intégration iFrame - Documentation détaillée des iFrames
• Personnaliser le design du minuteur - Faire correspondre votre thème WordPress
• Intégration Shopify - WooCommerce est similaire à Shopify
• Contrôle à distance - Contrôler les minuteurs tout en gérant votre site WordPress