Bien que la plupart des gens utilisent Charitable pour les campagnes de collecte de fonds, certains utilisateurs lui ont trouvé des utilisations créatives. Un client a récemment voulu continuer à utiliser Charitable comme outil de don, tout en l'utilisant comme moyen pour les gens de s'inscrire à leur événement.

La première étape pour y parvenir est assez simple : créez simplement une campagne distincte pour l'inscription à l'événement. Vous pouvez configurer différents prix de billets en utilisant la fonctionnalité des dons suggérés — définissez simplement un prix et une description.

Mais le défi survient lorsque vous souhaitez que le texte du bouton du formulaire soit plus approprié au contexte. Au lieu de « Faire un don », il devrait y avoir quelque chose comme « Acheter des billets ».

Dans ce tutoriel, je vais vous montrer comment utiliser un peu de code personnalisé pour personnaliser facilement le texte du bouton de don sur une base par campagne.

La solution

Pour ce faire, nous allons enregistrer un nouveau champ dans l'éditeur de campagne du tableau de bord WordPress. Ce champ vous permettra de spécifier quel doit être le texte du bouton de don.

Nous allons également créer des versions modifiées des modèles où le bouton de don est affiché ; ceux-ci seront stockés dans notre thème ou notre thème enfant et remplaceront les modèles par défaut inclus dans Charitable.

Étape 1 : Ajouter notre fonction

Si vous avez lu mon dernier tutoriel, cette étape vous sera familière.

Nous allons ajouter une fonction PHP qui sera exécutée lorsque le hook init sera appelé dans WordPress. init est un hook qui se produit tôt pendant le chargement de WordPress, avant que la page ne commence à s'afficher.

add_action( 'init', function() {
    // Our code will go in here.
} );

Nous utilisons ici une fonction anonyme, ce qui est tout à fait acceptable tant que vous utilisez une version de PHP supérieure à 5.2.

Si vous n'êtes pas sûr de la manière d'ajouter cela à votre site, consultez notre guide :

3 façons d'ajouter des personnalisations de code à votre site

Étape 2 : Ajouter le champ à l'éditeur de campagne

Ensuite, nous utiliserons l'API des champs de campagne pour ajouter un champ « Texte du bouton » à l'éditeur de campagne.

add_action( 'init', function() {

    /**
     * Create a new field as an instance of `Charitable_Campaign_Field`.
     *
     * See all available arguments at:
     *
     * @https://github.com/Charitable/Charitable/blob/ef9a468fbdd6fa83307abe6ac0c38896f625cf45/includes/fields/class-charitable-campaign-field.php
    */
    $campaign_field = new Charitable_Campaign_Field( 'button_text', array(
    'label'          => 'Button Text',
    'data_type'      => 'meta',
    'admin_form'     => array(
        'type'     => 'text',
        'required' => false,
        'default'  => 'Donate',
    ),
    'value_callback' => function( Charitable_Campaign $campaign, $key ) {
        $text = $campaign->get_meta( '_campaign_button_text' );

        // Set a default value to use when the button text is not set yet.
        if ( empty( $text ) ) {
            $text = 'Donate';
        }

        return $text;
    },
    ) );

    /**
     * Now, we register our new field.
     */
    charitable()->campaign_fields()->register_field( $campaign_field );

} );

Dans ce code, nous créons d'abord un nouveau champ en créant un objet Charitable_Campaign_Field. Nous passons deux paramètres lors de la création de cet objet :

– Une clé – button_text
– Un tableau d'arguments

Nous n'utilisons qu'un sous-ensemble de tous les arguments possibles lors de l'enregistrement d'un champ de campagne. Pour voir les autres arguments disponibles, lisez la documentation intégrée exhaustive sur Github.

Un argument important inclus ici est le paramètre value_callback :

'value_callback' => function( Charitable_Campaign $campaign, $key ) {
    $text = $campaign->get_meta( '_campaign_button_text' );

    // Set a default value to use when the button text is not set yet.
    if ( empty( $text ) ) {
        $text = 'Donate';
    }

    return $text;
},

Ceci est une fonction qui sera utilisée pour obtenir la valeur du champ pour une campagne particulière. Nous l'incluons ici pour fournir une valeur par défaut de « Faire un don » pour le champ button_text ; ceci est nécessaire pour les campagnes existantes qui n'ont pas été enregistrées depuis l'ajout de ce champ de campagne.

Si nous allons ajouter une nouvelle campagne ou en modifier une existante, nous verrons maintenant un panneau « Paramètres étendus », et à l'intérieur se trouve un champ « Texte du bouton ».

Étape 3 : Remplacer le modèle de formulaire de don

À l'intérieur de Charitable, vous verrez un répertoire templates. Tous les modèles de ce répertoire peuvent être remplacés en créant une copie dans le dossier de votre thème enfant. Si vous n'utilisez pas de thème enfant, vous pouvez également les remplacer en créant une copie dans votre dossier de thème, mais nous recommandons l'approche du thème enfant car elle garantit que vous ne perdrez pas vos modifications lors de la mise à jour de votre thème à l'avenir.

Tout d'abord, nous allons créer un dossier charitable à l'intérieur de notre dossier de thème enfant. Chaque fois que vous souhaitez remplacer un modèle dans le répertoire templates de Charitable, il doit être stocké au même emplacement relatif à l'intérieur du dossier charitable (sans templates).

Dans notre cas, nous voulons remplacer le modèle donation-form/form-donation.php. Voici comment nous procédons :

• Dans notre thème enfant, nous créons un nouveau fichier à l'emplacement charitable/donation-form/form-donation.php.
• Dans ce fichier, nous collons le contenu du fichier templates/donation-form/form-donation.php de Charitable.

Si vous enregistrez ce fichier et rechargez votre formulaire de don, vous ne remarquerez aucune différence – c'est parce que nous n'avons encore rien changé ! Passons donc à la copie de notre texte de bouton personnalisé.

Dans le modèle, recherchez la ligne suivante :

<button class="button button-primary" type="submit" name="donate"><?php _e( 'Donate', 'charitable' ); ?></button>

Dans la version actuelle de Charitable (1.6.13), celle-ci se trouve à la ligne 59, mais cela pourrait changer à l'avenir. La partie que nous devons remplacer est celle du milieu : <?php _e( 'Donate', 'charitable' ); ?>.

Le texte de notre bouton personnalisé peut être récupéré en obtenant l'objet de campagne du formulaire avec $form->get_campaign(), puis en appelant get( 'button_text' ) sur celui-ci :

<?php echo $form->get_campaign()->get( 'button_text' ); ?>

Ensemble, la ligne mise à jour ressemble à ceci :

<button class="button button-primary" type="submit" name="donate"><?php echo $form->get_campaign()->get( 'button_text' ); ?></button>

Maintenant, lorsque vous rechargez le formulaire de don, il affichera le texte du bouton personnalisé de votre campagne.

Étape 4 : Rincer & répéter pour les autres modèles

L'étape 3 a corrigé le formulaire de don. Mais le bouton « Faire un don » apparaît également dans d'autres cas :

• Dans une liste ou une grille de campagnes lorsque vous utilisez le shortcode [campaigns].
• Sur la page de la campagne elle-même.

Déterminer les modèles que vous devez remplacer

Les modèles que vous devez remplacer dépendent de la façon dont vous avez configuré l'affichage de votre formulaire de don avec le paramètre « Options d'affichage » sous Charitable > Paramètres.

« Afficher sur une page séparée »

Les deux modèles que vous devez remplacer sont :

• templates/campaign/donate-button.php
• templates/campaign-loop/donate-link.php

Copiez et collez le contenu de ces deux fichiers dans votre thème enfant à l'emplacement :

• charitable/campaign/donate-button.php
• charitable/campaign-loop/donate-link.php

« Afficher sur la même page »

Les deux modèles que vous devez remplacer sont :

• templates/campaign/donate-link.php
• templates/campaign-loop/donate-link.php

Copiez et collez le contenu de ces deux fichiers dans votre thème enfant à l'emplacement :

• charitable/campaign/donate-link.php
• charitable/campaign-loop/donate-link.php

« Révéler dans une modale »

Les deux modèles que vous devez remplacer sont :

• templates/campaign/donate-modal.php
• templates/campaign-loop/donate-modal.php

Copiez et collez le contenu de ces deux fichiers dans votre thème enfant à l'emplacement :

• charitable/campaign/donate-modal.php
• charitable/campaign-loop/donate-modal.php

Apporter les modifications

Selon le modèle que vous remplacez, la partie que vous devez réellement modifier est soit :

<?php _e( 'Donate', 'charitable' ); ?>

Soit :

<?php esc_attr_e( 'Donate', 'charitable' ); ?>

Pour modifier la première variété (c'est-à-dire _e), remplacez-la par ceci :

<?php echo $campaign->get( 'button_text' ); ?>

Si vous modifiez la deuxième variété (c'est-à-dire esc_attr_e), échangez-la avec ceci :

<?php echo esc_attr( $campaign->get( 'button_text' ) ); ?>

Conclusion

Maintenant que vous avez mis à jour tous les modèles, vous devriez voir que le texte personnalisé de votre bouton de campagne est utilisé partout où un bouton de don est affiché. Tout ce que nous avons eu à faire pour y parvenir est de créer un nouveau champ de campagne et de modifier trois modèles par défaut en utilisant notre thème enfant.

Si vous avez suivi, j'espère que vous pouvez voir comment la flexibilité de l'API des champs de campagne, ce processus peut être utilisé pour apporter de nombreuses autres modifications à la façon dont Charitable fonctionne sur votre site Web. Par exemple, vous pourriez adapter ce processus pour ajouter une notice spécifique à la campagne avant le formulaire de don ; il suffit de créer un nouveau champ de campagne et d'ajouter la valeur de ce champ au modèle form-donation.php (c'est-à-dire les étapes 2 et 3).

Vous avez trouvé cela utile ? Des questions ? J'adorerais avoir de vos nouvelles ; envoyez-nous un e-mail via notre page de support ou laissez un commentaire ci-dessous. Si vous avez une suggestion de sujet que vous aimeriez que je couvre dans un futur tutoriel, nous aimerions aussi en entendre parler. 🙂