C’est un ami qui m’a fait découvrir cet outil: Bootstrap.  Développé par Twitter, celui-ci vous permet d’utiliser leur propre CSS afin de se concentrer sur ce qui compte réellement. Cet outil vous donnera un petit coup de main lors de votre développement.

Fonctionnalités

• Grid
• Layout
• Table
• Formulaire
• Navigation
• Alerts
• Etc.

Je vous invite donc d’aller faire un tour sur leur site afin de voir toutes leurs options. Bootstrap vient de passer en version 1.3 et la communauté semble particulière active.

Lien : http://twitter.github.com/bootstrap/

1. Le premier est l’installation d’un WordPress vierge. Mon plugin se trouve dans C:wampwwwwordpress_testwp-contentpluginsMONPLUGIN
2. Le deuxième est mon SVN qui contient mon plugin: C:wampwwwpluginWPMONPLUGINtrunk

Je teste donc mon plugin dans le premier environnement. Lorsque j’ai terminé, je déplace les fichiers vers le 2e environnement. Ensuite, je fais un commit sur le SVN de WordPress. Cette méthode peut générer des problèmes. Je me suis donc demandé si c’était possible de faire un lien symbolique comme sous UNIX. C’est alors que je suis tombé sur la commande DOS “mklink” que je ne connaissais pas. Voici la façon dont je l’emploi :

1. Ouvrez Command Prompt de W7. Cliquez sur le Menu Démarré et tapez “cmd” dans l’espace de recherche .
2. Effectuez un clique droit sur l’application “cmd.exe” et exécutez-le en mode “Administrateur”
3. Rendez-vous dans votre dossier plugin de WordPress. Pour ma part, c’est : cd C:wampwwwwordpress_testwp-contentplugins
4. Créez le lien symbolique: mklink /D MONPLUGIN C:wampwwwpluginWPMONPLUGINtrunk

Voilà, c’est tout! Si vous faites la commande DOS “dir”, vous verrez votre dossier avec un attribut “SYMLINKD” ce qui signifie que ce dossier est en fait un lien vers votre plugin. Le dossier est alors reconnu par WordPress comme un plugin. À partir de ce moment, lorsque vous ferez une modification, vous n’aurez plus à copier/coller vos fichiers dans le dossier SVN pour faire le commit.

1. Developement
2. Testing (QA)
3. Production

La majorité des développeurs ne font pas usage de ces trois environnements dans leurs projets et, pourtant, la technique proposée ici peut permettre d’éviter bien des gaffes. Voici comment, dans mes projets, j’arrive à gérer mes trois environnements de développement.

Ultérieurement, je vous présenterai la suite de ce premier tutoriel. Nous utiliserons alors un outil de déploiement qui vous permettra de mettre à jour, comme il se doit, vos environnements.

Pour ce tutorial, j’utilise la version 2.0.2 de codeigniter.

Tout d’abord, sélectionner votre fichier index.php. Dans ce dernier, nous définirons, selon vos besoins, la variable ENVIRONMENT. Précédant le début du fichier, ajoutez ce code :

switch($_SERVER['SERVER_NAME']) {
case 'www.openbottle.dev': // C’est votre serveur localhost
define('ENVIRONMENT', 'development');
break;
case 'openbottle.mywebsitedev.com': // Votre serveur permettant de presenter à votre client votre projet.
define('ENVIRONMENT', 'testing');
break;
case 'www.openbottle.com': // Votre serveur final
define('ENVIRONMENT', 'production');
break;
}

Après avoir défini la variable d’environnement, éditez le fichier de /config/config.php. Dans ce dernier, nous définirons la variable globale base_url qui préviendra l’apparition de certains problèmes lors de vos déploiements. Encore une fois, précédant le début du fichier, ajoutez ce code :

$config['base_url'] = '';
switch(ENVIRONMENT) {
case 'development':
$config['base_url']    = 'http://www.openbottle.dev/';
break;
case 'testing':
$config['base_url'] = 'http://openbottle.mywebsitedev.com/';
break;
case 'production':
$config['base_url'] = 'http://www.openbottle.com/';

break;
}

Enfin, il faut définir chacune des bases de données pour chacun des environnements. Nous remplacerons donc la ligne 41 :

$active_group = ‘default’ ;

par

$active_group = ENVIRONMENT;

Par après, remplacez tous les ‘default’ par ‘development’. Puis, après la ligne 58, ajoutez vos 2 autres environnements :

/* TEST - QA */
$db['testing']['hostname'] = 'localhost';
$db['testing']['username'] = 'root';
$db['testing']['password'] = 'modepasse';
$db['testing']['database'] = 'openbottle';
$db['testing']['dbdriver'] = 'mysql';
$db['testing']['dbprefix'] = '';
$db['testing']['pconnect'] = TRUE;
$db['testing']['db_debug'] = TRUE;
$db['testing']['cache_on'] = FALSE;
$db['testing']['cachedir'] = '';
$db['testing']['char_set'] = 'utf8';
$db['testing']['dbcollat'] = 'utf8_general_ci';
$db['testing']['swap_pre'] = '';
$db['testing']['autoinit'] = TRUE;
$db['testing']['stricton'] = FALSE;

/* PRODUCTION */
$db['production']['hostname'] = 'localhost';
$db['production']['username'] = 'root';
$db['production']['password'] = 'motdepasse';
$db['production']['database'] = 'openbottle';
$db['production']['dbdriver'] = 'mysql';
$db['production']['dbprefix'] = '';
$db['production']['pconnect'] = TRUE;
$db['production']['db_debug'] = TRUE;
$db['production']['cache_on'] = FALSE;
$db['production']['cachedir'] = '';
$db['production']['char_set'] = 'utf8';
$db['production']['dbcollat'] = 'utf8_general_ci';
$db['production']['swap_pre'] = '';
$db['production']['autoinit'] = TRUE;
$db['production']['stricton'] = FALSE;
<span style="font-weight: normal;">

Voilà ! Cela devrait vous aider à gérer de manière plus efficace vos environnements de développement. Dans la seconde partie de ce tutoriel, nous utiliserons l’outil Phing.

1. Utilisation du widget

L’utilisation du widget est très pratique quand nous désirons offrir une certaine flexibilité à l’administrateur lors du déplacement ou de la modification d’une zone du gabarit. En ce qui nous concerne, le widget est pertinent pour changer l’ID de l’utilisateur Facebook sans avoir à passer par le code source.

2. Création du widget

Tout d’abord, pour que le plugin puisse fonctionner, nous devons créer une classe étendue de « WP_Widget ». À l’intérieur de celle-ci, nous trouverons quatre fonctions.

Voici le squelette du widget :

class My_Widget extends WP_Widget {
	function My_Widget() {
		// widget actual processes
	}

	function form($instance) {
		// outputs the options form on admin
	}

	function update($new_instance, $old_instance) {
		// processes widget options to be saved
	}

	function widget($args, $instance) {
		// outputs the content of the widget
	}

}

Commençons par créer notre classe ainsi que notre constructeur. Notez que le premier paramètre du constructeur (fp-widget) sera utilisé pour récupérer les valeurs du formulaire.

class PublishFeed extends WP_Widget {
	function PublishFeed() {
		// Constructeur
		$this->WP_Widget('fp-widget', __('FacebookPublish', 'wp-facebook-publish'));

Affichez ensuite le formulaire du widget. Dans notre exemple, nous pouvons identifier deux champs : facebook_id et facebook_limit.

/** @see WP_Widget::form */
function form($instance) {
	$facebook_id = esc_attr($instance['facebook_id']);
	$facebook_limit = esc_attr($instance['facebook_limit']);
?>
    <p><label for="<?php echo $this->get_field_id('facebook_id'); ?>"><?php _e('Facebook User ID:'); ?> <input class="widefat" id="<?php echo $this->get_field_id('facebook_id'); ?>" name="<?php echo $this->get_field_name('facebook_id'); ?>" type="text" value="<?php echo $facebook_id; ?>" /></label></p>

    <p><label for="<?php echo $this->get_field_id('facebook_limit'); ?>"><?php _e('Limit:'); ?> <input class="widefat" id="<?php echo $this->get_field_id('facebook_limit'); ?>" name="<?php echo $this->get_field_name('facebook_limit'); ?>" type="text" value="<?php echo $facebook_limit; ?>" /></label></p>
<?php
}

Dans le même ordre d’idées, notez que la fonction update permettra de mettre à jour les éléments du widget.

/** @see WP_Widget::update */
function update($new_instance, $old_instance) {
	$instance = $old_instance;
	$instance['facebook_id'] = strip_tags($new_instance['facebook_id']);
	$instance['facebook_limit'] = strip_tags($new_instance['facebook_limit']);
	return $instance;
}
[/codesyntax]

Dans un dernier temps, cette fonction permet d'afficher le widget.

[codesyntax lang="php"]
/** @see WP_Widget::widget */
function widget($args, $instance) {
	extract( $args );
	$facebook_id = $instance['facebook_id'];
	$facebook_limit = $instance['facebook_limit'];
	publish_feed($facebook_id, $facebook_limit);
}

Modification de publish_feed

Nous utiliserons la fonction publish_feed() que nous avons créée dans le premier tutoriel. Cependant, nous devrons la modifier un brin. En effet, nous remplacerons :

function publish_feed() {
	$facebook_id = ‘votreIDFacebook’;
	$limit = 3; //Nb de news afficher
	$URL_FINAL = $URL_GRAPH. $facebook_id. ‘/?limit=’.$limit;

par :

function publish_feed($facebook_id, $facebook_limit) {
	$fbpublish = $facebook_id;
	$fplimit = $facebook_limit;
	$fplimit = empty($fplimit)?'':'?limit='.$fplimit;
	$URL_GRAPH = $URL_GRAPH.$fbuserid.&#039;/&#039;.$fplimit<

### Function: Init WP-FacebookPublish Widget
add_action('widgets_init', 'widget_facebookpublish_init');
function widget_facebookpublish_init() {
	register_widget('PublishFeed’);
}

function publish_feed($facebook_id, $facebook_limit) {
	$fbpublish = $facebook_id;
	$fplimit = $facebook_limit;
	$fplimit = empty($fplimit)?'':'?limit='.$fplimit;

	// Construction de l'URL
	$URL_GRAPH = $URL_GRAPH.$fbuserid.'/'.$fplimit

	// Récupérer le JSON et le mettre dans une variable sinon retourne false
	$response = file_get_contents($URL_FINAL);

	if($response != FALSE) {
        // Lecture JSON
    	$obj = json_decode($response, true); // Decode le JSON
        	if(count($obj['data']) > 0) {
			echo '<ul>';
			foreach ($obj['data'] as $key => $value) { // Boucle sur data
				$date = $value['created_time'];
				$message = $value['message'];
				echo '<li><span class="message">' . $message . '</span> <span class="date"> (' . $date . ')</span></li>';
			}
			echo '</ul>';
		} else {
		echo 'No feed';
		}
	}
}

class PublishFeed extends WP_Widget {
	function PublishFeed() {
		// Constructeur
		$this->WP_Widget('fp-widget', __('FacebookPublish', 'wp-facebook-publish'));
	}
	/** @see WP_Widget::form */
	function form($instance) {
		$facebook_id = esc_attr($instance['facebook_id']);
		$facebook_limit = esc_attr($instance['facebook_limit']);
	?>
	    <p><label for="<?php echo $this->get_field_id('facebook_id'); ?>"><?php _e('Facebook User ID:'); ?> <input class="widefat" id="<?php echo $this->get_field_id('facebook_id'); ?>" name="<?php echo $this->get_field_name('facebook_id'); ?>" type="text" value="<?php echo $facebook_id; ?>" /></label></p>

	    <p><label for="<?php echo $this->get_field_id('facebook_limit'); ?>"><?php _e('Limit:'); ?> <input class="widefat" id="<?php echo $this->get_field_id('facebook_limit'); ?>" name="<?php echo $this->get_field_name('facebook_limit'); ?>" type="text" value="<?php echo $facebook_limit; ?>" /></label></p>
	<?php
	}
	/** @see WP_Widget::update */
	function update($new_instance, $old_instance) {
		$instance = $old_instance;
		$instance['facebook_id'] = strip_tags($new_instance['facebook_id']);
		$instance['facebook_limit'] = strip_tags($new_instance['facebook_limit']);
		return $instance;
	}

	/** @see WP_Widget::widget */
	function widget($args, $instance) {
		extract( $args );
		$facebook_id = $instance['facebook_id'];
		$facebook_limit = $instance['facebook_limit'];
		publish_feed($facebook_id, $facebook_limit);
	}
}

Voici la nouvelle méthode :

1. Dans votre dossier thème par défaut, ajoutez un fichier qui sera votre gabarit. (ex : listfruit-page.php)
2. Dans le tout début de ce fichier ajouter un commentaire qui permettra d’identifier votre gabarit dans l’interface administrateur de WordPress :

   <?php
   /*
    *
    * Template Name: ListeFruit-page
    */
   

3. Créez une page dans l’interface administrateur de WordPress. Donnez-lui un titre qui reflète ce que vous voulez lister. (ex : Liste des fruits)
4. Dans la colonne de droite, il y a une boite “Page Attributes” et dans cette boite, vous avez un menu déroulant vous permettant de sélectionner votre gabarit (ListeFruit-page) .
5. Maintenant que vous avez lié votre page à votre gabarit, ouvrez votre fichier “listfruit-page.php” et rentrez ceci :

   <?php
   /*
    *
    * Template Name: ListeFruit-page
    */
   
    get_header(); // Inclut votre header
    global $post;
   
    the_title('<h1>','</h1>')
   
   ?>
   <h2>Liste de mes fruits<h2>
   
   <?php
    // Récupère les articles d'une catégorie X
    // showposts: nombre d'article affiché
    // cat: l'id de la catégorie
    query_posts( 'showposts=5&cat=3&order=DESC&orderby=date' );
    if (have_posts()) :
    while (have_posts()) : the_post();
    ?>
   	<p>
   		<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title('<h2>','</h2>'); ?></a>
   		<p><?php the_excerpt(); // ou the_content(); ?></p>
   	</p>
   <?php endwhile; ?>
   <?php endif; ?>
   
   <?php get_footer(); ?>
   

Avec cette méthode, plus personne ne vous prendra pour un débutant

7 février 2011

Pour vous expliquer le mieux possible comment faire une extension WordPress, nous allons créer une extension permettant d’afficher votre « Wall » de votre Facebook grâce au ID unique de votre compte.

Le ID se trouve dans l'URL

1. Comment commencer ?

Tout d’abord, que voulons-nous faire? Une extension qui nous permettrait d’afficher notre « Wall » Facebook dans notre colonne de droite de notre site. Ensuite, il faut voir comment nous procèderons pour aller chercher le contenu… Vous êtes chanceux, voici le lien :

http://developers.facebook.com/docs/api

et c’est avec cette URL que nous pourrons faire ce que nous voulons :

http://graph.facebook.com/ID_FACEBOOK/feed.

Nous utiliserons donc cette adresse pour recueillir les informations. Prenez note qu’il faut que l’utilisateur Facebook donne un accès public de son «Wall». Si vous voulez restreint l’accès, vous devrez utiliser les « access token ».

Vous remarquerez que l’URL vous retourne la liste de vos « news » sous format JSON. Bon maintenant, donnons-lui un nom… Que diriez-vous de FacebookFeeder.

Voilà, nous pouvons commencer à coder !

2. Structure des fichiers

Lorsque vous faites une extension WordPress, celui-ci doit se trouver dans le dossier « /wp-content/plugins/facebookfeeder ». Le premier fichier que vous devez créer dans ce dossier est facebookfeeder.php. Pour respecter le standard de WordPress, il est fortement conseillé de garder le nom du fichier pareil que le nom du dossier, ceci doit aussi transparaitre dans votre code.

Premièrement, vous devez respecter le début du fichier. Ce standard que nous mettons au début du fichier est très important pour l’affichage de votre extension dans la section administration des plugins et/ou si vous comptez le mettre sur le portail d’extension de WordPress. Pour plus d’information, aller sur le site officiel : http://codex.wordpress.org/Writing_a_Plugin

<?php
/*
    Plugin Name: Facebookfeeder
    Plugin URI: http://URI_Of_Page_Describing_Plugin_and_Updates
    Description: Publish feed of facebook wall… Your Description
    Version: 0.1
    Author: Votre Nom
    License: GPL2
*/

/*  Copyright 2010  Thomas Fortier  (email : thomas.fortier@gmail.com)

    This program is free software; you can redistribute it and/or modify
    it under the terms of the GNU General Public License, version 2, as
    published by the Free Software Foundation.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with this program; if not, write to the Free Software
    Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301  USA
*/

Je vous conseil personnellement de commencer à faire le cœur de votre plug-in et d’ensuite de s’occuper des interfaces administrateur/widget.

Commençons par créer une fonction qui récupère le l’URL, qui lit le fichier JSON et qui affiche les informations voulues.

function publish_feed() {
	$URL_GRAPH = "http://graph.facebook.com/";
	$facebook_id = '100001072408211'; // Votre ID Facebook
	$limit = 2; //Nb de news afficher

	// Construction de l'URL
	$URL_FINAL = $URL_GRAPH. $facebook_id. '/feed/?limit='.$limit;

	// Récupérer le JSON et le mettre dans une variable sinon retourne false
	$response = file_get_contents($URL_FINAL);

	if($response != FALSE) {
        // Lecture JSON
    	$obj = json_decode($response, true); // Decode le JSON
        	if(count($obj['data']) > 0) {
			echo '<ul>';
			foreach ($obj['data'] as $key => $value) { // Boucle sur data
				$date = $value['created_time'];
				$message = $value['message'];
				echo '<li><span class="message">' . $message . '</span> <span class="date"> (' . $date . ')</span></li>';
			}
			echo '</ul>';
		} else {
		echo 'No feed';
		}
	}
}

Wow! Vous venez de créer votre premier plug-in. Par contre, il n’est pas possible de l’utiliser encore. Rendez-vous dans la section plugin de votre administration WordPress. Trouver le nom de votre extension (Facebookfeeder) et cliquer sur « Activate ».

Activez votre plugin

À partir de ce moment, il vous est possible d’aller dans votre thème et d’ajouter <?php plubish_feed() ?> à l’endroit voulu.

[Suite: Création d'un widget]

Zen Coding permet d’écrire ceci :

[codesyntax lang="html4strict"]

<div id="content">
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

[/codesyntax]

avec cette simple ligne :

div#content.page>ul.listPost>li*3

ou si vous voulez faire une liste incrémentée, comme ceci:

[codesyntax lang="html4strict"]

<p class="name-1"></p>
<p class="name-2"></p>
<p class="name-3"></p>

[/codesyntax]

il suffit de faire cela:

p.name-$*3

Bon, voici une liste d’exemple.

Lien officiel: http://code.google.com/p/zen-coding/

Amusez-vous bien!

L’extension se nomme WP_Handbook.

En gros, l’utilisateur lit votre article et lui donne la possibilité d’ajouter cet article dans son “booklet”(ou favoris). Ensuite, l’utilisateur a le choix de générer un PDF avec tous les articles précédemment ajoutés, d’attribuer un titre et une image. La liste des articles est stockée dans la session utilisateur, ce qui évite à l’utilisateur d’avoir un compte.

N’hésitez pas de me laisser vos commentaires pour que je puisse améliorer l’extension.

http://wordpress.org/extend/plugins/wp-handbook/

Cette déception fut rapidement oubliée lorsque j’ai découvert Font Squirrel. Tout d’abord, les bugs que j’avais expérimentés avec Cufon ne se reproduisait pas dans Font Squirrel! Ensuite, contrairement à Cufon, il est possible de sélectionner le texte généré et cela parce que Font Squirrel utilise @font-face.

Finalement, la force de Font Squirrel réside dans son outil de conversion. Il ne vous suffira que d’ajouter les fonts que vous possédez, de choisir le mode EASY ou EXPERT(EASY suffit 90% du temps) et d’accepter les ententes légales.

Après avoir téléchargé le package, vous devrez insérer stylesheet.css à votre page. Il ne vous reste plus qu’à utiliser la nouvelle font dans votre CSS:

[cci]h3 {font-family: ‘NouvelleFont’}[/cci]

N.B.: En mode EASY, le générateur prend vos fonts et les convertit en format EOT (pour Internet Explorer), SVG (Chrome, Safari, iPhone et iPad), WOFF (FireFox 3.6+) et TrueType.

Après avoir utilisé NotePad++, E-TextEditor, Eclipse, j’avais toujours le même problème. J’étais incapable d’utiliser convenablement mon gestionnaire de version et mon FTP.

Les avantages que j’ai notés avec l’utilisation de PhpStorm :

• l’intégration de Subversion, Git et CVS de base;
• la facilité avec laquelle on peut faire des commits, c’est-à-dire grâce à un raccourci clavier: CTRL-K;
• la possibilité de synchroniser mes fichiers avec le FTP au moment de la sauvegarde;
• la facilité avec laquelle on peut migrer un projet existant dans PhpStorm, d’activer le gestionnaire de version et le FTP;
• le refactor;
• les nombreux raccourcis clavier.

Les désavantages :

• Il est payant : 99$ pour une licence personnelle et 199$ pour une licence commerciale. Par contre, il existe une version étudiante gratuite permettant d’essayer la version complète de PhpStorm;
• Une interface un peu lente. Heureusement, la version 2.0 qui promet un regain de vitesse arrive très prochainement.

Vous, quel est votre outil de développement préféré et pourquoi?