Logo WordPress Channel

Développement Web > Tutoriels WordPress

Des tutoriels pour apprendre à développer en PHP sur WordPress.

wordpress-inifinite-scroll

Activer l’Infinite Scroll de Jetpack dans les pages de recherche

Jetpack est un plugin WordPress très puissant incluant de nombreux modules dont le Défilement Infini ou Infinite Scroll. En place sur WordPress Channel, ce module permet d’afficher les contenus suivants dès lors que le visiteur atteint le bas de page. La pagination disparaît au profit d’une ergonomie améliorée. Seulement voilà, ce défilement continu ne fonctionne pas sur les pages de résultats de recherche par défaut.

woocommerce-american-card

Désactiver les styles CSS sous WooCommerce 2.1

L’arrivée de WooCommerce en version 2.1 marque la séparation des styles CSS en plusieurs feuilles distinctes. Que l’on soit partisan ou non de ce type de pratique, cela n’est pas sans poser des soucis d’affichage notamment si votre thème dispose de son propre fichier woocommerce.css. Une technique consiste à désactiver toutes les CSS en une seule ligne de code.

link-zelda-wordpress

Afficher un lien pour modifier l’article dans un thème WordPress

En tant qu’administrateur de votre site WordPress, il n’est pas rare d’avoir besoin de modifier rapidement un contenu. Avec la barre d’outils, la tâche est facile mais si comme moi vous ne l’affichez pas alors un bouton d’accès rapide à l’éditeur du back-office nous simplifiera la tâche. Bien entendu, le lien sera visible des seuls utilisateurs autorisés par leur rôle.

monopoly-e-commerce

Proposer l’inscription à la newsletter Wysija (MailPoet) sur la page de commande de WooCommerce

Si vous utilisez une boutique en ligne WooCommerce sur votre WordPress, et que vous souhaitez envoyer une newsletter à vos clients via MailPoet (anciennement Wysija), il peut être intéressant de pouvoir demander directement à l’internaute depuis la page de commande, s’il souhaite s’inscrire ou non à votre newsletter.

wordress-loop

Exclure les post_formats (formats d’articles) de la boucle de WordPress

Les formats d’articles de WordPress permettent de formater un contenu selon qu’il s’agisse d’une image, d’une brève, d’un lien ou même d’une vidéo à la manière du service Tumblr. Il peut être intéressant de ne pas les intégrer dans la boucle principale de votre page d’accueil afin de ne pas perturber la lecture. Un exemple consistera notamment à les insérer dans une requête type WP_Query dans une colonne latérale ou un modèle de page.

wpchannel-isotope-portfolio-1

Concevoir un portfolio responsive avec filtre via Isotope.js sous WordPress

Un thème premium qui se respecte comporte des modèles de pages de type portfolio, très utile pour mettre en valeur vos créations artistiques notamment. La plupart d’entre eux sont dotés d’un système de filtre basé sur les termes d’une taxonomie spécialement créée pour l’occasion et le redimensionnement de la fenêtre réajuste automatiquement les éléments avec une transition en CSS3. Ce tutoriel va vous apprendre comment mettre en place un tel système sous WordPress et sans avoir recours à un plugin.

mail-timbres

Autoriser la lecture des messages Gravity Forms pour des rôles d’utilisateurs définis

Si comme moi vous utilisez le plugin de formulaires Gravity Forms pour WordPress, vous noterez qu’il n’existe pas une option permettant nativement de donner les droits de lecture sur les messages obtenus aux utilisateurs de rang inférieur à l’administrateur. Le cas classique : votre client dispose d’un accès utilisateur de rang éditeur et souhaiterait consulter les messages reçus directement depuis le back-office de WordPress.

veille-tv-responsive

Ajouter des vidéos responsive sous WordPress avec FitVids.js

L’avènement du responsive design dans la communauté des concepteurs de thèmes WordPress nécessite d’aller plus loin dans le développement d’un thème. L’affichage d’une vidéo est l’une des complexités d’un design adaptatif dans le sens où nous devons prendre en compte le redimensionnement en fonction de la résolution du navigateur. C’est là qu’intervient le script FitVids.js que nous allons intégrer dans un thème WordPress en quelques minutes.

slider-wordpress

Créer un slider en pure CSS3 / HTML5 pour WordPress

HTML5 et CSS3 ne sont pas encore tout à fait valides et restent encore en cours de transition. Néanmoins, je vous propose aujourd’hui un tutoriel (inspiré de celui-ci) permettant de créer un slider (diaporama) en HTML5 / CSS3 et ce, sans JavaScript. Et encore mieux, je l’adapte à WordPress. Au risque de me répéter, le slider présenté ici, n’est proposé qu’a titre expérimental afin de vous montrer les possibilités du CSS3  /HTML5. Il n’est pas conseillé de l’utiliser dans un cadre de développement cross-browser.

traduction-pending

Compter les articles selon leur langue avec WPML sous WordPress

Vous avez peut-être déjà eu besoin d’afficher ou de retourner le nombre d’articles publiés sur votre site, selon un custom post type ou non. La fonction WordPress qui nous aide est la suivante : wp_count_posts(). Malheureusement si vous utilisez le plugin WPML, le nombre d’articles retourné compte en fait toutes les langues sans distinction. Nous ne voulons pas ça !

Afficher le lien de l’article dans l’extrait sous WordPress

La page d’accueil de votre site WordPress affiche par défaut les derniers articles avec dans 99% des cas un extrait de quelques lignes. Or, il se trouve que bien souvent, seul le titre permet d’accéder au contenu complet… ce qui est loin d’être évident pour la majorité des internautes qui comprendront bien plus facilement si on ajoute un lien en fin d’extrait et ce, de façon automatique.

slide-css3-wordpress

Supprimer la balise p pour category_description sous WordPress

Si vous utilisez la fonction category_description ou tag_description pour afficher les descriptions de vos catégories et autres mots-clés, vous aurez remarqué que WordPress ajoute invariablement une balise paragraphe vous empêchant de personnaliser facilement ces informations. Une petite astuce va nous permettre de supprimer ce tag HTML pour repartir sur de bonnes bases.

top-restaurant

Créer un menu « stay-top » sous WordPress

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

miniature

Définir l’image à la une automatiquement à partir de la première image envoyée sous WordPress

Le module Image à la une de WordPress, qui permet de définir une miniature pour vos contenus, est très utile à condition de l’avoir utilisé dès l’origine. Cette astuce vous permettra de définir cette fameuse miniature en allant chercher la première image envoyée dans votre article ou custom post type.