Anpassad TinyMCE Editor-formatering i WordPress

Ibland när du skriver ett textblock med WordPress-redigeraren behöver du att det ska se ut på ett visst sätt, vi brukar göra detta genom att lägga till stilar i textstycken, men vi vill inte alltid att våra kunder ska behöva öppna textredigeraren och gör detta manuellt.

I det här exemplet kommer vi att skapa ett litet filter som du kan lägga till i din functions.phpfil för att ge användaren några extra formateringsalternativ, för att lägga till en anpassad "Lead"-styckestil.

Använder anpassad TinyMCE-formatering

Här är ett supersnabbt exempel på hur filtret fungerar. Den visar dig:

• Hur man växlar verktygsfältet så att du kan se menyn Format
• Hur man tillämpar formateringen med hjälp av menyn Format
• Hur man rensar stilarna

TinyMCE-formatering i aktion

Koden

Koden är verkligen enkel, bara koppla in tiny_mce_before_initoch lägg till din anpassade stil till style_formatsarrayen. Se till att inkludera en titel, vilken typ av element du vill använda och viktigast av allt klassen.

function wholesomecode_tinymce_formatting( $settings) {
    $style_formats = array(
        array(
            'title'   => 'Lead Paragraph',
            'block'   => 'p',
            'classes' => 'lead',
            'wrapper' => false,
        ),
    );
    $settings['style_formats'] = json_encode( $style_formats );
    return $settings;
}
add_filter( 'tiny_mce_before_init', 'wholesomecode_tinymce_formatting' );

Stilar

Självklart händer ingenting utan lite styling. Var noga med att lägga till stilarna till både din huvudsakliga WordPress styles.cssså att din Lead visas i användargränssnittet, och se även till att registrera en redigerarstilmall så att koden visas i editorn (du kan använda add_editor_style()för att göra detta).

.lead {
    font-size: 120%;
}