Personnalisation Widge WordPress
Personnalisation Widge WordPress

11 personnalisations pour vos widgets textes

Parlons code HTML aujourd’hui…Mais ne partez pas tout de suite
Le codage HTML n’est sans doute pas le sujet que vous préféreriez voir aborder, mais ce sera ici pour la bonne cause que nous nous familiariserons avec cet outil, dans le but de vous donner plus de liberté dans la présentation de votre site.

Nous nous concentrerons en effet sur la seule utilisation du widget texte qui, sous des dehors humbles, cache pourtant beaucoup de puissance et de modularité. Ce module n’est pas un plugin car il est livré par défaut dans toutes les installations WordPress. Avec un peu de personnalisation, il peut se prêter à beaucoup d’usages pour peu qu’on le paramètre : vous pourrez ainsi ajouter des vidéos, des bandeaux promos, du texte de présentation, des listes produits, des images, des liens, etc.

Un widget, qu’est-ce que c’est ?

Widget est une mot valise formé à partir de Windows et Gadget. Les widgets augmentent l’interactivité et accroissent les fonctionnalités de votre site en ajoutant dans la barre latérale de nouvelles possibilités telles l’affichage de catégories, de nuages de mots clefs, d’un champ de recherche, etc. Vous trouverez de nombreux widgets présents sur mon blog dans la barre latérale sur le coté droit de cet article.

Attention, certains thèmes ne pas ‘Widgetizable’ et n’offrent pas la possibilité d’ajouter des widgets dans votre site.
Si vous désirez cette fonction, assurez-vous que votre template soit ‘widget ready’ (vous pouvez également aménager votre thème moyennant un peu de connaissance du code, ou avec le concours d’un professionnel)

apparence widget

Paramétrer

1Dans votre espace d’administration, vous pouvez accéder à l’ajout de widget en allant sur Apparence>Widget

(Vous trouverez ici des milliers de widgets compatibles WordPress)

widget texte

Activer

2Pour activer un widget, il vous suffit de faire glisser le widget de votre choix dans la barre latérale, ou de cliquer sur Le mot Texte pour l’attribuer à telle ou telle zone de votre site.
Pour retirer le Widget, cliquez sur Supprimer ou faite le glisser sur le coté gauche avec les autres widgets

classer votre widget

Organiser

3Pour ré-organiser les widgets en place dans la zone de barre latérale, il vous suffit de cliquez dessus et de les faire glisser à l’endroit choisi.
Certains widgets demandent à ce que vous enregistriez la personnalisation choisie : cliquez sur Enregistrer pour valider vos modifications

Deux outils permettent d’importer du texte : utilisez les à bon escient

Widget html personnalisé

HTML PERSONNALISÉ

Ce widget permet d’ajouter du code HTML, CSS, JS. Il le conserve fidèlement sans trahir sa grammaire, mais ne permet pas aisément d’avoir une vision WYSIWYG de votre ajout

widget texte

WIDGET TEXTE

Ce widget hérite des fonctions historiques du widget texte et s’est enrichi par quelques fonctionnalité qui permettent de présenter votre texte.

Avec JetPack, ces widgets peuvent d’adjoindre d’une fonction « Widget Visibility » qui permet de choisir les implantations desdits widgets. Vous trouverez prochainement plus d’information dans la partie 10 | Maîtrisez précisément l’emplacement de votre widget texte un peu plus bas sur cette page.

11 ateliers pratiques pour insérer du contenu dans le widget texte

1 | Ajoutez du texte

C’est bien évidemment la destination première de ce widget.
Il existe néanmoins un paramétrage qui n’est pas forcément compréhensible au premier abord, celui de la case à cocher Créer automatiquement les paragraphes.
En effet, le widget qui se comporte comme un émulateur du langage HTML ne reproduit pas naturellement les sauts de ligne que vous voudriez ajouter (en cela, il se comporte comme dans un vrai éditeur html). Il faut donc utiliser certains codes html (que je détaille ci-dessous) pour reproduire cette mise en forme…A moins que vous ne cochiez la case de création des paragraphes. WordPress ajoutera alors pour vous les espaces nécessaires.
→ Vous pouvez copier ce code pour un exemple d’intégration de Texte dans le widget texte

<!--La balise "p" permet de créer des paragraphes et donnent l'impression de sauter une ligne-->
<p>un paragraphe</p>
<p>un autre paragraphe</p>

<!--La balise "br" permet de retourner à la ligne-->
une ligne<br/>
mise à la ligne
<!--Elle est auto fermante (une seule balise suffit)-->

<!--La balise "hr" permet d'ajouter un soulignement-->
<hr/>
<!--Elle est auto fermante (une seule balise suffit)-->

<!--Le code "&amp;nbsp;" permet d'ajouter un espace vide-->
Il est difficile à illustrer car il est précisément invisible
Essayez le entre deux balises <p>

[/php]
Notez qu'il existe d'autres mises en formes, telle le gras, l'italique, le souligné, mais que celles-ci sont directement accessibles avec votre éditeur WordPress (voir la méthode de l'éditeur dans la vidéo Atelier de synthèse un peu plus bas). Je ne les détaille donc pas ici.

2 | Multiples images dans un widget

010203

Cela nécessite que vous connaissiez un tant soit peu un éditeur d'image comme Photoshop ou Gimp (ce dernier est gratuit). Vous pourrez trouvez de précieux conseils sur le maniement de Gimp en consultant le tutoriel sur le redimensionnement d'image que j'ai préalablement édité. Considérons que vous avez maîtrisé ces bases.
Nous allons mettre en place ce qui pourrait être un menu à plusieurs entrées, composé uniquement d'images. Vous remarquerez dans le code l'utilisation de positionnement flottant qui va permettre de mettre les images les unes à côté des autres.
→ Vous pouvez copier ce code pour un exemple d'intégration de plusieurs images dans le widget texte. Ce code intègre un lien sous chaque image, lien que vous pourrez modifier facilement. Chaque image est en flottaison, ce qui leur permet de s'aligner sagement sur la verticale. Vous remarquerez à la fin de ce code, une balise "clear" dans une "div" permet de rompre la flottaison. Faites des tests avec du texte après ces images pour bien comprendre ce qu'elle permet.
A noter : ce genre de balise se place normalement dans la feuille de style et non de façon brouillonne dans du style en ligne, mais la pédagogie m'oblige à passer par de tels procédés, vous m'en excuserez.

<a href="https://www.fabricecourt.com"><img class="alignleft wp-image-7232 size-full" src="https://www.fabricecourt.com/wp-content/uploads/2015/01/01.jpg" alt="01" width="150" height="150" /></a><a href="https://www.fabricecourt.com"><img class="alignleft wp-image-7233 size-full" src="https://www.fabricecourt.com/wp-content/uploads/2015/01/02.jpg" alt="02" width="150" height="150" /></a><a href="https://www.fabricecourt.com"><img class="alignleft wp-image-7234 size-full" src="https://www.fabricecourt.com/wp-content/uploads/2015/01/03.jpg" alt="03" width="150" height="150" /></a>
<div style="display: block; clear: both;"></div>[/php]


3 | Ajoutez une vidéo

Intégrer une vidéo dans wordpressTous les grands diffuseurs de vidéo (Youtube, Viméo, Daily motion) offrent la possibilité d'incorporer une vidéo dans un site Web. Il est une fois de plus nécessaire de bien connaître la dimension de votre sidebar (ou barre latérale) pour que votre vidéo s'inclue parfaitement (voir le chapitre firebug). Une fois cette formalité validée, il est très facile de recopier le code que vous fourni automatiquement le diffuseur et de l'intégrer dans un widget texte.

  • Sur Vimeo par exemple, il vous suffit d'appuyer sur le bouton "share" placé en haut à gauche de la vidéo, puis sur "Customize embed options" pour disposer de plus de paramétrages
  • Sur Youtube, il suffit de cliquer sur partager, puis intégrer pour obtenir les paramètres d'intégrations.

→ Vous pouvez copier ce code pour un exemple d'intégration d'une vidéo dans le widget texte

[/php]


4 | Ajoutez un bouton de paiement Paypal

Bouton paypal pour WordPressIl est très aisé d'ajouter un bouton d'achat relié à votre compte Paypal.
Cela peut vous permettre de vendre sporadiquement quelques articles (attention, cela ne saurait remplacer une vraie boutique marchande en ligne, et cette fonction doit être réservée pour quelques articles sans gestion de stock).
Il vous suffit pour cela de disposer d'un compte Paypal et de vous référer à leur site pour créer un bouton ad hoc. Notez que cette même technique vous permet également de créer un bouton de don ou un chèque cadeau.
Pour ce faire :

  • Connectez-vous sur Paypal
  • Cliquez sur l'onglet Solutions e-commerce, puis cliquer sur le bouton Acheter→ Vous pouvez copier ce code pour un exemple d'intégration d'un bouton Paypal dans le widget texte

5 | Ajoutez des mises en formes CSS

Contenu-texteSi le cœur vous en dit ou qu'un courage suffisant vous anime, vous pouvez également ajouter quelques mises en forme avec du langage CSS (Cascading Style Sheets). Ce langage est utilisé pour définir la mise en forme de votre site, comme par exemple la couleur du fond de votre page ou le type de police employé. On utilise un fichier séparé du contenu (que l'on nomme souvent "style.css") pour définir l'aspect, la présentation de votre blog.

Même si c'est un peu moins élégant de procéder ainsi (il faudrait en effet mieux passer par une feuille de style externe, mais ce serait trop long à décrire), on peut également ajouter des mises en forme "en ligne", c'est-à-dire directement au coeur de votre paragraphe. Voici un court exemple de ce que vous pourriez faire :

Votre contenu texte

[/php]
Quelques éclaircissement sur le bon usage de ces règles

  • Notez que l'appel des règles est précédé de la balise style, puis du signe égal et d'un jeu d’apostrophe ; chaque règle CSS est séparée par un ";"
  • Vous pouvez à loisir supprimer ou rajouter des éléments placés entre les points-virgule.
  • Padding exprime la marge intérieure entre le texte et la bordure de votre bloc (cette marge est de 12px)
  • Background color défini la couleur de fond de votre bloc texte. Vous pouvez aisément choisir votre couleur avec un logiciel type Photoshop ou une extension comme Colorzilla
  • Border exprime la bordure. Elle est libellée ainsi Taille-type de bordure - Couleur. On aurait pu ainsi mettre 1px dashed #94122C

6 | Créer un effet rollover avec une seule image et du CSS

Encore un peu plus loin dans l'appel de vos compétences, je présente ici une solution aux plus avancés d'entre vous. Il s'agit de créer un effet rollover (soit une image dont l'état se modifie -forme, couleur, texte- lorsqu'elle est survolée par le curseur de la souris) uniquement avec du CSS. J'utilisais auparavant une technique à base de javascript avec un code long comme l'avant-bras (si vous disposez de Dreamweaver et que vous créer cette fonctionnalité en mode visuel, vous me comprendrez).
Rollover avec du code css dans un widget texte
Il existe une solution plus simple à base d'un peu de code CSS et d'une seule image. La difficulté de l'exercice tient juste de l'implémentation dans votre feuille de style, et de la personnalisation de ce bout de code CSS.
Ce premier bout de code est à personnaliser selon votre besoin et à ajouter dans le fichier style.css de votre thème :

a.nouvelleimage {
background: transparent url("https://www.fabricecourt.com/wp-content/uploads/2013/02/Voulez-vous-une-nouvelle-image.jpg") no-repeat scroll 0 0;
display: block;
height: 120px;
width: 244px;
}
a.nouvelleimage:hover {
background-position: 0 -120px;
}[/php]
puis ajouter ce bout de code dans votre widget texte
 <a title="Voulez vous une nouvelle image pour votre entreprise" href="https://www.fabricecourt.com/voulez-vous-une-nouvelle-image-pour-votre-entreprise/" class="nouvelleimage"></a>

L'ensemble du code est bien entenu à paramétrer pour que cela fonctionne avec VOTRE site et VOTRE image :)

Ceci donne en définitive le résultat suivant
(Passez votre souris sur l'image pour faire apparaître le rollover)

Pour réussir votre intégration, soyez bien conscient des principes suivant :

  • La classe (ici 'imagerollover') doit bien-être reportée dans le code du widget pour pouvoir agir
  • Ne manquez pas de bien paramétrer la taille de votre image dans 'width:-indiquerUnehauteur- px; height:-indiquerUneLargeur- px;' pour que le cadrage s'effectue convenablement
  • Régler la valeur de background-position à la moitié de votre image totale (ici 240/2=120px)

7 | Une case déroulante

Cet atelier a été sollicité par une des commentatrices de ce blog : comment créer une case avec un ascendeur latéral ? Là aussi, il existe plusieurs façons de l'envisager, mais le plus simple est encore d'ajouter un bout de CSS au milieu d'un tableau. La balise 'table' va créer ce tableau, et la propriété 'overflow' va autoriser le dépassements de blocs (la qualité 'auto' ajoute une barre de défilement horizontale ou verticale si besoin ; on peut la remplacer par 'overflow:scroll' pour ajouter ascenseur dans tous les cas).

Quanta autem vis amicitiae sit Ex hoc intellegi maxime potest, quod ex infinita societate generis humani, quam conciliavit ipsa natura, ita contracta res est et adducta Ultima Syriarum est Palaestina per intervalla magna protenta, cultis abundans terris et nitidis et civitates habens quasdam egregias, nullam nulli cedentem sed sibi vicissim velut ad perpendiculum aemulas: Caesaream, quam ad honorem Octaviani principis exaedificavit Herodes, et Eleutheropolim et Neapolim itidemque Ascalonem Gazam aevo superiore exstructas.

[/php]

Voici le résultat
Quanta autem vis amicitiae sit
Ex hoc intellegi maxime potest, quod ex infinita societate generis humani, quam conciliavit ipsa natura, ita contracta res est et adducta.
Ultima Syriarum est Palaestina per intervalla magna protenta, cultis abundans terris et nitidis et civitates habens quasdam egregias, nullam nulli cedentem sed sibi vicissim velut ad perpendiculum aemulas: Caesaream, quam ad honorem Octaviani principis exaedificavit Herodes, et Eleutheropolim et Neapolim itidemque Ascalonem Gazam aevo superiore exstructas.

Ne manquez pas de bien ajouter votre texte entre des balises 'p' pour que l'effet fonctionne.
L’ascenseur peut également supporter du code CSS, mais j'ai préféré faire simple pour cet exemple.


8 | Du php dans le Widget Texte ?

Nativement, le widget texte ne permet pas l'inclusion de code PHP. On peut détourner sa fonction première en utilisant une fonction supplémentaire (à ajouter dans le fichier functions.php de votre thème enfant).

add_filter('widget_text', 'php_text', 99);
function php_text($text) {
if (strpos($text, '<' . '?') !== false) { ob_start(); eval('?' . '>' . $text);
$text = ob_get_contents();
ob_end_clean();
}
return $text;
}[/php]
Ce bout de code a tellement été pillé que je n'arrive plus à trouver la source. Je l'ai personnellement tiré d'un article de apinapress qui propose en outre une utilisation intéressante avec un exemple de code PHP. Restez simple dans vos inclusions PHP. Si le code à ajouter s'avère trop touffu, mieux vaut alors concevoir cette fonctionnalité ailleurs que dans le widget.

→ Vous pouvez également utiliser une extension dédié à cela : http://wordpress.org/plugins/php-code-widget/
+ Avantage : la mise à jour pour de nouvelles fonctionnalités et d'éventuelles failles de sécurité (enfin on l'espère)
+ Inconvénient : encore un plugin de plus dans mes extensions :(


9 | Ajouter un shortcode dans la sidebar

Les shortcodes sont un moyen puissant de concentrer des fonctionnalités. Il peut être frustrant de ne pas pouvoir intégrer ce concentré de puissance dans un widget, comme un slider ou une géniale mise en forme proposée par votre site.

Pour permettre l'affichage et l'autorisation de shortcodes dans le widget texte, il faut ajouter un petit bout de code dans le fichier functions.php.

//Ajout de shortcode dans les widgets de la sidebar
add_filter('widget_text', 'do_shortcode');[/php]
Une fois cet ajout mené, vous pourrez donner libre cours à votre créativité.


10 | Maîtrisez précisément l'emplacement de votre widget texte

Cette nouvelle personnalisation s'appuie sur les capacités d'un plugin bien connu et qui permet de moduler l'affichage de votre widget texte selon que vous êtes sur telle ou telle page. Cela peut-être très utile si vous n'avez pas un nombre quasi-infini de sidebar et que vous voulez moduler les informations affichées.
widget texte conditionnal tags
Pour cela :

  • ajouter tout d'abord le plugin ad hoc sur votre installation WordPress : Widget Logic
  • Après avoir activé le plugin, tournez vous vers l'interface d'administration des widgets dans Apparence > Widget
  • Sous la plupart des widgets activés, il existe maintenant un champ Widget logic dans lequel vous pouvez ajouter une condition logique
is_home() /*uniquement sur la page d'accueil*/
!is_home() /*partout, SAUF sur la page d'accueil */
is_single('mon-super-logo') /*sur l'article "Mon super logo" (précisez le permalien dans la condition) */
is_home() && is_page('mon-super-tuto') /*sur la page d'accueil et la page "Mon super tuto" */
has_term( "bracelets", "slug-de-votre-categorie-de-produit" ) /* pour n'afficher le widget que sur les produit d'une catégorie déterminée*/
is_category(array(1,5,10,15)) /*sur les catégories dont les numéros d'ID sont 1,5,10,15*/[/php]
Vous pouvez consulter toutes les recettes et codés liés à ce plugin sur cette page. Approfondissez encore vos connaissances avec les conditionnals tags disponibles sur WordPress.
Vous pouvez également consulter cette page qui contient l'ensemble des tags conditionnels pour WooCommerce


11 | De l'utilisation de Firebug


Video wordpress hdLes vidéos présentes sur ce tutoriel ont été enregistrées en HD.
Ne manquez pas de sélectionner la plus grande qualité (720HD)
en cliquant sur le petit engrenage présent dans la barre de réglage de la vidéo,
ce pour obtenir la meilleure définition.

Vous pouvez également afficher la vidéo plein écran pour bénéficier de plus de clarté
(sortez de ce mode en appuyant sur la touche ESC)


Video wordpress hdLes vidéos présentes sur ce tutoriel ont été enregistrées en HD.
Ne manquez pas de sélectionner la plus grande qualité (720HD)
en cliquant sur le petit engrenage présent dans la barre de réglage de la vidéo,
ce pour obtenir la meilleure définition.

Vous pouvez également afficher la vidéo plein écran pour bénéficier de plus de clarté
(sortez de ce mode en appuyant sur la touche ESC)


12 | Atelier de synthèse : installation d'un encart publicitaire

Merci de votre attention

N’hésitez pas à commenter cet article. Je vous répondrai dès que possible

→ Dernière mise à jour : Mars 2018

183 réponses
  1. Jean-Louis ROSSET
    Jean-Louis ROSSET dit :

    Bonjour,

    L’extension Firebug aurait peut-être pu me permettre de personnaliser le site dont je m’occupe, mais j’apprends qu’elle n’est plus disponible chez Firefox.
    Je me suis décidé il y a peu à créer un thème-enfant à partir de son parent Catch-Everest. Je remarque que la feuille de style de l’enfant est sommaire et renvoie au thème-parent. Mais il y a un « CSS additionnel » sous Apparence / Personnaliser.
    Moi, j’aurais voulu rétrécir la largeur de la barre latérale qui contient un menu vertical (ou élargir le corps du site (Body, je crois), ce qui revient au même. Ou bien encore avoir un étalement du texte principal autour et au-dessous de ce widget. Mais je ne sais pas comment y parvenir.
    Pouvez-vous me donner un petit coup de main ?

    Merci d’avance.
    Jean-Louis R.

    Répondre
    • Fabrice Court
      Fabrice Court dit :

      Bonjour Jean-Louis
      Ce n’est malheureusement pas très nouveau que Firebug n’est plus disponible. J’aimais beaucoup Firefox, mais l’inspecteur de code est (en tout cas sur ma bécane) poussif et lent à s’afficher. Je suis donc passé sur Chrome alors que j’aurai voulu privilégier ce navigateur plus indépendant. Bref…
      Pour résoudre votre souci, votre intuition est la bonne : réduire d’un coté et agrandir d’un autre. Si on choisit par exemple d’augmenter de 100px la zone principale, vous pourrez utiliser les réglages suivants :

      #secondary {width: 200px}
      @media screen and (min-width: 1190px) {#primary {width: 790px} }

      Si toutefois cela ne marche pas, ajouter des !important au besoin, même si ce n’est pas utile, même si ce n’est pas grammaticalement correct.
      Tenez moi au courant.
      Belle journée Jean-Louis

      Répondre
      • Jean-Louis R.
        Jean-Louis R. dit :

        Héhé, cela marche parfaitement ! (notez bien que c’est la toute première fois que j’entre dans un blog pour y mendier des conseils… )
        Il y aurait bien d’autres choses que j’aimerais savoir : contrôle de la couleur de fond de cette barre latérale par ex., hauteur du bandeau du titre, etc.
        D’une manière générale, pour arriver à faire des progrès dans ce domaine, quelle serait la porte d’entrée ? Un site de référence ? Un cours CSS ? Un logiciel ?
        J’ai essayé de tirer parti de la console de développement web proposée par Mozilla. Mais c’est compliqué…
        En tout cas, merci pour ce coup de pouce. Je note précieusement cette recette .

        Répondre
  2. FredC
    FredC dit :

    Merci pour ce tuto génial, clair et très pratique.
    J’avais auparavant un éditeur « xxx » qui remplaçait bien l’éditeur de bloc html, et qui gérait aussi le texte automatiquement, sans doute inclus avec une extension. Mais je ne le retrouve plus. Ca vous parle ? Le nom des blocs, c’était Bloc « xxx » (en 3 lettres).

    Répondre
    • Fabrice Court
      Fabrice Court dit :

      Bonjour Fred et merci de votre commentaire.
      Je ne vois pas du tout à quoi vous faites allusion :( Je n’ai jamais rencontré cet éditeur. L’avantage de celui qui est intégré à WordPress est qui l’est pérenne et qui sera mis à jour au fur et à mesure des cœurs successifs.

      Répondre
  3. Philippe
    Philippe dit :

    Bonjour,

    Super article sur la présentation du widget texte. Je viens d’essayer de mettre les trois images dans un widget texte, et cela fonctionne très bien. Toutefois, j’aimerais faire trois boutons à la place de vos trois images pour remplacer celui de mon site qui se nomme « adhérer » et qui envoi sur le site d’helloasso. Pour cela pas de soucis mon problème vient du fait que je n’arrive pas à centrer mes trois images puisqu’elles sont alignées à gauche.
    Pouvez-vous m’aider?
    Merci et bonne soirée
    Philippe

    Répondre
  4. eugenie
    eugenie dit :

    Bonjour, Merci pour cet article vraiment au top ! Je recherche le moyen de bloquer un widget ?!
    J’ai crée un widget en bas de page pour y insérer mes coordonnées et j’aimerais pouvoir le bloquer pour que lorsque l’on scroll l’écran celui reste toujours en bas de l’écran …
    J’aimerais aussi faire pareil pour mon menu qu’il reste en haut de l’écran sans bouger mais je n’y parviens pas …
    Auriez vous un peu de temps à m’accorder ?
    Belle journée
    eugénie

    Répondre
    • Fabrice Court
      Fabrice Court dit :

      Bonjour Eugénie

      Merci de votre gentille appréciation.
      Pour répondre à votre première question, vous devrez ajouter du javascript pour induire un tel comportement. Un plugin est sinon à votre disposition ; il s’agit de Q2W3 Fixed Widget dont vous trouverez un exemple sur le site de mon épouse : https://www.nadinecourt.com/10-photos-preferees-2019-photographe-chambery/ (dans la sidebar).

      Concernant le fait que le menu reste en haut de votre site, c’est plus traditionnellement l’apanage de votre thème : cela s’appelle un sticky menu. Si votre thème ne le propose pas, cela ne va pas être facile de l’ajouter, sauf à supprimer le menu et le remplacer par un plugin comme Uber Menu (mais cela va alourdir votre site).

      Très bonne continuation

      Répondre
  5. Priscilla
    Priscilla dit :

    Bonjour,

    Tout d’abord je vous remercie pour tous vos précieux conseils.
    Je suis bloquée sur une fonctionnalité que je n’arrive pas à trouver…
    Je souhaiterais mettre une carte de france ou organigramme sur mon site internet et qu’au passage de la souris sur tel logo, département ou nom, une fiche contact puisse s’afficher dans une petite fenêtre. Comment faire svp ?

    Je vous remercie pour votre aide précieuse,

    Cordialement

    Répondre
    • Fabrice Court
      Fabrice Court dit :

      Bonjour Priscilla
      Merci de votre gentil message.
      On est un peu en limite des possibilités du widget texte. Je déconseille la popup au passage de la souris (une lightbox serait préférable). On peut être également un peu plus moderne et dynamique avec des effets de mouvement comme sur un tuto de Code Pen …Possible si vous êtes un peu à l’aise avec CSS et HTML. Je vous conseille de mettre le CSS dans un thème enfant (child theme) pour mieux le gérer . Ne pas oublier de prévoir alors le comportement sur tablette et mobile.

      Répondre
  6. Olivier FLORIS
    Olivier FLORIS dit :

    Bonjour Fabrice,
    Merci pour ces explications, mais étant un parfait newbe…c’est proche pour moi du chinois…mais j’essaye.
    Je suis tombé sur ton site en cherchant le moyen d’entourer un mot (ou 2) avec un trait lorsque on survole le paragraphe avec le pointeur. Je l’ai vu sur un site et cela attire vraiment l’oeil du visiteur.
    Est-que cela peut se trouver sous forme de widget ? Ca m’étonnerait … ou faut-il le coder ?( ou dans mon cas le faire coder par 5€.com)
    Merci d’avance

    Répondre
    • Fabrice Court
      Fabrice Court dit :

      Bonjour Olivier
      On est out d’abord toujours le newbee de quelqu’un et de quelque chose, donc aucune honte à avoir :)
      Par rapport à votre demande, cela peut effectivement se coder en html + CSS ; le widget texte pourra supporter le HTML seul, mais il faudra que vous mettiez le CSS dans votre feuille de style, car ce comportement exige une pseudo-class (en l’occurrence, hover) qui ne peut être compris dans un attribut style.
      Pour le html
      [php]

      Volutpat wisi dapibus repellendus aspernatur excepturisoluta excepturi nam sociosqu dolorem. Quibusdam! Fermentum distinctio vulputate laboris? Vel class, wisi fugiat, nostrum platea impedit. Laboris! Mollis magnam placerat nisl ullam nesciunt.

      [/php]
      Pour le CSS
      [php].encadre{cursor:pointer;font-size:inherit}
      .encadre:hover span{border:1px solid #555;transition-duration:1.5s}[/php]

      Le souci avec les « borders » est qu’elles ont tendance à faire bouger le texte lors du survol.
      On peut donc utiliser cela, comme je l’ai fais dans le dernier paragraphe de ce commentaire (le survoler avec la souris, ou le stylet). Attention, ce comportement ne sera bien entendu pas dispo sur mobile ou tablette, ce qui est une perte d’UX et sans doute pas une bonne idée.

      [php].encadre{cursor:pointer;font-size:inherit}
      .encadre:hover span{text-decoration: underline overline #333;transition-duration:1.5s}[/php]

      Attention !
      La balise span a tendance à être supprimée par WordPress. Je vous conseille d’utiliser non le widget texte, mais l’éditeur de HTML personnalisé

      Quant à qui consiste à le faire coder pour 5€…bien désolé, mais je trouve cela dommage car cela entretient un système qui engraisse plus le concepteur du projet que le codeur final. Outre ce point et après déduction des charges et de la TVA, le codeur reçoit 1.95€ et moins. Certes le boulanger gagne moins, mais lui fait des séries et non du sur mesure.
      Bref à ce prix là je préfère donner ou faire des échanges de services :)

      Répondre
  7. Michel K
    Michel K dit :

    Salut FabriceCourt,
    Heureuse découverte de votre site et j’en serai de plus en plus fréquent pour me former et m’informer!
    Merci de nous à nous les débutants cette bouée de sauvetage!
    J’ai un petit ennui.
    J’ai le WordPress d’un client qui demande de faire en sorte qu’en cliquant sur le bouton d#envoi d’email dans le formulaire de contact, l’entete de l’email s’affiche automatiquement. Je suis dans le bleu comment procéder!
    Une orientation s’il vous plait!
    Merci et bien à vous

    Répondre
    • Fabrice Court
      Fabrice Court dit :

      Bonjour Michel

      Je ne sais pas si j’arrive parfaitement à comprendre votre demande ; vous désirez que s’affiche un résumé du formulaire envoyé une fois le bouton de soumission activée ? Cela me semble une demande particulière et peu utile alors qu’une confirmation par retour d’e-mail ( avec résumé des informations envoyées) le serait plus à la fois pour l’expéditeur et pour le destinataire. Si c’est le cas Contact form 7 le permet, avec un petit peu de manipulation. Gravity Forms le permet quant à lui de façon quasi native.

      Si toutefois c’est vraiment ce que le client désire il va falloir un peu bidouiller côté PHP pour que le message s’affiche coté Front office.

      Si j’ai mal compris la question, ne manquez pas de revenir vers moi.
      Je vous souhaite une excellente soirée

      Répondre
  8. Francine An. Wasukundi
    Francine An. Wasukundi dit :

    Je viens de découvrir votre site par bel hasard, merci pour ces explications claires. Je suis persuadée que votre site va désormais être une source importante d’information et de formation pour moi qui qui ne suis qu’à mes débuts… Même si je suis presque nulle mais je suis très passionnée par ce travail de maintient d’un site internet, ainsi je veux toujours à améliorer quelque chose, pour ça je dois chercher et trouver comment y arriver.
    Ma question concerne le sidebar, vos ateliers se sont arrêtés avant que vous parliez de mon cas :)
    En fait, ma sidebar a plusieurs événements, c’est prévu pour ça. Toutefois, pour économiser l’espace et ajouter d’autres événements, je souhaite les grouper selon différents « espèces ». Donc, tout en gardant la structure actuelle, je souhaite regrouper événements en blocs donc chaque bloque a des flèches de défilement, un titre et deux lignes de description…
    Merci beaucoup de me donner une lumière par rapport à ce qui est possible de faire pour avoir cette structure. Désolée si je vous demander trop… Déjà merci beaucoup.
    Francine

    Répondre
    • Fabrice Court
      Fabrice Court dit :

      Bonjour Francine
      Merci de votre aimable commentaire :) Vous serait-il possible de le propulser et copier sur mon tout nouvel espace de support que j’expérimente
      Pour vous remercier, je m’engage à une réponse exceptionnellement complète quoiqu’il arrive pour ce premier cas.

      Répondre
  9. flo
    flo dit :

    Bonjour Fabrice,

    Merci c’est vraiment genial tes conseils. Pro, détaillé, limpide.

    J’ai une question pas vraiment sur les widgets mais je suis bloqué sur une manip sur mon site. Je ne suis pas une pro, voir meme nul pour coder.
    J’ai mon logo dans mon header en haut a gauche de mon site. Mon header est fixe quand je descend sur ma page déroulante. J’aimerais que quand je descend sur ma page mon logo fixe dans mon header devienne plus petite. Et là, je suis bloqué je ne sais pas faire. ( j’espère que je suis assez clair dans mon explication ;-).) Est ce que tu pourrais SVP m’apporter une petite aide.
    Merci.

    Répondre
    • Fabrice Court
      Fabrice Court dit :

      Bonjour Flo
      Merci de votre aimable commentaire.
      Pourriez-vous me donner plus d’éléments sur votre projet comme l’adresse de votre site, ce qui m’aiderait à adapter davantage la réponse ?

      Si vous aviez trouvé sur ce site, un espace ou un forum pour poser une question et avoir une réponse rapide, auriez-vous été intéressé.e par une telle fonctionnalité ?
      NB : En acceptant bien sûr que si mon temps de réponse dépasse 5 minutes, je vous orienterais sur une mini-presta pour déverrouiller votre souci.

      Répondre
    • Fabrice Court
      Fabrice Court dit :

      Bonjour Nicolas et merci de votre appréciation !
      Ce n’est pas un plugin, mais une fonctionnalité du thème que j’utilise. En cherchant un peu, je n’ai pas trouvé d’équivalent dans les plugins, mais cela doit pouvoir se trouver :)

      Répondre
  10. abf
    abf dit :

    Bonjour,
    Un grand merci pour toutes ses explications qui sont d’une richesse incroyable.
    J’ai utilisé le widget texte pour intégrer plusieurs images comme vous le suggériez dans votre post.
    Tout fonctionne parfaitement mais je ne parviens pas à centrer le bloc de mes trois images sur ma page d’accueil.
    J’ai essayé diverses solutions mais rien n’y fait … Auriez-vous une suggestion ?
    Un grand merci !!!!

    Répondre
    • Fabrice Court
      Fabrice Court dit :

      Bonjour à vous et merci de votre commentaire

      Il est vrai qu’il n’est pas super simple de démêler l’écheveaux de votre bannière.
      Vous disposez de 3 images qui sont dans un widget texte et qui bénéficient d’une flottaison à gauche à cause du style .alignleft de votre feuille de style (ligne 616)
      Il y a une classe qui se nomme « text-widget » et qui englobe vos 3 images, mais cette classe n’est pas utilisée. Je vous propose, soit de l’ajouter à votre feuille de style présente (mais ce n’est pas l’idéal !), soit de créer un thème parent pour ajouter cette classe qui pourra centrer le contenu de vos bloc grâce au CSS.

      .textwidget {
          display: flex;
          align-items: center;
          justify-content: center;
      }

      Il existe un thème enfant tout prêt à télécharger ici.
      → Archivez tout d’abord votre site.
      Téléchargez le thème enfant, ajouter la classe ci-dessus dans le style.css et placer le en ftp au niveau de wp-content/theme/ puis activer le dans Apparence > Thème dans votre back-office.

      Et voilà :)
      Très bonne journée !

      Répondre
  11. Nicolas
    Nicolas dit :

    Bonjour Fabrice, merci de cet article intéressant.
    Une question : est-il possible d’avoir deux textes en alternance dans un Widget Texte ?
    L’idée est d’avoir une image qui est reliée à une url quand on clique dessus (jusque là aucun problème de saisie)… en alternance avec une seconde image reliée à une autre url.
    Peut-être existe-t-il un plugin WordPress, mais je n’ai rien trouvé de concluant.
    Bonne journée.

    Répondre
    • Fabrice Court
      Fabrice Court dit :

      Merci de votre aimable commentaire Nicolas.

      C’est là malheureusement que le widget texte montre ses limites, et je dirais heureusement car un seul outil ne peut pas réussir à tout faire convenlablement. Le widget texte et en effet un outil qui permet d’ émuler du HTML simple avec un peu de CSS en relation avec la feuille de style du thème enfant ou du thème parent. Ce dont vous avez besoin en l’occurrence est un comportement dicté soit par du PHP ou mieux du javascript ou de l’Ajax, ce que le widget texte ne saurait supporter.

      Pour mettre en scène un slider ou un menu qui puisse permettre de faire défiler du texte ou des images, je vous invite donc à utiliser des plugins externes qui proposent l’ajout de slider dans un widget.

      Bonne continuation Nicolas !

      Répondre
  12. Stéphane Gnimavo
    Stéphane Gnimavo dit :

    Bonsoir Fabrice merci pour tous ce que tu fais pour nous les nuls j’ai suivi tes cours et je pense que je m’en sort un peu avec wordpress bon voilà j’ai un souci avec un site d’un ami et j’avoue que j’ai j’ai plus d’ongle tellement que je les ai ronger
    1- La distance entre les section sont un peu grande (entre le texte Accueil et le slider) je te rappel qu’avec l’outil webmaster de Firefox j’arrive a le réduire mais je ne me retrouve pas dans les code du site.
    2- les quatre box sous le slider j’aimerais ajouté un cinquième mais si vous avez d’autres suggestions a me donner je serais ravi même pour amélioré un peu le design.

    Répondre
    • Fabrice Court
      Fabrice Court dit :

      Bonjour Stéphane
      Merci de votre commentaire, même s’il sort un peu du sujet du widget WordPress, car nous sommes là dans la configuration de site
      Je vous invite néanmoins à considérer .content-area {padding: 50px 0} qui gère cette marge haute importante. En le ramenant à 15px, cela réduit cet écart.
      Concernant l’ajout d’un 5e bloc, cela dépend des fonctionnalités de votre thème et des réglages de la feuille de style. Les box sont tenues par une règle CSS qui se nomme #services-box {width:21.5%;}. En ramenant cet écart à 10% et moins, vous pourriez sans doute ajouter une autre box, mais je m’avance beaucoup (ne connaissant pas les entrailles du thème).
      Si vous désirez une intervention plus directe sur votre site, ne manquez pas de me contacter
      Cordialement

      Répondre
  13. Arthur
    Arthur dit :

    Le cours est interessant svp j’aurais un probleme j’ai envie de mettre un arriere plan à mon widget mais alors quand je n’ecrit rien l’arriere plan ne s’affiche pas par défaut j’ai utilisé:J’ai rien écrit ici

    Répondre
    • Fabrice Court
      Fabrice Court dit :

      Bonjour Arthur,
      Je ne saisi pas tout à fait votre question. J’ai le sentiment que vous voulez appliquer un arrière plan à votre widget.
      Vous le pouvez en définissant une class attachée à une div, et utiliser la propriété background ou alors le faire en ligne si vous maîtriser moins le CSS

      <div style="background-color:#90D8E1;width:100%;height:auto;padding:20px">
      Le contenu de mon widget
      </div>

      Plus d’info sur la propriété background : https://css-tricks.com/almanac/properties/b/background/

      Répondre
  14. Bossu
    Bossu dit :

    Bonjour, merci pour toutes ces informations.

    Savez-vous comment augmenter la taille des images widget ? Celles-ci sont paramétrées en ‘quasi’ miniature,

    Existe-t-il une solution ?

    Bien à vous !

    Répondre
  15. Mégane
    Mégane dit :

    Bonjour,

    Merci pour ces infos notamment sur les widgets.
    Petite question, comment puis-je insérer un onglet « visuel et texte » et pouvoir modifier les données HTML par la suite, en haut à droite de mon bloc de texte qui est après mon slider ?

    Merci par avance.

    Répondre
  16. Lou
    Lou dit :

    Bonjour,
    Tout d’abord merci pour ces conseils !
    J’aurai ensuite une question quant au widget texte : est-ce qu’ils sont pertinents pour le seo ? C’est-à-dire, est-ce que les moteurs de recherche vont les lire ?
    Merci d’avance.

    Répondre
    • Fabrice Court
      Fabrice Court dit :

      Bonjour Louison

      Le contenu du Widget texte est bien entendu consultés par les spiders (Robots SEO).
      Il ne faut toutefois pas fonder tout son référencement sur cet outil qui sera moins efficace qu’une page.

      Répondre
  17. Merel
    Merel dit :

    Bonjour et bravo pour cet article fort intéressant et pour la vidéo (vous êtes extrêmement pédagogue).
    J’ai une question sur les widgets texte est il possible de les faire défiler comme un slider dans la barre latérale ?
    L’idée étant d’en créer plusieurs (type annonces publicitaires) et les faire défiler au lieu de les avoir les uns en dessous des autres.
    Merci par avance,
    Sylvia

    Répondre
    • Fabrice Court
      Fabrice Court dit :

      Bonjour Sylvia

      Non malheureusement, tout du moins pas par défaut
      Ce genre de comportement fait appel à du javascript et du php que le widget texte ne supporte pas nativement.
      On peut bidouiller pour que cela soit possible, mais il est plus simple d’utiliser un autre widget.

      Bonne continuation

      Répondre
  18. Valerie
    Valerie dit :

    Bonjour,
    votre astuce pour masquer un widget dans la sidebar est très pratique.
    Néanmoins cela ne marche chez moi que pour un widget mais pas plus. Est-ce normal ?

    http://www.levindevantsoi.valerie-mersier.fr/

    Je souhaiterai masquer en page accueil le widget « article récent »… Je colle le code :
    !is_home() /*partout, SAUF sur la page d’accueil */

    …sans effet…

    ça marche sur un widget mais pas +. Savez-vous pourquoi ?
    Merci,
    Valérie

    Répondre
    • Fabrice Court
      Fabrice Court dit :

      Bonjour Valérie
      Merci de votre commentaire
      Cela devrait normalement fonctionner. Je vous invite à bien vérifier ces points :
      Try switching to the WP default theme – if the problem goes away, there is something specific to your theme that may be interfering with the WP conditional tags.

      The most common sources of problems are:The logic text on one of your widgets is invalid PHP
      Your theme performs custom queries before calling the dynamic sidebar — if so, try ticking the wp_reset_query option.

      Je vous invite à bien vérifier votre code avec cette page : https://wordpress.org/plugins/widget-logic/other_notes/

      Le cas échéant, vous pouvez changer de crèmerie en testant cet autre plugin : https://wordpress.org/plugins/conditional-widgets/

      Vous avez un très joli site, sobre et design.
      Seule la mention de pied de page « votre entreprise » est dissonante :)

      Répondre
  19. Emmanuel
    Emmanuel dit :

    Bonjour Fabrice,
    Par le biais de ce widget texte, je souhaiterais simplement l’ajouter à une de mes colonnes sur mon site afin d’y faire apparaître la date du genre  » Nous sommes le XX/XX/2016″ et éventuellement en bonus l’heure en temps réel.
    Novice en la matière pourriez vous m’éclaircir sur la procédure à adopter ?

    Merci d’avance

    Répondre
  20. Christelle
    Christelle dit :

    Bonjour,

    Très utile cet article.

    Je cherche à avoir le même rendu au début de votre article avec la barre verticale qui sépare ces textes : « Parlons code HTML aujourd’hui…Mais ne partez pas tout de suiteLe codage HTML n’est sans doute pas le sujet que vous préféreriez voir aborder, mais ce sera ici pour la bonne cause que nous nous familiariserons avec cet outil, dans le but de vous donner plus de liberté dans la présentation de votre site ».

    Avez-vous utilisé un plugin particulier ?
    Merci d’avance pour la réponse

    Répondre
    • Fabrice Court
      Fabrice Court dit :

      Bonjour Christelle
      Merci de votre commentaire

      Non, ce n’est pas un plugin ; c’est un shortcode que j’ai ajouté dans le thème. Vous pouvez néanmoins reproduire cet effet en intégrant une balise div dans le texte qui va supporter la mise en forme
      [php]

      Parlons code HTML aujourd’hui … Mais ne partez pas tout de suite

      [/php]
      et en ajoutant quelques lignes de CSS dans la feuille de style
      [php].pullquote{float: left;width: 200px;font-family: georgia;font-size: 18px;font-style: italic;margin: 10px 10px 5px 0;padding: 5px 5px 5px 0;border-right: 3px solid #2C5A00;}[/php]

      Répondre
  21. René
    René dit :

    Salut Fabrice. Merci pour cet article détaillé.
    Mais j’ai un souci avec le widget texte. Quand j’y colle un texte embed et puis je clique suer « enregistrer », le texte change et le code apparaît sur mon blog au lieu du widget. Comment le réparer?
    Merci.

    Répondre
  22. WordpressFan
    WordpressFan dit :

    Super article ! Merci
    J’ai une petite question :
    Mon site wordpress n’est fait que de pages (aucun article, aucune catégories).
    Il y a 3 menus en haut allant sur 3 pages (et leurs sous-pages)
    Comment faire pour lorsque l’on clique sur une page du menu d’en haut, s’affiche la page concernée avec sur la colonne de gauche la liste des pages (le menu déroulé en quelque sorte)

    J’ai essayé de m’en sortir avec les widgets, mais je n’ai pas réussi à trouver la solution

    Merci d’avance ;-)

    Répondre
    • Fabrice Court
      Fabrice Court dit :

      Bonjour Quitterie
      Cela ne dépend pas vraiment du widget texte, mais des widgets en général sur votre site et de la gestion de leur position. On peut par exemple revoir leur espacement en influant sur la marge de la liste qui les affiche (tous les widgets sont en effet dans une liste du type
      <ul>
      <li>widget 1 </li>
      <li>widget 2 </li>
      <li>widget 3 </li>
      </ul>

      Tentez d’ajouter quelque part sur votre thème la règle suivante
      .widgets li {
      margin-bottom :50px
      }

      Répondre
  23. Max
    Max dit :

    Bonjour,
    je travail avec un plugin qui me permet d’afficher certaines infos.
    Le code a insérer [now-playing], code qui permet d’afficher titre en live.
    Ce qui fonctionne dans les pages de wordpress mais pas dans les widgets comment faire ?
    Merci.

    Répondre
  24. kergal
    kergal dit :

    Bonjour Fabrice,
    Merci de ces explications.
    Savez-vous s’il y a un moyen de faire défiler des commentaires dans un widget ? pour qu’ils ne restent pas fixes ?…
    je vous remercie par avance,
    Catherine

    Répondre
    • Fabrice Court
      Fabrice Court dit :

      Bonjour Catherine et merci de votre commentaire.
      On peut faire beaucoup de choses avec un couteau Suisse tel le widget texte, mais il faut tout de même passer par des outils plus adaptés pour de plus gros travaux qui embarqueraient également du CSS, du PHP et du JS pour fonctionner.

      Répondre
  25. Alex
    Alex dit :

    Bonjour Fabrice,

    Merci pour l’article que j’ai trouvé très intéressant et simple à comprendre (ce qui n’est pas toujours le cas !). Je cherche à intégrer une vidéo de dailymotion (avec « texte ») dans ma colonne latéral, j’ai donc repris ton exemple en ajoutant l’autoplay à ton code (que je souhaite avoir pour ma vidéo). Cela fonctionne nickel ! Seul problème, lorsque je fais la même chose pour ma vidéo dailymotion cela ne fonctionne pas du tout… Voici mes deux lignes de codes :

    – [dailymotion id=x40ubca w=244&h=137 autoplay= »1″]
    – [vimeo http://www.vimeo.com/30681330 w=244&h=137 autoplay= »1″]

    A noter que pour dailymotion, le simple [dailymotion id=x40ubca] fonctionne (le lecteur apparaît) mais je souhaite désormais pouvoir régler les dimensions et insérer l’autoplay (voir le mute). Merci d’avance pour ton aide, j’espère qu’il n’est pas trop tard…

    Répondre
  26. Agnès Burnet
    Agnès Burnet dit :

    Bonjour Fabrice,
    et merci pour cet article fort intéressant.
    J’ai une petit question technique : j’ai essayé d’insérer un widget calendrier lunaire dans le widget texte et cela a marché une fois et puis j’ai voulu changé la couleur et cela ne fonctionne plus.
    Ce widget est le suivant : http://www.calendrier-lunaire.net
    Avez-vous une idée de pourquoi cela ne marche pas?
    Avez-vous une suggestion?
    Merci d’avance pour votre aide.

    Répondre
    • Fabrice Court
      Fabrice Court dit :

      Bonjour Agnès

      Merci de ce votre commentaire. J’avoue avoir de la difficulté à vous répondre précisément (ne connaissant pas les particularités que vous voudriez ajouter. Le widget dont vous parlez est un code que l’on peut insérer dans un widget texte. Je ne pense pas toutefois que l’on puisse personnaliser l’image en elle-même. Il est toutefois sans doute possible de respecter le code tel qu’on vous le donne, et de le glisser dans une balise comme

      insérer ici le code du widget

      Bonne continuation

      Répondre
  27. Anne
    Anne dit :

    Bonjour Fabrice.
    Ma petit problématique du moment : dans ma sidebar, j’ai créé des widgets (code html) image, texte ou vidéo, ça marche bien comme toujours.
    Mais cette fois, le cas est le suivant : j’ai 4 pictos alignés horizontalement (et centrés) dans un même widget… Si chaque image pointe sur une cible ok, maintenant je souhaite un hover. C’est-à-dire afficher un mot lorsque la souris passe sur ces pictos : mais un mot différent sur chaque picto… Le premier fonctionne bien quand j’ajoute title= »motchoisi » ; mais à partir du second picto (ainsi que pour les autres), ce code ajouté dans leur ligne respective (avec un terme différent donc), n’a aucun effet…
    Une idée ? Merci d’avance ;) et bravo pour ces tutos très utiles.

    Répondre
      • Anne
        Anne dit :

        Bonjour Fabrice, merci pour ce retour rapide.
        (Pour l’adresse : c’est un site pro créé en local pour un client, site pas encore dévoilé.) Cela dit… j’ai trouvé toute seule, li y a quelques minutes !
        Donc réponse (pour ceux que cela intéresse) : c’est juste une histoire d’emplacement.
        le title: »xxxx » est à placer juste à la suite de l’url de la cible (avant le >) et avant l’url relative à l’image.
        Moi je les avais placé à après la ligne relative à l’image…
        Ça fonctionne bien maintenant. :)

        Répondre
  28. kane
    kane dit :

    Bonjour.
    ben j’ai un problème sur mon site,quand j’essaie de rechercher une page dans le widget recherche je n’arrive pas le voir.c’est- à- dire il n’affiche rien en faite. svp avez- vousdes solutions à me proposer

    Répondre
    • Fabrice Court
      Fabrice Court dit :

      Bonjour Kane

      Sans la page concernée, mes possibilités de vous aider sont minces (et j’avoue que votre question sort un peu du sujet abordé). Tentez d’améliorer votre méthode de recherche avec un plugin tel que Search Everything ou Revelanssi.

      Cordialement

      Répondre
  29. Jany
    Jany dit :

    Bonjour, !
    Merci pour vos astuces, et ce topo sur les widgets. En fait, je cherche à savoir, si il est possible de permettre à ce widgtet flottant (qui chez moi affichera le sous-menu de la rubrique concernée) de s’afficher en dehors de la zone « wrapper ».
    Le but étant de conserver la pleine largeur de la zone » wrapper », car dans certaines pages, j’ai beaucoup de textes à afficher, j’ai donc besoin de beaucoup de place. Ma contrainte étant le background qui m’est imposé.

    Autre chose : j’ai installé max mega menu qui ne me satisfait pas pleinement, connaissez-vous un autre plugin qui apporterait les mêmes fonctions.
    Merci d’avance.
    Merci

    Répondre
    • Fabrice Court
      Fabrice Court dit :

      Bonjour Jany
      → Ce que vous sollicitez dépasse le débat du « widget texte avec WordPress » qui est l’objet de cet article. A ma connaissance, il n’est pas possible de le placer hors du wrapper. Il faut faire appel à des outils plus exotiques comme celui-ci qui font appel à du JavaScript.

      → Concernant un autre plugin qui apporterait des fonctions de mega menu, je connais cet outil, qui comme les outils de cet acabit, est un peu une usine à gaz (mais qui demeure très flexible et puissant.

      Bonne continuation

      Répondre
  30. kooh mireille
    kooh mireille dit :

    Merci pour vos précieuses méthodes de travail. Il y a deux semaines j’ai créer un blog d’agriculture digitale. Et j’avais toute la peine du monde à l’optimiser. Ma difficulté est de savoir mettre un formulaire de contact. Et Ensuite je voudrais mettre à la dispo de mes lecteurs un PDF test contre lequel ils me laisseront leur Email. Merci

    Répondre
    • Fabrice Court
      Fabrice Court dit :

      Bonjour Mireille
      Merci de votre gentil message.
      → Concernant le formulaire de contact, et dans la mesure où vous êtes sur WordPress.com et non WordPress.org, le fonctionnement change. Selon le thème que vous utilisez, vous devriez avoir un bouton « ajouter un formulaire de contact » quelque part lorsque vous créer une nouvelle page. Je connais mal WordPress.com (la solution auto-gérée) aussi suis-je circonspect.
      → Concernant l’ajout d’un PDF, il suffit normalement de l’importer comme un média et de placer ensuite un lien (derrière une image pour être plus sexy sur votre widget). Il faut par contre veiller à cocher la case ‘ouvrir dans une nouvelle fenêtre‘ pour ne pas que votre .pdf écrase la page présente.
      Bonne continuation

      Répondre
  31. Estelle
    Estelle dit :

    Bonjour ! Merci pour ces explications.
    Pour ma part j’aurai une question : j’aimerai changer la couleur des écritures pour mes widgets (j’ai mis mes derniers articles, ainsi que les différents tags sur le coté latéral de mon blog, et la couleur de l’écriture me plait moyennement), le fond est blanc et me convient. Mais si cela n’est pas faisable je garderai la couleur actuelle.
    En tout cas merci votre article est vraiment bien fait et les explications sont claires. Sur tous les autres forum que j’ai visité, c’est vraiment du charabia informatique pour moi !
    Si vous pouviez m’éclairer ? Merci d’avance !

    Répondre
    • Fabrice Court
      Fabrice Court dit :

      [note : j’ai combiné vos messages pour une info plus compacte]
      Bonjour Estelle,
      Première remarque, vous êtes sur WordPress.com et non WordPress.org et dans cette mesure les possibilités de modifications sont vraiment moindre.
      Essayez de voir tout d’abord si vous avez la possibilité de modifier la couleurs de vos liens dirtectement dans le backoffice (ils sont actuellmement de la couleur #1abc9c, faites une recherche sur ces termes).
      Si vous avez la possibilité de rajouter du CSS, voici le code qui est à modifier :

      a {color: #000000}
      a:visited {color: #111111;}
      a:hover, a:focus, a:active {color: #222222;}

      La première ligne est pour la couleur de lien ; La seconde, la couleur de lien visité ; la troisième, la couleur de lien au survol
      Note : vous pouvez préciser un seul code couleur pour les 3 si vous le désirez.
      Bonne continuation !

      Répondre
      • Estelle
        Estelle dit :

        Merci. J’ai fini par trouver comment changer ma palette de couleur, et même si je ne peux pas personnaliser en détail, ça me convient finalement.
        Merci pour votre aide et vos réponses !

        Répondre
  32. Tehani
    Tehani dit :

    Bonjour,

    Tout d’abord merci pour cet article très intéressant!
    Je suis en train de créer mon blog beauté et étant novice dans ce domaine je ne trouve pas la solution à mon problème.

    J’ai installé un widget « bouton j’aime de facebook » avec l’extension Jetpack. Le problème est que l’image dans ma side bar est coupé en 2. Quelque soit la taille que j’applique. Je ne comprends pas d’où ça vient. Pouvez-vous m’aidez?

    Merci d’avance.

    Répondre
    • Fabrice Court
      Fabrice Court dit :

      Bonjour Tehani
      Il y a en fait deux soucis sur votre module Facebook :
      1- L’iframe ne fait pas la bonne largeur et longueur qui devrait être de 284px et 350px (width: 284px et height: 350px). Dans le paramétrage de votre module FB (dans jet pack ou Apparence > widget), il y a surement un moyen de définir cette largeur sans ajouter une ligne de code supplémentaire (mais n’ayant pas la main, je l’ignore)
      2- La taille de la boite qui contient facebook est dépend très bizarrement d’une classe nommée video container (???). En précisant
      ligne 120

      .video-container {height: 340px;}

      On accroit cette boite.
      Ca marche dans les faits, mais je trouve bizarre, car lorsqu’on pousse trop la taille du container vidéo (qui contient l’encart FB comme son nom ne l’indique pas), on influe naturellement sur la taille de tes vidéos.

      Répondre
  33. J Howlett
    J Howlett dit :

    Bonjour,
    Est ce que la solution « Multiples images dans un widget » permet de faire comme un diaporama ?
    Que les images défilent de gauche à droite, merci

    Répondre
  34. Merlin
    Merlin dit :

    Bonjour,
    je souhaiterai installer le widget text sur plusieurs pages du site mais avec des contenus différents?
    Est-ce possible et si oui, comment procéder?
    Merci

    Répondre
    • Fabrice Court
      Fabrice Court dit :

      Bonjour Merlin
      J’avais justement l’intention d’ajouter un développement supplémentaire à cet article, concernant ce point précis. Ne manquez pas de revenir sur le site d’ici la fin de semaine pour trouver votre réponse.

      Répondre
  35. Jean-Louis
    Jean-Louis dit :

    J’ai découvert votre site au hasard des mes recherches..J’aime votre façon d’aborder vos tutoriels..Simples,pédagogiques.Je fais des sites depuis quelques années en amateur,preuve si l’en est que l’on apprend tous les jours…Merci..

    Répondre
  36. Daniel Foucault
    Daniel Foucault dit :

    Bonjour,
    Je suis en train de créer un site pour mon association et souhaiterais pouvoir insérer des photos sur des articles de blog. J’ai trouvé la solution pour le faire sur deux colonnes, mais n’ai pas réussi à comprendre pour le faire sur trois colonnes, voir plus.
    Pouvez-vous m’aider.
    Merci d’avance
    D F

    Répondre
    • Fabrice Court
      Fabrice Court dit :

      Bonjour Daniel
      Trois solutions :
      → soit vous utilisez les performances du thèmes pour faire des colonnes, ce qui n’a l’air d’être le cas de votre template.
      → soit vous installer un plugins qui rajoute des performances de présentation comme shortcode ultimate
      → soit vous utilisez les performances naturelles de présentation de WP (qui ne sont pas nécessairement simple à comprendre) comme ci-dessous

      aligner les images sur la gauche

      le code source associé est

      010203

      Pour cela, il faut sélectionner « aligner à gauche » sur toutes les images
      Bon courage

      Répondre
  37. Nathalie
    Nathalie dit :

    Bonjour Fabrice,

    Merci pour cet article très intéressant!! Je cherchais à créer un cadre coloré en widget, désormais j’ai ma réponse!! En plus de ce cadre coloré, je cherche à créer une espèce de liste dépliante mais je n’arrive pas à trouver les codes correspondants. J’ai trouvé exactement ce que j’aimerais sur cet article: http://detourlocal.com/3-activites-faire-absolument-au-quebec-en-soiree/ je pense que ça pourrait être pertinent pour indiquer plusieurs infos sans forcément avoir 10 000 widgets! Auriez-vous une idée de la marche à suivre? Merci d’avance de votre réponse!

    Cdt,
    Nathalie.

    Répondre
    • Fabrice Court
      Fabrice Court dit :

      Bonjour Nathalie

      Merci de votre commentaire. Le genre de liste dépliante à laquelle vous faites référence fait partie d’une bibliothèque jquery (http://jqueryui.com/accordion/) qui est en l’occurrence carrossée par du CSS et quelques fonctionnalités. Je pense qu’il est ajouté grâce à un shortcode qui dépend du thème employé sur ce site (Kolor).
      Vous pouvez reproduire cet affichage avec un plugin (comme https://wordpress.org/plugins/jquery-vertical-accordion-menu/), ou un shortcode de votre thème. Je doute que le plugin texte soit adapté pour supporter tous les éléments nécessaire de cet effet (ou alors, il faudrait faire une sacré cuisine).
      Avec le CSS3, vous pouvez également reproduire cet effet avec ce type de plugin premium

      Répondre
      • Nathalie
        Nathalie dit :

        Bonjour,

        Merci de votre rapidité!
        Entre temps j’ai trouvé la solution: j’utilise le widget Arconix qui me permet de créer des accordéon très simplement en passant par un widget texte. J’ai encore quelque soucis en terme de personnalisation, je voudrais changer les couleurs et polices d’affichage mais c’est déjà un bon début. Je garde votre solution sous le coude en cas de nouveau blocage!

        Encore merci et bon weekend!

        Nathalie.

        Répondre
  38. Morgan
    Morgan dit :

    Bonjour Fabrice,

    J’ai réussi à mettre deux texte l’un à coté de l’autre, hors j’aimerais que le début de ma colonne de droite sois au même niveau que mon titre principal qui se trouve en haut à gauche..

    Humm si c’est pas compréhensible je comprendrai

    Répondre
  39. CHABBI
    CHABBI dit :

    Bonjour Fabrice,
    J’ai integré ce code suivant:

    a.imagerollover{background: url("http://desembouage-nord.com/wp-content/uploads/2014/09/Icone-VieEnergie-effet-rollover.jpg") no-repeat scroll 0 0 transparent;width:16px; height:32px; display:block}
    a.imagerollover:hover {background-position: 0px -32px}
    
    

    dans mon widget Boite à droite « zone texte » le résultat que j’ai: affichage du même code dans la boite.
    J’aurais besoin de vos lumières, pour m’aider à griser/dégriser l’image en question. Je souhaiterais qu’elle s’afficherait centrée.
    Merci beaucoup dans tout ce que vous faite
    Cordialement

    Répondre
    • Fabrice Court
      Fabrice Court dit :

      Bonjour Chabbi
      Pour que je puisse vous aider, il faut que vous m’envoyer un exemple en ligne et publié. Regarder attentivement votre code :

      • le lien vers votre image n’est pas le bon : il y a une erreur de chemin et le cliquer ici est collé à l’URL
      • J’ai bien précisé dans mon tuto de mettre une partie du code dans le widget texte, et une autre partie dans votre feuille de style CSS sans quoi cela ne fonctionnera pas.
      Répondre
      • CHABBI
        CHABBI dit :

        Merci énormément de votre aide et surtout de votre temps de réponse immédiat.
        Les ateliers pratiques: on ne peut plus pratique
        Le tuto est clair, il m’a suffit de relire pour mieux comprendre, et d’exploiter au mieux la solution proposée et l’inclure dans mon nouveau site en construction.
        Un infini merci
        Cordialement
        CHABBI

        Répondre
        • CHABBI
          CHABBI dit :

          Bonjour Fabrice,
          Comment centrer l’image dans le wiget. J’ai essayé: background-position: center; => sans succès

          /*===== Boite de gauche =====*/
          a.imagerolloveradia{
                   	background: url("http://www.vieenergie.fr/wp-content/uploads/2014/09/Chofo.jpg")
                   	no-repeat scroll 0 0 transparent;
                   	width:48px;
                   	height:48px; display:block
                   	}
          a.imagerolloveradia:hover {
                   	background-position: 0px -48px
                   	}

          Cordialement, et merci de vos tutos instructifs !

          Répondre
  40. Segal
    Segal dit :

    Bonjour,
    je voudrais savoir comment afficher un texte dans le widget texte, et qui serait différent sur chaque page du site WP
    Par avance merci
    Au passage, merci aussi pour cette page très instructive

    Répondre
    • Fabrice Court
      Fabrice Court dit :

      Bonjour Elodie,

      Oui cela est possible
      → Utiliser une propriété telle que background-image:url(images/image_de_fond.png); pour l’image de fond (j’illustre ici avec une règle css simple, mais on peut adjoindre d’autres éléments pour le positionnement par exemple).
      → Utiliser une balise img pour superposer une image dans votre widget Texte.

      Répondre
  41. Claire
    Claire dit :

    Bonjour !

    J’ai une question à propos de ce widget texte: j’essaie d’insérer un lien Amazon pour recommander un livre. Mon problème est que  » l’image  » d’Amazon est coupée en deux, comme si le widget n’autorisait une image aussi grande (hauteur 240 pixels). Auriez-vous une solution à me proposer ?
    Je vous remercie!

    Claire

    Répondre
    • Fabrice Court
      Fabrice Court dit :

      Bonjour Claire
      Il faudrait que vous communiquiez le code d’intégration de votre widget (s’il s’agit effectivement du widget texte). Typiquement lorsqu’une image ne s’affiche pas correctement, c’est parfois lorsque la hauteur et la longueur de l’image ne sont pas correctement déclarés.

      Répondre
      • Claire
        Claire dit :

        Bonjour Fabrice

        Voici le lien que j’aimerai insérer dans mon widget:

        C’est un lien venant de Amazon. Aussi il me semble bien que j’ai bien un widget texte (celui par défaut dans WordPress, dans l’onglet Apparence).

        Merci!

        Répondre
          • Claire
            Claire dit :

            Je comprend ! Ce n’est pas facile de ce faire comprendre à travers des commentaires.. ;) et puis le code que j’ai inséré dans le commentaire n’a pas été pris en compte (puisque c’est un code Amazon)

            J’ai tout simplement un code amazon pour promouvoir un livre, et lorsque je le met dans mon widget texte, il est coupé en deux.

            Sauf que je ne peux pas changer le widget !

            Est-ce plus clair ?

          • J Howlett
            J Howlett dit :

            Bonsoir,
            Dans le code, il n’y a pas la taille de l’image?
            La taille de l’image est trop grande pour la sidebar.
            il me semble que pour mettre un code dans les commentaires, il faut utiliser les balises codes.

          • Fabrice Court
            Fabrice Court dit :

            Pour la taille des images, elle est à mon sens ajoutée dès qu’une image est présente, SAUF dans la leçon 2. C’est un peu moins orthodoxe, mais dans la mesure où l’image provient d’une source externe (des ‘partenaires’ commerciaux), cela permet à ces partenaires de changer leur image, son aspect et sa taille, et que l’aspect-ratio de ces images chez les affiliés (et donc chez moi) reste toujours optimal.

    • Fabrice Court
      Fabrice Court dit :

      Bonjour Laurent,

      Trois solutions pour cela :

      • Par un plugin comme WP User Avatar qui permet de faire cela
      • Par le service de Gravatar qui te permets d’associer une image dès que tu utilises l’adresse que tu auras choisie dans Réglage>Général.
      • En ajoutant du code dans functions.php (reposte si tu veux le bout de code)

      Bonne journée :)

      Répondre
  42. john
    john dit :

    bonjour ,

    tout d’abord merci pour ce tuto parfaitement explicite !
    Voila ma question : Mon thème WP ( Rustik ) me permet de placer un widget sur toute la largeur du footer , et notamment un widget texte….donc pensez vous qu’il serait interessant de créer un footer (tel que le votre dailleurs) grâce à ce widget texte?? et si oui , comment faire pour créer les colonnes de texte et liens comme vous l’avez conçu(colonne « à propos » , « catégories » et « commentaires récents »)????

    merci pour votre réponse !

    Répondre
    • Fabrice Court
      Fabrice Court dit :

      Bonjour John

      Le positionnement de widget côte à côte en bas de page est bien souvent induit par le thème, soit par des colonnes dans le footer, soit par la mise en float des widget placés dans le footer….Soit qu’il n’existe pas de genre de positionnement par défaut (il qu’il faut alors le créer).

      Dans la mesure ou votre site est en maintenance, je ne peux me prononcer :)

      Répondre
  43. Frédéric
    Frédéric dit :

    Bonjour Fabrice, super mine d’informations que ce site, je le mets en favori!
    J’aurais une petite question, ça fait un moment que je cherche quelque chose pour mettre du code dans mes articles et j’ai trouvé une solution qui va pas trop mal <pre><code> ce qui a pour effets d’entourer le code enfin je t’apprends rien!
    Mais j’adorerais savoir qu’est-ce que vous utilisez pour le code présenté dans vos articles qui au survol de la souris fait apparaître le copier,afficher lignes, ouvrir dans un autre onglet etc..
    Merci beaucoup pour les solutions partagées avec tous je trouve votre site extra.

    Répondre
    • Fabrice Court
      Fabrice Court dit :

      Bonjour Frédéric,

      J’utilise Crayon ( https://wordpress.org/plugins/crayon-syntax-highlighter/ ) qui permet de présenter facilement un bout de code php, css, html, js, etc. C’est le meilleur outil que j’ai utilisé jusqu’alors (même si sa présentation dans les commentaires est un peu bizarre, mais je pense qu’il s’agit d’un conflit entre mon thème et l’extension).

      Merci de tes aimables compliments. Bonne continuation et à très bientôt.

      Répondre
      • lejurassienfou
        lejurassienfou dit :

        Merci beaucoup fabrice!! Rapidité efficacité et gentillesse que demander de plus??
        A oui encore une petite chose,j’ai installé le plugin top 10 et mis le widget dans la sidebar,jusque là tous va bien mais à chaque visites de la page d’accueil il me la compte dans les articles les plus vus…j’ai bien vu l’option qui permet de ne pas prendre en compte certaines pages en mettant soit l’adresse soit le numéro de la page mais tout le problème est que la page d’accueil n’a pas de numéro et que sont adresse est synologeek.noip.me/wordpress et si je mets cette adresse c’est encore pire car chaque page visité est comptabilisé comme si je visitais l’accueil.
        La page d’accueil n’a telle pas un numéro particulier ou peut on lui en attribuer un?
        En tout cas merci pour tout,et je vais de ce pas installer crayon!

        [edit 17:48]
        C’est tout bon,après être allé dans phpmyadmin et essayé de trouver l’ID de la page (je dis essayer parce qu’avec leur nouveau truc d’enregistrer toutes les révisons de posts tu sais plus ou tu en es!!! Et bon ça ne fonctionnait pas….
        ensuite j’ai vu que l’on pouvait décoché le comptage des pages et comme j’en ai qu’une pour l’instant c’est la seule solution que j’ai trouvé qui fonctionne comme je voulais.Je verrai dans le temps si c’est viable…
        Merci beaucoup pour le nom du plugin qui est apparemment bien complet,je verrai ça demain.

        Une bonne soirée à vous et vos proches!

        Répondre
  44. ASo
    ASo dit :

    Bonjour Fabrice,
    Je suis en train de créer un blog avec WordPress en ligne et j’aurais aimé intégrer un moteur de recherche personnalisé dans ma barre latérale. En intégrant le code fourni par Google CSE dans un widget texte, cela ne fonctionne pas. Après quelques recherches (je n’y connais rien en codage…) je crois avoir compris que c’était parce que mon code commence et finit par script entre les signes supérieurs et inférieurs. Les différents tutos sur Internet terminent toujours par l’étape « aller dans Apparence, éditeur », or je n’ai pas cette fonction éditeur dans mon tableau de bord; Bref, je suis un peu perdue ! Comment modifier tout cela pour que le moteur de recherche apparaisse ? Merci infiniment !

    Répondre
    • Fabrice Court
      Fabrice Court dit :

      Bonjour
      je te propose de consulter le tuto d’Aurélien Denis pour cela : http://wpchannel.com/integrer-google-blog-wordpress/
      Sache que tu disposes de l’éditeur qui est placé dans le menu « Apparence » du back office, mais je te déconseille vivement de l’utiliser : tu pourrais planter tout ton site en plaçant un code inachevé comme une balise div non fermée.
      Si tu dois faire des modifications, fait les avec un navigateur ftp en ayant pris soin de tout archiver en local auparavant.

      → Ne manque pas de me recontacter si besoin.
      :)

      Répondre
  45. Maelle
    Maelle dit :

    Bonjour,

    Merci beaucoup pour ton site pleins de conseils super utile.

    En revanche, j’ai créé un bouton de « don » sur paypal, j’ai copié-collé le code qu’il me fournisse, quand je clique sur « enregistrer » la moitié du code disparaît et évidement quand je vais voir le résultat sur mon site le bouton n’y ai pas… Je ne sais pas quoi faire, d’autant plus que je ne suis pas très douée dans le domaine !

    Merci pour ton aide !

    Répondre
    • Fabrice Court
      Fabrice Court dit :

      Bonjour Maëlle

      Merci de ton commentaire.
      J’ai profité de ton intervention pour remettre l’article à jour car la procédure a été un peu modifié par paypal (juste au niveau de l’intitulé des menus)
      De mon coté cela fonctionne très bien ; je te laisse une copie d’un bouton de « don » que j’ai fait sur paypal ci-dessous. Ce n’est que du html avec un formulaire, et une image codée en base-64. Cela devrait donc passer dans un widget texte.

      ► Copie ce bloc de code Ctrl (ou commande si tu es sous Mac) + C, puis Ctrl + V dans un espace widget texte
      Tiens moi au courant…

      Merci de votre appui pour la production de tuto et astuces
      Vous pouvez me payer un café avec ce bouton

      ► Copie ce bloc de code Ctrl (ou commande si tu es sous Mac) + C, puis Ctrl + V dans un espace widget texte Tiens moi au courant...
      
      
      
      
      
      Répondre
  46. Nicole
    Nicole dit :

    Bonjour et merci infiniment pour ce trésor d’infos que vous partagez avec tous les artisans du web…
    L’inculte que je suis est très heureuse d’avoir pu trouver votre blog et d’économiser quelques neurones grâce à vos explications fort claires !

    Répondre
  47. Marc
    Marc dit :

    Bonjour,

    Merci de votre tuto !
    Peut-être pourriez-vous m’aider.
    J’ai installé dans un widget texte, une iframe de like box Facebook. J’ai positionné ce widget dans le footer. Maintenant mon problème est que le widget est « collé » au bord de la page, or le contenu lui ne l’est pas. J’aurais donc voulu aligner le widget avec le contenu de la page.

    Merci !!
    Marc

    Répondre
  48. julien
    julien dit :

    Bonjour,

    Merci pour cet excellent tuto ! Cependant je n’arrive pas à center mon bouton like dans mon widget alors que j’ai pris votre code en exemple :

    [php]Vous aimez mon blog ?N’hésitez pas à le liker ou à le partager ![/php]

    Y a t’il une solution ?

    ps : j’ai également essayé via la mise en forme d’une article, et avec la balise mais rien ne bouge.

    Répondre
    • Fabrice Court
      Fabrice Court dit :

      Bonjour Julien
      Merci de ton message.
      C’est un peu délicat et on sort de la logique de cet article dans la mesure où ton bouton fait partie 1/d’une grille contenue 2/dans une table dépendant 3/d’un plugin.
      Quelle que soit la mise en forme que tu pourras ajouter en ligne, elle sera supplantée par la mise en forme ou la constitution du widget.
      Il faut donc utiliser une autre solution :
      soit un bouton fait à la main, soit ajouter d’autre réseaux sociaux qui donneront moins l’impression que l’ensemble est décentré.

      Répondre
      • julien
        julien dit :

        Merci Fabrice pour cette réponse, pour moi le c’était la même chose que pour le code paypal de ton para 4 :

        Je vais du coup faire différents tests supplémentaires et mettre une image transparente avant au pire des cas pour le center.

        Répondre
  49. Frédéric HOLLMANN
    Frédéric HOLLMANN dit :

    Bonjour Fabrice,

    Un grand merci pour ce tuto qui fourmille d’informations qui m’ont été très précieuse… Notamment l’insertion d’un menu déroulant que j’ai réalisé sur un de mes site !

    Une petite question à ce sujet, aurais-tu une astuce pour que le scrollbar s’affiche en permance, car tu expliques que cela se personnalise également ?

    Enfin, j’ai épluché un peu le code de ton site et j’ai vu que tu utilises Snippet pour créé des phrases en exergue du plus belle effet ! Je souhaiterais faire la meme chose sur mon site perso. Un petit tuyaux ?

    Encore bravo

    Répondre
    • Fabrice Court
      Fabrice Court dit :

      Bonjour Frédéric,

      Merci de votre aimable appréciation !
      Concernant le menu déroulant, son comportement peut-être dirigé par du CSS avec la propriété overflow qui supporte les valeurs suivantes

      • visible : Le contenu qui dépasse de l’élément est rendu visible, même hors de cet élément (c’est la propriété par défaut)
      • hidden : Le contenu qui dépasse de l’élément (qui le contient) n’est pas affiché
      • scroll : Le navigateur affiche systématiquement une barre de défilement horizontale et/ou verticale pour afficher le contenu
      • auto : Le navigateur affiche une barre de défilement horizontale et/ou verticale si besoin

      C’est donc la valeur scroll que tu recherches

      → Quant à ce qui est de personnaliser la scrollbar à ta guise, tu trouveras plus d’info in english sur cette page : http://css-tricks.com/custom-scrollbars-in-webkit/

      Concernant la petite mise en forme que « je » propose dans mon site, je ferais prochainement un article à ce sujet (dès que j’aurai rattrapé mon retard d’édition (j’ai pas mal de sites dans les cartons dont je dois faire des articles)

      Répondre
      • Frédéric HOLLMANN
        Frédéric HOLLMANN dit :

        Merci beaucoup pour ces infos Fabrice :-)

        J’ai fait des essais et effectivement ça marche, du coup je m’aperçois que ce sont mes navigateurs qui reprennent le contrôle et font systématiquement disparaître l’ascenseur, car quand je rafraîchi ma page avec la valeur « scroll » la barre apparait bien puis disparait. Grrrr :-)

        Ça sent l’intégration Jquery vers lequel tu m’as orienté ! Bien vu ;-)

        J’ai hâte de lire le tuto sur la mise en forme !

        Encore merci Fabrice

        Répondre
  50. Jacky
    Jacky dit :

    bonjour

    2 problèmes et 2 solutions trouvées, déjà je vais moins n’embêter, j’utilisais l’éditeur de wordpress pour intégrer les vidéos youtube,alors qu’en me servant du partage, c’est beaucoup plus simple,un bout de code tout simple, pfff comme quoi, pourquoi se compliquer la vie
    merci en tout cas

    Répondre
  51. Ghislaine
    Ghislaine dit :

    Bonjour,
    Je cherchais une explication pour WP et je suis arrivée ici pour mon plus grand bonheur !! Merci pour cette mine d’or qu’est votre blog. Je vais mettre un lien vers vous sur mon blog..

    Merci a vous de ce partage généreux !! A tres bientot…

    Ghislaine

    Répondre
  52. Les Créa de Nakin'
    Les Créa de Nakin' dit :

    Bonjour,
    je découvre votre blog et j’en profite pour vous poser une question concernant les Widgets
    j’utilise WP 3.3.1, thème My Sweet Diary 1.1 et je voudrais modifier le widget « recherche », car l’affichage actuel ne me plait pas.
    est-il possible de créer un nouveau module, (avec une ligne de code), en l’ajoutant dans un widget texte ?
    si oui, ou puis-je trouver cette ligne de code ?
    d’avance merci de votre réponse
    Bonne journée
    Cdt

    Répondre
    • Fabrice Court
      Fabrice Court dit :

      Bonjour Nathalie

      Merci de votre message. Je me permets de vous répondre en plusieurs points :
      → Votre version WP est en 3.1, il est urgent de la mettre à jour car une version WP aussi ancienne le rend très perméable à d’éventuelles attaques.
      → Vous êtes chez un hébergeur gratuit ; si ce n’est pas juste un projet perso, et que vous avez des velléités de développement, il serait intéressant d’avoir votre nom de domaine pour que le SEO que vous capitaliser vous revienne.
      → Concernant votre demande plus particulièrement, il serait plus intéressant de développer un plugin spécifique plutôt que d’essayer de trafiquer le widget texte pour ajouter du .php ou du .js

      Je ne sais pas ce que vous recherchez en terme de possibilités, mais il est probable qu’un plugin déjà.

      Tenez moi au courant Nathalie
      Bonne journée à vous !

      Répondre
  53. Charlotte Giannola
    Charlotte Giannola dit :

    Bonjour,
    Je publie régulièrement des articles et j’aurais aimé pouvoir modifier l’aspect de la newsletter (changer l’avatar, possibilité de changer l’image d’arrière plan, changer la police) envoyée automatiquement à nos abonnés.
    Je n’arrive pas à trouver un widget dans jetpack qui corresponde à cela.
    Pouvez-vous m’aiguiller ??
    Merci mille fois

    Répondre
  54. Bernard
    Bernard dit :

    Bonjour,
    Bravo pour votre site.
    Je recherche à faire des encarts dynamiques : effet de texte (Titre + extraits ou résumés) se déplaçant verticalement au survol de la souris sur une image.
    Existe-t’il un plugin ou un css pour faire cette effet ?
    Merci pour votre aide.

    Répondre
    • Fabrice Court
      Fabrice Court dit :

      Bonjour Bernard,

      Si votre image doit réagir au déplacement de la souris, cet événement doit être géré par du javascript, et l’inclusion dans le widget texte devient alors limité ou impossible selon la complexité du code.

      Un Plugin pourrait faire l’affaire, mais je ne sais pas si vous pourrez en trouver un spécifiquement répondant au survol de la souris (cela me parait également contestable d’un point de vue ergonomique car peut de visiteur auront l’idée de survoler spontanément sur votre image…sauf si c’est clairement spécifié)

      Répondre
        • Fabrice Court
          Fabrice Court dit :

          ok…Il s’agit là d’un savant mélange entre php pour le coté dynamique, CSS pour la mise em forme et jquery (avec l’appel d’une bibliothèque externe) pour l’animation, afin que cela fonctionne.
          Le widget texte n’est pas en mesure de faire fonctionner tout cela de concert.
          Il faut soit déployer un modèle de page si on veut cet effet dans le corps du site (comme dans le cas du site pré-cité), ou faire un petit plugin qui reproduit cet effet.

          Répondre
  55. Codes-Faciles
    Codes-Faciles dit :

    Bonjour,

    Merci de votre réponse très rapide.
    Je pensais m’être bien orienté.

    J’ai donc revu mes recherches. Et suis arrivé à peu près à quelque chose. (Avec donc image + Php). Mais je butte encore sur l’affichage de l’image en elle même, plus son contenu. Vu que l’appel se fait via la balise img + une url en php.

    Mais comme vous le dites, le post n’est pas approprié. Je vais continuer mes recherches.

    En tout cas merci beaucoup de m’avoir éclairé !

    Amicalement, Yann.

    Répondre
  56. Codes-Faciles
    Codes-Faciles dit :

    Bonjour,

    très intéressant le widget de l’image (rollover).
    Je cherche à réaliser un widget similaire, peut-être pourriez vous m’éclairer ?
    Je désire mettre en place une bannière avec un texte dessus qui change selon l’user : pseudo, points etc ..

    Je ne sais pas trop comment m’y prendre.

    Merci de votre précieuse aide.

    Amicalement, Yann.

    Répondre
    • Fabrice Court
      Fabrice Court dit :

      Bonjour Yann,
      Le widget texte supporte majoritairement du code html (statique).
      Si vous voulez introduire des informations qui sont personnalisées par rapport à l’utilisateur et son profil, il est nécessaire d’engager un langage dynamique (PHP, voire PHP+JS pour la présentation). Il faut pour cela développer un plugin dédié, ce qui sort largement du cadre de cet article.

      Répondre
  57. Perline
    Perline dit :

    Bonsoir,

    Je souhaite réutiliser l’idée du widget texte pour associer une image or (en tant que débutante), je ne sais pas trop comment m’y prendre pour associer telle image à tel lien. Par exemple, j’aimerais créer une image avec écrit dessus « Make Up » et qui renverrait à tous les articles renvoyant à ce sujet là. Comment faire ?

    Merci pour votre aide.

    Répondre
    • Fabrice Court
      Fabrice Court dit :

      Bonjour Perline,
      Ce que vous semblez avoir fait sur votre site pourrait très bien fonctionner :

      <a href="http://bubblesbath.wordpress.com/category/make-up/ " target="_blank">
      <img src="http://img15.hostingpics.net/pics/152710MAKEUP.png " >
      </a>

      Je le coderai plutôt ainsi pour que cela soit plus complet (le target= »_blank » n’est pas nécessaire) :

      <a href="http://bubblesbath.wordpress.com/category/make-up/"><img src="http://img15.hostingpics.net/pics/152710MAKEUP.png " width="245" height="100" alt="Make-up" class="alignnone" /></a>

      Il vous suffit ensuite d’ajouter des catégories (comme la catégorie ‘Make-up’) dans Articles>Catégories et de les affecter aux articles de votre choix.
      → Attention : le site concerné est un site WordPress.com (propulsé par WordPress et hébergé par WordPress), dont le comportement pourrait différer d’avec ce que je décris dans mes articles….mais pour ce que vous recherchez à faire, cela ne présente pas de problème.

      Répondre
  58. Thierry
    Thierry dit :

    Excellent tuto très complet et instructif pour les néophytes comme pour les plus aguerris. Avec votre accord, je me permets de vous citer en complément de mon article sur les timeline twitter dans WordPress.

    Répondre
  59. Tine
    Tine dit :

    bonjour
    quelle trouvaille que [firebug] et sa case [apparence] qui donne la taille d’un bloc ; je pense passer moins de temps à chercher à dimensionner une image pour l’afficher en sidebar ;-) si je trouve le widget adequat et le code utile pour.
    merci beaucoup …

    Répondre
  60. benjamin
    benjamin dit :

    Bonjour Fabrice,
    Je refonds mon site de photographe via WordPress et le thème Core. Je cherche à changer la couleur de police de texte de mon logo et je suis incapable de trouver. N’y connaissant absolument rien en ligne de code et autre auriez-vous une solution appropriée ?
    Merci d’avance

    Répondre
  61. olivier
    olivier dit :

    c’est bon c’est trouvé j’avais un chemin non valide et surtout le gif était enregistré en html donc il ne marchait pas super ^^^, je sens la bonne journée !!!!

    :D je vous remercie !!!! et sinon vous utilisez un module de paiement gratuit pour votre site ? moi je voudrais vendre des articles des reportages et des photos ou dessins par abonnement, on m’a proposé s2m il est compliqué quand pensez vous, même si cela n’a rien à voir avec du texte, mais cela reste contextuel au web ^^

    Répondre
    • Fabrice Court
      Fabrice Court dit :

      Uuh…concernant les modules de paiement (que je n’utilise pas sur mon site, sinon Paypal que je cite en exemple un peu plus haut, mais qui fonctionne avec des commissions), je ne pourrais pas vous répondre. Si vous désirez vendre des éléments numériques en téléchargement, mieux vaudrait sans doute choisir un thème WordPress premium e-commerce avec une gestion de ce type de bien, qui va nativement intégrer plusieurs plateforme de paiement.
      Attention, le choix d’un bon thème e-commerce est souvent épineux, et sa gestion est toujours touffue (and most commonly in english) !

      Répondre
  62. olivier
    olivier dit :

    et bien il fonctionne en local host mais quand j’essaye de le mettre sur mon site local il ne marche pas, une idée? comment vous l avez inséré avec le code que je vois?

    Répondre
    • Fabrice Court
      Fabrice Court dit :

      Quelle différence faites-vous entre « local host » et « site local » ?
      Tout cela sent une erreur dans le chemin de l’image : étudiez l’emplacement de votre image avec un clic droit>Information de l’image (ou mieux, utilisez firebug) : vous devez sans doute déclarer votre image en relatif au lieu d’un chemin absolu, ou alors un path mal déclaré.
      Le chemin de votre image doit-être http://localhost/wp-content/uploads/2013/05/image.gif (en local).

      Répondre
  63. olivier
    olivier dit :

    salut Fabrice je cherche à mettre une bannière animée sur mon site ou un Gif sur l’entête ou dans un article. Or le gif que j’ai fait avec photoshop ne veut pas apparaître une idée un coup de pouce un e aide heeeeelp :)

    Répondre
    • Fabrice Court
      Fabrice Court dit :

      Bonjour Olivier,
      Votre question sort un peu de la gestion de l’outil widget texte…mais soit. Normalement les gif animés ne posent pas de souci :
      métro Vous pouvez vous assurer de son bon fonctionnement en le glissant dans une fenêtre vierge de navigateur internet (s’il ne fonctionne pas là, il faut retourner dans Photoshop pour chercher ce qui ne va pas).
      ATTENTION….Les gif animés tournent trèèès rapidement au kitsh (ambiance licornes scintillantes, explosions en boucle, message à la %$#!) et risquent de décrédibiliser votre interface s’ils ne sont pas très judicieusement choisis. C’est une opinion perso qui est toutefois largement partagée.
      Tenez-moi au courant :)

      Répondre
  64. Sandrine
    Sandrine dit :

    Effectivement, il va falloir que je me penche sur la question pour l’ajout d’images, de liens, l’effet de survol !!! Tout est très bien détaillé ! Merci Fabrice, cette page va être dans mes favoris :-)

    Répondre
  65. Destination Mode
    Destination Mode dit :

    Bonjour Fabrice,
    Est-il possible de changer d’image au survol de la souris avec le widget texte ?
    Merci par avance de votre aide !

    Répondre
    • FabriceCourt
      FabriceCourt dit :

      Bonjour Destination Mode,
      Oui tout à fait…regarder la section « 6| Créer un effet rollover avec une seule image et du CSS » de cet article : je détaille le changement d’état grâce au roll-over animé en CSS. Ne manquez pas de re-commenter si je ne réponds pas tout à fait à votre question.

      Répondre
  66. patrice
    patrice dit :

    Fantastique Fabrice !

    Je ne sais plus comment j’ai fait pour arriver sur ton site, mais je viens de me régaler !
    Je cherchais (désespérément) comment créer et placer des images et textes dans ma barre latérale en utilisant le « talent » des dessinateurs de mon site associatif (voir le site !) pour faire soit du copinage soit pour créer des pub (car mes dessinateurs ont besoin de sous !)
    J’imagine que je peux sans difficulté ensuite rajouter le « lien » qui va bien pour suivre cette activité dans Google Analytic ?…

    Question subsidiaire après avoir vu ta vidéo « trés claire » (je suis un débutant » : Je peux ensuite mettre à la corbeille l’article que j’aurais utilisé pour créer le widget ? Ou tout au moins le classer dans une catégorie non visible pour me servir de modèle ?!

    Je viens donc de découvrir ce jour et il y a moins d’une heure ton site (!…), que je glisse dans mes favoris pour revenir le lire tranquillement.
    Cordialement
    Patrice

    Répondre
    • FabriceCourt
      FabriceCourt dit :

      Bonjour Patrice

      Merci de tes appréciations élogieuses !
      Oui bien entendu, on peut (sinon on doit pour ne pas surcharger inutilement la base de donnée) supprimer l’article qui a servi de modèle (sauf si l’on veut s’en servir de canevas, mais le contenu du widget texte crée n’en est-il déjà pas un ?).

      Très bonne journée !

      Répondre
  67. pierre
    pierre dit :

    Bonjour Fabrice,

    je recherche le moyen de modifier le texte à l’intérieur d’un widget texte, non pas avec des balises et du code (je sais faire ça), mais c’est pour une débutante qui ne touche pas au code : avec un micro éditeur de texte si possible.
    Mettre en gras, en couleur, et lier serait suffisant.
    Ma recherche vaine sur les moteurs de recherche m’amène chez vous :auriez vous un lien, un tuyau, un avis, une méthode, que sais-je ?…

    Merci d’avance !
    Pierre

    Répondre
    • FabriceCourt
      FabriceCourt dit :

      Bonjour Pierre

      Comme indiqué dans le tuto vidéo, je propose de mener toutes ces mises en forme directement dans WordPress :

      • Dans le menu article (ou page), faites Articles>Ajouter
      • Taper le futur contenu du widget en ajoutant toutes les mises en formes souhaitées
      • Dans l’onglet ‘Texte’ de votre article (à coté de visuel), sélectionnez, puis copier le code généré
      • Collez ce code dans le l’espace Widget texte

      Et le tour et joué :)
      Votre widget texte dispose maintenant d’une présentation enrichie sans avoir eu besoin de maîtriser les balises nécessaires à sa mise en forme (j’ai d’ailleurs utiliser cette tactique pour présenter cette réponse..Sans taper une seule balise)

      Répondre
      • dubezak
        dubezak dit :

        merci beaucoup pour cette astuce géniale. Je cherchais déjà depuis un moment la mise en évidence d’un texte d’information. c’est simple et efficace, encore merci

        Répondre
  68. Fanny Manières
    Fanny Manières dit :

    Bonjour Fabrice,

    Merci pour ces précieux conseils que tu nous apporte : pointus, détaillés et compréhensibles….

    J’ai juste une question : quand tu parles de template widget ready, du coup, ce critère est partie prenante de ma recherche. Toutefois, généralement je retrouve ces paramètres dans le listing de descriptifs des templates qui m’intéressent :
    Widget ready sidebar
    Wideget ready footer

    Est-ce bien celà ?

    Merci d’avance.

    Fanny

    Répondre
    • FabriceCourt
      FabriceCourt dit :

      Bonjour Fanny,

      La grande majorité des sites modernes est maintenant widget-ready. Ce sont davantage les sites gratuits qui peuvent encore proposer cela. Je te conseille de trouver une bonne boutique de template et je ne pense pas que tu retrouves ce genre de ‘défaut’.

      Si tu as une caractéristique à rechercher en priorité, c’est la qualité ‘responsive’, c’est-à-dire l’adaptation de ton template à différentes plates-formes : grand-écran, petit écran, tablette et smartphone.

      Bonne journée Fanny !

      Répondre

Ajouter un commentaire

Rejoindre la discussion?
N'hésitez pas à contribuer !

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *