Comment créer des outils d’IA avec WordPress en 5 minutes !

Dans cet article, je vais vous montrer comment créer un outil d’IA avec WordPress comme celui-ci :

Et vous pouvez le tester en direct ici : générateur des titres Youtube

Pourquoi créer des outils en ligne ?

Voici quelques raisons pour lesquelles vous envisagez de créer et d’ajouter un outil en ligne à votre site Web :

1. Obtenez plus de trafic

• Engagement : ces outils vont permette aux utilisateurs à interagir davantage avec votre site Web et à y passer plus de temps.
• Avantages du référencement : ce type de contenu interactif peut améliorer le classement de votre site dans les moteurs de recherche, générant ainsi un trafic plus organique.
• Partageabilité : si votre outil apporte de la valeur, les utilisateurs sont plus susceptibles de le partager sur les réseaux sociaux, augmentant ainsi votre portée.

2. Créer des leads

• Segmentation : en comprenant comment les visiteurs utilisent votre outil, vous pouvez segmenter votre audience pour un marketing plus personnalisé.
• Instaurer la confiance : offrir un outil précieux gratuitement ou à titre d’essai peut favoriser la confiance et la fidélité, convertissant les visiteurs en clients ou abonnés à long terme.

3. Monétiser votre site internet

• Modèles d’abonnement : vous pouvez restreindre l’accès aux fonctionnalités premium et proposer des modèles d’abonnement à plusieurs niveaux pour différents besoins des utilisateurs. 
• Revenus publicitaires : si l’outil attire une large base d’utilisateurs, vous pouvez monétiser grâce à des publicités ciblées.
• Partenariats B2B : votre outil peut attirer des clients commerciaux intéressés par des solutions ou des collaborations en marque blanche.

Comprendre la structure des outils

La création d’outils d’IA sur WordPress implique 3 étapes principales. Vous trouverez ci-dessous une description détaillée de la façon de créer cet outil :

1. Créer une page wordpress

Commencez par créer une nouvelle page sur votre site WordPress hébergeant l’outil d’IA. Cette page sera l’interface utilisateur pour interagir avec l’outil.

2. Ajouter un code HTML

Ajoutez du code HTML pour créer la page d’outils. Ce sera le point de départ de la communication avec l’API OpenAI.

3. Implémentez une fonction wordpress

Vous ajouterez une fonction WordPress personnalisée qui reçoit les entrées de l’utilisateur du formulaire HTML et les envoie à l’API d’OpenAI. Cette fonction agit comme un pont entre votre site Web et OpenAI, permettant aux deux de communiquer.

4. Connectez-vous à l’API OpenIA

La fonction WordPress se connectera à l’API d’OpenAI pour générer du texte en fonction de l’invite de l’utilisateur.

Générez une clé API OpenAI 

Pour utiliser l’un des modèles d’OpenAI, vous devez d’abord obtenir une clé d’accès API. Voici comment procéder :

1. Accédez à la page API d’OpenAI et cliquez sur le bouton « Inscription ».
2. Vous serez invité à créer un compte. Vérifiez votre adresse e-mail pour terminer le processus d’inscription.
3. Une fois connecté, vous pouvez trouver vos clés API sous le tableau de bord du compte.

Étape 1 : Ajouter la fonction d’appel API

Dans cette étape, nous ajouterons la fonction PHP qui permettra à notre outil de communiquer avec l’API OpenAI. Pour cela, nous utiliserons le plugin WPCode dans WordPress.

Qu’est-ce-que le plugin WPCode ?

WPCode est un plugin WordPress qui fournit un moyen propre et simple d’exécuter des extraits de code PHP sur votre site. Cela supprime le besoin d’ajouter des extraits personnalisés au fichier function.php de votre thème .

Installation et Activation du plugin

1. Depuis votre tableau de bord WordPress, accédez à « Plugins > Ajouter un nouveau ».
2. Dans la barre de recherche, tapez ‘ WPCode ‘
3. Recherchez le plugin dans les résultats de recherche et cliquez sur « Installer maintenant », puis sur « Activer ».

Ajouter l’appel à l’API OpenIA

Une fois que vous avez activé le plugin, suivez ces étapes pour ajouter votre appel API :

1. Depuis votre tableau de bord WordPress, accédez à « Extraits de code > Ajouter un nouveau ».
2. Dans le champ « Titre », donnez un nom à votre nouvel extrait, par exemple « Appel API OpenAI ».
3. Définissez le type de code sur PHP
4. Dans la zone de texte « Code », vous saisirez votre code PHP. Vous trouverez ci-dessous un exemple de la façon dont vous pourriez structurer ce code :

function youtube_titres() {
    // Récupérer le sujet de la requête AJAX
    $prompt = $_POST['prompt'];

    // URL et clé de l'API OpenAI
    $api_url = 'https://api.openai.com/v1/chat/completions';
    $api_key = 'sk-xxx';  // Remplacer par votre clé d'API OpenAI

    // En-têtes pour l'API OpenAI
    $headers = [
        'Content-Type' => 'application/json',
        'Authorization' => 'Bearer ' . $api_key
    ];

    // Corps pour l'API OpenAI
    $body = [
        'model' => 'gpt-3.5-turbo',
        'messages' => [['role' => 'user', 'content' => $prompt]],
        'temperature' => 0.7
    ];

    // Arguments pour l'API HTTP de WordPress
    $args = [
        'method' => 'POST',
        'headers' => $headers,
        'body' => json_encode($body),
        'timeout' => 120
    ];

    // Envoyer la requête
    $response = wp_remote_request($api_url, $args);

    // Gérer la réponse
    if (is_wp_error($response)) {
        $error_message = $response->get_error_message();
        wp_send_json_error("Something went wrong: $error_message");
    } else {
        $body = wp_remote_retrieve_body($response);
        $data = json_decode($body, true);

        if (json_last_error() !== JSON_ERROR_NONE) {
            wp_send_json_error('Invalid JSON in API response');
        } elseif (!isset($data['choices'])) {
            wp_send_json_error('API request failed. Response: ' . $body);
        } else {
            wp_send_json_success($data);
        }
    }

   wp_die();
}

add_action('wp_ajax_youtube_titres', 'youtube_titres');
add_action('wp_ajax_nopriv_youtube_titres', 'youtube_titres');

Le code définit une fonction PHP nommée youtube_titres, qui sera exécutée lorsqu’une requête sera faite à WordPress à l’aide de l’action youtube_titres.

Cette fonction communique avec l’API d’OpenAI pour générer un texte basé sur un prompt fournie par l’utilisateur.

La fonction récupère d’abord le prompt fournie par l’utilisateur à partir de la requête POST :

 $prompt = $_POST['prompt'];

Publier l’extrait de code

Maintenant, assurez-vous de configurer ce script pour qu’il s’exécute partout et de le publier.

Étape 2 : Créer la page d’outil

Maintenant que notre fonction API est prête, créons une nouvelle page sur notre site WordPress où nous pouvons ajouter notre outil d’IA.

Nous utiliserons Elementor , un constructeur de pages WordPress populaire, pour créer la page.

Remarque : Vous pouvez utiliser n’importe quel générateur de votre choix. Ce qui est important, c’est la possibilité d’ajouter du code HTML personnalisé à la page.

Installation et activation d’Elementor

1. Depuis votre tableau de bord WordPress, accédez à « Plugins > Ajouter un nouveau ».
2. Dans la barre de recherche, tapez ‘ Elementor ‘.
3. Recherchez le plugin dans les résultats de recherche et cliquez sur « Installer maintenant », puis sur « Activer ».

Créer une nouvelle page avec Elementor

1. Accédez à « Pages > Ajouter un nouveau » depuis votre tableau de bord WordPress.
2. Saisissez un titre pour votre page, tel que « Outils IA».
3. Cliquez sur ‘ Modifier avec Elementor ‘ pour commencer à concevoir votre page.

Ajout de HTML personnalisé dans Elementor

Pour ajouter du HTML personnalisé dans Elementor, vous devez faire glisser et déposer le widget Code HTML dans votre page. Suivez ces étapes:

1. Sur la page de l’éditeur Elementor, vous verrez une barre latérale avec plusieurs icônes sur la gauche. Cliquez sur celui qui ressemble à une grille ou une matrice.
2. Cela ouvrira une liste de widgets que vous pouvez utiliser. Recherchez le widget « HTML »

Ici, vous pouvez coller votre code HTML personnalisé pour votre outil d’IA. Dans notre cas, il comprendra le code pour un champ de saisie, un bouton et une zone de texte pour les résultats de sortie.

Pour vous faciliter la tâche, j’ai créé le code HTML, JS et CSS complet afin que vous puissiez le copier et le coller directement. C’est ici:

<div id="text-generation-tool">
    <input type="text" id="topic" placeholder="Quel est le sujet de votre vidéo ?">
    <button id="generate-button">Générer des titres</button>
    <div id="result-container" style="display: none;">
        <div class="result-wrapper">
            <div class="result-content">
                <textarea id="result" readonly></textarea>
            </div>
            <div class="copy-button-container">
                <button id="copy-button">Copy</button>
            </div>
        </div>
    </div>
    <div id="loading" class="loader" style="display: none;"></div>
</div>

<style>
    #text-generation-tool {
        width: 100%;
        max-width: 600px;
        margin: 0 auto;
        font-family: Arial, sans-serif;
    }

    #topic {
        width: 100%;
        padding: 15px;
        margin-bottom: 20px;
        font-size: 16px;
        border-radius: 5px;
        border: 1px solid #ddd;
    }

    #generate-button {
        display: block;
        width: 100%;
        padding: 15px;
        margin-bottom: 20px;
        font-size: 16px;
        border: none;
        border-radius: 5px;
        color: #fff;
        background-color: #ffbd59;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }

    #generate-button:hover {
        background-color: #000;
    }

    #result-container {
        display: none;
        margin-bottom: 20px;
    }

    .result-wrapper {
        position: relative;
        overflow: hidden;
    }

    .result-content {
        display: flex;
    }

    #result {
        flex: 1;
        height: 400px;
        padding: 15px;
        font-size: 16px;
        border-radius: 5px;
        border: 1px solid #ddd;
        background-color: #f9f9f9;
    }

    .copy-button-container {
        margin-top: 10px;
        text-align: right;
    }

    #copy-button {
        padding: 8px 12px;
        font-size: 14px;
        border: none;
        border-radius: 5px;
        color: #fff;
        background-color: #3498db;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }

    #copy-button:hover {
        background-color: #2980b9;
    }

   
    .loader {
        display: block;
        margin: 50px auto;
        border: 16px solid #f3f3f3; /* Light grey */
        border-top: 16px solid #3498db; /* Blue */
        border-radius: 50%;
        width: 50px;
        height: 50px;
        animation: spin 1s linear infinite;
    }

    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
</style>

<script>
    document.getElementById("generate-button").addEventListener("click", function(e){
        e.preventDefault();
        
        
        var generateButton = document.getElementById("generate-button");
        
        if (generateButton.disabled) {
            return; // Prevent multiple clicks while content is being generated
        }
        
        generateButton.disabled = true;
        
        
        
        var topic = document.getElementById('topic').value;
        var prompt = "génere moi 10 titre youtube sur le sujet : " + topic;
        var loading = document.getElementById('loading');
        var result = document.getElementById('result');
        var resultC = document.getElementById('result-container');

        


        

        loading.style.display = 'block';
        result.style.display = 'none'; 
        resultC.style.display = 'none';
        

        var formData = new FormData();
        formData.append('action', 'youtube_titres');
        formData.append('prompt', prompt);

        fetch('/wp-admin/admin-ajax.php', {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            loading.style.display = 'none';
            if(data.success) {
                result.value = data.data.choices[0].message.content; 
                result.style.display = 'block'; 
                resultC.style.display = 'block';
                generateButton.disabled = false;
            } else {
                result.value = 'An error occurred: ' + data.data;
                result.style.display = 'block'; 
                resultC.style.display = 'block';
                generateButton.disabled = false;
            }
        })
        .catch(error => {
            loading.style.display = 'none';
            result.value = 'An error occurred: ' + error.message;
            result.style.display = 'block'; // show result textarea
            resultC.style.display = 'block';
            generateButton.disabled = false;
            
        });
    });
    
    var copyButton = document.getElementById('copy-button');
    copyButton.addEventListener('click', function() {
        var result = document.getElementById('result');
        result.select();
        document.execCommand('copy');
        
    });
</script>

N’hésitez pas à utiliser ce code comme base de référence pour tout outil que vous souhaitez créer.

Mais ce n’est pas tout. Vous pouvez même saisir ce code dans ChatGPT et lui demander d’apporter des modifications pour vous. 

Les possibilités avec les modèles d’IA comme ChatGPT sont pratiquement illimitées, c’est pourquoi apprendre à interagir avec ces modèles est l’une des compétences les plus demandées aujourd’hui et continuera de l’être à l’avenir.

Enregistrez votre page !

Une fois que vous avez collé votre code, cliquez sur « Mettre à jour » pour enregistrer vos modifications.

Parfait! Vous avez maintenant créé une page pour votre outil d’IA et ajouté les éléments HTML CSS et JS nécessaires et connecter a l’API openAI pour le bon fonctionnement de votre outil.

Étape 3 : Optimiser notre outil

Une fois notre outil opérationnel, le processus ne s’arrête pas là. Il est temps d’optimiser. Cela peut aller du raffinement de l’interface utilisateur (interface utilisateur) à l’ajout de mesures de sécurité comme le captcha.

Disons que vous souhaitez modifier l’interface utilisateur de votre outil. Vous pouvez demander à ChatGPT de vous aider en lui fournissant simplement cette invite :

Pourriez-vous m'aider à concevoir une interface plus propre et plus professionnelle pour mon outil ?

ChatGPT fournira des suggestions ou même un tout nouvel ensemble de codes HTML/CSS adaptés à vos besoins.

L’ajout d’une mesure de sécurité telle qu’un captcha peut également constituer une amélioration significative, car elle contribue à protéger votre outil contre les robots et garantit de véritables interactions utilisateur. Vous pouvez trouver de nombreux plugins et ressources en ligne pour ajouter un captcha à votre site WordPress.

Enfin, n’oubliez pas que l’optimisation continue et la mise à jour de votre outil en fonction des retours des utilisateurs sont la clé pour rendre votre outil plus convivial et plus performant.

Bonus : monétisez vos outils !

N’oubliez pas que WordPress ne vous permet pas seulement de créer et de partager du contenu; il offre également la possibilité de transformer vos outils d’IA en source de revenus. Que vous ayez développé un seul outil ou une suite complète de solutions d’IA, il existe plusieurs voies de monétisation à l’aide de WordPress. Voici un guide détaillé :

1. Modèles d’adhésion :

Vous pouvez créer une section réservée aux membres sur votre site Web, offrant un accès exclusif à vos outils d’IA. Des plugins comme Promembership, MemberPress et autres sont conçus sur mesure à cet effet.

• ProMembership : Idéal pour créer des adhésions à plusieurs niveaux, ce plugin vous permet d’accorder différents niveaux d’accès en fonction du plan d’abonnement, ouvrant ainsi des opportunités à différents niveaux de prix.
• MemberPress : connu pour sa convivialité, MemberPress vous permet de restreindre l’accès à des pages spécifiques ou à des catégories entières de contenu. Vous pouvez configurer des paiements uniques ou des abonnements récurrents pour y accéder.

2. Publicités et marketing d’affiliation :

Vous pouvez monétiser via des publicités ou du marketing d’affiliation si vous préférez ne pas facturer directement les utilisateurs. Collaborez avec des partenaires industriels concernés ou utilisez des réseaux publicitaires qui correspondent à votre public.

3. Création d’outils en tant que service indépendant :

Vous pouvez proposer ce service en freelance.

Votre site WordPress peut héberger les outils et servir de portfolio, présentant ce que les utilisateurs peuvent attendre de vos services. Les clients potentiels peuvent interagir avec vos outils et acquérir une expérience directe de la qualité et des capacités de votre travail. Vous pouvez également envisager de fournir des études de cas ou des témoignages pour démontrer davantage votre expertise.

4. Créer un SaaS avec WordPress :

En combinant les stratégies ci-dessus, vous pouvez essentiellement créer une plateforme Software as a Service (SaaS) avec WordPress. Utilisez divers plugins pour créer un flux de travail transparent, intégrer des passerelles de paiement et offrir à vos utilisateurs une expérience professionnelle et raffinée.

Monétiser vos outils d’IA via WordPress est non seulement réalisable, mais peut être très gratifiant. Avec une gamme d’options adaptées à différents outils et publics cibles, vous pouvez choisir la méthode qui correspond le mieux à vos objectifs et aux besoins des utilisateurs.