En réalisant le pied de page dans le template principal d'un des premiers sites que j'ai bâtis avec Oxygen, j'ai découvert avec stupeur que le numéro de téléphone de la cliente qui devait apparaître et que je voyais très bien sur mon ordinateur et dans toutes les vues responsives ne s'affichait pas sur mon iPhone. En revanche sur mon Android, pas de problème.
Diable.
J'ai vite identifié le problème. J'avais utilisé pour le fond de mon pied de page la couleur dominante de la palette de la cliente, couleur que j'avais aussi définie pour les liens de tout le site. Et iOs identifiait le numéro de téléphone et le traduisait automatiquement en lien. Du coup bleu sur bleu, le numéro de téléphone était invisible mais je pouvais "cliquer" sur le lien cliquable dans mon pied de page.
Comme j'ai suivi un certain nombre de liens vers des blogs et des forums avant de trouver la solution, je vous en fais part ici. Pour empêcher iOS de donner à votre numéro de téléphone l'apparence d'un lien, ajoutez le bout de code suivant :
a[href^=tel] { color: inherit; text-decoration: none; }
Et le tour est joué.
Personnellement je le fais en ajoutant dans mon template principal un bloc de code dont je mets la hauteur à zéro (on peut aussi faire display hidden). On doit pouvoir le faire aussi avec code snippets.
Avez-vous une autre solution à ce problème ? Ou une solution plus élégante ?
Il peut être pratique de se déplacer dans une page de votre site en cliquant sur un bouton ou un lien, voire dans un menu, qui amène directement à un point donné de la page courante ou d’une autre page du site courant. C’est particulièrement intéressant si le contenu de votre page est long et que vous voulez éviter de pénibles scrolls à travers la page.
Pour ce faire, nous allons commencer par la fin : nous devons définir la cible que nous souhaitons atteindre en cliquant sur notre lien. Puis, vous l'avez deviné, nous terminerons par le commencement en créant le lien qui nous mènera vers la cible visée.
D’une façon générale, on place une ancre, soit par la définition d’un élément <i> (ou <span>) vide auquel on attribue un identifiant :
<i id="nom-de-l-ancre"></i> ou, si votre éthique vous interdit d’utiliser une ancre vide, vous pouvez placer le lien dans la balise, comme suit :
<p id="nom-de-l-ancre">Mon texte</p>Évidemment, perspicace comme vous l'êtes vous avez compris qu'il ne fallait pas recopier tels quels “nom-de-l-ancre” et “Mon texte”.
L’autre possibilité, la plus intéressante pour les utilisateurs inconditionnels d’Oxygen que nous sommes : en utilisant l’id de la section-cible. Pour cela, il faut cliquer dans l’éditeur Oxygen sur la section-cible, et relever l’id de la section que l’on trouve dans le panneau gauche, dans notre cas c’est :
div_block-59-241
Ce lien peut revêtir plusieurs formes : cela peut être un bouton, un lien texte classique ou même un lien de menu.
https://mon_site.com/#div_block-59-241Sauvegardez et ça marche.
Commencez par sélectionner le texte puis :
Pour un élément de menu, il faut sortir d’Oxygen et se rendre dans le menu de WordPress, rubrique “Apparence” puis “Menus”.
Là, il faut :
Voilà, ça y est, vous avez jeté l’ancre et elle est parfaitement fonctionnelle.
Mais quelque chose vous titille encore...
Comme vous êtes un être raffiné qui attache une importance primordiale à l’esthétique de son site web, vous aimeriez que la transition du lien à l’objectif d’icelui se fasse de façon progressive et agréable à l’œil.
Oxygen Builder a pensé à vous et a caché une option de “smooth scrolling” — “défilement fluide” pour les académiciens qui fréquenteraient ce blog — qui va vous faire rire de plaisir :
Et voilà, vos transitions se font par un défilement progressif du plus bel effet.
Vous voilà en possession d'une ancre qui ne partira pas à la dérive, mille sabords !
Pierre Maitre
https://www.infomaster.fr
Dans les thèmes que vous utilisiez avant de tout quitter pour Oxygen, il y avait "juste" une case à cocher ou une option à activer pour ajouter une petite icône "retour en haut" dans vos pages lorsqu'elles dépassaient une certaine longueur.
Vous aimeriez bien en faire autant avec Oxygen mais vous n'êtes pas un développeur. Barry Smith, membre du groupe officiel Oxygen en anglais, vous explique comment faire :
Et voilà, enregistrez et testez. L'icône que vous avez choisie devrait apparaître sur l'écran après un scroll de 150px.
Il ne vous reste plus qu'à configurer l'icône (taille, couleur etc.) pour l'assortir au reste de votre design.
Merci Barry !
La rumeur monte, s'amplifie : il existerait un constructeur de pages WordPress vraiment génial, "révolutionnaire" disent certains. Ses possibilités seraient quasi illimitées et en plus il génèrerait du code "propre", léger, pour des performances incomparables à celles de la concurrence .
— « Un de plus ! » penserez-vous peut-être.
Alors, quoi de mieux que de vous forger votre propre opinion en le testant gratuitement ?
Vous l'aurez compris, ce constructeur de pages WordPress “révolutionnaire”, c'est Oxygen. Il vous intrigue. Sur le papier, il a tout pour lui et en lisant ses caractéristiques, vous transposez sur vos projets passés ou à venir :
— « Si j'avais eu cette fonctionnalité, ça m'aurait bien aidé sur le projet ‘truc’… ».
— « Oh ! Avec ça, je vais pouvoir répondre à la problématique de mon client “X…” ».
etc.
Mais bon, “chat échaudé craint l’eau froide” dit le proverbe. Vous avez peut-être déjà succombé aux sirènes vous vantant tel ou tel builder, acheté une licence et vous êtes finalement resté sur votre faim.
Oxygen a pensé aux indécis ou aux simples curieux, en mettant à disposition une ‘sandbox’ (un bac à sable) où vous pourrez jouer avec Oxygen, l'essayer et tester toutes ses fonctionnalités :
Une fois arrivé sur le site de test, cliquez l’un des deux boutons afin de déclencher l’installation d’un site WordPress créé spécialement pour vous et sur lequel sont installés tous les modules d'Oxygen :
Mémorisez l'adresse du site dans les favoris de votre navigateur (l'adresse comporte votre mot de passe) afin d'y retourner à tout moment. Le site sera supprimé après 7 jours sans connexion mais vous pouvez en disposer aussi longtemps que vous le voulez tant que vous ne laissez pas s'écouler 7 jours sans connexion.
Libre à vous de personnaliser ce site de test comme bon vous semble :
Ce site est à vous, pendant le temps qu'il vous faudra, si vous ne le laissez pas sans vous connecter pendant 7 jours d'affilée !
S'agissant d’un nouveau concept, il est possible que vous soyez quelque peu dérouté. Probablement comme vous l'avez d'ailleurs été face à chaque nouveau constructeur ou thème.
Heureusement, vous pourrez vous appuyer sur les nombreux tutoriels vidéos, la documentation originale (en anglais) ou la documentation du site oxybuilderfrancais.com, traduite en français.
Si malgré tout un point vous échappe, le groupe Oxygen pour WordPress en français vous apportera les réponses à vos questions.
La plupart des guides sur la façon d’accélérer les sites Web WordPress ne sont pas pertinents.
Nous souhaitons tous que notre site web se charge toujours plus rapidement, donc nous suivons scrupuleusement les instructions qui figurent dans ces guides, mais rien n’y fait, ou si peu. Nous arrivons systématiquement au même constat : notre site se charge encore trop lentement… voire plus du tout en raison d’un conflit !
Pour améliorer les temps de chargement, vous devez identifier et éliminer les ressources excessives, c'est-à-dire les fichiers qui sont chargés mais inutiles ou qui pourraient être significativement réduits. Malheureusement, les tutoriels ne vous apprennent pas à le faire.
Vous pouvez prendre une longueur d'avance avec Oxygen bien sûr – un constructeur visuel pour WordPress qui est 100 % sans ressources inutiles : https://oxygenbuilder.com – mais même si vous utilisez un autre constructeur de pages tel que Divi, Elementor, Beaver Builder, etc. ce tutoriel vidéo vous apprendra des méthodes qui accéléreront de manière significative TOUT site Web WordPress.
Il y a principalement trois choses qui dégradent la performance et pénalisent un site Web WordPress. Réparez-les, et vous aurez un site rapide :
Dans ce tutoriel, vous apprendrez comment résoudre ces problèmes courants qui ralentissent votre site Web. Et vous n’aurez pas besoin d’installer d’extensions de mise en cache. Celles-ci peuvent améliorer votre classement dans les outils d'analyse (PageSpeed, GTmetrix, etc.) – la note va passer de D à C, par exemple – mais il est rare qu’elles solutionnent les ‘vraies’ sources de problème et votre site ne sera pas aussi performant qu’il pourrait l’être.
Le tutoriel contient quatre étapes principales :
Éliminez les ressources inutiles, compressez les images, et hébergez votre site Web chez un fournisseur performant et votre site Web se chargera rapidement.
