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”]
