8 plugins pour gérer votre webzine WordPress. La flexibilité de WordPress n’est plus à prouver : il est possible de l’utiliser pour des projets très divers, du site vitrine au webzine en passant par l’e-boutique. Dans le cas d’un webzine, il faut sélectionner minutieusement les plugins à installer, pour adapter le mieux possible WordPress à cette utilisation sans le surcharger d’extensions inutiles.
Voici ma sélection de plugins indispensables dans le cas d’un blog multi-utilisateurs. Gestion des utilisateurs Co-author Plus C’est une des lacunes de WordPress : il est pour le moment impossible d’attribuer un article à plusieurs auteurs. Co-Authors Plus Assigner de multiples auteurs à vos contenu sous WordPress. Taille : 138,7 KiB • Date : 18 février 2013 • Hits : 781 User Role Editor Les rôles d’utilisateurs de WordPress sont plutôt bien définis par défaut.
User Role Editor Un plugin pour gérer les permissions des différents rôles d'utilisateurs sous WordPress. Taille : 658,2 KiB • Date : 18 février 2013 • Hits : 1 021 Gestion éditoriale. Contact. WordPress. jQuery & Wordpress - User Interface. Dans ce tuto, je tenais à vous présenter une sous-librairie de jQuery, il s’agit de jQuery UI. Qui, même si elle est dépendante de jQuery, est très complète. Nous verrons dans un premier temps comment l’utiliser dans votre projet puis je proposerai des exemples d’applications pratiques. Importation des éléments jQuery La première chose à faire est de visiter le site web contenant cette libraire : jQuery UI. Ensuite, nous allons fabriquer notre thème. Une fois l’opération terminée, téléchargez grâce au bouton Download Theme situé en-haut du theme roller. Dans la page suivante, vous pourrez enlever les effets que vous ne désirez pas télécharger. Vous vous retrouverez avec une archive composée des fichiers suivants : Pour importer votre libraire dans votre thème WordPress voici les différentes étapes à suivre : Félicitations, vous venez d’installer votre librairie jQuery UI.
Exemples d’utilisation #1 – L’accordéon Vous avez peut-être déjà tenté de créer, sur votre site, ce type d’animation. jQuery UI & WordPress - Le bouton sous toutes les coutures. Après avoir étudié comment intégrer jQuery UI dans votre projet WordPress, apprenons comment utiliser les boutons avec cette formidable bibliothèque. 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) ; <! La classe sera récupérée dans notre code JavaScript pour identifier le bouton. 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. <! Et voila le résultat ; Sites web info. Wordpress & jQuery UI : L’accordéon d’article. Beaucoup d’entre vous me demandent comment fabriquer un système d’accordéon avec jQuery et WordPress. Un système en étant un autre. Il y a peu d’article explicatif sur cette méthode. Un manque corrigé avec ce tutoriel détaillé. Avant de commencer, je vous demande d’insérer la librairie jQuery et jQueryUI. Et pour ce faire, je vous renvoi au tutoriel sur jQuery UI.
Avec ces librairies, il est très simple de créer un accordéon. Le code avec une boucle WordPress En sortie votre code devra, stricto sensu, ressembler à ceci : <div id="accordion"><h3><a href="Lien 1">Le titre</a></h3><div>Le contenu</div><h3><a href="Lien 2">Le titre</a></h3><div>Le contenu</div><h3><a href="Lien 3">Le titre</a></h3><div>Le contenu</div><h3><a href="Lien 4">Le titre</a></h3><div>Le contenu</div></div> Pour ce faire, nous allons utiliser le loop de WordPress afin de générer ce code : <div id="accordion"><? J’utilise donc la fonction query_posts pour n’afficher que les 5 premiers articles. Résultat final. jQuery & Wordpress – Créer votre slider personnalisé. Aujourd’hui nous apprendrons à utiliser jQuery afin de créer un slider.
Plusieurs notions de WordPress vous seront utiles, notamment les query_posts et les custom fields ou champs personnalisés. Coté jQuery, tous sera décortiqué dans ce tutoriel. Pourquoi faire un slider soi-même, alors qu’il en existe une pléiade de plugin comprenant cette fonction ? Vous verrez qu’avec un peu de doigté vous pourrez arriver à un résultat plus proche de vos désidératas qu’avec un plugin car il s’agit d’une combinaison de CSS / JavaScript totalement personnalisable. Rappel sur les query_posts Le query_posts est une fonction utilisée juste avant le loop WordPress permettant de trier les résultats de ce dernier. En code, le précédent exemple donnerai ceci : Le wp_reset_query(); » sert à clore la requête pour éviter tout conflit dans le cas d’un template multi-loop. Pour notre slider nous utiliserons cette requête : Rappel sur les custom fields Ces champs peuvent faire l’objet de custom fields.
Utiliser jQuery avec Wordpress pour un effet Slide Toggle. Aujourd’hui nous allons introduire une nouvelle dimension à vos projets WordPress car je vais vous montrer comment importer la librairie jQuery et vous apprendre comment utiliser l’effet déroulant slide. Qu’est-ce que jQuery ? Tout d’abord il convient de savoir ce qu’est jQuery. Si vous êtes coutumier du JavaScript, vous connaissez sûrement jQuery.
Pour les autres, jQuery est une librairie de fonctions d’animation (en général) codé en JavaScript. La où il vous faudrait des heures de codage pour gérer une animation style fade ou autre… jQuery vous en propose prêtes-à-l’emploi. Exemple fade() : $(document).ready(function() { $('#id_element_soumis_fading').fadeIn(400); }); Le signe $ est l’identificateur de jQuery, s’en suit l’élément à modifier, et la fonction à utiliser. D’ailleurs ce n’est pas pour rien que le slogan de jQuery est : « Write less, do more » (Écrivez moins, faites plus)… jQuery et WordPress Activation de jQuery Pour l’activer, une simple commande PHP suffit : Ce qu’il vous faut :
jQuery : Le DOM & les sélecteurs. Je retrouve souvent plusieurs personnes appliquant certains de mes tutos me posant les mêmes questions ou me soumettant les mêmes problèmes d’intégration. En général, les soucis sont dû à une compréhension erronée des manipulations du DOM ou de la manière dont agit le JavaScript sur votre code. Aujourd’hui, je vous fais un petit tuto pour tous ceux qui veulent toucher à jQuery sans nécessairement comprendre tout JavaScript.
C’est pour cela que nous allons (re)voir ce qu’est le DOM ainsi que les sélecteurs utilisés dans jQuery. Coté client Comme JavaScript, jQuery est un langage qui s’exécute coté client. Vous l’avez certainement déjà entendu sans vraiment comprendre ce que cela entraine par rapport à votre code. Donc le JavaScript ne modifiera jamais du code PHP. Document Object Model Le JavaScript parcourt une page web en respectant une hiérarchie très simple que l’on nomme le DOM. Schéma – Exemple DOM Les sélecteurs Voici le secret de jQuery. La même chose est applicable avec jQuery : [nom! Créer un menu "stay-top" sous Wordpress avec jQuery. Aujourd’hui, je vous dévoile les secrets de ces menus qui font le tour du Web. J’ai nommé le menu stay-top. Un menu stay-top c’est un menu qui, lorsque votre page Web est trop longue et que vous la faites défiler, s’ancre sur le bord supérieur de votre navigateur.
A la base, il ne s’agit pas d’un tutoriel WordPress mais je vais vous montrer comment l’articuler sous notre CMS préféré. Résultat final Vous pouvez télécharger l’archive ZIP et visualisez dans votre navigateur favori le fichier index.html afin de vous donner une idée du résultat final. Étape n°1 – Constitution du menu Pour intégrer notre menu, je vais utiliser la fonction de menu personnalisé de WordPress.
Notre menu s’articulera de cette façon : Voici le résultat en sortie : La ligne 2 est optionnelle. Étape n°2 – CSS Ce que vous devez retenir : Le wrapper, comprenez la div qui englobe votre menu, doit TOUJOURS être en index supérieur au reste du site. Pour le reste, faites selon vos envies…. Étape n°3 – jQuery Enjoy !