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”]
j’ai un problème avec l’intégration du plugin paypal ?
Bonjour,
Merci pour ce bon tuto, malheureusement je m’en sors pas car je suis nouveau en développement wordpress, ça aurait été mieux si par exemple vous dites dans quel fichiers place telle fonction et parler un peu sur les fonctions comme get_option etc, et mettre beaucoup de textes pour la compréhension!. C’est déjà un bon travail mais pour un nouveau c’est dure!.
Merci et je continue à vous suivre.
Eric
Bonjour Eric, Il est vrais que dans cette exemple je ne parle pas de la hiérarchie des fichiers pour créer un plugin, mais dans ce tuto le plugin tien en un seul fichier pour toutes les fonctions, sinon voici un exemple pour appeler des fichiers externes :
Au début du code de votre plugin vous devez définir les chemins pour aller chercher les fichiers comme ceci :
define('PLUGIN_SLL_PATH', plugin_dir_path(__FILE__));
define('PLUGIN_SLL_NAME', plugin_basename(__FILE__));
require_once(PLUGIN_SLL_PATH . 'inc/fichier.php');
// Exemple: /home/user/var/www/wordpress/wp-content/plugins/mon-plugin/in/fichier.php
function myplugin_scripts() {
wp_register_style( 'plug-styles', plugin_dir_url( __FILE__ ) . 'assets/plug-styles.css' );
wp_enqueue_style( 'plug-styles' );
}
add_action( 'wp_enqueue_scripts', 'myplugin_scripts' );
// <a href="http://example.com/wp-content/plugins/my-plugin/assets/plug-styles.css" rel="nofollow ugc">http://example.com/wp-content/plugins/my-plugin/assets/plug-styles.css</a>
Je ferais un tuto plus détaillé sur le développement d’un plugin WordPress.
Merci Fred,
Pour votre retour, je comprends mieux.
Courage et merci pour la partage de connaissance.
Eric
Bonjour,
Merci pour le Tuto, J’ai télécharger le code source que tu a mis sur le site. L’installation est passée mais le shorte code n’apparaît pas. Je sais pas comment faire pour le faire apparaître.
Pouvez vous m’aider.
Merci
Bonsoir Didier vérifier qu’il n’y a pas d’espace au début et a la fin du shortcode et si le shortcode n’ai pas entourer de balise html.
Merci pour le tutoriel, c’est vraiment efficace