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.
Pourquoi Google Plus est beaucoup plus important que Twitter ou Facebook Alors oui, d’après les derniers chiffres, Facebook compte 901 millions d’utilisateurs, Twitter 555 millions et Google+ seulement 170 millions (en comptant les comptes inactifs). Mais Google Plus est beaucoup plus important pour nous blogueurs que Twitter ou Facebook. Pourquoi ? A cause de l’intégration de Google+ aux résultats du moteur de recherche Google. Suivez le guide : 1. Une fois votre compte Google+ créé et votre profil configuré, installez le plugin Google Plus Author Information in Search Result. L’avantage ? Comme ça : Cela vous différenciera automatiquement du reste des résultats, augmentant ainsi le taux de clics vers votre blog. Corolaire : un fan sur Google+ compte beaucoup plus qu’un fan sur Twitter ou sur Facebook. 2. Un tweet ou un “j’aime” Facebook c’est bien, mais une fois qu’il a été publié, il se perd dans les limbes de l’historique de l’utilisateur. Exemple : je suis Jean-François Ruiz, l’organisateur du Web Deux Connect, sur Google+. 3. 4. 5. 6. Merci !
Meilleurs Plugins WordPress- Gratuits & essentiels à installer L'un des avantages de WordPress est son nombre incroyable de plugins gratuits, cette force est aussi sa faiblesse! Petite revue des Meilleurs Plugins WordPress du moment... Pas moins de 38 997 plugins sont recensés sur le répertoire officiel, sans compter les plugins premium. Voici une petite liste non-exhaustive des meilleurs plugins WordPress gratuits du moment, dans laquelle piocher pour toute nouvelle installation WordPress. Askimet Akismet est très probablement la solution anti-spam absolue. Disqus On aime ou on aime pas, Disqus rend les commentaires plus facile et plus interactif, récemment mis à jour, il intègre en natif des fonctionnalités utiles comme Gravatars, RSS, Notation, etc. Subscribe to Comments Un plugin WordPress performant qui permet aux commentateurs de s'inscrire par e-mail à la notification d'entrées ultérieures. Mention Comment's Authors Yoast Comment Hacks Ce plugin de Yoast améliore les fonctionnalités du système de commentaires par défaut de WordPress. WP Smush.it
Transposh, pour traduire un blog WordPress en plusieurs languesLe Geek Pauvre Je suis en cours de test de l’extension WordPress Transposh, qui permet une traduction automatique de l’ensemble de mon blog. Installation facile, paramétrage pareil, et très bonnes fonctionnalités. Voilà pour le résumé. Ca faisait quand même quelques temps que je me disais « il faudrait que je propose des articles en anglais, ça donnera de la visibilité à mon blog ». Transposh, ton logo il est moche Traduction du blog Une fois l’installation terminée, vous pouvez vous rendre dans le paramétrage via le menu Réglages > Transposh. 68 langues ! Le principe : vous choisissez votre langue par défaut (je rédige en français) puis les langues de traduction. Intégration de Transposh dans WordPress Lors du paramétrage initial, vous avez la possibilité de lancer la traduction de vos articles existant, ce que je vous recommande, à des fins de référencement. Comme je le dis plus haut, vous disposez d’un widget qui vous permet de donner le choix aux internautes de choisir leur langue. Auteur : Mathieu
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 ;
Top 10 des meilleurs plugins WordPress Une liste de 10 plugins WordPress indispensables pour bien débuter la conception de votre nouveau site / blog WordPress. Une sélection entièrement subjective pour laquelle j’attends vos réactions d’utilisateurs passionnés, débutants ou professionnels. #1 – WordPress SEO by Yoast Sans doute le meilleur plugin de gestion de votre référencement sous WordPress… à condition toutefois de paramétrer finement ce dernier pour éviter une mauvaise indexation de votre site. Actuellement en place sur la plupart des mes projets Web. Alternative : Platinum SEO Pack WordPress SEO by Yoast Améliorer votre référencement (SEO) avec le plugin WordPress SEO de Yoast. Taille : 650,4 KiB • Date : 7 janvier 2013 • Hits : 3 656 #2 – Wysija Simple d’utilisation, puissant et efficace : Wysija n’est autre que le plugin ultime de gestion de newsletters. 90% des besoins standards sont couverts par cette extension si bien que je l’utilise pour le projet WordPress Channel depuis quelques semaines. Wysija Newsletters Akismet
Most Popular Free WordPress Themes » Most Popular RSS Feed Surfarama Surfarama is a bold and fun theme which uses the popular mason style layout on the home page and category pages to highlight imagery and make for a very visual presentation. Teal Responsive WordPress magazine theme with 2 home page layouts, 300x250 ads, 125x125 ads, 4 premade (Black, Blue, Light, Cream) ready to use color schemes/skins, 2 page layouts including a full width page template, custom background, featured posts, social icons, twitter updates, threaded comments and widget support. Hatch A simple and minimal portfolio theme for photographers, illustrators, designers, or photobloggers. PaperCuts PaperCuts is an easy customizable WordPress multipurpose theme. Magazino Magazino is a simple and flexible theme ideally suited to magazine style blogs. Clean Retina Clean Retina is a Simple, Clean and Responsive Retina Ready WordPress Theme which adapts automatically to your tablets and mobile devices. Business Pro Hazen Engrave (Lite) Origin
Advanced Design & Custom CSS Settings | Divi Documentation More Design Control For Those Who Need It Whenever you edit a module, row or section, you will notice three tabs in the settings popup: General Settings, Advanced Design Settings and Custom CSS. Everything you need to create awesome Divi Layouts and take full advantage of each module can be found in the General Settings tab. However, if you want even more control over the appearance of the module then you can venture in to the Advanced Design Settings. If you are a developer and you want to use your own CSS instead of using the design controls in the Advanced Design Settings, then you can venture further into the Custom CSS Tab. Advanced Design Settings Advanced design settings vary from module to module. To locate and use the Advanced Design Settings, simple edit an existing module, row or section (or create a new one) to open up the settings popup. From within this tab you can do just about anything. Custom CSS Settings
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 !
Le Guide Complet des Widgets dans WordPress Quand on commence à utiliser WordPress, on est confronté à des dizaines de nouveaux termes. Les plugins, les thèmes, les catégories, les mots-clés, la sidebar, les widgets etc. Il y a de quoi perdre la tête. Pas de panique. C’est juste une question de temps. Dans cette nouvelle recette, nous allons voir ce que sont les widgets, à quoi ils servent et comment ils vont vous être utiles. Qu’est ce qu’un widget ? Partons des acquis. Non ? C’est bon, vous l’avez lu ? Très bien. Par défaut, WordPress propose 12 widgets. Si vous avez un côté développeur, vous pouvez même créer vos propres widgets mais c’est une autre histoire. Par exemple sur la Marmite, on trouve un widget pour s’inscrire à la newsletter du blog, une liste d’articles, un encart pour Thèmes de France, un champ de recherche et un autre formulaire qui reste en haut de l’écran lorsqu’on fait défiler les articles. Comment ajouter un widget dans une sidebar Galopin possède deux zones « widgetisées » : La barre latéraleLe pied de page
50 banques d’images gratuites (et légales)... Si vous aimez le design et que vous pratiquez votre passion dans le plus strict respect des lois, alors les banques d’images gratuites, ça doit vous connaitre. Histoire de bien faire les choses, je vous propose donc de découvrir 50 adresses de sites qui risquent de s’avérer plutôt utiles. Alors la liste n’est pas exhaustive, c’est sûr, mais c’est déjà pas mal. MAJ : Cet article datant de quelques années, la plupart des ces banques d’images sont passées à un modèle payant. Donc si vous ne trouvez pas ce que vous cherchez, vous pouvez également aller lire ce billet où vous trouverez trois méthodes pour trouver et pour télécharger des images gratuites et libres de droit. TextureWarehouse : les textures y sont reines.FreeStockPhotos : ne vous fiez pas à son interface…MajesticImagery : de nombreuses galeries…BurningWell : euh… pareil :)DesignPack : images et thèmes à volonté…ZurbPhotos : des photos de Bryan Zmijewski à télécharger.AmazingTextures : lui aussi il porte bien son nom !
Divi | WP Theme FAQs Make Divi Module Settings Editor Full-Screen Show Divi Header Social Icons on Mobiles (Divi 2.4+) Changing the Footer Links in Divi If you’d like to change the Divi Theme’s default “Designed by Elegant Themes | Powered by WordPress” links, here’s how to do it. Manually Changing the Footer Links Eileen has written a post on how to manually edit the Divi Theme to change the footer links. Changing the Footer Links in Divi Booster I’ve also added an option to my Divi Booster plugin to make changing the footer easier. Enable Compression for the Divi Theme Site speed is an important topic these days with Google using the speed at which your site loads as a factor in determining how high to rank it in their search results. Hide WooCommerce Icon from Divi Header Remove Divi Theme Box Layout Shadow Lines