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.
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 ;
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 !
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
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!
Tuto Wordpress - Créer une page d'accueil avec 3 zones de widgets 1 – Ajout de la fonction sidebar à votre thème La première chose à faire est d’activer la fonction sidebar dans le fichier functions.php de votre thème. Pour cela, ajoutez le code qui suit, et personnalisez le pour ajouter autant de zones de widgets que nécessaire. // Enregistrement des sidebar et des widgets if ( function_exists('register_sidebar') ) { register_sidebar(array( 'name' => 'Footer 1', 'before_widget' => '<div id="%1$s">', 'after_widget' => '</div>', 'before_title' => '<h6>', 'after_title' => '</h6>', )); register_sidebar(array( 'name' => 'Footer 2', 'before_widget' => '<div id="%1$s">', 'after_widget' => '</div>', 'before_title' => '<h6>', 'after_title' => '</h6>', )); register_sidebar(array( 'name' => 'Footer 3', 'before_widget' => '<div id="%1$s">', 'after_widget' => '</div>', 'before_title' => '<h6>', 'after_title' => '</h6>', )); } 2 – Création du fichier template Ensuite, créez un fichier template-home.php, qui vous servira de modèle à appliquer à notre page d’accueil.
Customizr WordPress Theme Documentation This documentation aims to give beginners and advanced users an overview of what is possible with the Customizr WordPress theme. Before diving into it, you might want to check those useful pages. Theme overview Fully responsive The Customizr theme is built on a fluid flexible grid that automatically adapts to fit any screen devices : computers, laptops, tablets or smartphones. Customizr features Cross browser The Customizr theme has been successfully tested with the major browsers. Languages The theme is currently available in the following languages : Arabic (ar)Brazilian Portugues (pt_BR)Chinese simplified (zh_CN)English (default)French (fr_FR)German (de_DE)Italian (it_IT)Polish (pl_PL)Romanian (ro_RO)Russian (ru_RU)Spanish (es_ES)Swedish (sv_SE) Get started with Customizr Installation You can either download the theme from the WordPress.org platform (here) or install it through Appearance > Themes in your WordPress admin. Activation Login as an Admin User via /wp-admin. Starting up Choosing a skin