Taille personnalisée de police différente entre l’éditeur et le visualiseur (Créer un compte)

Accueil › Forums › WordPress › Taille personnalisée de police différente entre l’éditeur et le visualiseur
  • WordPress :6.3
  • Statut : non résolu
5 sujets de 1 à 5 (sur un total de 5)
  • Auteur
    Messages
  • 16 novembre 2023 à 17 h 38 min #2463476
    jazzyguy
    Participant
    Initié WordPress
    19 contributions

    Bonjour,

    Voici mon environnement :

    • Version de WordPress : 6.4.1
    • Version de PHP/MySQL : PHP 8.1 / MySQL 5.7
    • Thème utilisé : 2021-enfant (twenty-twenty-one)
    • Extensions en place : block-options, burst-statistics, classic-editor, coming-soon, complianz-gdpr, complianz-terms-conditions, copy-delete-posts, easy-table-of-contents, ewww-image-optimizer, foogallery, ga-google-analytics, google-site-kit, gotmls, jetpack, jetpack-boost, jetpack-search, list-last-changes, options-for-twenty-twenty-one, page-tag-cloud, pages-with-category-and-tag, performance-lab, polylang (inactif), recent-posts-widget-with-thumbnails, redis-cache (inactif), reset-customizer, smooth-back-to-top-button, so-css, sticky-menu-or-anything-on-scroll, wordfence, wordpress-seo, wp-mail-smtp, wp-sweep, wpforms-lite
    • Nom de l’hébergeur : OVH
    • Adresse du site : tracesmusicales.fr

     

    Problème(s) rencontré(s) :

    Après avoir défini des tailles de police dans le CSS personnalisé, je constate qu’elles sont bien prises en compte dans la visualisation finale, mais pas dans l’éditeur : seule la taille du texte courant 0.85rem est prise en compte dans l’éditeur, mais pas celles des titres et des citations (voir la capture d’écran jointe, où l’on voit le titre H2 « Savoir se planter » et une citation, dans l’éditeur à gauche, et dans le visualiseur à droite).

    Voici les commandes CSS :

    /* 20231113 – Taille de police du texte */

    h1 {
    font-size: 2.4rem;
    }

    h2 {
    font-size: 1.8rem;
    }

    h3 {
    font-size: 1.4rem;
    }

    p {
    font-size: 0.85rem;
    }

    blockquote p {
    font-size: 0.85rem;
    }

     

    Y a-t’il un autre moyen de définir des tailles personnalisées par défaut ?

     

    Merci d’avance pour votre aide,

    Fichiers joints :
    Vous devez être connecté pour voir les fichiers joints.
    17 novembre 2023 à 3 h 06 min #2463502
    norico
    Participant
    Initié WordPress
    4 contributions

    Bonjour, il faut regarder du coté du fichier style-editor.css.
    Le mieux c’est d’ajouter dans un nouveau fichier et de l’appeler dans le fichier de fonction.

    /**
     * Registers an editor stylesheet for the theme.
     */
    function wpdocs_theme_add_editor_styles() {
        add_editor_style( 'custom-editor-style.css' );
    }
    add_action( 'admin_init', 'wpdocs_theme_add_editor_styles' )
    https://developer.wordpress.org/reference/functions/add_editor_style/

     

    17 novembre 2023 à 11 h 01 min #2463520
    jazzyguy
    Participant
    Initié WordPress
    19 contributions

    Merci de la réponse.

    Si j’ai bien compris, dans mon thème enfant, je crée le fichier <code class= »code-embed-code language-php »><span class= »token string single-quoted-string »>custom-editor-style.css</span> <code class= »code-embed-code language-php »> , contenant mes commandes CSS, et j’ajoute les lignes suivantes dans functions.php , c’est bien cela ?

    <code class="code-embed-code language-php"><span class="token comment">/**
 * Registers an editor stylesheet for the theme.
 */</span>
<span class="token keyword">function</span> <span class="token function-definition function">wpdocs_theme_add_editor_styles</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token function">add_editor_style</span><span class="token punctuation">(</span> <span class="token string single-quoted-string">'custom-editor-style.css'</span> <span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">add_action</span><span class="token punctuation">(</span> <span class="token string single-quoted-string">'admin_init'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'wpdocs_theme_add_editor_styles'</span> <span class="token punctuation">)</span>
    17 novembre 2023 à 11 h 09 min #2463523
    jazzyguy
    Participant
    Initié WordPress
    19 contributions

    Si j’ai bien compris, dans mon thème enfant, je crée le fichier custom-editor-style.css , contenant mes commandes CSS, et j’ajoute les lignes suivantes dans functions.php , c’est bien cela ?

    <code class= »code-embed-code language-php »>

    <code class= »code-embed-code language-php »>/**
    * Registers an editor stylesheet for the theme.
    */
    function wpdocs_theme_add_editor_styles() {
    add_editor_style( ‘custom-editor-style.css’ );
    }
    add_action( ‘admin_init’, ‘wpdocs_theme_add_editor_styles’ )

    <code class= »code-embed-code language-php »> 

    17 novembre 2023 à 13 h 59 min #2463525
    norico
    Participant
    Initié WordPress
    4 contributions

    il faut créer un fichier custom-editor-style.css et ajouter la fonction qui va appeler le fichier css.
    tout est expliqué sur la page https://developer.wordpress.org/reference/functions/add_editor_style/

     

  • Auteur
    Messages
5 sujets de 1 à 5 (sur un total de 5)
  • Vous devez être connecté pour répondre à ce sujet.