Principales fonctionnalités

Edit Flow est un projet open source mis en avant par Automattic, l’entreprise derrière WordPress. Autant dire que c’est du lourd !

• Calendrier : une vue mensuelle des contenus ;
• Budget : one vision budgétaire des contenus ;
• Statuts personnalisés : ajoutez autant d’état que souhaité pour vos contenus en plus des traditionnels Brouillon, En attente de relecture et Publié ;
• Commentaires éditoriaux : des commentaires imbriqués directement dans l’éditeur d’articles / pages de WordPress pour discuter en privé avec les éditeurs et les auteurs ;
• Métadonnées personnalisées : nombre de mots requis, nécessité de la présence d’une photo, date à laquelle sera fourni la première version, etc. autant d’informations que vous pourrez créer et imposer aux auteurs pour optimiser le flux de travail ;
• Notifications : recevez les dernières mises à jour de votre contenu ;
• Groupes d’utilisateurs : classez les utilisateurs en groupes et associez-les à des contenus ;

Le point fort de ce plugin est d’être complètement modulable : chaque fonctionnalité peut être activée à la demande.

Captures d’écran

Edit Flow et la modularité

Les métadonnées pour les éditeurs sont personnalisables

Un calendrier pour visualiser votre workflow

Obtenir Edit Flow

Edit Flow est disponible au téléchargement à partir du lien suivant :

Pour en savoir plus, consultez le site officiel editflow.org.

Edit Flow c’est tout simplement LE plugin indispensable pour des équipes de collaborateurs (rédacteurs, relecteurs, journalistes…) recherchant un système de gestion efficace de leur flux de travail. Un must !

Un format de date relatif pour vos articles

Pour utiliser ce format de date relatif dans l’affichage des métadonnées de vos articles, il nous faut intervenir dans la boucle de WordPress.

Editons ensemble le fichier single.php ou content-single.php – si vous utilisez un thème séparant les boucles comme le Twenty Eleven. Pour ce thème, il faudra intervenir plus précisément dans le functions.php pour modifier la fonction twentyeleven_posted_on.

Localisez les lignes indiquant les informations de titre, d’auteur et naturellement de date.

Remplacez la fonction de date par celle-ci :

<?php echo 'Il y a ' . human_time_diff(get_the_time('U'), current_time('timestamp')) ; ?>

Cette fonction aura pour résultat une date relative du style : Il y a X jours.

Une date humaine sous WordPress

N’oubliez pas de sauvegarder le fichier puis ouvrez l’un de vos articles pour vérifier le résultat et procédez à d’éventuels ajustements de styles.

Un format de date relatif pour vos commentaires

Il est sans doute plus intéressant d’adopter un tel format pour vos commentaires. Cela permet une meilleure traçabilité dans le temps plutôt qu’une date dont on aura du mal à calculer la différence par rapport à aujourd’hui.

Cette technique est similaire à celle utilisée pour vos articles :

<?php echo 'Il y a ' . human_time_diff(get_comment_time('U'), current_time('timestamp')) ; ?>

J’hésite à adopter ce format de date pour les commentaires de ce blog. Qu’en pensez-vous, ne serait-pas trop inspiré de Facebook ? Meilleur d’un point de vue SEO ?

Vous pouvez également passer le client FTP en localisant le fichier en question dans le dossier /wp-content/themes/NOM_DU_THEME :

<?php function wpc_rss_miniature($excerpt) {
global $post;

$content = '<p>' . get_the_post_thumbnail($post->ID) .
'</p>' . get_the_excerpt();

return $content;
}
add_filter('the_excerpt_rss', 'wpc_rss_miniature');
add_filter('the_content_feed', 'wpc_rss_miniature'); ?>

N’oubliez pas de sauvegarder les changements.

Pour vérifier le résultat, ouvrez le flux RSS en ajoutant /feed dans l’URL de votre site WordPress.

Si aucun changement n’apparaît, videz le cache du navigateur.

Les images à la une sont présentes dans le flux RSS

Dans les lignes de code proposées, l’extrait de l’article est repris. Prenez soin de remplacer get_the_excerpt par get_the_content pour afficher l’intégralité du contenu.

Il existe de nombreux moyens pour personnaliser le flux RSS, un outil indispensable pour faire de la veille technologique. Dommage que les navigateurs ne mettent pas plus en valeur cette fonctionnalité.

N.B : WordPress Snap m’avait été proposé par Valentin lors d’une discussion sur notre forum en réponse à une discussion de kiwii.

Principales fonctionnalités

Ce plugin se veut simple et efficace : il l’est !

Une fois activé, il suffit de créer un nouvel article pour voir apparaître un nouveau bouton dans l’éditeur TinyMCE de WordPress.

Cliquez dessus et vous aurez accès à une fenêtre d’information. Il suffit de saisir et de configurer les différents champs proposés.

Publiez la page et vous obtiendrez une miniature correspondant à l’URL saisit.

Pour utiliser WordPress Snap dans un thème, utilisez la fonction shortcode de WordPress :

<?php echo do_shortcode("[snap url="http://wpchannel.com"]"); ?>

Captures d’écran

Fenêtre de création d'une miniature de site

WordPress Channel miniaturisée par le plugin WordPress Snap

Obtenir WordPress Snap

Pour télécharger gratuitement ce plugin, cliquez sur le lien ci-dessous :

Comme je l’avais indiqué sur le forum, WordPress Snap est utile mais il manque quelques fonctionnalités pour l’améliorer comme : l’intégration au module de liens de WordPress, la compatibilité avec les widgets, etc. mais peut-être un développeur pourrait-il donner un coup de main à son auteur ?

 Aperçu

Convertible ou comment capter l'attention de vos prospects

 Fonctionnalités

Conception assistée via glisser / déposer

Ce thème est différent des classiques de chez Elegant Themes. Il dispose d’un outil de conception de votre page d’atterrissage via glisser / déposer.

En quelques clics, vous composez vous-même les éléments qui s’afficheront sur votre page d’accueil.

Convertible, "convertir des prospects" ou "un thème sur-mesure"

Modules prêts-à-l’emploi

Parmi les nombreux modules proposés, on va notamment retrouver :

• Des sliders jQuery ;
• Des images avec effet Lightbox ;
• L’ajout de vidéos ;
• Des onglets ou des effets toggle pour le texte ;

Obtenir Convertible

Pour convertir vos futurs clients, Convertible est véritablement le thème qu’il vous faut :

Les thèmes WordPress drag and drop ont le vent en poupe ces temps-ci… une évolution positive ou plutôt utile pour certains segments du marché ? Partagez votre analyse !

Rétrospectives pour 2011

Quelques statistiques Google Analytics pour WordPress Channel dont certaines m’ont positivement surprises comme le nombre de téléchargements des podcasts ou le nombre de vues des vidéos qui sont hébergées sur YouTube.

N.B : les données manquantes sont dues à la difficulté d’obtenir des statistiques à partir des outils de tracking.

Parmi les infos amusantes, Firefox et Chrome représentent +75% des visites (+50% pour Firefox). Les versions mobiles explosent… grâce à la mise en place d’une version mobile récemment que j’explique plus bas. MacOS représente 25% et Linux 5% alors que Windows atteint 68% – mais en baisse par rapport à 2010.

La résolution d’écran numéro 1 est de 1280×800 et l’on grimpe vite dans les hautes définition. Cela est d’autant plus important que la taille du site est prévue pour ce type de résolution et que les vidéos sont encodées en 1920×1200. Il faut atteindre la 9e place – 1024×768, pour obtenir une résolution inférieure.

En 1 an, les visiteurs ont plus que doublé ! Merci à vous !

Nouveautés 2012 pour WordPress Channel

#1 – Version mobile pour smartphones / iPad

Si vous consultez le site à partir d’un iPhone ou d’un iPad, une version adaptée à votre écran sera affichée en plus de fonctionnalités spécifiques. Les autres marques de smartphones sont prises en charge également.

Une application dédiée sera très bientôt disponible ! Je vous en reparlerai…

#2 – Audit de sécurité

Les plugins proposés régulièrement sur ce site feront l’objet d’audit de sécurité pour détecter les failles par BoiteAWeb. Les développeurs des extensions seront prévenus et une mention spéciale est apposée dans la description de chaque téléchargement indiquant si oui ou non elle présente des risques.

Bien entendu, cela ne signifie pas que le plugin est mauvais et qu’il ne faut pas l’utiliser – car dans ce cas, vous n’allez pas en installer beaucoup… mais qu’il faut en être conscient.

#3 – Un nouveau rédacteur

Cybercraft a déjà publié 3 articles sur WordPress & jQuery et si comme lui vous souhaitez nous rejoindre pour partager votre passion de WordPress, n’hésitez pas à me contacter !

Il s’agit d’un bon moyen pour gagner en visibilité et d’être reconnu par la communauté francophone.

Enquête lecteur 2012

A votre tour de prendre la parole en remplissant ce sondage rapide qui me permettra d’améliorer le projet WordPress Channel !

Merci à tous de votre fidélité et bonne année 2012, riche de nouveautés pour WordPress !

Crédits photo : [ Mooi ]

REMARQUE : Sachez que l’importation d’une librairie complète pour 2, 3 boutons est à proscrire. Bien que mes exemples portent sur des problèmes simplistes, on utilisera plus souvent une libraire de cette envergure pour créer une interface utilisateur complète dont la création de boutons est une étape importante.

———

Le bouton de base

Pré-requis :

• Un lien ou un bouton en HTML ;
• Ajoutez un attribut class quelque soit la méthode utilisée (lien ou bouton) ;

<!-- lien -->
<a href="lien" class="button">Lien</a>
<!-- Bouton 1 -->
<input type="submit" class="button" value="Sauvegarder" />
<!-- Bouton 2 -->
<input type="submit" class="button" value="Sauvegarder" />

La classe sera récupérée dans notre code JavaScript pour identifier le bouton. Encore une fois jQuery UI fera le reste :

jQuery(function() {
	jQuery( '.button' ).button();
});

Vous devriez obtenir un bouton aux couleurs du thème jQuery UI de votre choix.

Le bouton avec une icône

Vous l’aurez sans doute remarqué lors de la sélection de votre théme, jQuery UI importe dans votre projet une série d’icône à tout faire.

Notez simplement qu’il est possible d’insérer ces icônes devant votre bouton. En voici la méthode.

Liste des icônes importez avec la librairie jQuery UI

Reprenez votre lien de tout à l’heure et ajoutez-y une classe de plus intitulée save. Imaginons que sur cette classe nous voulions insérer l’icône du « V ».

<!-- lien -->
<a href="lien" class="button save">Enregistrer</a>

Voici le code JavaScript correspondant :

jQuery(function() {
	jQuery( '.button' ).button();
// ---[ Save ]
	jQuery(function() {
		jQuery( '.save' )
		.button({
			icons: {
				primary: 'ui-icon-check' //ID de l’icône en forme de V
			},
		});
	});
});

Et voila le résultat ;

Sachez que vous pouvez ajouter également une 2e icône avec secondary. Celle-ci s’affichera après le texte de votre bouton.

Le bouton puce

Créez des puces sous forme de boutons rend le design de vos formulaires agréable à regarder. les choses vont se compliquer un petit peu dans le sens ou il nous faudra définir un conteneur.

Pré-requis :

• Une liste de puces ;
• Un conteneur de type <div> ;

Ajoutez un id à votre <div>, par exemple radio :

<div id="radio">

<label for="radio1">Puce 1</label>
<input type="radio" id="radio1" name="radio" />

<label for="radio2">Puce 2</label>
<input type="radio" id="radio2" name="radio" checked="checked" />

<label for="radio3">Puce 3</label>
<input type="radio" id="radio3" name="radio" />

</div>

Vous remarquerez que je n’ai mis à aucun endroit la classe button ou encore save.

L’attribut clé de ce code est bien l’id de la div. Passons au JavaScript :

$(function() {
		$( "#radio" ).buttonset();
	})

Résultat :

La fonction .buttonset de jQuery UI peut être utilisée dans un champ de boîte à cocher. Exactement de la même façon que précédemment.

Happy coding avec jQuery UI !

Principales fonctionnalités

La liste des fonctionnalités est tout simplement hallucinante et je vous renvoie sur le site officiel de WP-Shopified pour en consulter la totalité. Voici tout de même une sélection d’options très intéressantes :

• Installation comme un thème WordPress : au-delà des options du plugin, WP-Shopified s’installe comme un thème ;
• Intégration complète à Paypal pour accepter les paiements par carte bleue ou Paypal ;
• Widgets : produits les mieux notés, produits les plus populaires, rotation de produits, produits mis en avant ;
• Utilisation de jQuery : zone de connexion en pop-up, panier dynamique, survol des photos dans une galerie produits, etc. ;
• Envoi automatique par PDF de la facture au client ;
• Utilisation intensive des custom post types pour WordPress ;
• Gestion des stocks ;
• Gestion multi-devises ;
• Ajout de caractéristiques personnalisées pour vos produits (exemple : choix des composants informatiques d’un ordinateur) ;
• Création de catégories ;
• Prise en charge de produits à télécharger ;
• Modification des chaînes de traduction directement via l’interface de WordPress ;
• Statistiques de vente et de paiements ;
• Gestion de la clientèle ;
• Fourni avec un manuel de documentation complet ;

Captures d’écran

Démonstration d'une boutique WP-Shopified

WP-Shopified dispose de nombreux paramètres pour gérer votre site e-commerce

WP-Shopified permet de personnaliser chaque produit mis en vente

Trois niveaux de navigation avec WP-Shopified

Obtenir WP-Shopified

Ce plugin ne coûte que 29,95 € ! Autant dire qu’il est quasi-gratuit pour un usage e-commerce.

Intégration poussée sous WordPress 3.x, gestion de produits personnalisés, panier d’achat jQuery, paiements gérés via Paypal… bref, WP-Shopified n’a rien à envier à ses concurrents. Une alternative qui monte très vite en puissance : 2012, année du développement e-commerce sous WordPress ?

Principales fonctionnalités

Wysija Newsletters est disponible en plusieurs versions : une version gratuite que je vous détaille ici et une version premium. Un bon moyen de proposer un plugin plus complet pour des utilisateurs aux besoins plus avancés.

Dans sa version gratuite, Wysija dispose des fonctionnalités suivantes :

• Editeur « What you see what you get » : pas besoin de connaître le code HTML ;
• Limite de 2 000 abonnés ;
• Composition de votre newsletter par glisser / déposer ;
• Possibilité d’insérer vos articles WordPress ;
• 6 thèmes prêts-à-l’emploi ;
• Widget d’abonnement ou shortcode ;
• Import / export de listes d’abonnés ;
• Synchronisation avec les utilisateurs WordPress ;
• Activation ou non par e-mail (opt-in) ;
• Statistiques ;

Captures d’écran

Les thèmes disponibles sont d'excellente qualité !

Une configuration simple mais suffisante, accessible à tous les niveaux d'utilisateurs

Vidéo de présentation

Obtenir Wysija Newsletters

Téléchargez sans plus attendre cet excellent plugin sur le référentiel WordPress :

Wysija remplit à merveille son objectif : concevoir une newsletter de qualité avec WordPress en toute simplicité. Pari réussi pour une extension qui se veut à l’opposé d’une usine à gaz. A tester d’urgence !

Quel est l’intérêt de créer un plugin de fonctions pour WordPress ?

On a tendance à insérer de nombreuses fonctions PHP dans le fameux fichier functions.php présent dans n’importe quel thème WordPress.

Cette technique est simple à comprendre pour des utilisateurs débutants mais pour un projet professionnel, il peut être intéressant de séparer les fonctions qui ont un impact direct sur le thème de celles qui ont un impact sur le contenu.

Ainsi, il est possible de créer un rapide plugin – quelques lignes de code très simple, pour appliquer de façon automatique vos fonctions qui n’ont pas de liens avec le thème. Vous aurez ainsi la possibilité de tester différents thèmes tout en conservant les fonctionnalités de votre plugin.

Comment créer votre plugin de fonctionnalités ?

Pour ce faire, connectez-vous sur votre serveur FTP puis rendez-vous dans le dossier /wp-content/plugins/

Créez dans ce répertoire un nouveau dossier intitulé votresite-fonctions.

Le titre de ce dossier est important car il devra être réutilisé pour créer un fichier votresite-fonctions.php dans ce nouveau dossier.

Adaptez ensuite les lignes de code suivantes à votre site :

<?php
/*
Plugin Name: WordPress Channel fonctions
Description: L'ensemble des fonctions globales du site.
Version: 0.1
License: GPL
Author: Aurelien Denis
Author URI: http://wpchannel.com/
*/
?>

Fonctionnalités à insérer dans votre plugin de fonctions

Il nous faut à présent copier / coller ici dans ce fichier les fonctions PHP qui n’ont rien à faire dans un thème. Par exemple :

• Les custom post types ou type de contenu personnalisé ;
• Les custom taxonomies ou taxonomies personnalisées ;
• L’ajout de jQuery via Google ;
• Les hacks pour personnaliser l’administration de WordPress ;

Fonctionnalités à conserver dans le fichier functions.php du thème

Gardez tout ce qui concerne directement le thème, autrement dit le contenant :

• Les menus personnalisés ;
• Les sidebars widgetisées ;
• Certains scripts jQuery relatifs à votre thème ;

Bien évidemment, ces 2 listes ne sont pas exhaustives. Il faut vérifier au cas par cas par rapport à vos besoins réels.

Une fois les fonctions ajoutées, n’oubliez pas d’activer votre plugin !

Prenez soin de distinguer les fonctions dans un plugin

Activer automatiquement votre plugin de fonctionnalités

Pour aller plus loin, je vous conseille de créer un répertoire mu-plugins dans le dossier /wp-content/ et d’y placer directement votre plugin.

De cette manière, le plugin sera automatiquement activé et l’administrateur du site ne pourra pas le désactiver. Idéal pour appliquer des fonctions de masse.

Un dernier conseil consistera à créer un fichier lisez-moi.txt pour récapituler l’intégralité des fonctionnalités que vous aurez ajoutées au fil du temps.

Séparer le contenu du contenant est la base d’un site Web moderne, séparer les fonctionnalités qui impactent le contenant et le contenu est sans doute la prochaine étape. Au boulot ! 

Crédits photo : Sean MacEntee