Mettre un numéro de téléphone plus ou moins caché

WordPress :5.1
Statut : résolu

Ce sujet contient 7 réponses, 2 participants et a été mis à jour pour la dernière fois par cocod, le il y a 6 années et 2 mois.

8 sujets de 1 à 8 (sur un total de 8)

Auteur

Messages
7 mai 2019 à 11 h 33 min #2259805
cocod
Participant

Chevalier WordPress
257 contributions
Bonjour,

Ma configuration WP actuelle :
- – Version de WordPress : 5.1.1
- – Version de PHP/MySQL : 7.2.15 / 5.6.43
- – Thème utilisé : OceanWP
- – Thème URI : https://oceanwp.org/
- – Extensions en place : All In One SEO Pack (2.12.1), Caldera Forms (1.8.4), Duplicate Post (3.2.2), Fonts (2.3), Forum_wordpress_fr (4.1), La Sentinelle antispam (1.5.1), Ocean Extra (1.5.4), WPForms Lite (1.5.2.3)
- – Adresse du site : http://psychanalyste-toulouse-reve-eveille-girep-mcasesjolinon.fr
- – Nom de l’hébergeur : Apache
Problème rencontré :

Je souhaiterai savoir comment faire apparaître un numéro de téléphone comme sur ce site : https://www.psychologue-berruyerlamoine.fr/

Est ce possible avec le thème OceanWP ou faut-il un plugin ?

Bien cordialement.

DB

Problème(s) rencontré(s) :
7 mai 2019 à 18 h 29 min #2259891
ferman
Modérateur

Maître WordPress
7636 contributions
Bonjour,

On peut se rapprocher de ce que vous voulez avec un plugin gratuit et facile d’emploi: « show/hide expand/collapse ». Il permet de faire apparaître via un shortcode un bouton cliquable avec des textes modifiables. Normalement c’est prévu pour mettre des boutons dans le corps des pages mais on peut facilement l’adapter pour le mettre dans le header des pages, par exemple au niveau du menu (voir capture d’écran). Il faut faire un thème enfant dans lequel vous placerez votre header. Je vous communique ci-dessous le code très simple (juste un mot!) à mettre (code 1) qui pourra servir de point de départ. Vous pouvez en modifier l’emplacement dans le header. Par exemple dans le cas que je vous montre, il est juste après la </div>des icones sociales, donc au niveau du menu mais vous pouvez le mettre où vous voulez. Par défaut, le bouton présente un petit « saut » quand on clique. Si on veut on peut l’éliminer avec un peu de CSS (code css) que l’on place dans les css additionnelles ou dans le fichier style du thème enfant.

Pour le texte et la couleur , soit vous modifiez directement dans le code 1 soit vous faites une page « fantôme » et là vous cliquez sur l’icône du plugin: cela vous donnera les options en plus « visuel » .

Pour ce qui est de faire exactement ce qui est sur le site que vous montrez, c’est une question de CSS et de temps!
```
<?php echo do_shortcode('[bg_collapse view="button-orange" color="#4a4949" expand_text=" ☏ 123 45 67 89" collapse_text="☏ voir N°"][/bg_collapse]');?>
```
Code 1
```
[id^="bg-showmore-hidden"] {
    display: none;
    padding-top: 0px;
}
```
Code css
- Cette réponse a été modifiée le il y a 6 années et 2 mois par ferman.
Fichiers joints :
Vous devez être connecté pour voir les fichiers joints.
7 mai 2019 à 22 h 35 min #2259912

cocod
Participant

Chevalier WordPress
257 contributions

Bonsoir,

merci beaucoup, pour cette réponse détaillée.

Je vais m’en occuper jeudi, je reviens vers vous dès que j’ai mis en place ce travail.

Bien cordialement.

DB

9 mai 2019 à 12 h 04 min #2260176
cocod
Participant

Chevalier WordPress
257 contributions
Bonjour,

après des tests j’ai plusieurs soucis d’exécution./

Quand on passe la souris sur le bouton ça change bien de couleur mais le premier le numéro reste affiché voir : cliquer ici

D’autre part j’ai essayer de pousser le cadre avec ce code :
```
<?php echo do_shortcode('[bg_collapse view="button-orange" style="float: right; text-align: right; color="#4a4949" expand_text=" Me contacter ☏ 06 08 49 08 00" collapse_text="☏ voir N°"][/bg_collapse]');?>
```
Cadre à gauche
en incluant :
```
style="float: right; text-align: right;
```
En plus
Voilà .

Cordialement.

DB

Fichiers joints :
Vous devez être connecté pour voir les fichiers joints.
9 mai 2019 à 16 h 01 min #2260208
ferman
Modérateur

Maître WordPress
7636 contributions
Bonjour,

Donc, je vois que vous avez mis le bouton à droite. Et vous avez dû remarquer qu’il fallait cliquer dessus pour qu’il change (et non simplement passer la souris). J’espère que cela convient. Je vous donne ci-dessous les css à mettre dans vos css additionnelles ou celles de votre thème enfant pour placer et modifier le bouton proprement (sans qu’il y ait de saut quand on clique). J’avais fait une erreur en vous donnant les css hier: elles sont complétement fausses, n’en tenez aucun compte. Je vous conseille de ne pas essayer de modifier le style directement dans le html du shortcode mais par des css à part (additionnelles ou thème enfant). C’est toujours ce qui est recommandé. Par contre pour modifier la couleur du texte il faut le faire dans le html du bouton (color = ») et pour la couleur du bouton, directement dans les réglages du plugin. Comme je vous le disais, il faudra faire un thème enfant, à moins que vous n’acceptiez de remettre le code du shortcode dans le header à chaque fois (ce n’est pas non plus très long à faire).

Voila. Si vous avez des questions n’hésitez pas et si ça vous convient merci de passer en résolu.
```
.bg-showmore-plg-button,.bg-close,.bg-orange-button,.bg-close {
float:left;
font-size:x-large;
font-style:italic;
}
```
9 mai 2019 à 16 h 45 min #2260226
cocod
Participant

Chevalier WordPress
257 contributions
Bonjour,

merci,

j’ai remis le code d’origine dans le header.php :
```
<?php echo do_shortcode('[bg_collapse view="button-orange" color="#4a4949" expand_text="☏ voir N° " collapse_text="Me contacter ☏ 06 08 49 08 00"][/bg_collapse]');?>
```
si j’ajoute au dessus ce code :
```
<span style="float: right; text-align: right;">
```
ce qui m’avais permis de décaler le cadre à gauche sauf que cela a laissé une partie du cadre du sous titre en blanc , j’ai donc supprimé ce dernier code.

Je me trouve à nouveau avec le cadre à gauche.

Ensuite j’ai ajouté votre code css dans style.css il semblerait que cela ne fonctionne pas, peut être qu’il faut le mettre ailleurs (le cadre est toujours à gauche).
```
.bg-showmore-plg-button,.bg-close,.bg-orange-button,.bg-close
{
float:left;
font-size:x-large;
font-style:italic;
}
```
DB
9 mai 2019 à 18 h 49 min #2260252

ferman
Modérateur

Maître WordPress
7636 contributions

Bizarre, je viens de revérifier et chez moi il n’y a pas de problème, que j’utilise le fichier style du thème parent, enfant ou les css additionnelles. Vous mettez ça où: Dans le fichier style du thème enfant et dans ce cas avez-vous déjà d’autres css qui ont fonctionné? Essayez peut-être les css additionnelles, ou d’utiliser ! important. Essayez aussi d’encadrer le code dans un <div> </div>. Je ne vois pas ce que ça pourrait changer mais je l’ai fait chez moi.

9 mai 2019 à 21 h 15 min #2260263

cocod
Participant

Chevalier WordPress
257 contributions

C’est bon le code fonctionne dans le css d’une page enfant mais avec rigth au lieu de left pour l’avoir à droite.

Un grand merci Ferman.

DB
Auteur

Messages