Warning: Undefined array key "size" in /home/clients/da935d49e3e876a469bc7c8f42c3695b/web/FabriceCourt/wp-content/themes/enfold/includes/loop-portfolio-single.php on line 35
11 personnalisations pour vos widgets textes
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)
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)
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
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
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
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 "&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
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
- 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
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
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'
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.
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
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)
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
Merci beaucoup pour le super article. Salutations
Bonjour,
Merci pour cet article !
J’aimerais créer un effet machine à écrire en remplaçant un mot par un autre mais je n’y parviens pas… Auriez-vous une solution ?
Merci d’avance
Lina
Bonjour LIna
J’avoue que je ne comprends pas ce que vous demandez. Auriez-vous un exemple ?
Belle journée
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.
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
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 .
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).
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.
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
Bonjour Philippe
Je vous propose de passer par le système de Flexbox qui est beaucoup plus actuel et flexible pour distribuer du contenu
Testez par exemple ce générateur déjà réglé pour distribuer 3 blocs répartis sur une colonne.
Très bonne journée
Merci pour le tuyau, ça fonctionne très bien, il me reste à peaufiner les boutons côté graphique.
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
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
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
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.
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
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]
[/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 :)
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
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
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
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.
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.
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.
Bonjour et merci pour cet article !
Petite question : QUEL EST LE NOM DE CE PLUGIN (si c’en est un ! ) QUI AFFICHE CES DEUX PETITES FLÈCHES SUR LE CÔTÉ ?
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 :)
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 !!!!
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 !
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.
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 !
Merci de votre réponse.
Je vais donc continuer mes recherches de plugins.
Essayez https://fr.wordpress.org/plugins/widget-post-slider/ ou Revolution Slider (mais qui est un usine à gaz premium)
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.
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
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
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
Plus d’info sur la propriété background : https://css-tricks.com/almanac/properties/b/background/
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 !
Bonjour Paul
Auriez-vous un cas pratique à me soumettre ? Cela peut dépendre du thème aussi les variables sont multiples.
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.
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.
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.
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
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
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
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 :)
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
Bonjour Emmanuel
Le widget texte ne supporte pas nativement d’autres langage que du HTML et du CSS
Afficher la date et l’heure nécessite du PHP avec ce genre de code
[php] [/php]
Désolé !
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
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]
[/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]
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.
Bonjour René
Je vous avoue ne pas avoir saisi votre problème. Pourriez-vous fournir une URL qui illustre votre propos ? Merci
Il faut enregistrer en mode texte, ne pas repasser par le mode visuel, sinon wp modifie le code.
Merci de votre commentaire Pierre.
Et oui dans tous les cas, il faut rester dans l’onglet texte ou construire son code sous NotePad++ et ne pas passer par l’onglet visuel pour ajouter du code.
:)
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 ;-)
Ceci échappe au fonctionnement du widget texte ; ce plugin conviendrait-il à votre besoin ?
https://wordpress.org/plugins/wp-dtree-30/screenshots/
Bonjour Fabrice et merci pour ce post !
J’aimerai pouvoir espacer un peu les widgets de la sidebar de mon site http://www.completementtoquee.fr car je les trouve trop « collés » : y a t-il un moyen de faire cela ?
Mille mercis d’avance !
Quitterie
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
}
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.
Bonjour Max
Ajouter à votre fichier functions.php (créez en un le cas échéant)
add_filter('widget_text', 'do_shortcode');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
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.
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…
Bonjour Alex
Je vous propose deux pistes :
Très bonne journée
Merci de votre fidélité
Bonjour M. Fabrice COURT, et merci pour l’aide que vous nous apportez.
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.
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
Bonne continuation
GENIAL GENIAL GENIAL ! Merci pour cet article, il est super complet !
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.
Bonjour Anne
Merci de cotre commentaire.
Je pourrais mieux vous aider si vous m’envoyez (en MP ou dans la fil des commentaires) l’URL de la page qui contient votre widget.
Cordialement
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. :)
Bonne continuation Anne !
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
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
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
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
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
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
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 !
[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 !
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 !
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.
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.
Bonjour Fabrice,
Un grand MERCI pour l’explication sur l’insertion d’une image en HTML dans un widget !
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
Oui et non.
C’est possible dans l’absolu (comme l’illustre l’article très bien documenté de Geoffrey Crofte), mais c’est une telle machine à gaz que l’introduction de tout ce code dans le widget texte (le sujet de cet article) et tout à fait sur-dimensionné.
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
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.
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..
Merci Jean-Louis !
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
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
le code source associé est
Pour cela, il faut sélectionner « aligner à gauche » sur toutes les images
Bon courage
Bonjour, comment obtenez vous la première image ? Est-ce un word payant ?
Bonjour Aleex…quelle première image ?
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.
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
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.
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
Non, ça ne l’est effectivement pas (clair)
Tout comme le médecin, je ne peux juger qu’en présence du patient
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
Bonjour Chabbi
Pour que je puisse vous aider, il faut que vous m’envoyer un exemple en ligne et publié. Regarder attentivement votre code :
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
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 !
Bonjour Chabbi,
Tentez d’utiliser les règles ci-dessous
a.imagerolloveradia { display: block; margin-left: auto; margin-right: auto;}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
Bonjour Segal
Ce n’est pas une possibilité native du widget texte, néanmoins en utilisant un logiciel comme Widget Logic vous pourrez faire en sorte de créer plusieurs widgets texte et d’afficher tel texte sur telle page avec une fonction type
!is_page('about')(voir l’onglet ‘other notes’ dans le widget)
Re-bonjour,
Merci pour votre réponse rapide.
Bonne continuation,
Segal
Bonjour,
Est-il possible de mettre une image de fond, et à l’intérieur de celle-ci d’autres images avec des liens?
Merci d’avance.
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.
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
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.
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!
Je suis bien désolé Claire…je ne saisi pas ce que vous voulez dire. Je lis et relis votre commentaire, mais….je ne comprends pas :(
Ne manquez pas de m’envoyer une pièce jointe par mail si besoin (mon adresse est précisée sur ma page contact)
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 ?
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.
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.
Bonjour Fabrice,
J’aimerais modifier l’image par défaut associée à chaque témoignage. Une idée ??
Merci d’avance !
Bonjour Laurent,
Trois solutions pour cela :
Bonne journée :)
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 !
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 :)
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.
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.
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!
Bonne continuation !
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 !
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.
:)
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 !
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…
Bonjour et un grand merci,
Grâce à vous j’ai pu inclure facilement une image dans mon widget texte « qui sommes nous ».
Je vais maintenant tenter d’inclure une vidéo.
Vraiment merci.
Philippe
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 !
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
Bonjour Marc
Pourriez-vous préciser votre lien (même via mon formulaire de contact si vous désirez qu’il reste privé).
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.
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é.
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.
Bonjour,
Comment réaliser un Widget flottant pour toujours conserver les infos sur le coté durant la navigation verticale.
Merci
Bonjour Bernard,
Le moyen le plus rapide est d’utiliser le plugin Q2W3 Fixed Widget qui autorise cela.
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
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
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)
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
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
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
Merci de votre aimable commentaire Ghislaine !
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
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 !
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
Bonjour Charlotte,
Pour vous répondre, il faudrait que je connaisse la solution que vous employez pour éditer votre newsletter.
Sans être monomaniaque, je recommande l’emploi de MailChimp (voir https://www.fabricecourt.com/blog-fabrice-court/concevoir-une-newsletter-mailchimpprofessionnelle-pour-son-site-wordpress/) qui permet de personnaliser finement une newsletter, dans un environnement sécurisé.
Recontactez-moi si besoin :)
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.
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é)
Bonsoir,
voir le site geekpress.fr qui a ces effets sur toutes les pages.
Cdt
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.
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.
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.
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.
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.
Bonjour Perline,
Ce que vous semblez avoir fait sur votre site pourrait très bien fonctionner :
Je le coderai plutôt ainsi pour que cela soit plus complet (le target= »_blank » n’est pas nécessaire) :
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.
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.
Merci de votre commentaire Thierry. Votre citation est la bienvenue.
Excellente continuation
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 …
Merci de votre visite Christine !
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
Bonjour Benjamin
Contactez moi via mon formulaire de contact en me précisant l’adresse de votre site.
A très bientôt.
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 ^^
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) !
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?
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).
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 :)
Bonjour Olivier,
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).
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 :
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 :)
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 :-)
Hé bien j’ai longtemps cherché comment changer la couleur de fond du widget texte, grâce à vous j’ai trouvé. Merci pour le tuyau et la clarté des explications !
Merci de votre appréciation Evolute2 !
Une petite question supplémentaire…
De la même façon, suffit-il d’une petite ligne de code pour mettre le texte en couleur ?
Merci pour votre réponse.
re-bonjour Evolute
Oui cela est possible avec une simple ligne de code du type
Hé bien merci encore pour votre disponibilité !
Bonjour Fabrice,
Est-il possible de changer d’image au survol de la souris avec le widget texte ?
Merci par avance de votre aide !
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.
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
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 !
Bonjour Fabrice,
Je cherche à utiliser le widget texte avec un ascenseur. Est-ce possible?
Merci!
Carolina
Bonjour Carolina
j’ai ajouté un exemple (numéro 7) pour vous montrer ce qu’il était possible de faire.
très bonne journée !
Oh super l’idée de la suggestion de bon cadeau dans le widget texte !! Si ça ne vous embête pas je vais faire de même :) Merci beaucoup !
Merci Amandine !
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
Bonjour Pierre
Comme indiqué dans le tuto vidéo, je propose de mener toutes ces mises en forme directement dans WordPress :
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)
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
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
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 !
merci beaucoup Fabrice pour ces explications simples et limpides