WordPress

Facebook Twitter

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.

8 plugins pour gérer votre webzine WordPress

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. 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.

jQuery & Wordpress - User Interface

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. 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.

jQuery UI & WordPress - Le bouton sous toutes les coutures

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) ; 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.

Wordpress & jQuery UI : L’accordéon d’article

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.

jQuery & Wordpress – Créer votre slider personnalisé

Plusieurs notions de WordPress vous seront utiles, notamment les query_posts et les custom fields ou champs personnalisés. 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.

Utiliser jQuery avec Wordpress pour un effet Slide Toggle

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 : 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.

jQuery : Le DOM & les sélecteurs

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. 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.

Créer un menu "stay-top" sous Wordpress avec jQuery

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….