Comment créer un plugin WordPress

Dans ce tutoriel vous apprendrez a créer un plugin WordPress de dons Paypal pour votre blog,  qui permettra a vos lecteurs de vous envoyer un don avec Paypal. Le plugin aura une partie administration pour les réglages, et il sera facilement personnalisable.

Préparation du plugin

Première étape   

Créer un nouveau dossier paypal-dons dans  wp-content/plugins/ .

Deuxième étape

Maintenant dans ce dossier, vous allez créer un fichier appelé paypal-don.php .

Troisième étape

Ouvrez le fichier paypal-don.php puis ajoutez les informations qui indiqueront à WordPress qu’il y a un nouveau plugin. Vous pouvez modifier ces détails, mais respecter l’ordre avec un minimum information pour chaque ligne.

<?Php
/*
Plugin Name: Dons Paypal
Plugin URI: https://naxialis.com
Description: Plugin don paypal.
Version: 1.0
Author: Lebéon Frédéric
Author URI: https://www.naxialis.com
*/

Patch URL

Avant de commencer à coder le plugin il faudra définir un Patch URL qui nous servira à appeler nos fichiers dans le répertoire du plugin. Il conseiller de définir ce path URL pour éviter des bugs ou que vos fichiers ne sois pas appelés correctement.

// patch URL
define('PAYDON_BASENAME', plugin_basename(__FILE__));
define('PAYDON_DIR_URL', plugins_url('', PAYDON_BASENAME));

Ajout des scripts et feuille de style

Dans cette partie nous allons appeler les scripts et feuilles de style pour pouvoir ajouté un bouton Paypal personnalisé. Nous allons utiliser le media uploader de WordPress.

Première étape

On va créer une fonction php qu’ont va appeler paypal_don_load_scripts() qui va contenir tous les javascripts qu’ont aura besoin pour notre plugin.

// Scripts

function paypal_don_load_scripts() {

	wp_register_script( 'paypal-dons', PAYDON_DIR_URL. '/js/paypal-dons.js' , dirname(__FILE__) );
	wp_enqueue_script('paypal-dons');
	wp_enqueue_script('jquery');
	wp_enqueue_script('media-upload');
 	wp_enqueue_script('thickbox');
	
}
add_action('admin_enqueue_scripts', 'paypal_don_load_scripts');

Deuxième étape

Créer un dossier js dans le répertoire du plugin puis créer un fichier paypal-dons.js  et ajouter le script qui va permettre d’utiliser le madia uploder de WordPress pour pouvoir utiliser un bouton personnalisé.

jQuery(document).ready(function($) {
    $(document).on("click", ".paypal-button-upload-button", function() {

        jQuery.data(document.body, 'prevElement', $(this).prev());

        window.send_to_editor = function(html) {
            var imgurl = jQuery('img',html).attr('src');
            var inputText = jQuery.data(document.body, 'prevElement');

            if(inputText != undefined && inputText != '')
            {
                inputText.val(imgurl);
            }

            tb_remove();
        };

        tb_show('', 'media-upload.php?type=image&TB_iframe=true');
        return false;
    });
});

Troisième étape

Dans cette deuxième étape nous allons créer une deuxième fonction php qui elle va contenir les fichiers css nécessaires au plugin et qu’ont va appeler paypal_don_admin_styles().

//Style css

function paypal_don_admin_styles()

 {  
 	// pour importer une feuille css 
	// wp_register_style('mon-css', PAYDON_DIR_URL. '/css/mon-css.css' , dirname(__FILE__) );
	// wp_enqueue_style('mon-css');
 	wp_enqueue_style('thickbox');
 }

 add_action('admin_print_styles', 'paypal_don_admin_styles');

Création du shortcode

Pour ajouter le shortcode [don] dans WordPress, vous devez utiliser la fonction add_shortcode qui appellera l’autre fonction qui contiendra le code qui sera affiché sur votre blog.

// Ajout du shortcode [don] 
add_shortcode('don','donate'); 

function donate() {
    $donate_options = get_option('donate_plugin_options');
 
    // Bouton image par défaut
    $url = 'http://www.paypal.com/fr_FR/i/btn/btn_donate_SM.gif';
 
    // Autre choix pour le bouton don
    switch ($donate_options['button']) {
 
        case 'small':
            $url = 'http://www.paypal.com/fr_FR/i/btn/btn_donate_SM.gif';
            break;
        case 'medium':
            $url = 'http://www.paypal.com/fr_FR/i/btn/btn_donate_LG.gif';
            break;
        case 'large':
            $url = 'http://www.paypal.com/fr_FR/i/btn/btn_donateCC_LG.gif';
            break; 
		case 'custom':
            $url = $donate_options['paypal_custom_button'];
            break;	 
 
}
 
    return '<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
                <div class="paypal-donations">
                    <input type="hidden" name="cmd" value="_donations">
                    <input type="hidden" name="business" value="'.$donate_options['paypal_user_id'].'">
                    <input type="hidden" name="rm" value="0">
                    <input type="hidden" name="currency_code" value="'.$donate_options['currency'].'">
                    <input type="image" src="'.$url.'" name="submit" alt="PayPal - The safer, easier way to pay online.">
                    <img alt="" src="https://www.paypal.com/fr_FR/i/scr/pixel.gif" width="1" height="1">
                </div>
            </form>';
}

Rappels et fonctions du formulaire

Vous allez maintenant définir les rappels nécessaires pour faire fonctionner le plugin, et la partie administration dans WordPress.

Première étape

Vous devez maintenant ajouter une fonction vide, qui est nécessaire pour assurer que les autres fonctions du plugin fonctionnent correctement.

function donate_plugin_cb() {
 
    // Rappel option
 
 }

Deuxième étape

Ensuite, vous allez ajouter deux fonctions qui vont générer les champs de saisie dans le panneau d’administration du plugin. Une pour votre adresse email PayPal et une pour le bouton personnalisé.

// Génère le formulaire de champ de saisie des paramètres [EMAIL]
function paypal_user_id_html() {
    $donate_options = get_option('donate_plugin_options');
    echo "<input name='donate_plugin_options[paypal_user_id]' type='email' value='{$donate_options['paypal_user_id']}'/>";
	
}

function paypal_custom_button_html() {
    $donate_options = get_option('donate_plugin_options');
    echo "<input  name='donate_plugin_options[paypal_custom_button]' type='text' value='{$donate_options['paypal_custom_button']}'/>";
	echo '<input  class="paypal-button-upload-button button" type="button" value="Télécharger une image" />';
	
}

Troisième étape

Maintenant, vous allez générer les boutons de radio, pour pouvoir sélectionner le bouton de paiement  que vous souhaitez.

// Génère le formulaire de champ de saisie des paramètres [RADIO]
function paypal_donation_button_html() {
    $donate_options = get_option('donate_plugin_options');
    ?>
    <p>
        <label>
            <input type='radio' name='donate_plugin_options[button]' value='small' <?php if($donate_options['button'] == 'small') { echo 'checked'; }  ?>>
            <img src='https://www.paypal.com/fr_FR/i/btn/btn_donate_SM.gif' alt='small' style='vertical-align: middle;margin-left: 15px;'>
        </label>
    </p>
 
    <p>
        <label>
            <input type='radio' name='donate_plugin_options[button]' value='medium' <?php if($donate_options['button'] == 'medium') { echo 'checked'; } ?>>
            <img src='https://www.paypal.com/fr_FR/i/btn/btn_donate_LG.gif' alt='medium' style='vertical-align: middle;margin-left: 15px;'>
        </label>
    </p>
 
    <p>
        <label>
            <input type='radio' name='donate_plugin_options[button]' value='large' <?php if($donate_options['button'] == 'large') { echo 'checked'; } ?>>
            <img src='https://www.paypal.com/fr_FR/i/btn/btn_donateCC_LG.gif' alt='large' style='vertical-align: middle;margin-left: 15px;'></br>
        </label>
    </p>
    
     <p>
        <label> 
            <input type='radio' name='donate_plugin_options[button]' value='custom' <?php if($donate_options['button'] == 'custom') { echo 'checked'; } ?>>
            <img src='<?php echo $donate_options['paypal_custom_button'];?>' style='vertical-align: middle;margin-left: 15px;'> Personnalisé</br>
        </label>
    </p>
 
    <?php
}

Quatrième étape

Pour terminer cette partie, nous allons générer un autre champ de saisie avec un menu déroulant, afin que vous puissiez choisir la devise dans laquelle vos dons PayPal seront traités, en ajoutant un tableau PHP.

// Génère le formulaire de champ de saisie des paramètres [DROPDOWN]
function paypal_currency_html() {
    $donate_options = get_option('donate_plugin_options');
 
    $currency = array(
                    'AUD' => 'Australian Dollars (A $)',
                    'BRL' => 'Brazilian Real',
                    'CAD' => 'Canadian Dollars (C $)',
                    'CZK' => 'Czech Koruna',
                    'DKK' => 'Danish Krone',
                    'EUR' => 'Euros (€)',
                    'HKD' => 'Hong Kong Dollar ($)',
                    'HUF' => 'Hungarian Forint',
                    'ILS' => 'Israeli New Shekel',
                    'JPY' => 'Yen (¥)',
                    'MYR' => 'Malaysian Ringgit',
                    'MXN' => 'Mexican Peso',
                    'NOK' => 'Norwegian Krone',
                    'NZD' => 'New Zealand Dollar ($)',
                    'PHP' => 'Philippine Peso',
                    'PLN' => 'Polish Zloty',
                    'GBP' => 'Pounds Sterling (£)',
                    'RUB' => 'Russian Ruble',
                    'SGD' => 'Singapore Dollar ($)',
                    'SEK' => 'Swedish Krona',
                    'CHF' => 'Swiss Franc',
                    'TWD' => 'Taiwan New Dollar',
                    'THB' => 'Thai Baht',
                    'TRY' => 'Turkish Lira',
                    'USD' => 'U.S. Dollars ($)',
                );
    ?>
    <select id='currency_code' name='donate_plugin_options[currency]'>
        <?php
            foreach($currency as $code => $label) :
                if( $code == $donate_options['currency'] ) { $selected = "selected='selected'"; } else { $selected = ''; }
                echo "<option {$selected} value='{$code}'>{$label}</option>";
            endforeach; 
        ?>
    </select>
    <?php
}

Déclaration des fonctions

Maintenant que vous avez généré vos champs de saisi, shortcode et le formulaire, il faut déclaré ses fonctions pour les rendes visible et utilisable dans la partie administration de WordPress.

Première étape

Commençons par l’enregistrement de tous les paramètres et leurs champs avec WordPress, puis en ajoutant l’action de l’administrateur.

// Tous les paramètres et la configuration des champs utilisé dans wordpress
function register_settings_and_fields() {
 
    // $option_group, $option_name, $sanitize_callback
    register_setting('donate_plugin_options','donate_plugin_options');
 
    // $id, $title, $callback, $page
    add_settings_section('donate_plugin_main_section', 'Main Settings', 'donate_plugin_cb', __FILE__);
 
    // $id, $title, $callback, $page, $section, $args
    add_settings_field('paypal_user_id', 'PayPal ID: ', 'paypal_user_id_html', __FILE__, 'donate_plugin_main_section');
	 
    // $id, $title, $callback, $page, $section, $args
    add_settings_field('button', 'Select Button: ', 'paypal_donation_button_html', __FILE__, 'donate_plugin_main_section');
	
	// $id, $title, $callback, $page, $section, $args
    add_settings_field('paypal_custom_button', 'Url de l´image: ', 'paypal_custom_button_html', __FILE__, 'donate_plugin_main_section');
 
    // $id, $title, $callback, $page, $section, $args
    add_settings_field('currency', 'Monnaie: ', 'paypal_currency_html', __FILE__, 'donate_plugin_main_section');
}
 
add_action('admin_init', 'register_settings_and_fields');

Deuxième étape

Vous allez maintenant générer le code HTML de la page d’options principales dans WordPress, en mettant en place un div avec la classe warp , et puis en ajoutant  le formulaire et la fonction qui va importer les champs paramètres de votre plugin.

// Génére le code HTML de la page des options principales
function options_page_html() {
 
    ?>
        <div class="wrap">
            <h2>Plugin Options</h2>
            <form method="post" action="options.php" enctype="multipart/form-data">
          <input type="text"  name="image_location" value="" size="40" />
				<input type="button" class="paypal-button-upload-button" value="Upload Image" />
            
            <?php 
                // $option_group
                settings_fields( 'donate_plugin_options' );
 
                // $page 
                do_settings_sections( __FILE__ );
            ?>   
            <p class="submit">
                <input type="submit" class="button-primary" name="submit" value="Save Changes">
            </p>
            </form>
        </div>
    <?php
}

Troisième étape

Vous allez ensuite ajouter la page des paramètres du plugin dans l’administration de WordPress, en utilisant la fonction  options_init () , avec la fonction add_options_page.

Dans le menu de WordPress la page pour paramètres du plugin se trouvera dans Réglages –> Dons Paypal Options.

// Menu Admin Activation
function options_init() {
 
    // page_title,  menu_title, capability, menu_slug, function
    add_options_page('Dons Paypal Options', 'Dons Paypal Options', 'administrator', __FILE__, 'options_page_html');
}
add_action('admin_menu', 'options_init');

Quatrième étape

La dernière étape consiste à ajouter la fonction d’activation, et à vérifier si des paramètres existent déjà. Le plugin va enregistrer les paramètres par défaut.

// Activation et vérification des paramètres si ils existent.
function donate_activate() {
    $defaults = array(
                    'paypal_user_id' => get_option('admin_email'),
                    'button' => 'small',
					'paypal_custom_button' => '',
                    'currency' => 'EUR'
                );  
 
  if(get_option('donate_plugin_options')) return;
 
  add_option( 'donate_plugin_options', $defaults );
}
 
register_activation_hook( __FILE__, 'donate_activate' );

Conclusion

Dans ce tutoriel nous avons vu comment créer un plugin WordPress relativement simple, j’ai choisi comme exemple Paypal pour vous montrer l’intégration des différents champs text, radio, select, upload. J’espère que ce tutoriel vous permettra de développer votre propre plugin pour votre blog.

[dl url=”https://www.naxialis.com/wp-content/uploads/2014/11/paypal-dons.zip” title=”PLugin Source” desc=”Paypal don” type=”download” align=”center”]