La balise <sup> ne fonctionne pas dans WordPress

Question

J'essaie d'utiliser les symboles Trademark & Registered/Copyright en plus petit dans un site WordPress, mais certaines des méthodes standard pour CSS ne fonctionnaient pas, et en utilisant ce que j'ai ci-dessous, peut-être que quelqu'un a une idée sur la façon dont je pourrais l'étendre.

J'aurais procédé de manière traditionnelle/normale :

Awesomesauce <sup>&reg;</sup> ressemblerait à Awesomesauce® (le R est plus petit que les autres textes).

Dans le thème que j'utilise, ce n'est pas le cas avec cette balise.

J'ai ensuite essayé <span style="font-size:6px;"> pour voir si cela changerait quelque chose. Il n'en est rien.

J'ai donc abordé la question sous l'angle du JavaScript. J'ai commencé par ma balise H1

jQuery(function($){
  var $el = $(".section_header .post_title"); 
  var t = $el.text(); 
  t = t.replace('®','<sup>®</sup>');
  $el.html(t);
});

Puisque cela fonctionne, comment puis-je faire fonctionner la même chose pour le corps du texte, car je n'y parviens pas en utilisant le code suivant

jQuery(function($){
  var $el = $(".wpb_text_column .wpb_wrapper p"); 
  var t = $el.text(); 
  t = t.replace('®','<sup>®</sup>');
  $el.html(t);
});

jQuery(function($){
  var $el = $(".section_header .post_title"); 
  var t = $el.text(); 
  t = t.replace('®','<sup>®</sup>');
  $el.html(t);
});

A quoi ressemble la section HTML :

Answer 1

Il est tout à fait normal que WP themes écraser le style par défaut du navigateur.
Essayez d'ajouter ceci à votre custom.css fichier :

sup {
    vertical-align: super;
    font-size: smaller;
}

Si vous n'utilisez pas de style personnalisé ou de thème enfant _( Pourquoi utiliser un thème enfant )_
Ensuite, ajoutez ce code tout en bas de votre fichier css du style du thème .

Answer 2

Je ne pense pas que votre problème soit dû au fait que WordPress ne reconnaît pas l'élément "sup". Je m'occupe de quelques sites WordPress et l'élément "sup" fonctionne parfaitement chaque fois que je l'utilise. Dans votre cas, il semble que vous essayez d'utiliser javascript (jQuery en particulier) dans votre site WordPress. WordPress ne traite pas le javascript de manière fiable lorsqu'il se trouve dans une page. La documentation que j'ai lue indique qu'il n'est pas possible d'utiliser son propre javascript sur les pages de WordPress. Cependant, j'ai réussi à utiliser Javascript dans certaines pages de mon site WordPress, mais avec des résultats plutôt irréguliers dans l'ensemble. Je vous recommande de formater votre texte directement dans l'éditeur WYSIWYG de WordPress comme suit :

AWESOMESAUCE^®